63 lines
2.8 KiB
TypeScript
63 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { KeyRound } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
import { useAuth } from "@/components/auth";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
const schema = z.object({
|
|
current_password: z.string().min(1, "Aktuelles Passwort erforderlich"),
|
|
new_password: z.string().min(12, "Mindestens 12 Zeichen"),
|
|
new_password_confirmation: z.string().min(12, "Mindestens 12 Zeichen")
|
|
}).refine((values) => values.new_password === values.new_password_confirmation, {
|
|
path: ["new_password_confirmation"],
|
|
message: "Die neuen Passwoerter stimmen nicht ueberein"
|
|
});
|
|
|
|
type SecurityForm = z.infer<typeof schema>;
|
|
|
|
export default function SecurityPage() {
|
|
const { token, refreshUser } = useAuth();
|
|
const [message, setMessage] = useState("");
|
|
const form = useForm<SecurityForm>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { current_password: "", new_password: "", new_password_confirmation: "" }
|
|
});
|
|
|
|
async function onSubmit(values: SecurityForm) {
|
|
await apiFetch("/auth/change-password", token ?? "", { method: "POST", body: JSON.stringify(values) });
|
|
setMessage("Passwort erfolgreich geaendert");
|
|
form.reset();
|
|
refreshUser();
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-xl">
|
|
<header className="mb-6">
|
|
<h1 className="text-3xl font-semibold text-text">Sicherheit</h1>
|
|
<p className="mt-2 text-text-light">Hier aenderst du dein Passwort.</p>
|
|
</header>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 rounded-lg border border-border bg-surface p-6 shadow-soft">
|
|
<label className="block">
|
|
<span className="text-sm font-medium">Aktuelles Passwort</span>
|
|
<input type="password" {...form.register("current_password")} className="mt-2 h-12 w-full rounded-lg border border-border px-4" />
|
|
</label>
|
|
<label className="block">
|
|
<span className="text-sm font-medium">Neues Passwort</span>
|
|
<input type="password" {...form.register("new_password")} className="mt-2 h-12 w-full rounded-lg border border-border px-4" />
|
|
</label>
|
|
<label className="block">
|
|
<span className="text-sm font-medium">Neues Passwort wiederholen</span>
|
|
<input type="password" {...form.register("new_password_confirmation")} className="mt-2 h-12 w-full rounded-lg border border-border px-4" />
|
|
</label>
|
|
{message && <div className="rounded-lg border border-success/30 bg-white p-3 text-sm text-success shadow-soft">{message}</div>}
|
|
<div className="flex justify-end">
|
|
<button type="submit" className="btn btn-primary h-12"><KeyRound className="h-4 w-4" /> Passwort ändern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|