{% extends "base.html" %}
{% block content %}
{% include 'includes/warning.html' %}

<!-- Page content -->

{% set sub_title = "Change password" %}
{% set active_tab = 'BoxItem' %}
{% set tab_label = "Settings" %}
{% set back_url = "/control_panel" %}
{% include "includes/cp_tab_subheader.html" %}
<p>IMPS has a single shared password (there are no separate user
accounts) -- anyone with this password can access and edit your
inventory.</p>

<form action="/cp_passwordedited" method="POST" name="edit_password" onsubmit="return validateForm(event);">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<input type="hidden" id="original_password" value="{{ current_password }}">
	<div>
		<p>Password:</p>
		<input id="password" type="password" name="password" value="{{ current_password }}">
		<button type="button" id="toggle_password" class="imps icon-left show_hide" onclick="togglePasswordVisibility()">Show</button>
	</div>
	<div class="btn-pair" style="margin-top:10px;">
		<span>
			<button type="submit" class="imps icon-left update">
				Change
			</button>
		</span>
		<a href="/control_panel">
			<button type="button" class="imps icon-left cancel">Cancel</button>
		</a>
	</div>
</form>

<script>
function togglePasswordVisibility() {
	const passwordInput = document.getElementById("password");
	const toggleButton = document.getElementById("toggle_password");
	if (passwordInput.type === "password") {
		passwordInput.type = "text";
		toggleButton.textContent = "Hide";
	} else {
		passwordInput.type = "password";
		toggleButton.textContent = "Show";
	}
}

function validateForm() {
	let new_password = document.forms["edit_password"]["password"].value;
	let original_password = document.getElementById("original_password").value;

	// Submitted without actually changing anything -- silently do
	// nothing, same as leaving the password field blank on the
	// install/setup password screen.
	if (new_password === original_password) {
		return false;
	}

	if (new_password.length < 4) {
		showValidationError("Password must be at least<br>4 characters.");
		return false;
	}
}
</script>
{% endblock %}