themed reset.tpl and reset_code.tpl to BS3, closes #239

public/src/forum/reset_code.js

@@ -10,9 +10,14 @@
 		if (password.value.length < 6) {
 			$('#error').hide();
 			noticeEl.querySelector('strong').innerHTML = 'Invalid Password';
-			noticeEl.querySelector('p').innerHTML = 'The password entered it too short, please pick a different password!';
+			noticeEl.querySelector('p').innerHTML = 'The password entered is too short, please pick a different password.';
 			noticeEl.style.display = 'block';
-		} else if (password.value === repeat.value) {
+		} else if (password.value !== repeat.value) {
+			$('#error').hide();
+			noticeEl.querySelector('strong').innerHTML = 'Invalid Password';
+			noticeEl.querySelector('p').innerHTML = 'The two passwords you\'ve entered do not match.';
+			noticeEl.style.display = 'block';
+		} else {
 			socket.emit('user:reset.commit', { code: reset_code, password: password.value });
 		}
 	}, false);

public/templates/reset.tpl

@@ -1,17 +1,30 @@
-<h1>Reset Password</h1>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">Reset Password</span>
+	</li>
+</ol>
+
+<div class="alert alert-info">
+			Please enter your <strong>email address</strong> and we will send you an email with instructions on how to reset your account.
+		</div>
 <div class="well">
 	<div class="alert alert-success" id="success" style="display:none">
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
 		<strong>Password Reset Sent</strong>
-		<p></p>
 	</div>
-	<div class="alert" id="error" style="display:none">
+	<div class="alert alert-danger" id="error" style="display:none">
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
-		<strong>Invalid Email!</strong>
+		<strong>Invalid Email / Email does not exist!</strong>
-		<p></p>
 	</div>
-	<label for="email">Email Address</label><input type="text" placeholder="Enter Email Address" id="email" /><br />
+	<form onsubmit="return false;">
-	<button class="btn btn-primary" id="reset" type="submit">Reset Password</button>
+		<input type="text" class="form-control input-block input-lg" placeholder="Enter Email Address" id="email" />
+
+		<br />
+		<button class="btn btn-primary btn-block btn-lg" id="reset" type="submit">Reset Password</button>
+	</form>
 </div>
 
 <script type="text/javascript" src="{relative_path}/src/forum/reset.js"></script>

public/templates/reset_code.tpl

@@ -1,23 +1,37 @@
-<h1>Reset Password</h1>
+<ol class="breadcrumb">
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/" itemprop="url"><span itemprop="title">Home</span></a>
+	</li>
+	<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<a href="/reset" itemprop="url"><span itemprop="title">Reset Password</span></a>
+	</li>
+	<li class="active" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
+		<span itemprop="title">Update Password</span>
+	</li>
+</ol>
+
+
 <div class="well">
 	<div class="alert alert-success" id="success" style="display:none">
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
 		<strong>Password Changed</strong>
 		<p>Password successfully reset, please <a href="/login">log in again</a>.</p>
 	</div>
-	<div class="alert" id="notice" style="display:none">
+	<div class="alert alert-warning" id="notice" style="display:none">
 		<strong></strong>
 		<p></p>
 	</div>
-	<div class="alert alert-error" id="error" style="display:none">
+	<div class="alert alert-danger" id="error" style="display:none">
 		<strong>Incorrect Reset Code</strong>
 		<p>The reset code received was incorrect. Please try again, or <a href="/reset">request a new reset code</a></p>
 	</div>
-	<div id="reset-form">
+	<form onsubmit="return false;" id="reset-form">
-		<label for="password">New Password</label><input type="password" placeholder="A new password" id="password" /><br />
+		<label for="password">New Password</label>
-		<label for="repeat">... and again</label><input type="password" placeholder="The same password" id="repeat" /><br />
+		<input class="form-control input-lg" type="password" placeholder="A new password" id="password" /><br />
-		<button class="btn btn-primary" id="reset" type="submit" disabled>Reset Password</button>
+		<label for="repeat">Confirm Password</label>
-	</div>
+		<input class="form-control input-lg" type="password" placeholder="The same password" id="repeat" /><br />
+		<button class="btn btn-primary btn-lg btn-block" id="reset" type="submit" disabled>Reset Password</button>
+	</form>
 </div>
 <input type="hidden" template-variable="reset_code" value="{reset_code}" />