reset password page
This commit is contained in:
parent
4aced1cbe2
commit
0a4e5a2e3c
2 changed files with 69 additions and 28 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(' ') || '');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue