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

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

{% block navbar %}{% endblock %}
{% block footer %}{% endblock %}

{% block head_include %}
{{ include_style('login.bundle.css') }}
{% endblock %}

{% block page_content %}
<div>
	<section class="for-reset-password">
		<div class="login-content page-card">
			<div class="page-card-head">
				<img class="app-logo" src="{{ logo }}">
				<div class="page-card-head-text">
					<h4>{{ _("Set Password") }}</h4>
					<p class="page-card-subtitle">{{ _("Use strong passwords.") }}</p>
				</div>
			</div>
			<form id="reset-password" novalidate>
				<div class="page-card-body">
					<div class="form-group">
						<label class="form-label" for="old_password">{{ _("Old Password") }}</label>
						<div class="password-field">
							<input id="old_password" type="password" class="form-control"
								placeholder="•••••" autocomplete="current-password">
							<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<use class="es-lock" href="#es-line-lock"></use>
							</svg>
							<svg toggle="#old_password" class="toggle-password" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
								<use href="#es-line-preview"></use>
							</svg>
						</div>
					</div>
					<div class="form-group">
						<label class="form-label" for="new_password">{{ _("New Password") }}</label>
						<div class="password-field">
							<input type="password" id="new_password" class="form-control"
								placeholder="----" autocomplete="new-password">
							<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<use class="es-lock" href="#es-line-lock"></use>
							</svg>
							<svg toggle="#new_password" class="toggle-password" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
								<use href="#es-line-preview"></use>
							</svg>
						</div>
						<div class="password-strength-group">
							<div class="password-strength-container hidden">
								<div class="password-strength-label"></div>
								<div class="password-strength-bar-track">
									<div class="password-strength-bar-fill"></div>
								</div>
							</div>
							<p class="password-hint">
								<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<use href="#es-line-alert-circle"></use>
								</svg>
								{{ _("Use minimum of 8 characters(case sensitive) with at least one number or special character.") }}
							</p>
							<p class="password-strength-message hidden"></p>
						</div>
					</div>
					<div class="form-group">
						<label class="form-label" for="confirm_password">{{ _("Confirm New Password") }}</label>
						<div class="password-field">
							<input id="confirm_password" type="password" class="form-control"
								placeholder="----" autocomplete="new-password">
							<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
								xmlns="http://www.w3.org/2000/svg">
								<use class="es-lock" href="#es-line-lock"></use>
							</svg>
							<svg toggle="#confirm_password" class="toggle-password" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
								<use href="#es-line-preview"></use>
							</svg>
						</div>
						<p class="password-mismatch-message hidden"></p>
					</div>
				</div>
				<div class="page-card-actions">
					<button type="submit" id="update" disabled
						class="btn btn-sm btn-block btn-signup">
						{{ _("Confirm") }}
					</button>
				</div>
			</form>
			<div class="text-center sign-up-message">
				<a href="/login">{{ _("Back to sign in") }}</a>
			</div>
		</div>
	</section>
</div>
{% endblock %}

{% block script %}
<script>

frappe.ready(function() {
	// URL args
	const key = frappe.utils.get_url_arg('key');
	const password_expired = frappe.utils.get_url_arg('password_expired');
	// inputs and button elements
	const old_password = $('#old_password');
	const new_password = $('#new_password');
	const confirm_password = $('#confirm_password');
	const update_button = $('#update');
	const password_strength_message = $('.password-strength-message');
	const password_mismatch_message = $('.password-mismatch-message');
	// Info text
	const password_not_same_as_old_password = "{{ _('New password cannot be same as old password') }}";
	const password_mismatch = "{{ _('Passwords do not match') }}";

	if(key) {
		old_password.closest('.form-group').toggle();
	}

	if(password_expired) {
		$('.page-card-subtitle').text("{{ _('Your password has expired. Please set a new password.') }}");
	}

	$(".toggle-password").click(function() {
		var input = $($(this).attr("toggle"));
		var isPassword = input.attr("type") == "password";
		input.attr("type", isPassword ? "text" : "password");
		$(this).find("use").attr("href", isPassword ? "#es-line-hide" : "#es-line-preview");
	});

	$("#reset-password").on("submit", function() {
		var args = {
			key: key || "",
			old_password: old_password.val(),
			new_password: new_password.val(),
			confirm_password: confirm_password.val(),
			logout_all_sessions: 1
		}
		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.old_password === args.new_password) {
			frappe.msgprint({
				title: "{{ _('Invalid Password') }}",
				message: password_not_same_as_old_password,
			});
			password_strength_message.addClass('hidden');
			return;
		}

		if (args.new_password !== args.confirm_password) {
			password_mismatch_message.text(password_mismatch)
				.removeClass('hidden text-muted').addClass('text-danger');
			password_strength_message.addClass('hidden');
			return;
		}

		frappe.call({
			type: "POST",
			method: "frappe.core.doctype.user.user.update_password",
			btn: update_button,
			args: args,
			statusCode: {
				401: function() {
					frappe.msgprint({
						title: "{{ _('Invalid Password') }}",
						message: "{{ _('Your old password is incorrect.') }}",
						// clear any server message
						clear: true
					});
				},
				410: function({ responseJSON }) {
					const title = "{{ _('Invalid Link') }}";
					const message = responseJSON.message;
					frappe.msgprint({ title: title, message: message, clear: true });
				},
				200: function(r) {
					$("input").val("");
					$('.password-strength-container').addClass('hidden');
					strength_message.addClass("hidden");
					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_message = password_strength_message;

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

	$("#old_password, #new_password, #confirm_password").on("keyup paste", frappe.utils.debounce(function () {
		let common_conditions = new_password.val() && confirm_password.val() && new_password.val() === confirm_password.val()

		if (new_password.val() && old_password.val() === new_password.val()) {
			password_mismatch_message.text(password_not_same_as_old_password)
				.removeClass("hidden text-muted").addClass("text-danger");

			password_strength_message.addClass("hidden");
		}
		if ((new_password.val() || old_password.val) && old_password.val() !== new_password.val()) {
			password_mismatch_message.addClass("hidden");
			password_strength_message.removeClass("hidden");
			password_mismatch_message.text('')
		}

		if (new_password.val() === confirm_password.val() && old_password.val() !== new_password.val() ) {
			password_mismatch_message.addClass("hidden");
			password_strength_message.removeClass("hidden");
		}
		if (confirm_password.val() &&  new_password.val() !== confirm_password.val()) {
			password_mismatch_message.text(password_mismatch)
				.removeClass("hidden text-muted").addClass("text-danger");
			password_strength_message.addClass("hidden");
		}
		if ((key || (!key && old_password.val() )) && common_conditions ) {
			update_button.prop("disabled", false).css("cursor", "pointer");
		}
		else {
			update_button.prop("disabled", true).css("cursor", "not-allowed");
		}
		},500)
	)

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

		var args = {
			key: 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,
			statusCode: {
				401: function() {},
				200: function(r) {
					if (r.message && r.message.score !== undefined && r.message.score !== null) {
						var score = r.message.score;
						var feedback = r.message.feedback || {};
						var colors = ["red", "red", "orange", "blue", "green"];
						feedback.score = score;
						set_strength_indicator(colors[score], feedback);
					}
				}
			}
		});
	};

	window.set_strength_indicator = function(color, feedback) {
		var strength_map = {
			red:    { label: "{{ _('Poor!') }}",   percentage: 25  },
			orange: { label: "{{ _('Average') }}", percentage: 50  },
			blue:   { label: "{{ _('Good') }}",    percentage: 75  },
			green:  { label: "{{ _('Great!') }}",  percentage: 100 },
		};

		var container = $('.password-strength-container');

		if (!strength_map[color]) {
			container.addClass('hidden');
			strength_message.addClass('hidden').html('');
			return;
		}

		var config = strength_map[color];
		container.find('.password-strength-label')
			.text(config.label)
			.attr('class', 'password-strength-label strength-' + color);
		container.find('.password-strength-bar-fill')
			.css('width', config.percentage + '%')
			.attr('class', 'password-strength-bar-fill strength-' + color);
		container.removeClass('hidden');

		strength_message.addClass('hidden').html('');
		password_mismatch_message.addClass('hidden');
	}

	window.clear_timeout = function() {
		if (window.timout_password_strength) {
			clearTimeout(window.timout_password_strength);
			window.timout_password_strength = null;
		}
	};
});
</script>
{% endblock %}