feat: custom password reset flow (token-based, Appwrite Messaging)

- db: new password_resets table (email, userId, tokenHash, expiresAt, usedAt)
- lib: password-reset-actions.ts — requestPasswordResetAction, verifyResetToken, resetPasswordAction
- lib: Messaging added to createAdminClient
- page: /reset-password — validates token server-side, shows form or error card
- page: /forgot-password — now uses requestPasswordResetAction (custom flow)
- page: /sign-in — shows success banner after ?reset=success redirect
This commit is contained in:
egecankomur
2026-05-12 16:49:04 +03:00
parent 95e30a74c7
commit a3bcb464ea
8 changed files with 298 additions and 6 deletions
@@ -9,11 +9,11 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { forgotPasswordAction } from "@/lib/appwrite/auth-actions";
import { requestPasswordResetAction } from "@/lib/appwrite/password-reset-actions";
import { initialAuthState } from "@/lib/appwrite/auth-types";
export function ForgotPasswordForm1({ className, ...props }: React.ComponentProps<"div">) {
const [state, formAction, isPending] = useActionState(forgotPasswordAction, initialAuthState);
const [state, formAction, isPending] = useActionState(requestPasswordResetAction, initialAuthState);
return (
<div className={cn("flex flex-col gap-6", className)} {...props}>
@@ -0,0 +1,93 @@
"use client";
import Link from "next/link";
import { useActionState } from "react";
import { ArrowLeft, CircleNotch, ShieldCheck } from "@/lib/icons";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { resetPasswordAction } from "@/lib/appwrite/password-reset-actions";
import { initialAuthState } from "@/lib/appwrite/auth-types";
interface Props extends React.ComponentProps<"div"> {
token: string;
}
export function ResetPasswordForm({ token, className, ...props }: Props) {
const [state, formAction, isPending] = useActionState(resetPasswordAction, initialAuthState);
return (
<div className={cn("flex flex-col gap-6", className)} {...props}>
<Card>
<CardHeader className="text-center">
<div className="bg-primary/10 text-primary mx-auto mb-2 flex size-12 items-center justify-center rounded-full">
<ShieldCheck className="size-6" />
</div>
<CardTitle className="text-xl">Yeni şifre belirle</CardTitle>
<CardDescription>
Kod doğrulandı. Yeni şifrenizi girin.
</CardDescription>
</CardHeader>
<CardContent>
<form action={formAction} className="flex flex-col gap-4">
<input type="hidden" name="token" value={token} />
<div className="grid gap-3">
<Label htmlFor="password">Yeni şifre</Label>
<Input
id="password"
name="password"
type="password"
placeholder="En az 8 karakter"
autoComplete="new-password"
required
minLength={8}
autoFocus
/>
</div>
<div className="grid gap-3">
<Label htmlFor="confirmPassword">Şifre tekrar</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="Şifreyi tekrar girin"
autoComplete="new-password"
required
/>
</div>
{state.error && (
<p className="text-destructive text-center text-sm" role="alert">
{state.error}
</p>
)}
<Button type="submit" className="w-full" disabled={isPending}>
{isPending ? (
<>
<CircleNotch className="size-4 animate-spin" />
Güncelleniyor...
</>
) : (
"Şifreyi güncelle"
)}
</Button>
<Link
href="/sign-in"
className="text-muted-foreground hover:text-foreground flex items-center justify-center gap-1 text-sm underline-offset-4 hover:underline"
>
<ArrowLeft className="size-3.5" />
Giriş sayfasına dön
</Link>
</form>
</CardContent>
</Card>
</div>
);
}
+58
View File
@@ -0,0 +1,58 @@
import Link from "next/link";
import { XCircle } from "@/lib/icons";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { verifyResetToken } from "@/lib/appwrite/password-reset-actions";
import { ResetPasswordForm } from "./components/reset-password-form";
interface Props {
searchParams: Promise<{ token?: string }>;
}
export default async function ResetPasswordPage({ searchParams }: Props) {
const { token } = await searchParams;
if (!token) {
return <InvalidToken message="Geçersiz bağlantı. Yeni bir sıfırlama kodu talep edin." />;
}
const { valid } = await verifyResetToken(token);
if (!valid) {
return <InvalidToken message="Bu kod geçersiz veya süresi dolmuş. Yeni bir sıfırlama kodu talep edin." />;
}
return (
<div className="flex min-h-svh items-center justify-center p-6">
<div className="w-full max-w-sm">
<ResetPasswordForm token={token} />
</div>
</div>
);
}
function InvalidToken({ message }: { message: string }) {
return (
<div className="flex min-h-svh items-center justify-center p-6">
<div className="w-full max-w-sm">
<Card>
<CardHeader className="text-center">
<div className="text-destructive mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-red-50">
<XCircle className="size-6" />
</div>
<CardTitle className="text-xl">Geçersiz kod</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center gap-4 text-center">
<p className="text-muted-foreground text-sm">{message}</p>
<Link
href="/forgot-password"
className="text-primary text-sm underline underline-offset-4"
>
Yeni kod talep et
</Link>
</CardContent>
</Card>
</div>
</div>
);
}
@@ -14,8 +14,9 @@ import { initialAuthState } from "@/lib/appwrite/auth-types";
export function LoginForm1({
className,
inviteCode,
passwordReset,
...props
}: React.ComponentProps<"div"> & { inviteCode?: string }) {
}: React.ComponentProps<"div"> & { inviteCode?: string; passwordReset?: boolean }) {
const [state, formAction, isPending] = useActionState(signInAction, initialAuthState);
return (
@@ -123,6 +124,12 @@ export function LoginForm1({
</p>
</div>
{passwordReset && (
<p className="rounded-md border bg-green-50 px-3 py-2 text-center text-xs text-green-700 dark:bg-green-950 dark:text-green-300">
Şifreniz güncellendi. Yeni şifrenizle giriş yapabilirsiniz.
</p>
)}
{inviteCode && (
<p className="rounded-md border bg-blue-50 px-3 py-2 text-center text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-300">
Davete katılmak için giriş yapın.
+3 -3
View File
@@ -6,11 +6,11 @@ import { getCurrentUser } from "@/lib/appwrite/server";
export default async function Page({
searchParams,
}: {
searchParams: Promise<{ invite?: string }>;
searchParams: Promise<{ invite?: string; reset?: string }>;
}) {
const { invite } = await searchParams;
const { invite, reset } = await searchParams;
const user = await getCurrentUser();
if (user) redirect(invite ? `/d/${invite}` : "/dashboard");
return <LoginForm1 inviteCode={invite} />;
return <LoginForm1 inviteCode={invite} passwordReset={reset === "success"} />;
}