Termix/src/ui/User/PasswordReset.tsx

import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
import {Key} from "lucide-react";
import React, {useState} from "react";
import {completePasswordReset, initiatePasswordReset, verifyPasswordResetCode} from "@/ui/main-axios.ts";
import {Label} from "@/components/ui/label.tsx";
import {Input} from "@/components/ui/input.tsx";
import {Button} from "@/components/ui/button.tsx";
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
import {toast} from "sonner";
import {useTranslation} from "react-i18next";

interface PasswordResetProps {
    userInfo: {
        username: string;
        is_admin: boolean;
        is_oidc: boolean;
        totp_enabled: boolean;
    }
}

export function PasswordReset({userInfo}: PasswordResetProps) {
    const {t} = useTranslation();
    const [error, setError] = useState<string | null>(null);

    const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate");
    const [resetCode, setResetCode] = useState("");
    const [newPassword, setNewPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [tempToken, setTempToken] = useState("");
    const [resetLoading, setResetLoading] = useState(false);

    async function handleInitiatePasswordReset() {
        setError(null);
        setResetLoading(true);
        try {
            const result = await initiatePasswordReset(userInfo.username);
            setResetStep("verify");
            setError(null);
        } catch (err: any) {
            setError(err?.response?.data?.error || err?.message || t('common.failedToInitiatePasswordReset'));
        } finally {
            setResetLoading(false);
        }
    }

    function resetPasswordState() {
        setResetStep("initiate");
        setResetCode("");
        setNewPassword("");
        setConfirmPassword("");
        setTempToken("");
        setError(null);
    }

    async function handleVerifyResetCode() {
        setError(null);
        setResetLoading(true);
        try {
            const response = await verifyPasswordResetCode(userInfo.username, resetCode);
            setTempToken(response.tempToken);
            setResetStep("newPassword");
            setError(null);
        } catch (err: any) {
            setError(err?.response?.data?.error || t('common.failedToVerifyResetCode'));
        } finally {
            setResetLoading(false);
        }
    }

    async function handleCompletePasswordReset() {
        setError(null);
        setResetLoading(true);

        if (newPassword !== confirmPassword) {
            setError(t('common.passwordsDoNotMatch'));
            setResetLoading(false);
            return;
        }

        if (newPassword.length < 6) {
            setError(t('common.passwordMinLength'));
            setResetLoading(false);
            return;
        }

        try {
            await completePasswordReset(userInfo.username, tempToken, newPassword);

            toast.success(t('common.passwordResetSuccess'));
            resetPasswordState();
        } catch (err: any) {
            setError(err?.response?.data?.error || t('common.failedToCompletePasswordReset'));
        } finally {
            setResetLoading(false);
        }
    }

    const Spinner = (
        <svg className="animate-spin mr-2 h-4 w-4 text-white inline-block" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
        </svg>
    );

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <Key className="w-5 h-5"/>
                    {t('common.password')}
                </CardTitle>
                <CardDescription>
                    {t('common.changeAccountPassword')}
                </CardDescription>
            </CardHeader>
            <CardContent>
                <>
                    {resetStep === "initiate" && (
                        <>
                            <div className="flex flex-col gap-4">
                                <Button
                                    type="button"
                                    className="w-full h-11 text-base font-semibold"
                                    disabled={resetLoading || !userInfo.username.trim()}
                                    onClick={handleInitiatePasswordReset}
                                >
                                    {resetLoading ? Spinner : t('common.sendResetCode')}
                                </Button>
                            </div>
                        </>
                    )}

                    {resetStep === "verify" && (
                        <>
                            <div className="text-center text-muted-foreground mb-4">
                                <p>{t('common.enterSixDigitCode')} <strong>{userInfo.username}</strong></p>
                            </div>
                            <div className="flex flex-col gap-4">
                                <div className="flex flex-col gap-2">
                                    <Label htmlFor="reset-code">{t('common.resetCode')}</Label>
                                    <Input
                                        id="reset-code"
                                        type="text"
                                        required
                                        maxLength={6}
                                        className="h-11 text-base text-center text-lg tracking-widest"
                                        value={resetCode}
                                        onChange={e => setResetCode(e.target.value.replace(/\D/g, ''))}
                                        disabled={resetLoading}
                                        placeholder={t('placeholders.enterCode')}
                                    />
                                </div>
                                <Button
                                    type="button"
                                    className="w-full h-11 text-base font-semibold"
                                    disabled={resetLoading || resetCode.length !== 6}
                                    onClick={handleVerifyResetCode}
                                >
                                    {resetLoading ? Spinner : t('common.verifyCode')}
                                </Button>
                                <Button
                                    type="button"
                                    variant="outline"
                                    className="w-full h-11 text-base font-semibold"
                                    disabled={resetLoading}
                                    onClick={() => {
                                        setResetStep("initiate");
                                        setResetCode("");
                                    }}
                                >
                                    {t('common.back')}
                                </Button>
                            </div>
                        </>
                    )}

                    {resetStep === "newPassword" && (
                        <>
                            <div className="text-center text-muted-foreground mb-4">
                                <p>{t('common.enterNewPassword')} <strong>{userInfo.username}</strong></p>
                            </div>
                            <div className="flex flex-col gap-5">
                                <div className="flex flex-col gap-2">
                                    <Label htmlFor="new-password">{t('common.newPassword')}</Label>
                                    <Input
                                        id="new-password"
                                        type="password"
                                        required
                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                        value={newPassword}
                                        onChange={e => setNewPassword(e.target.value)}
                                        disabled={resetLoading}
                                        autoComplete="new-password"
                                    />
                                </div>
                                <div className="flex flex-col gap-2">
                                    <Label htmlFor="confirm-password">{t('common.confirmPassword')}</Label>
                                    <Input
                                        id="confirm-password"
                                        type="password"
                                        required
                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                        value={confirmPassword}
                                        onChange={e => setConfirmPassword(e.target.value)}
                                        disabled={resetLoading}
                                        autoComplete="new-password"
                                    />
                                </div>
                                <Button
                                    type="button"
                                    className="w-full h-11 text-base font-semibold"
                                    disabled={resetLoading || !newPassword || !confirmPassword}
                                    onClick={handleCompletePasswordReset}
                                >
                                    {resetLoading ? Spinner : t('common.resetPassword')}
                                </Button>
                                <Button
                                    type="button"
                                    variant="outline"
                                    className="w-full h-11 text-base font-semibold"
                                    disabled={resetLoading}
                                    onClick={() => {
                                        setResetStep("verify");
                                        setNewPassword("");
                                        setConfirmPassword("");
                                    }}
                                >
                                    {t('common.back')}
                                </Button>
                            </div>
                        </>
                    )}
                    {error && (
                        <Alert variant="destructive" className="mt-4">
                            <AlertTitle>{t('common.error')}</AlertTitle>
                            <AlertDescription>{error}</AlertDescription>
                        </Alert>
                    )}
                </>
            </CardContent>
        </Card>
    )
}