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

<p class="page_title">Set your IMPS password</p>
<p>IMPS has a single shared password (there are no separate user
accounts) -- anyone with this password can access and edit your
inventory.</p>

{% if has_saved_password %}
<p>This is fine to leave as-is on a home network. If you'd like to
change it, edit the password below -- <b>if you submit it unchanged,
it stays exactly the same.</b>
{% if current_password == "imps" %}
This is still the default shipped password -- worth changing if IMPS
is reachable from outside your home network, though not necessary
otherwise.
{% endif %}</p>
{% endif %}

{% if error %}
<p style="color:#a00;">{{ error }}</p>
{% endif %}

<form action="{{ url_for('setup.setup_password') }}" method="POST" name="setup_password" onsubmit="return validateForm(event);">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<input type="hidden" id="original_password" value="{{ current_password }}">
	<p>
		<label>{% if has_saved_password %}Password{% else %}Password (at least 4 characters){% endif %}<br>
		<input type="password" id="password" name="password" value="{{ current_password }}" {% if not has_saved_password %}required{% endif %}>
		<button type="button" id="toggle_password" class="imps icon-left show_hide" onclick="togglePasswordVisibility()">Show</button></label>
	</p>
	<button type="submit" class="imps">Finish setup</button>
</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["setup_password"]["password"].value;
	let original_password = document.getElementById("original_password").value;

	// Unchanged from the pre-filled value -- let it through as-is;
	// the server treats this the same as "keep the current password".
	if (new_password === original_password && original_password !== "") {
		return true;
	}

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