fix(UI): freset password page

frappe/templates/styles/card_style.css

@@ -10,22 +10,57 @@
 	background-color: #fff;
 	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
 }
+
+.for-reset-password {
+	margin: 80px 0;
+} 
+
+.for-reset-password .page-card {
+	border: 0;
+	max-width: 450px;
+	margin: auto;
+	padding: 40px 60px;
+	border-radius: 10px;
+	box-shadow: 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 1px 4px rgba(17, 43, 66, 0.1);
+}
+
 .page-card .page-card-head {
 	padding: 10px 15px;
 	margin: -15px;
 	margin-bottom: 15px;
 	border-bottom: 1px solid #d1d8dd;
 }
+
+.for-reset-password .page-card .page-card-head { 
+	border-bottom: 0;
+}
+
+.page-card-head h4 {
+	font-size: 18px;
+	font-weight: 600;
+}
+
+#reset-password .form-group {
+	margin-bottom: 10px;
+}
 .page-card .page-card-head .indicator {
 	color: #36414C;
 	font-size: 14px;
 }
+
+.sign-up-message {
+	margin-top: 20px;
+	font-size: 13px;
+	color: #687178;
+}
 .page-card .page-card-head .indicator::before {
 	margin: 0 6px 0.5px 0px;
 }
+
 .page-card .btn {
 	margin-top: 30px;
 }
+
 .page-card p {
 	font-size: 14px;
 }

frappe/www/update-password.html

@@ -1,32 +1,39 @@
 {% extends "templates/web.html" %}
 
 {% block title %} {{_("Reset Password")}} {% endblock %}
-
+{% block head_include %}
+{{ include_style('login.bundle.css') }}
+{% endblock %}
 {% block page_content %}
-
-<div class="page-card">
-	<div class='page-card-head'>
-		<span class='indicator blue password-box'>{{ _("Reset Password") if frappe.db.get_default('company') else _("Set Password")}}</span>
-	</div>
-	<form id="reset-password">
-		<div class="form-group" style="display: none;">
-			<input id="old_password" type="password"
-				class="form-control" placeholder="{{ _("Old Password") }}">
-		</div>
-		<div class="form-group">
-			<input id="new_password" type="password"
-				class="form-control" placeholder="{{ _("New Password") }}">
-			<span class="password-strength-indicator indicator"></span>
+<div class="for-reset-password">
+	<div class="page-card">
+		<div class='page-card-head text-center'>
+			<h4 class="reset-password-heading">{{ _("Reset Password") if frappe.db.get_default('company') else _("Set Password")}}</h4>
 		</div>
-		<p class='password-strength-message text-muted small hidden'></p>
-		<button type="submit" id="update"
-			class="btn btn-primary">{{_("Update")}}</button>
-	</form>
+		<form id="reset-password">
+			<div class="form-group" style="display: none;">
+				<input id="old_password" type="password"
+					class="form-control" placeholder="{{ _("Old Password") }}">
+			</div>
+			<div class="form-group">
+				<input id="new_password" type="password"
+					class="form-control" placeholder="{{ _("New Password") }}">
+				<span class="password-strength-indicator indicator"></span>
+			</div>
+			<p class='password-strength-message text-muted small hidden'></p>
+			<button type="submit" id="update" 
+				class="btn btn-primary btn-block btn-update">{{_("Confirm")}}</button>
+		</form>
+		{%- if not disable_signup -%}
+			<div class="text-center sign-up-message">
+				{{ _("Don't have an account?") }}
+				<a href="/login#signup">{{ _("Sign up") }}</a>
+			</div>
+		{%- endif -%}
+	</div>
+	
 </div>
 <style>
-.hero-and-content {
-	background-color: #f5f7fa;
-}
 </style>
 
 <script>
@@ -69,20 +76,19 @@ frappe.ready(function() {
 			args: args,
 			statusCode: {
 				401: function() {
-					$(".page-card-head .indicator").removeClass().addClass("indicator red").text(__("Invalid Password"));
+					$(".page-card-head .reset-password-heading").text(__("Invalid Password"));
 				},
 				410: function({ responseJSON }) {
 					const title = __("Invalid Link");
 					const message = responseJSON.message;
-					$(".page-card-head .indicator").removeClass().addClass("indicator grey").text(title);
+					$(".page-card-head .reset-password-heading").text(title);
 					frappe.msgprint({ title: title, message: message, clear: true });
 				},
 				200: function(r) {
 					$("input").val("");
 					strength_indicator.addClass("hidden");
 					strength_message.addClass("hidden");
-					$(".page-card-head .indicator")
-						.removeClass().addClass("indicator blue")
+					$(".page-card-head .reset-password-heading")
 						.html(__("Status Updated"));
 					if(r.message) {
 						frappe.msgprint({
@@ -132,7 +138,7 @@ frappe.ready(function() {
 			},
 			statusCode: {
 				401: function() {
-					$('.page-card-head .indicator').removeClass().addClass('indicator red')
+					$('.page-card-head .reset-password-heading')
 						.text("{{ _('Invalid Password') }}");
 				},
 				200: function(r) {
@@ -175,7 +181,7 @@ frappe.ready(function() {
 			}
 		}
 
-		strength_indicator.removeClass().addClass('password-strength-indicator indicator ' + color);
+		// strength_indicator.removeClass().addClass('password-strength-indicator indicator ' + color);
 		strength_message.html(message.join(' ') || '').removeClass('hidden');
 		// strength_indicator.attr('title', message.join(' ') || '');
 	}