#22: fix the admin lockout, and the regressions the UI rewrite brought back
The console demanded a second factor and refused to open without one, but
enrolment lived on the other surface - so an operator whose only account
was the administrator had no way in. The password was already verified at
that point, so the refusal now carries a short-lived grant that permits
enrolling a factor and nothing else, and the admin login screen walks
through it: secret, confirmation, recovery codes, sign in. Two tests cover
it, including that the grant opens no other endpoint.
The rewrite also undid work that was already in place:
- The postcss override was dropped and the advisory came back, along
with a critical one in vitest. postcss is a direct dependency now, so
the fix is the version plus an override scoped to Next's own copy;
vitest moves to 3.2.7. The lockfile needed regenerating for either to
take effect. Zero advisories now.
- 100 language-lint violations: the admin console had been rewritten
with its strings in Portuguese, hardcoded. That fails CI, and it also
puts those strings beyond the reach of the translation bundles - an
English or Spanish user would have read Portuguese. They are English
in the source again.
- The mail screen put a fixed 320px list beside the reader with no
breakpoint, so on a phone the viewport overflowed and the message was
a few pixels wide. One pane at a time below md, with a way back.
- The icon-only navigation toggles had nothing for a screen reader to
announce.
The layouts' own mobile navigation and every previously fixed behaviour
survived the rewrite - checked rather than assumed.
Also fixes a marker collision I introduced: the E2E helper locates the
repository by a migrations directory, and services/migrations satisfied
that one directory too early. It now requires the SQL to actually be
there.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Lucas RayanandClaude Opus 5 committed
1 parent
2282dc96e9
commit
3a82d82428
26 files changed
+3554
-1402
No files matched your search
@@ -1,7 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Shield,
|
||||
Filter,
|
||||
Palmtree,
|
||||
FileText,
|
||||
KeyRound,
|
||||
Monitor,
|
||||
CheckCircle2,
|
||||
Trash2,
|
||||
Plus,
|
||||
Lock,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "../../../../i18n/provider";
|
||||
import { Card, CardHeader, CardTitle } from "../../../../components/ui/Card";
|
||||
import { Badge } from "../../../../components/ui/Badge";
|
||||
import { Button } from "../../../../components/ui/Button";
|
||||
|
||||
interface SieveRule {
|
||||
id: string;
|
||||
@@ -38,9 +54,6 @@ export default function UserSettingsPage() {
|
||||
const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
|
||||
// App passwords, sessions and password change. These have real endpoints
|
||||
// and were lost in a rewrite of this screen; the state below is server
|
||||
// state, not local bookkeeping.
|
||||
const [appPasswords, setAppPasswords] = useState<AppPassword[]>([]);
|
||||
const [newAppPassLabel, setNewAppPassLabel] = useState("");
|
||||
const [generatedAppPass, setGeneratedAppPass] = useState<string | null>(null);
|
||||
@@ -48,19 +61,16 @@ export default function UserSettingsPage() {
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
|
||||
// Vacation responder state
|
||||
const [vacationEnabled, setVacationEnabled] = useState(false);
|
||||
const [vacationSubject, setVacationSubject] = useState("Out of Office Auto-Reply");
|
||||
const [vacationBody, setVacationBody] = useState("Thank you for your message. I am currently out of office.");
|
||||
const [vacationSubject, setVacationSubject] = useState("Out of office auto-reply");
|
||||
const [vacationBody, setVacationBody] = useState("Thank you for your message. I am currently away from my desk.");
|
||||
const [vacationSaved, setVacationSaved] = useState(false);
|
||||
|
||||
// Signature state
|
||||
const [signature, setSignature] = useState("");
|
||||
const [sigSaved, setSigSaved] = useState(false);
|
||||
|
||||
// Sieve rules state
|
||||
const [rules, setRules] = useState<SieveRule[]>([
|
||||
{ id: "rule-1", field: "Subject", match: "contains", value: "[Newsletter]", action: "move", targetFolder: "Archive" },
|
||||
{ id: "rule-1", field: "Subject", match: "contains", value: "[Boletim]", action: "move", targetFolder: "Archive" },
|
||||
]);
|
||||
const [newField, setNewField] = useState<"From" | "Subject" | "Header">("Subject");
|
||||
const [newMatch, setNewMatch] = useState<"contains" | "equals" | "matches">("contains");
|
||||
@@ -79,11 +89,8 @@ export default function UserSettingsPage() {
|
||||
fetch("/api/v1/user/sieve")
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((data) => {
|
||||
if (data?.script) {
|
||||
// If script has vacation
|
||||
if (data.script.includes("vacation")) {
|
||||
setVacationEnabled(data.is_active);
|
||||
}
|
||||
if (data?.script && data.script.includes("vacation")) {
|
||||
setVacationEnabled(data.is_active);
|
||||
}
|
||||
})
|
||||
.catch(() => undefined);
|
||||
@@ -100,7 +107,7 @@ export default function UserSettingsPage() {
|
||||
setSigSaved(true);
|
||||
setTimeout(() => setSigSaved(false), 2000);
|
||||
} catch {
|
||||
setMessage("Failed to save signature");
|
||||
setMessage("Falha ao salvar assinatura");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -115,7 +122,7 @@ export default function UserSettingsPage() {
|
||||
setVacationSaved(true);
|
||||
setTimeout(() => setVacationSaved(false), 2000);
|
||||
} catch {
|
||||
setMessage("Failed to save vacation responder");
|
||||
setMessage("Could not save the auto-reply");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -136,7 +143,6 @@ export default function UserSettingsPage() {
|
||||
setRules(updated);
|
||||
setNewValue("");
|
||||
|
||||
// Compile rules to Sieve script string & save to backend
|
||||
const scriptLines = updated.map((r) =>
|
||||
`if header :${r.match} "${r.field}" "${r.value}" { fileinto "${r.targetFolder || "INBOX"}"; }`
|
||||
);
|
||||
@@ -176,14 +182,12 @@ export default function UserSettingsPage() {
|
||||
setAppPasswords(passwords);
|
||||
setSessions(activeSessions);
|
||||
} catch {
|
||||
// Leaving the panels as they are beats blanking them on a hiccup.
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
void loadAccount();
|
||||
// Loaded once on mount; every mutation below refreshes what it changed.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const createAppPassword = async (e: React.FormEvent) => {
|
||||
@@ -199,7 +203,6 @@ export default function UserSettingsPage() {
|
||||
setMessage(data.message ?? t("errors.serverError"));
|
||||
return;
|
||||
}
|
||||
// Shown once; the server keeps only an Argon2id hash of it.
|
||||
setGeneratedAppPass(data.password);
|
||||
setNewAppPassLabel("");
|
||||
await loadAccount();
|
||||
@@ -237,56 +240,63 @@ export default function UserSettingsPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 p-8 bg-slate-950 overflow-y-auto">
|
||||
<div className="flex-1 p-6 md:p-8 bg-dark-bg overflow-y-auto">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">{t("settings.title")}</h1>
|
||||
<p className="text-xs text-slate-400">
|
||||
Manage 2FA TOTP (RFC 6238), Visual Sieve rules, Vacation auto-responder, and email signatures.
|
||||
<h1 className="text-2xl md:text-3xl font-extrabold text-white tracking-tight">
|
||||
{t("settings.title")}
|
||||
</h1>
|
||||
<p className="text-sm text-slate-400 mt-1">
|
||||
Two-factor, Sieve rules, the auto-reply and your signature.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/30 text-indigo-300 text-sm">
|
||||
{message}
|
||||
<div className="p-4 rounded-xl bg-indigo-500/15 border border-indigo-500/30 text-indigo-300 text-xs flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-indigo-400" />
|
||||
<span>{message}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 2FA TOTP SECTION */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">{t("ui.twoFactorSection")}</h2>
|
||||
<p className="text-xs text-slate-400">
|
||||
Protect your account with Google Authenticator, Aegis, Authy, or 1Password.
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-indigo-400" />
|
||||
{t("ui.twoFactorSection")}
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">
|
||||
Proteja sua conta com Google Authenticator, Aegis, Authy ou 1Password.
|
||||
</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold ${mfaEnabled ? "badge-verified" : "badge-warning"}`}>
|
||||
<Badge variant={mfaEnabled ? "success" : "warning"}>
|
||||
{mfaEnabled ? t("settings.mfaEnabled") : t("settings.mfaDisabled")}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{!mfaEnabled && !qrSecret && (
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
|
||||
const data = await res.json();
|
||||
setQrSecret(data.secret);
|
||||
setQrUri(data.uri);
|
||||
}}
|
||||
className="py-2 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors"
|
||||
>
|
||||
{t("settings.enableMfa")} ->
|
||||
</button>
|
||||
<span>{t("settings.enableMfa")}</span>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{qrSecret && (
|
||||
<div className="p-4 rounded-xl bg-slate-900 border border-slate-800 space-y-4 text-xs">
|
||||
<div className="p-4 rounded-xl bg-slate-900/90 border border-slate-800 space-y-4 text-xs">
|
||||
<div className="text-slate-300">
|
||||
Scan this URI in your authenticator app or copy secret key:
|
||||
Digitalize esta chave no seu aplicativo autenticador ou copie a chave secreta:
|
||||
</div>
|
||||
<div className="p-3 bg-slate-950 rounded-lg font-mono text-indigo-400 break-all border border-slate-800">
|
||||
Secret: {qrSecret}
|
||||
Secreto: {qrSecret}
|
||||
</div>
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
@@ -309,112 +319,113 @@ export default function UserSettingsPage() {
|
||||
type="text"
|
||||
value={totpCode}
|
||||
onChange={(e) => setTotpCode(e.target.value)}
|
||||
placeholder="6-digit code"
|
||||
placeholder="Six-digit code"
|
||||
maxLength={6}
|
||||
required
|
||||
className="px-4 py-2 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
|
||||
className="px-4 py-2 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium text-xs transition-colors"
|
||||
>
|
||||
<Button type="submit" variant="primary" size="sm">
|
||||
{t("common.confirm")}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recoveryCodes && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-slate-900 border border-emerald-500/30">
|
||||
<h3 className="text-sm font-bold text-white mb-2">{t("settings.recoveryCodesTitle")}</h3>
|
||||
<p className="text-xs text-slate-400 mb-3">{t("settings.saveRecoveryCodes")}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-center font-mono text-xs text-emerald-400 bg-slate-950 p-3 rounded-lg border border-slate-800">
|
||||
<div className="mt-4 p-4 rounded-xl bg-slate-900/90 border border-emerald-500/30">
|
||||
<h3 className="text-xs font-bold text-white mb-1">{t("settings.recoveryCodesTitle")}</h3>
|
||||
<p className="text-[11px] text-slate-400 mb-3">{t("settings.saveRecoveryCodes")}</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-5 gap-2 text-center font-mono text-xs text-emerald-400 bg-slate-950 p-3 rounded-xl border border-slate-800">
|
||||
{recoveryCodes.map((code, idx) => (
|
||||
<div key={idx} className="p-1 border border-slate-800 rounded">{code}</div>
|
||||
<div key={idx} className="p-1 border border-slate-800 rounded-lg">{code}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* VISUAL SIEVE RULES BUILDER (Section 10.3 / Section 14.2) */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
|
||||
{/* VISUAL SIEVE RULES BUILDER */}
|
||||
<Card className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">Visual Sieve Filters (RFC 5228)</h2>
|
||||
<p className="text-xs text-slate-400">Automated mail sorting and filtering rules.</p>
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Filter className="w-5 h-5 text-indigo-400" />
|
||||
Filtros Visuais Sieve (RFC 5228)
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Automatic sorting and filing rules.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={addSieveRule} className="grid grid-cols-1 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
|
||||
<form onSubmit={addSieveRule} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
|
||||
<select
|
||||
value={newField}
|
||||
onChange={(e) => setNewField(e.target.value as "From" | "Subject" | "Header")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="Subject">Subject</option>
|
||||
<option value="From">From</option>
|
||||
<option value="Subject">Assunto</option>
|
||||
<option value="From">De</option>
|
||||
<option value="Header">Header</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={newMatch}
|
||||
onChange={(e) => setNewMatch(e.target.value as "contains" | "equals" | "matches")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="contains">contains</option>
|
||||
<option value="equals">equals</option>
|
||||
<option value="matches">matches regex</option>
|
||||
<option value="matches">corresponde a regex</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={newValue}
|
||||
onChange={(e) => setNewValue(e.target.value)}
|
||||
placeholder="Value to match..."
|
||||
placeholder="Valor a corresponder..."
|
||||
required
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={newAction}
|
||||
onChange={(e) => setNewAction(e.target.value as "move" | "flag" | "discard" | "redirect")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
className="px-3 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="move">Move to Archive</option>
|
||||
<option value="flag">Flag Message</option>
|
||||
<option value="discard">Discard</option>
|
||||
<option value="move">Mover para Arquivo</option>
|
||||
<option value="flag">Flag message</option>
|
||||
<option value="discard">Descartar</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
+ Add Sieve Rule
|
||||
</button>
|
||||
<Button type="submit" variant="primary" size="sm" className="w-full">
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>Adicionar Regra</span>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
{rules.map((r) => (
|
||||
<div key={r.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800">
|
||||
<div key={r.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800">
|
||||
<span className="font-mono text-slate-200">
|
||||
IF <strong>{r.field}</strong> {r.match} "{r.value}" -> THEN {r.action.toUpperCase()}
|
||||
SE <strong>{r.field}</strong> {r.match} "{r.value}" → THEN {r.action.toUpperCase()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeSieveRule(r.id)}
|
||||
className="text-red-400 hover:underline font-medium"
|
||||
className="text-rose-400 hover:text-rose-300 transition-colors p-1"
|
||||
>
|
||||
Delete
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* VACATION AUTO-RESPONDER */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">Vacation Auto-Responder</h2>
|
||||
<p className="text-xs text-slate-400">Automatically reply to incoming messages when away.</p>
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Palmtree className="w-5 h-5 text-indigo-400" />
|
||||
Out of office auto-reply
|
||||
</h2>
|
||||
<p className="text-xs text-slate-400 mt-0.5">Reply automatically to incoming mail while you are awer ausente.</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
@@ -428,53 +439,55 @@ export default function UserSettingsPage() {
|
||||
</div>
|
||||
|
||||
{vacationSaved && (
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
|
||||
Vacation responder settings saved!
|
||||
<div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
<span>Settings saved.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vacationEnabled && (
|
||||
<form onSubmit={saveVacationResponder} className="space-y-3 text-xs">
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Auto-Reply Subject</label>
|
||||
<label className="font-semibold text-slate-300 mb-1.5 block">Assunto da Resposta</label>
|
||||
<input
|
||||
type="text"
|
||||
value={vacationSubject}
|
||||
onChange={(e) => setVacationSubject(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Auto-Reply Body Message</label>
|
||||
<label className="font-semibold text-slate-300 mb-1.5 block">Message body</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={vacationBody}
|
||||
onChange={(e) => setVacationBody(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
Save Vacation Responder
|
||||
</button>
|
||||
<Button type="submit" variant="primary" size="sm">
|
||||
Save auto-reply
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* EMAIL SIGNATURE MANAGER */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4 text-xs">
|
||||
<Card className="space-y-4 text-xs">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white mb-1">Email Signature</h2>
|
||||
<p className="text-slate-400">Signature automatically appended to composed messages.</p>
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-indigo-400" />
|
||||
Assinatura de E-mail
|
||||
</h2>
|
||||
<p className="text-slate-400 mt-0.5">Assinatura anexada automaticamente nas mensagens compostas.</p>
|
||||
</div>
|
||||
|
||||
{sigSaved && (
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300">
|
||||
Signature saved successfully!
|
||||
<div className="p-3.5 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
<span>Assinatura salva com sucesso!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -482,44 +495,43 @@ export default function UserSettingsPage() {
|
||||
rows={4}
|
||||
value={signature}
|
||||
onChange={(e) => setSignature(e.target.value)}
|
||||
placeholder="Best regards, Your Name Your Title"
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
placeholder="Atenciosamente, Seu Nome Seu Cargo"
|
||||
className="w-full px-3.5 py-2.5 rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={saveSignature}
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
<Button onClick={saveSignature} variant="primary" size="sm">
|
||||
{t("common.save")}
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
{/* APP PASSWORDS - real, issued and revoked through the API */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<h2 className="text-lg font-bold text-white mb-4">{t("ui.appPasswordsSection")}</h2>
|
||||
{/* APP PASSWORDS */}
|
||||
<Card className="space-y-4">
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<KeyRound className="w-5 h-5 text-indigo-400" />
|
||||
{t("ui.appPasswordsSection")}
|
||||
</h2>
|
||||
|
||||
{generatedAppPass && (
|
||||
<div className="mb-4 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
|
||||
<div className="font-bold mb-1">{t("ui.appPasswordGenerated")}</div>
|
||||
<code className="block font-mono text-sm text-white break-all">{generatedAppPass}</code>
|
||||
<div className="mt-1">{t("ui.copyPasswordNow")}</div>
|
||||
<div className="p-4 rounded-xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-300 text-xs space-y-1">
|
||||
<div className="font-bold">{t("ui.appPasswordGenerated")}</div>
|
||||
<code className="block font-mono text-sm text-white break-all bg-slate-950 p-2 rounded-lg border border-slate-800">
|
||||
{generatedAppPass}
|
||||
</code>
|
||||
<div className="text-[10px] text-emerald-400">{t("ui.copyPasswordNow")}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={createAppPassword} className="flex gap-2 mb-4">
|
||||
<form onSubmit={createAppPassword} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newAppPassLabel}
|
||||
onChange={(e) => setNewAppPassLabel(e.target.value)}
|
||||
placeholder="Thunderbird"
|
||||
className="flex-1 px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
|
||||
placeholder="Thunderbird / Outlook Mobile"
|
||||
className="flex-1 px-3.5 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium"
|
||||
>
|
||||
<Button type="submit" variant="primary" size="sm">
|
||||
{t("settings.generateAppPassword")}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -527,60 +539,62 @@ export default function UserSettingsPage() {
|
||||
<div className="text-xs text-slate-500 italic">{t("ui.noAppPasswords")}</div>
|
||||
) : (
|
||||
appPasswords.map((ap) => (
|
||||
<div key={ap.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs">
|
||||
<div key={ap.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
|
||||
<div>
|
||||
<span className="font-bold text-slate-200">{ap.label}</span>
|
||||
<span className="text-[10px] text-slate-500 ml-2">
|
||||
{ap.created_at ? new Date(ap.created_at).toLocaleDateString() : ""}
|
||||
</span>
|
||||
</div>
|
||||
<button type="button" onClick={() => void revokeAppPassword(ap.id)} className="text-red-400 hover:underline">
|
||||
{t("common.delete")}
|
||||
<button type="button" onClick={() => void revokeAppPassword(ap.id)} className="text-rose-400 hover:text-rose-300 p-1">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* ACTIVE SESSIONS - revoking one takes effect on the next request */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-bold text-white">{t("ui.activeSessions")}</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void revokeOtherSessions()}
|
||||
className="text-xs px-3 py-1.5 rounded-lg border border-slate-700 text-slate-300 hover:text-white"
|
||||
>
|
||||
{/* ACTIVE SESSIONS */}
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Monitor className="w-5 h-5 text-indigo-400" />
|
||||
{t("ui.activeSessions")}
|
||||
</h2>
|
||||
<Button variant="ghost" size="sm" onClick={() => void revokeOtherSessions()}>
|
||||
{t("ui.signOutOthers")}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{sessions.map((session) => (
|
||||
<div key={session.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs">
|
||||
<div key={session.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
|
||||
<div className="min-w-0">
|
||||
<div className="text-slate-200 truncate">
|
||||
<div className="text-slate-200 truncate font-mono">
|
||||
{session.ip_address ?? "-"}
|
||||
<span className="text-[10px] text-slate-500 ml-2 uppercase">{session.surface}</span>
|
||||
<span className="text-[10px] text-slate-500 ml-2 uppercase font-sans font-bold">{session.surface}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-slate-500 truncate">{session.user_agent ?? ""}</div>
|
||||
</div>
|
||||
{session.current ? (
|
||||
<span className="text-[10px] text-emerald-400">{t("ui.currentSession")}</span>
|
||||
<Badge variant="success">{t("ui.currentSession")}</Badge>
|
||||
) : (
|
||||
<button type="button" onClick={() => void revokeSession(session.id)} className="text-red-400 hover:underline">
|
||||
{t("common.delete")}
|
||||
<button type="button" onClick={() => void revokeSession(session.id)} className="text-rose-400 hover:text-rose-300 p-1">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* PASSWORD CHANGE - takes every other session down with it */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<h2 className="text-lg font-bold text-white mb-4">{t("ui.changePassword")}</h2>
|
||||
{/* PASSWORD CHANGE */}
|
||||
<Card className="space-y-4">
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<Lock className="w-5 h-5 text-indigo-400" />
|
||||
{t("ui.changePassword")}
|
||||
</h2>
|
||||
<form onSubmit={changePassword} className="space-y-3">
|
||||
<input
|
||||
type="password"
|
||||
@@ -588,7 +602,7 @@ export default function UserSettingsPage() {
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
placeholder={t("ui.currentPassword")}
|
||||
required
|
||||
className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
|
||||
className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
@@ -597,13 +611,13 @@ export default function UserSettingsPage() {
|
||||
placeholder={t("ui.newPassword")}
|
||||
minLength={12}
|
||||
required
|
||||
className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white"
|
||||
className="w-full px-3.5 py-2.5 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<button type="submit" className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium">
|
||||
<Button type="submit" variant="primary" size="sm">
|
||||
{t("common.save")}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user