seitime-frappe/frappe/www/update-password.html

{% extends "templates/web.html" %}

{% block title %} {{_("Reset Password")}} {% endblock %}
{% block head_include %}
{% endblock %}
{% block page_content %}
<section class="for-reset-password d-block">
	<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">
				<input id="old_password" type="password"
					class="form-control mb-4" placeholder="{{ _('Old Password') }}" autocomplete="current-password">
			</div>
			<div class="form-group">
				<input id="new_password" type="password"
					class="form-control mb-4" placeholder="{{ _('New Password') }}" autocomplete="new-password">
				<span class="password-strength-indicator indicator"></span>
			</div>
			<div class="form-group">
				<input id="confirm_password" type="password"
					class="form-control" placeholder="{{ _('Confirm Password') }}" autocomplete="new-password">

				<p class="password-mismatch-message text-muted small hidden mt-2"></p>
			</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>
</section>
<style>
</style>

<script>

frappe.ready(function() {
	if(frappe.utils.get_url_arg("key")) {
		$("#old_password").parent().toggle();
	}

	if(frappe.utils.get_url_arg("password_expired")) {
		$(".password-box").html("{{ _('The password of your account has expired.') }}");
	}

	$("#reset-password").on("submit", function() {
		return false;
	});

	$("#new_password").on("keypress", function(e) {
		if(e.which===13) $("#update").click();
	})

	$("#update").click(function() {
		var args = {
			key: frappe.utils.get_url_arg("key") || "",
			old_password: $("#old_password").val(),
			new_password: $("#new_password").val(),
			logout_all_sessions: 1
		}
		const confirm_password = $('#confirm_password').val()
		if (!args.old_password && !args.key) {
			frappe.msgprint({
				title: "{{ _('Missing Value') }}",
				message: "{{ _('Please enter your old password.') }}",
				clear: true
			});
		}
		if (!args.new_password) {
			frappe.msgprint({
				title: "{{ _('Missing Value') }}",
				message: "{{ _('Please enter your new password.') }}",
				clear: true
			});
		}
		if (args.new_password !== confirm_password) {
			$('.password-mismatch-message').text("{{ _('Passwords do not match') }}")
				.removeClass('hidden text-muted').addClass('text-danger');
			return false;
		}

		frappe.call({
			type: "POST",
			method: "frappe.core.doctype.user.user.update_password",
			btn: $("#update"),
			args: args,
			statusCode: {
				401: function() {
					$(".page-card-head .reset-password-heading").text("{{ _('Invalid Password') }}");
				},
				410: function({ responseJSON }) {
					const title = "{{ _('Invalid Link') }}";
					const message = responseJSON.message;
					$(".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 .reset-password-heading")
						.html("{{ _('Status Updated') }}");
					if(r.message) {
						frappe.msgprint({
							title: "{{ _('Password set') }}",
							message: "{{ _('Your new password has been set successfully.') }}",
							// password is updated successfully
							// clear any server message
							clear: true
						});
						setTimeout(function() {
							window.location.href = r.message;
						}, 2000);
					}
				}
			}
		});

		return false;
	});

	window.strength_indicator = $('.password-strength-indicator');
	window.strength_message = $('.password-strength-message');

	$('#new_password').on('keyup', function() {
		window.clear_timeout();
		window.timout_password_strength = setTimeout(window.test_password_strength, 200);
	});

	window.test_password_strength = function() {
		window.timout_password_strength = null;

		var args = {
			key: frappe.utils.get_url_arg("key") || "",
			old_password: $("#old_password").val(),
			new_password: $("#new_password").val()
		}

		if (!args.new_password) {
			set_strength_indicator('grey', {'warning': "{{ _('Please enter the password') }}" });
			return;
		}

		return frappe.call({
			method: 'frappe.core.doctype.user.user.test_password_strength',
			args: args,
			callback: function(r) {
				console.log(r.message);
			},
			statusCode: {
				401: function() {
					$('.page-card-head .reset-password-heading')
						.text("{{ _('Invalid Password') }}");
				},
				200: function(r) {
					if (r.message && r.message.entropy) {
						var score = r.message.score,
							feedback = r.message.feedback;

						feedback.crack_time_display = r.message.crack_time_display;
						feedback.score = score;

						if(feedback.password_policy_validation_passed){
							set_strength_indicator('green', feedback);
						}else{
							set_strength_indicator('red', feedback);
						}
					}
				}
			}

		});
	};

	window.set_strength_indicator = function(color, feedback) {
		var message = [];
		feedback.help_msg = "";
		if(!feedback.password_policy_validation_passed){
			feedback.help_msg = "<br>" + "{{ _('Hint: Include symbols, numbers and capital letters in the password') }}";
		}
		if (feedback) {
			if(!feedback.password_policy_validation_passed){
				if (feedback.suggestions && feedback.suggestions.length) {
					message = message.concat(feedback.suggestions);
				} else if (feedback.warning) {
					message.push(feedback.warning);
				}
				message.push(feedback.help_msg);

			} else {
				message.push("{{ _('Success! You are good to go 👍') }}");
			}
		}
		strength_message.html(message.join(' ') || '').removeClass('hidden');
	}

	window.clear_timeout = function() {
		if (window.timout_password_strength) {
			clearTimeout(window.timout_password_strength);
			window.timout_password_strength = null;
		}
	};
});

</script>

{% endblock %}

{% block style %}
<style>
	body {
		background-color: var(--bg-color);
	}

	.password-strength-indicator {
		float: right;
		padding: 15px;
		margin-top: -38px;
		margin-right: -7px;
	}

	.password-strength-message {
		margin-top: -10px;
	}
	{% include "templates/styles/card_style.css" %}
</style>
{% endblock %}