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

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

{% block title %} {{_("Reset Password")}} {% 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>
		<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>

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
		}

		if(!args.old_password && !args.key) {
			frappe.msgprint(__("Old Password Required."));
		}
		if(!args.new_password) {
			frappe.msgprint(__("New Password Required."));
		}
		frappe.call({
			type: "POST",
			method: "frappe.core.doctype.user.user.update_password",
			btn: $("#update"),
			args: args,
			statusCode: {
				401: function() {
					$(".page-card-head .indicator").removeClass().addClass("indicator red").text(__("Invalid Password"));
				},
				410: function({ responseJSON }) {
					const title = __("Invalid Link");
					const message = responseJSON.message;
					$(".page-card-head .indicator").removeClass().addClass("indicator grey").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")
						.html(__("Status Updated"));
					if(r.message) {
						frappe.msgprint({
							message: __("Password Updated"),
							// 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 .indicator').removeClass().addClass('indicator red')
						.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_indicator.removeClass().addClass('password-strength-indicator indicator ' + color);
		strength_message.html(message.join(' ') || '').removeClass('hidden');
		// strength_indicator.attr('title', message.join(' ') || '');
	}

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

</script>

{% endblock %}

{% block style %}
<style>
	.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 %}