Merge pull request #322 from pichalite/edit-password

modify user -> edit password screen

less/account.less

@@ -236,6 +236,42 @@
 			}
 		}
 	}
+	
+	.show-success {
+		.form-control {
+			border-color: #5cb85c;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.form-feedback {
+			color: #5cb85c;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
+	
+	.show-danger {
+		.form-control {
+			border-color: #d9534f;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.form-feedback {
+			color: #d9534f;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
 }
 
 

templates/account/edit/password.tpl

@@ -1,11 +1,11 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<form class="form-horizontal edit-form">
+	<form class="edit-form">
 		<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
 		<!-- IF isSelf -->
-		<div class="control-group">
+		<div class="form-group">
 			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
 			<div class="controls">
 				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
@@ -13,26 +13,18 @@
 		</div>
 		<!-- ENDIF isSelf -->
 
-		<div class="control-group">
+		<div class="form-group">
 			<label class="control-label" for="inputNewPassword">[[user:password]]</label>
-			<div class="input-group">
+			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-				<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+			<span class="form-feedback" id="password-notify"></span>
-				<span class="input-group-addon">
-					<span id="password-notify"><span class="success hide"><i class="fa fa-check"></i></span><span class="error hide"></span><span class="default"><i class="fa fa-circle-o"></i></span></span>
-				</span>
-			</div>
 		</div>
 
-		<div class="control-group">
+		<div class="form-group">
 			<label class="control-label" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-			<div class="input-group">
+			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-				<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+			<span class="form-feedback" id="password-confirm-notify"></span>
-				<span class="input-group-addon">
-					<span id="password-confirm-notify"><span class="success hide"><i class="fa fa-check"></i></span><span class="error hide"></span><span class="default"><i class="fa fa-circle-o"></i></span></span>
-				</span>
-			</div>
 		</div>
-		<br/>
+		
 		<div class="form-actions">
 			<a id="changePasswordBtn" href="#" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</a>
 		</div>