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

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

{% block title %} {{_("Reset Password")}} {% endblock %}

{% block header %}<h1>{{_("Reset Password")}}</h1>{% endblock %}
{% block page_content %}

<div class="row" style="margin-top: 40px; margin-bottom: 20px">
	<div class="col-sm-6">
        <form id="reset-password">
			<div class="form-group">
				<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>
			<div class="form-group">
				<button type="submit" id="update"
					class="btn btn-primary">{{_("Update")}}</button>
			</div>
        </form>
	</div>
</div>

<script>

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

	$("#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: get_url_arg("key") || "",
			old_password: $("#old_password").val(),
			new_password: $("#new_password").val()
		}

		if(!args.old_password && !args.key) {
			frappe.msgprint("Old Password Required.");
			return;
		}
		if(!args.new_password) {
			frappe.msgprint("New Password Required.")
			return;
		}

		frappe.call({
			type: "POST",
			method: "frappe.core.doctype.user.user.update_password",
			btn: $("#update"),
			args: args,
			callback: function(r) {
				$("input").val("");
				if(r.message) {
					frappe.msgprint(__("Password Updated"));
                    setTimeout(function() {
						window.location.href = r.message;
                    }, 2000);
				}
                if(r.exc) {
                    frappe.msgprint(r.exc);
                }
			}
		});

        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: 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({
			type: 'GET',
			method: 'frappe.core.doctype.user.user.test_password_strength',
			args: args,
			callback: 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 (score < 2) {
						set_strength_indicator('red', feedback);
					} else if (score < 4) {
						set_strength_indicator('yellow', feedback);
					} else {
						set_strength_indicator('green', feedback);
					}
				}
				// console.log(r.message);
			}
		});
	};

	window.set_strength_indicator = function(color, feedback) {
		var message = [];
		if (feedback) {
			if (feedback.suggestions && feedback.suggestions.length) {
				message = message.concat(feedback.suggestions);
			} else if (feedback.warning) {
				message.push(feedback.warning);
			}

			if (!message.length && feedback.crack_time_display) {
				message.push(__('This password will take {0} to crack', [feedback.crack_time_display]));
				if (feedback.score > 3) {
					message.push('👍');
				}
			}
		}

		strength_indicator.removeClass().addClass('password-strength-indicator indicator ' + color);
		strength_message.text(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;
	}
</style>
{% endblock %}