{% extends "base.jinja" %}

{% block main %}
	<form action="{{ url_for('settings_endpoint.auth') }}" method="POST">
		<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
		<input type="hidden" name="next" value="{{ next }}">

		<h1 id="title" class="settings-title">Settings</h1>
		{% from 'settings/components/settings_menu.jinja' import settings_menu %}
		{{ settings_menu('auth', current_user, ext_settingstabs) }}

		<div class="mt-8 space-y-3">
			{% if method == "none" or current_user.is_admin %}
				<div class="floating-wrapper">
					<select name="method" class="floating-input" onchange="toggleUsernamePassword(this)" data-cy="authentication-selection">
						<option value="none" {% if method=="none" %} selected="selected"{% endif %}>{{ _("None") }}</option>
						<option value="passwordonly" {% if method=="passwordonly" %} selected="selected"{% endif %}>{{ _("Password Protection") }}</option>
						<option value="usernamepassword" {% if method=="usernamepassword" %} selected="selected"{% endif %}>{{ _("Multiple Users") }}</option>
						<option value="rpcpasswordaspin" {% if method=="rpcpasswordaspin" %} selected="selected"{% else %}{% if specter.rpc is none or specter.node.autodetect %}disabled{% endif %}{% endif %}>{{ _("RPC password as Pin") }}</option>
					</select>
					<label class="floating-label" for="method">{{ _("Authentication") }}</label>
				</div>
			{% endif %}

			<div id="hasencryptedservicedata" class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
				<svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
				<span class="sr-only">Info</span>
				<div>
					{{ _("If you set Authentication to \"None\", Specter will unlink the Service integrations ") }}  
					"{{ specter.service_manager.services_sorted | selectattr('encrypt_data') | map(attribute='name') | join('", "') }}"
					{{ _(" as a security precaution.") }}
				</div>
			</div>

			<div id="ratelimit" class="floating-wrapper {% if method == 'none' or not current_user.is_admin %}hidden{% endif %}">
				<input class="floating-input" id="rate_limit" type="number" name="rate_limit" min="0" max="3600" step="1" value="{{ rate_limit }}" required>
				<label class="floating-label">{{ _("Rate Limiting (seconds between login/register attempts)") }}</label>
			</div>

			<div id="passwordonly" class="{% if method != 'passwordonly' %}hidden{% endif %}">
				<div class="floating-wrapper">
					<input class="floating-input peer"id="specter_password_only" type="password" name="specter_password_only" placeholder=" " data-cy="admin-password-input">
					<label class="floating-label"for="specter_password_only">{{ _("Specter Password") }}</label>
				</div>

				<div class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
					<svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
					<span class="sr-only">Info</span>
					<div>
						{{ _("Default password is 'admin'") }}
					</div>
				</div>
			</div>

			<div id="usernamepassword" class="space-y-3 {% if method != 'usernamepassword' %}hidden{% endif %}">
				{% if current_user.is_admin %}

					<div class="floating-wrapper">
						<input class="floating-input peer" placeholder=" " id="registration_link_timeout" type="number" name="registration_link_timeout" min="0" step="1" value="{{ registration_link_timeout }}">
						<label class="floating-label">{{ _("Registration Link Timeout (hours)") }}</label>
					</div>

					<div class="flex p-4 mt-3 mb-4 bg-dark-600 rounded-lg" role="alert">
						<svg class="flex-shrink-0 inline w-6 h-6 mr-3" version="1.1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!--Generated by IJSVG (https://github.com/iconjar/IJSVG)--><path d="M32.0022,55.9844l-1.04907e-06,-2.84217e-14c-13.2548,-5.79387e-07 -24,-10.7452 -24,-24c5.79387e-07,-13.2548 10.7452,-24 24,-24c13.2548,5.79387e-07 24,10.7452 24,24l2.13163e-14,-1.04907e-06c0,13.2548 -10.7452,24 -24,24Zm1.5,-32l3.82016e-08,-2.71086e-09c-1.79133,0.127116 -3.35165,-1.21031 -3.5,-3l6.50646e-08,-7.8524e-07c0.148296,-1.78972 1.70866,-3.12717 3.5,-3l-5.85322e-09,4.15529e-10c1.79134,-0.127171 3.3517,1.21028 3.5,3l-5.57104e-08,6.72365e-07c-0.148295,1.78976 -1.70872,3.12723 -3.5001,3Zm1.4206,6.7635l-2.7853,10.5093l-8.37179e-08,3.15667e-07c-0.270677,1.02062 0.262417,2.08281 1.2425,2.4757l-5.91015e-08,-2.36708e-08c0.379505,0.151996 0.628277,0.519688 0.6282,0.9285v0.323l8.52651e-14,4.05e-07c0,0.551933 -0.447167,0.999503 -0.9991,1h-2.9891l-4.04477e-08,1.96948e-10c-1.65938,0.00807986 -3.01111,-1.33056 -3.01919,-2.98993c-0.00127082,-0.260991 0.0314695,-0.521035 0.0973943,-0.773566l2.7852,-10.5094l2.79671e-08,-1.05468e-07c0.270652,-1.02067 -0.262537,-2.08289 -1.2427,-2.4757l-2.20542e-08,-8.83296e-09c-0.379505,-0.151996 -0.628276,-0.519688 -0.6282,-0.9285v-0.3229l-1.77636e-14,-9.40042e-08c-8.33514e-08,-0.552011 0.447289,-0.999614 0.9993,-1h2.9887l1.06497e-07,-5.28143e-10c1.65943,-0.00822943 3.01133,1.33033 3.01956,2.98976c0.00129458,0.261047 -0.0314356,0.52115 -0.0973639,0.773738Z" fill="currentColor" fill-rule="evenodd"></path></svg>
						<span class="sr-only">Info</span>
						<div>
							{{ _("Default username is 'admin', password 'admin'.") }}
						</div>
					</div>
				{% endif %}

				<div class="flex space-x-3">
					<div class="floating-wrapper grow">
						<input class="floating-input peer" id="specter_username" type="text" name="specter_username" type="text" value="{{ current_user.username }}" placeholder=" ">
						<label class="floating-label" for="specter_username">{{ _("Specter Username") }}</label>
					</div>

					<div class="floating-wrapper grow">
						<input class="floating-input peer" id="specter_password" type="password" name="specter_password" type="text" placeholder=" ">
						<label class="floating-label" for="specter_password">{{ _("Specter Password") }}</label>
					</div>
				</div>

				{% if users %}
					<h2>Users:</h2>
					{% for user in users %}
						<form action="?" method="POST">
							<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
							<div class="row break-row-mobile" data-style="margin: 15px; border: 1px solid var(--cmap-border); border-radius: 4px; padding: 10px;">
								<span data-style="line-height: 35px; vertical-align: middle;width: 100%;"><b>{{ _("Username") }}:</b> {{ user.username }}</span>
								<br class="mobile-only">
								<button type="submit" name="action" value="deleteuser" data-style="float: right; max-width: 250px;" class="btn danger">{{ _("Delete User") }}</button>
								<input type="hidden" name="deleteuser" value="{{ user.id }}">
								<br class="mobile-only">
								<br class="mobile-only">
							</div>
						</form>
					{% endfor %}
				{% endif %}
			</div>


			{% if method == "usernamepassword" and current_user.is_admin %}
			<div id="generateregistrationlink" class="row{% if method != 'usernamepassword' %} hidden{% endif %}">
				<button type="submit" class="btn" name="action" value="adduser">{{ _("Generate New Registration Link") }}</button>
			</div>
			{% endif %}
		</div>

		<div class="mt-8">
			<button type="submit" id="submit-btn" class="button bg-accent text-white" name="action" value="save" data-cy="save-auth-settings-btn">{{ _("Save") }}</button>
		</div>
	</form>
{% endblock %}

{% block scripts %}
	<script>
		function toggleUsernamePassword(select) {
			{% if current_user.is_admin %}
				var ratelimitDiv = document.getElementById("ratelimit");
				var hasEncryptedServiceData = document.getElementById("hasencryptedservicedata");
				if (select.options[select.selectedIndex].value !== 'none'){
					ratelimitDiv.style.display = 'block';
					hasEncryptedServiceData.style.display = 'none';
				} else {
					ratelimitDiv.style.display = 'none';
					{% if method != "none" and current_user.is_admin and has_service_encrypted_storage %}
						hasEncryptedServiceData.style.display = 'block';
					{% endif %}
				}
			{% endif %}
			var usernamepasswordDiv = document.getElementById("usernamepassword");
			var specterUsername = document.getElementById("specter_username");
			var specterPassword = document.getElementById("specter_password");
			var generateregistrationlinkDiv = document.getElementById("generateregistrationlink");
			if (select.options[select.selectedIndex].value === 'usernamepassword'){
				usernamepasswordDiv.style.display = 'block';
				if (generateregistrationlinkDiv !== null) {
					generateregistrationlinkDiv.style.display = 'flex';
				}
			} else {
				usernamepasswordDiv.style.display = 'none';
				specterUsername.value = '{{ current_user.username }}';
				specterPassword.value = '';
				if (generateregistrationlinkDiv !== null) {
					generateregistrationlinkDiv.style.display = 'none';
				}
			}

			// Password Only mode
			var passwordOnlyDiv = document.getElementById("passwordonly");	
            var specterPasswordOnly = document.getElementById("specter_password_only");
            if (select.options[select.selectedIndex].value === 'passwordonly'){
                passwordOnlyDiv.style.display = 'block';
            } else {
                passwordOnlyDiv.style.display = 'none';
                specterPasswordOnly.value = '';
            }
		}
	</script>
{% endblock %}
