Mathieu Moran
4308d6babf
Introduce client-side localization helper and en/fr locale bundles. Route admin control, picks, movies, stats, winners and settings UIs through i18n keys instead of hardcoded text. Remove French text from the English UI and standardize shared messages (saving, network errors, confirmations). Update .gitignore to ignore editor metadata and localization helper artifacts.
85 lines
3.7 KiB
HTML
85 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title data-i18n="changePassword.title">Oscar Pool - Change Password</title>
|
|
<script src="./js/app_theme.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="./css/app.css" rel="stylesheet">
|
|
<style>
|
|
/* Hide translatable content until translations are ready - prevents flash during page navigation */
|
|
body:not(.i18n-ready) [data-i18n] {
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-in;
|
|
}
|
|
body.i18n-ready [data-i18n] {
|
|
opacity: 1;
|
|
}
|
|
/* Fallback: show content after 2 seconds even if JS fails */
|
|
body:not(.i18n-ready) [data-i18n] {
|
|
animation: show-after-delay 0.1s 2s forwards;
|
|
}
|
|
@keyframes show-after-delay {
|
|
to { opacity: 1; }
|
|
}
|
|
</style>
|
|
<script src="./js/localization.js" defer></script>
|
|
</head>
|
|
<body class="bg-light">
|
|
<button class="theme-toggle theme-toggle--floating" type="button" data-theme-toggle role="switch" aria-checked="false" data-i18n-aria-label="common.toggleDarkMode" aria-label="Toggle dark mode">
|
|
<span class="theme-toggle-icon theme-toggle-icon-sun" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2"></path>
|
|
<path d="M12 20v2"></path>
|
|
<path d="M4.93 4.93l1.41 1.41"></path>
|
|
<path d="M17.66 17.66l1.41 1.41"></path>
|
|
<path d="M2 12h2"></path>
|
|
<path d="M20 12h2"></path>
|
|
<path d="M4.93 19.07l1.41-1.41"></path>
|
|
<path d="M17.66 6.34l1.41-1.41"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="theme-toggle-thumb" aria-hidden="true"></span>
|
|
<span class="theme-toggle-icon theme-toggle-icon-moon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
|
|
<div class="container d-flex justify-content-center align-items-center vh-100">
|
|
<div class="card p-4" style="max-width: 420px; width: 100%;">
|
|
<div class="text-center mb-3">
|
|
<img src="img/logo.png" class="logo-invert" style="width: 80%;" alt="Oscar Pool">
|
|
</div>
|
|
|
|
<div class="alert alert-warning" role="alert" data-i18n="changePassword.tempPassword">
|
|
Your account uses a <strong>temporary password</strong>. Please set a new password to continue.
|
|
</div>
|
|
|
|
<div id="change-password-error" class="alert alert-danger d-none" role="alert"></div>
|
|
|
|
<form id="change-password-form">
|
|
<div class="mb-3">
|
|
<label for="new-password" class="form-label" data-i18n="changePassword.newPassword">New password</label>
|
|
<input type="password" class="form-control" id="new-password" minlength="8" required>
|
|
<div class="form-text" data-i18n="changePassword.minChars">Minimum 8 characters.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirm-password" class="form-label" data-i18n="auth.confirmPassword">Confirm password</label>
|
|
<input type="password" class="form-control" id="confirm-password" minlength="8" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100" data-i18n="common.save">Save</button>
|
|
</form>
|
|
|
|
<button type="button" id="log-off" class="btn btn-outline-danger w-100 mt-3" data-i18n="nav.logout">Log out</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="./js/app_change-password.js"></script>
|
|
</body>
|
|
</html>
|