peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(i18n): translate login and app chrome (HU/EN/DE)

Browse source 
Login screen (with a language picker), header, account menu, sync status, About and
Release Notes dialogs, and the version banner are now fully translated in Hungarian,
English and German.
This commit is contained in:
npeter83 2026-06-15 00:30:34 +02:00
parent c165c3f274
commit b38ae92d8d
18 changed files with 279 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/components/Login.tsx
View file

@ -1,9 +1,14 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { api } from "../lib/api";
import { setLanguage, type LangCode } from "../i18n";
import LanguageSwitcher from "./LanguageSwitcher";
type Phase = "idle" | "sending" | "requested" | "approved" | "error";
export default function Login() {
const { t, i18n } = useTranslation();
// A denied Google login bounces back here with ?access=requested (we recorded it) or
// ?access=denied (no usable email). Surface that so the user isn't left on a raw error.
const params = new URLSearchParams(window.location.search);
@ -21,7 +26,7 @@ export default function Login() {
const r = await api.requestAccess(email.trim());
setPhase(r.status === "approved" ? "approved" : "requested");
} catch {
setError("Couldn't submit — check the address and try again.");
setError(t("login.submitError"));
setPhase("error");
}
}
@ -30,40 +35,33 @@ export default function Login() {
return (
<div className="min-h-screen grid place-items-center bg-bg text-fg">
<div className="absolute top-4 right-4">
<LanguageSwitcher value={i18n.language as LangCode} onChange={setLanguage} />
</div>
<div className="glass w-[min(92vw,420px)] rounded-2xl p-10 text-center">
<div className="text-3xl font-bold tracking-tight">
Sift<span className="text-accent">lode</span>
</div>
<p className="text-muted my-5 leading-relaxed">
A self-hosted, filterable feed of your YouTube subscriptions — sort, tag, and
tune out the noise. Sign in with Google to get started; YouTube access is an
optional, separate step you control.
</p>
<p className="text-muted my-5 leading-relaxed">{t("login.tagline")}</p>
<a
href="/auth/login"
className="inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
>
Sign in with Google
{t("login.signIn")}
</a>
<div className="mt-7 pt-6 border-t border-border text-left">
{phase === "approved" ? (
<p className="text-sm text-fg/80">
You're already approved — just sign in with Google above.
</p>
<p className="text-sm text-fg/80">{t("login.approved")}</p>
) : done ? (
<p className="text-sm text-fg/80">
Thanks — your request is in. We'll email you when it's approved.
</p>
<p className="text-sm text-fg/80">{t("login.requested")}</p>
) : (
<>
<div className="text-xs uppercase tracking-wide text-muted mb-2">
No access yet?
{t("login.noAccessYet")}
</div>
{bounced === "denied" && (
<p className="text-xs text-muted mb-2">
That Google account isn't approved. Request access below.
</p>
<p className="text-xs text-muted mb-2">{t("login.denied")}</p>
)}
<form onSubmit={submit} className="flex items-center gap-2">
<input
@ -71,7 +69,7 @@ export default function Login() {
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@gmail.com"
placeholder={t("login.emailPlaceholder")}
className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
/>
<button
@ -79,7 +77,7 @@ export default function Login() {
disabled={phase === "sending"}
className="shrink-0 px-3 py-2 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent disabled:opacity-50 transition"
>
{phase === "sending" ? "Sending…" : "Request access"}
{phase === "sending" ? t("login.sending") : t("login.requestAccess")}
</button>
</form>
{error && <p className="text-xs text-red-400 mt-2">{error}</p>}
@ -88,8 +86,12 @@ export default function Login() {
</div>
</div>
<footer className="mt-5 flex gap-4 text-xs text-muted">
<a href="/privacy" className="hover:text-fg transition">Privacy Policy</a>
<a href="/terms" className="hover:text-fg transition">Terms of Service</a>
<a href="/privacy" className="hover:text-fg transition">
{t("common.privacyPolicy")}
</a>
<a href="/terms" className="hover:text-fg transition">
{t("common.termsOfService")}
</a>
</footer>
</div>
);