05/02/2026 updated code for security 3
This commit is contained in:
+162
-73
@@ -10,23 +10,25 @@ const Auth = (() => {
|
||||
|
||||
function csrfToken() {
|
||||
const meta = document.querySelector('meta[name="csrf-token"]');
|
||||
return meta ? meta.content : '';
|
||||
return meta ? meta.content : "";
|
||||
}
|
||||
|
||||
function showError(formEl, message) {
|
||||
let el = formEl.querySelector('.form-error');
|
||||
let el = formEl.querySelector(".form-error");
|
||||
if (!el) {
|
||||
el = document.createElement('p');
|
||||
el.className = 'form-error';
|
||||
el = document.createElement("p");
|
||||
el.className = "form-error";
|
||||
formEl.prepend(el);
|
||||
}
|
||||
el.textContent = message;
|
||||
el.classList.remove('hidden');
|
||||
el.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function setLoading(btn, loading) {
|
||||
btn.disabled = loading;
|
||||
btn.textContent = loading ? btn.dataset.loadingText || 'Please wait…' : btn.dataset.originalText;
|
||||
btn.textContent = loading
|
||||
? btn.dataset.loadingText || "Please wait…"
|
||||
: btn.dataset.originalText;
|
||||
}
|
||||
|
||||
// ── Register ─────────────────────────────────────────────────────────────
|
||||
@@ -41,24 +43,36 @@ const Auth = (() => {
|
||||
const password = form.password.value;
|
||||
const confirm = form.confirm_password.value;
|
||||
|
||||
if (password !== confirm) { showError(form, 'Passwords do not match.'); return; }
|
||||
if (password.length < 12) { showError(form, 'Master password must be at least 12 characters.'); return; }
|
||||
if (password !== confirm) {
|
||||
showError(form, "Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
if (password.length < 12) {
|
||||
showError(form, "Master password must be at least 12 characters.");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(btn, true);
|
||||
try {
|
||||
const authHash = await Crypto.deriveAuthHash(password, email);
|
||||
const enc_key_salt = Crypto.generateSalt(16);
|
||||
|
||||
const res = await fetch('/api/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
|
||||
const res = await fetch("/api/auth/register", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": csrfToken(),
|
||||
},
|
||||
body: JSON.stringify({ email, auth_hash: authHash, enc_key_salt }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { showError(form, data.error || 'Registration failed.'); return; }
|
||||
window.location.href = '/login?registered=1';
|
||||
if (!res.ok) {
|
||||
showError(form, data.error || "Registration failed.");
|
||||
return;
|
||||
}
|
||||
window.location.href = "/login?registered=1";
|
||||
} catch (err) {
|
||||
showError(form, 'An unexpected error occurred. Please try again.');
|
||||
showError(form, "An unexpected error occurred. Please try again.");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(btn, false);
|
||||
@@ -85,27 +99,33 @@ const Auth = (() => {
|
||||
try {
|
||||
const authHash = await Crypto.deriveAuthHash(password, email);
|
||||
|
||||
const res = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
|
||||
const res = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": csrfToken(),
|
||||
},
|
||||
body: JSON.stringify({ email, auth_hash: authHash }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { showError(form, data.error || 'Invalid email or password.'); return; }
|
||||
if (!res.ok) {
|
||||
showError(form, data.error || "Invalid email or password.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.mfa_required) {
|
||||
// Step 2: collect TOTP code
|
||||
_pendingMfaToken = data.mfa_token;
|
||||
_pendingEncKeySalt = data.enc_key_salt;
|
||||
_pendingPassword = password;
|
||||
sessionStorage.setItem('enc_key_salt', data.enc_key_salt);
|
||||
sessionStorage.setItem("enc_key_salt", data.enc_key_salt);
|
||||
showMfaStep();
|
||||
return;
|
||||
}
|
||||
|
||||
await completeLogin(password, data);
|
||||
} catch (err) {
|
||||
showError(form, 'An unexpected error occurred. Please try again.');
|
||||
showError(form, "An unexpected error occurred. Please try again.");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(btn, false);
|
||||
@@ -117,21 +137,48 @@ const Auth = (() => {
|
||||
const form = e.target;
|
||||
const btn = form.querySelector('[type="submit"]');
|
||||
btn.dataset.originalText = btn.textContent;
|
||||
const errEl = document.getElementById('mfa-error');
|
||||
errEl.classList.add('hidden');
|
||||
const errEl = document.getElementById("mfa-error");
|
||||
errEl.classList.add("hidden");
|
||||
|
||||
const totp_code = document.getElementById('mfa-code').value.trim();
|
||||
if (!totp_code) return;
|
||||
const usingBackup = !document
|
||||
.getElementById("mfa-backup-section")
|
||||
.classList.contains("hidden");
|
||||
const body = { mfa_token: _pendingMfaToken };
|
||||
|
||||
if (usingBackup) {
|
||||
const code = document
|
||||
.getElementById("mfa-backup-code")
|
||||
.value.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[\s-]/g, "");
|
||||
if (!code) {
|
||||
errEl.textContent = "Enter your backup code.";
|
||||
errEl.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
body.backup_code = code;
|
||||
} else {
|
||||
const totp_code = document.getElementById("mfa-code").value.trim();
|
||||
if (!totp_code) return;
|
||||
body.totp_code = totp_code;
|
||||
}
|
||||
|
||||
setLoading(btn, true);
|
||||
try {
|
||||
const res = await fetch('/api/auth/mfa/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken() },
|
||||
body: JSON.stringify({ mfa_token: _pendingMfaToken, totp_code }),
|
||||
const res = await fetch("/api/auth/mfa/verify", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRFToken": csrfToken(),
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) { errEl.classList.remove('hidden'); return; }
|
||||
if (!res.ok) {
|
||||
errEl.textContent = data.error || "Invalid code. Try again.";
|
||||
errEl.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
await completeLogin(_pendingPassword, {
|
||||
access_token: data.access_token,
|
||||
@@ -139,7 +186,8 @@ const Auth = (() => {
|
||||
enc_key_salt: _pendingEncKeySalt,
|
||||
});
|
||||
} catch (err) {
|
||||
errEl.classList.remove('hidden');
|
||||
errEl.textContent = "An unexpected error occurred. Please try again.";
|
||||
errEl.classList.remove("hidden");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(btn, false);
|
||||
@@ -147,36 +195,38 @@ const Auth = (() => {
|
||||
}
|
||||
|
||||
async function completeLogin(password, data) {
|
||||
sessionStorage.setItem('access_token', data.access_token);
|
||||
localStorage.setItem('refresh_token', data.refresh_token);
|
||||
sessionStorage.setItem('enc_key_salt', data.enc_key_salt);
|
||||
sessionStorage.setItem("access_token", data.access_token);
|
||||
localStorage.setItem("refresh_token", data.refresh_token);
|
||||
sessionStorage.setItem("enc_key_salt", data.enc_key_salt);
|
||||
|
||||
// Notify the browser extension (if installed) so it can share the session
|
||||
window.dispatchEvent(new CustomEvent('passkeeper:session', {
|
||||
detail: {
|
||||
access_token: data.access_token,
|
||||
refresh_token: data.refresh_token,
|
||||
enc_key_salt: data.enc_key_salt,
|
||||
},
|
||||
}));
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("passkeeper:session", {
|
||||
detail: {
|
||||
access_token: data.access_token,
|
||||
refresh_token: data.refresh_token,
|
||||
enc_key_salt: data.enc_key_salt,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
const vaultKey = await Crypto.deriveVaultKey(password, data.enc_key_salt);
|
||||
VaultSession.setKey(vaultKey);
|
||||
|
||||
window.location.href = '/vault';
|
||||
window.location.href = "/vault";
|
||||
}
|
||||
|
||||
function showMfaStep() {
|
||||
document.getElementById('login-step-1').classList.add('hidden');
|
||||
document.getElementById('login-step-2').classList.remove('hidden');
|
||||
document.getElementById('mfa-code').focus();
|
||||
document.getElementById("login-step-1").classList.add("hidden");
|
||||
document.getElementById("login-step-2").classList.remove("hidden");
|
||||
document.getElementById("mfa-code").focus();
|
||||
}
|
||||
|
||||
function hideMfaStep() {
|
||||
document.getElementById('login-step-2').classList.add('hidden');
|
||||
document.getElementById('login-step-1').classList.remove('hidden');
|
||||
document.getElementById('mfa-code').value = '';
|
||||
document.getElementById('mfa-error').classList.add('hidden');
|
||||
document.getElementById("login-step-2").classList.add("hidden");
|
||||
document.getElementById("login-step-1").classList.remove("hidden");
|
||||
document.getElementById("mfa-code").value = "";
|
||||
document.getElementById("mfa-error").classList.add("hidden");
|
||||
_pendingMfaToken = null;
|
||||
_pendingEncKeySalt = null;
|
||||
_pendingPassword = null;
|
||||
@@ -188,17 +238,17 @@ const Auth = (() => {
|
||||
const btn = document.getElementById(btnId);
|
||||
const input = document.getElementById(inputId);
|
||||
if (btn && input) {
|
||||
btn.addEventListener('click', () => {
|
||||
input.type = input.type === 'password' ? 'text' : 'password';
|
||||
btn.addEventListener("click", () => {
|
||||
input.type = input.type === "password" ? "text" : "password";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initStrengthMeter() {
|
||||
const input = document.getElementById('password');
|
||||
const bar = document.getElementById('strength-bar');
|
||||
const input = document.getElementById("password");
|
||||
const bar = document.getElementById("strength-bar");
|
||||
if (!input || !bar) return;
|
||||
input.addEventListener('input', function () {
|
||||
input.addEventListener("input", function () {
|
||||
const v = this.value;
|
||||
let score = 0;
|
||||
if (v.length >= 12) score++;
|
||||
@@ -206,45 +256,84 @@ const Auth = (() => {
|
||||
if (/[A-Z]/.test(v)) score++;
|
||||
if (/[0-9]/.test(v)) score++;
|
||||
if (/[^A-Za-z0-9]/.test(v)) score++;
|
||||
const labels = ['', 'Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
|
||||
const classes = ['', 'strength-1', 'strength-2', 'strength-3', 'strength-4', 'strength-5'];
|
||||
bar.textContent = v ? labels[score] : '';
|
||||
bar.className = 'password-strength ' + (v ? classes[score] : '');
|
||||
const labels = ["", "Very weak", "Weak", "Fair", "Strong", "Very strong"];
|
||||
const classes = [
|
||||
"",
|
||||
"strength-1",
|
||||
"strength-2",
|
||||
"strength-3",
|
||||
"strength-4",
|
||||
"strength-5",
|
||||
];
|
||||
bar.textContent = v ? labels[score] : "";
|
||||
bar.className = "password-strength " + (v ? classes[score] : "");
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
const registerForm = document.getElementById('register-form');
|
||||
if (registerForm) registerForm.addEventListener('submit', handleRegister);
|
||||
const registerForm = document.getElementById("register-form");
|
||||
if (registerForm) registerForm.addEventListener("submit", handleRegister);
|
||||
|
||||
const loginForm = document.getElementById('login-form');
|
||||
if (loginForm) loginForm.addEventListener('submit', handleLogin);
|
||||
const loginForm = document.getElementById("login-form");
|
||||
if (loginForm) loginForm.addEventListener("submit", handleLogin);
|
||||
|
||||
const mfaForm = document.getElementById('mfa-form');
|
||||
if (mfaForm) mfaForm.addEventListener('submit', handleMfaVerify);
|
||||
const mfaForm = document.getElementById("mfa-form");
|
||||
if (mfaForm) mfaForm.addEventListener("submit", handleMfaVerify);
|
||||
|
||||
document.getElementById('btn-back-to-password')?.addEventListener('click', hideMfaStep);
|
||||
document
|
||||
.getElementById("btn-back-to-password")
|
||||
?.addEventListener("click", hideMfaStep);
|
||||
|
||||
initPasswordToggle('toggle-login-pass', 'password');
|
||||
initPasswordToggle('toggle-reg-pass', 'password');
|
||||
document
|
||||
.getElementById("btn-use-backup-code")
|
||||
?.addEventListener("click", () => {
|
||||
document.getElementById("mfa-totp-section").classList.add("hidden");
|
||||
document
|
||||
.getElementById("mfa-backup-section")
|
||||
.classList.remove("hidden");
|
||||
document.getElementById("btn-use-backup-code").classList.add("hidden");
|
||||
document.getElementById("btn-use-totp-code").classList.remove("hidden");
|
||||
document.getElementById("mfa-backup-code").focus();
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("btn-use-totp-code")
|
||||
?.addEventListener("click", () => {
|
||||
document.getElementById("mfa-backup-section").classList.add("hidden");
|
||||
document.getElementById("mfa-totp-section").classList.remove("hidden");
|
||||
document.getElementById("btn-use-totp-code").classList.add("hidden");
|
||||
document
|
||||
.getElementById("btn-use-backup-code")
|
||||
.classList.remove("hidden");
|
||||
document.getElementById("mfa-code").focus();
|
||||
});
|
||||
|
||||
initPasswordToggle("toggle-login-pass", "password");
|
||||
initPasswordToggle("toggle-reg-pass", "password");
|
||||
initStrengthMeter();
|
||||
|
||||
if (window.location.search.includes('registered=1')) {
|
||||
const notice = document.getElementById('register-notice');
|
||||
if (notice) notice.classList.remove('hidden');
|
||||
if (window.location.search.includes("registered=1")) {
|
||||
const notice = document.getElementById("register-notice");
|
||||
if (notice) notice.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
return { init };
|
||||
})();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', Auth.init);
|
||||
document.addEventListener("DOMContentLoaded", Auth.init);
|
||||
|
||||
// ── VaultSession — holds the vault key for the lifetime of the browser tab ──
|
||||
const VaultSession = (() => {
|
||||
let _vaultKey = null;
|
||||
function setKey(key) { _vaultKey = key; }
|
||||
function getKey() { return _vaultKey; }
|
||||
function clear() { _vaultKey = null; }
|
||||
function setKey(key) {
|
||||
_vaultKey = key;
|
||||
}
|
||||
function getKey() {
|
||||
return _vaultKey;
|
||||
}
|
||||
function clear() {
|
||||
_vaultKey = null;
|
||||
}
|
||||
return { setKey, getKey, clear };
|
||||
})();
|
||||
|
||||
+549
-215
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Sign In — PassKeeper{% endblock %}
|
||||
{% block body_class %}auth-page{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% extends "base.html" %} {% block title %}Sign In — PassKeeper{% endblock %} {%
|
||||
block body_class %}auth-page{% endblock %} {% block body %}
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<div class="auth-logo">
|
||||
@@ -20,24 +17,46 @@
|
||||
<form id="login-form" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="email">Email address</label>
|
||||
<input type="email" id="email" name="email" required
|
||||
autocomplete="email" placeholder="you@example.com">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Master password</label>
|
||||
<div class="input-with-toggle">
|
||||
<input type="password" id="password" name="password" required
|
||||
autocomplete="current-password" placeholder="Enter master password">
|
||||
<button type="button" class="btn-show-pass" id="toggle-login-pass"
|
||||
aria-label="Toggle password visibility">👁</button>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter master password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-show-pass"
|
||||
id="toggle-login-pass"
|
||||
aria-label="Toggle password visibility"
|
||||
>
|
||||
👁
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary btn-full" data-loading-text="Verifying…">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary btn-full"
|
||||
data-loading-text="Verifying…"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</form>
|
||||
<p class="auth-footer">
|
||||
Don't have an account? <a href="/register">Create one</a><br>
|
||||
Don't have an account? <a href="/register">Create one</a><br />
|
||||
Forgot your password? <a href="/recover">Use recovery code</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -45,29 +64,65 @@
|
||||
<!-- Step 2: TOTP verification (hidden until MFA required) -->
|
||||
<div id="login-step-2" class="hidden">
|
||||
<h1 class="auth-title">Two-factor authentication</h1>
|
||||
<p class="auth-step-hint">Enter the 6-digit code from your authenticator app.</p>
|
||||
<p class="auth-step-hint">
|
||||
Enter the 6-digit code from your authenticator app.
|
||||
</p>
|
||||
<form id="mfa-form" novalidate>
|
||||
<p id="mfa-error" class="form-error hidden">Invalid or expired code. Try again.</p>
|
||||
<div class="form-group">
|
||||
<p id="mfa-error" class="form-error hidden">
|
||||
Invalid or expired code. Try again.
|
||||
</p>
|
||||
|
||||
<!-- TOTP input (default) -->
|
||||
<div id="mfa-totp-section" class="form-group">
|
||||
<label for="mfa-code">Authenticator code</label>
|
||||
<input type="text" id="mfa-code" name="mfa_code"
|
||||
inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
|
||||
autocomplete="one-time-code" placeholder="000000">
|
||||
<input
|
||||
type="text"
|
||||
id="mfa-code"
|
||||
name="mfa_code"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]{6}"
|
||||
maxlength="6"
|
||||
autocomplete="one-time-code"
|
||||
placeholder="000000"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn-primary btn-full" data-loading-text="Verifying…">
|
||||
|
||||
<!-- Backup code input (hidden until user switches) -->
|
||||
<div id="mfa-backup-section" class="form-group hidden">
|
||||
<label for="mfa-backup-code">Backup code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="mfa-backup-code"
|
||||
name="mfa_backup_code"
|
||||
autocomplete="off"
|
||||
placeholder="e.g. ab3rqxyz9p"
|
||||
style="letter-spacing: 0.05em"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn-primary btn-full"
|
||||
data-loading-text="Verifying…"
|
||||
>
|
||||
Verify
|
||||
</button>
|
||||
</form>
|
||||
<div class="auth-footer">
|
||||
<button class="btn-text" id="btn-back-to-password">← Back to sign in</button>
|
||||
<button class="btn-text" id="btn-use-backup-code">
|
||||
Use a backup code instead
|
||||
</button>
|
||||
<button class="btn-text hidden" id="btn-use-totp-code">
|
||||
Use authenticator code instead
|
||||
</button>
|
||||
<button class="btn-text" id="btn-back-to-password">
|
||||
← Back to sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% endblock %} {% block scripts %}
|
||||
<script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -899,6 +899,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Audit Log Section -->
|
||||
<div class="settings-section">
|
||||
<h4 class="settings-section-title">📋 Login & Activity History</h4>
|
||||
<p class="settings-desc">Recent account activity. Unfamiliar entries may indicate unauthorised access.</p>
|
||||
<div id="audit-log-list" style="margin-top:8px;font-size:13px;"></div>
|
||||
<button class="btn-secondary" id="btn-load-more-audit" style="margin-top:10px;display:none;">Load more</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-section settings-section-danger">
|
||||
<h4 class="settings-section-title">⚠️ Danger Zone</h4>
|
||||
<p class="settings-desc">
|
||||
@@ -1051,4 +1061,4 @@
|
||||
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/sharing.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/vault.js') }}"></script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user