71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import { changePasswordAction } from "@/app/actions/auth";
|
|
import { Flash } from "@/components/flash";
|
|
import { requireSessionUser } from "@/lib/auth";
|
|
import { queryMessage } from "@/lib/format";
|
|
|
|
export const runtime = "nodejs";
|
|
|
|
export default async function AccountPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
|
}) {
|
|
const user = await requireSessionUser();
|
|
const params = await searchParams;
|
|
|
|
return (
|
|
<>
|
|
<div className="breadcrumbs">
|
|
<Link href="/">Übersicht</Link>
|
|
<span>/</span>
|
|
Konto
|
|
</div>
|
|
<div className="page-heading">
|
|
<div>
|
|
<p className="eyebrow">Mein Zugang</p>
|
|
<h1>Konto</h1>
|
|
</div>
|
|
</div>
|
|
<Flash error={queryMessage(params, "error")} success={queryMessage(params, "success")} />
|
|
|
|
<section className="detail-grid">
|
|
<div className="panel">
|
|
<h3 className="panel-title">Profil</h3>
|
|
<dl className="data-list">
|
|
<div><dt>Name</dt><dd>{user.name}</dd></div>
|
|
<div><dt>E-Mail</dt><dd className="mono">{user.email}</dd></div>
|
|
<div><dt>Rolle</dt><dd>{user.role === "admin" ? "Administrator" : "Mitglied"}</dd></div>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section-block">
|
|
<div className="section-heading">
|
|
<div>
|
|
<p className="eyebrow">Sicherheit</p>
|
|
<h2>Passwort ändern</h2>
|
|
</div>
|
|
</div>
|
|
<form action={changePasswordAction} className="panel form-grid">
|
|
<label className="span-2">
|
|
Aktuelles Passwort *
|
|
<input name="current_password" type="password" required autoComplete="current-password" />
|
|
</label>
|
|
<label>
|
|
Neues Passwort * (min. 10 Zeichen)
|
|
<input name="new_password" type="password" required minLength={10} maxLength={200} autoComplete="new-password" />
|
|
</label>
|
|
<label>
|
|
Neues Passwort bestätigen *
|
|
<input name="confirm_password" type="password" required minLength={10} maxLength={200} autoComplete="new-password" />
|
|
</label>
|
|
<div className="form-actions span-2">
|
|
<button className="button button-primary" type="submit">Passwort ändern</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|