{% extends "base.jinja2" %}

{% block title %}Forgot Password - DarkflameServer{% endblock %}

{% block content_noauth %}
<div class="d-flex align-items-center justify-content-center min-vh-100">
	<div class="card shadow" style="width: 100%; max-width: 440px;">
		<div class="card-body p-4">
			<h3 class="card-title text-center mb-3">Forgot your password?</h3>
			{% if email_enabled and recovery_enabled %}
			<ul class="nav nav-pills nav-fill small mb-3" role="tablist">
				<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#byEmail" type="button" role="tab">By email</button></li>
				<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#byRecovery" type="button" role="tab">With recovery codes</button></li>
			</ul>
			{% endif %}
			<div id="alert" class="alert d-none" role="alert"></div>
			<div class="tab-content">
				{% if email_enabled %}
				<div class="tab-pane show active" id="byEmail" role="tabpanel">
					<p class="text-body-secondary small">Enter your username or the email address confirmed on your account and we'll email you a reset link.</p>
					<form id="forgotForm">
						<div class="mb-3">
							<label for="identifier" class="form-label">Username or email</label>
							<input type="text" class="form-control" id="identifier" required autofocus autocomplete="username">
						</div>
						<button type="submit" class="btn btn-primary w-100" id="submitBtn">Send reset link</button>
					</form>
				</div>
				{% endif %}
				{% if recovery_enabled %}
				<div class="tab-pane{% if not email_enabled %} show active{% endif %}" id="byRecovery" role="tabpanel">
					<p class="text-body-secondary small">If you use two-factor login, you can choose a new password with a code from your authenticator app
						and one of the recovery codes you saved when you turned it on. The recovery code is used up, and you're signed out of the dashboard everywhere.
						Your game password changes too.</p>
					<form id="recoverForm">
						<div class="mb-2">
							<label for="recoverUsername" class="form-label">Username</label>
							<input type="text" class="form-control" id="recoverUsername" required autocomplete="username"{% if not email_enabled %} autofocus{% endif %}>
						</div>
						<div class="mb-2">
							<label for="recoverCode" class="form-label">Code from your authenticator app</label>
							<input type="text" class="form-control" id="recoverCode" required inputmode="numeric" autocomplete="one-time-code" maxlength="8">
						</div>
						<div class="mb-2">
							<label for="recoveryCode" class="form-label">A recovery code</label>
							<input type="text" class="form-control" id="recoveryCode" required autocomplete="off" maxlength="20" spellcheck="false">
						</div>
						<div class="mb-2">
							<label for="recoverPassword" class="form-label">New password</label>
							<input type="password" class="form-control" id="recoverPassword" required minlength="6" maxlength="40" autocomplete="new-password">
						</div>
						<div class="mb-3">
							<label for="recoverConfirm" class="form-label">Confirm new password</label>
							<input type="password" class="form-control" id="recoverConfirm" required minlength="6" maxlength="40" autocomplete="new-password">
						</div>
						<button type="submit" class="btn btn-primary w-100" id="recoverBtn">Change password</button>
					</form>
					<p class="text-body-secondary small mt-2 mb-0">Lost your phone as well? Ask a server administrator to reset your two-factor login.</p>
				</div>
				{% endif %}
			</div>
			<p class="text-center small mt-3 mb-0"><a href="/login">Back to sign in</a></p>
		</div>
	</div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
	var alertEl = document.getElementById('alert');
	function show(message, ok) { alertEl.textContent = message; alertEl.className = 'alert alert-' + (ok ? 'success' : 'danger'); }

	var forgot = document.getElementById('forgotForm');
	if (forgot) forgot.addEventListener('submit', function (e) {
		e.preventDefault();
		var btn = document.getElementById('submitBtn');
		btn.disabled = true;
		api.post('/api/auth/forgot_password', { identifier: document.getElementById('identifier').value.trim() }).then(function (d) {
			show(d.success ? d.message : (d.error || 'Something went wrong'), d.success);
			if (!d.success) btn.disabled = false;
		}).catch(function (err) { show('Network error: ' + err.message, false); btn.disabled = false; });
	});

	var recover = document.getElementById('recoverForm');
	if (recover) recover.addEventListener('submit', function (e) {
		e.preventDefault();
		var password = document.getElementById('recoverPassword').value;
		if (password !== document.getElementById('recoverConfirm').value) { show('Passwords do not match', false); return; }
		var btn = document.getElementById('recoverBtn');
		btn.disabled = true;
		api.post('/api/auth/recover_password', {
			username: document.getElementById('recoverUsername').value.trim(),
			code: document.getElementById('recoverCode').value.trim(),
			recovery_code: document.getElementById('recoveryCode').value.trim(),
			password: password
		}).then(function (d) {
			if (d.success) {
				show(d.message, true);
				recover.reset();
				return;
			}
			show(d.error || 'Reset failed', false);
			btn.disabled = false;
		}).catch(function (err) { show('Network error: ' + err.message, false); btn.disabled = false; });
	});
})();
</script>
{% endblock %}