reset password page

This commit is contained in:
Summayya 2021-09-12 23:17:13 +05:30
parent 4aced1cbe2
commit 0a4e5a2e3c
2 changed files with 69 additions and 28 deletions

View file

@ -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;
}

View file

@ -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 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>
<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>
<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">{{_("Update")}}</button>
</form>
</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(' ') || '');
}