XingfenD
5bb42a8b8a
- Add i18n (English + 简体中文) with a locale store, $t() magic, and a language toggle (persisted) - Add light/dark/system theme switching via a theme store and [data-theme] token overrides - Set the theme before paint to avoid a flash of the wrong theme - Add frontend version constant web/version.js (window.YDROPBX_VERSION) shown in the app footer - Update AGENTS.md version-control convention to mention web/version.js - Bump version to 0.1.1 across frontend, webui changelog, and backend constant
71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>yDropbox Login</title>
|
|
<link rel="stylesheet" href="/styles/tokens.css">
|
|
<link rel="stylesheet" href="/styles/base.css">
|
|
<link rel="stylesheet" href="/styles/components.css">
|
|
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var t = localStorage.getItem('yd.theme') || 'system';
|
|
var dark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
|
|
<script defer src="/components/icons.js"></script>
|
|
<script defer src="/components/i18n.js"></script>
|
|
<script defer src="/components/theme.js"></script>
|
|
<script defer src="/alpine.min.js"></script>
|
|
</head>
|
|
<body x-data>
|
|
<div class="page-topbar">
|
|
<button class="btn btn-icon" type="button"
|
|
@click="$store.locale.toggle()"
|
|
:title="$t('lang.label')" :aria-label="$t('lang.label')">
|
|
<span class="icon" x-html="Icons.globe"></span>
|
|
</button>
|
|
<button class="btn btn-icon" type="button"
|
|
@click="$store.theme.cycle()"
|
|
:title="$t('theme.' + $store.theme.mode)" :aria-label="$t('theme.' + $store.theme.mode)">
|
|
<span class="icon" x-html="Icons[$store.theme.icon()]"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="login-wrap">
|
|
<div class="login-card">
|
|
<h1>y<span>Dropbox</span></h1>
|
|
<p x-text="$t('login.subtitle')"></p>
|
|
<form id="loginForm">
|
|
<input type="password" id="token" :placeholder="$t('login.token')" required autocomplete="current-password">
|
|
<div class="login-error" id="loginError" x-text="$t('login.error')"></div>
|
|
<button type="submit" class="btn btn-primary" x-text="$t('login.submit')"></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const errEl = document.getElementById('loginError');
|
|
errEl.classList.remove('show');
|
|
const token = document.getElementById('token').value;
|
|
const res = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({token})
|
|
});
|
|
if (res.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errEl.classList.add('show');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|