63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { useAuth } from "@/store/auth";
|
|
import { useVerify } from "@/store/verify";
|
|
import maskEmail from "@/util/maskEmail";
|
|
import { useCallback, useEffect, useMemo, useState, type FC } from "react";
|
|
import { useNavigate } from "react-router";
|
|
|
|
const VerifyEmailPage: FC = () => {
|
|
const profile = useAuth((s) => s.profile);
|
|
|
|
const requestOtp = useVerify((s) => s.requestOTP);
|
|
const requesting = useVerify((s) => s.requesting);
|
|
const requested = useVerify((s) => s.requested);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const matches = useMemo(
|
|
() => email === profile?.email,
|
|
[email, profile?.email],
|
|
);
|
|
|
|
const handleNext = useCallback(() => {
|
|
if (matches) {
|
|
requestOtp();
|
|
}
|
|
}, [matches, requestOtp]);
|
|
|
|
useEffect(() => {
|
|
if (requested) {
|
|
navigate("/verify/email/otp");
|
|
}
|
|
}, [navigate, requested]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-stretch gap-2 sm:max-w-sm mx-auto p-4">
|
|
<h1 className="text-xl font-medium dark:text-gray-200">E-Mail Address</h1>
|
|
<p className="text-sm dark:text-gray-400">
|
|
Please fill in your email address used in this account.
|
|
</p>
|
|
<Input
|
|
value={email}
|
|
placeholder={maskEmail(profile?.email ?? "")}
|
|
onChange={(e) => {
|
|
e.preventDefault();
|
|
setEmail(e.target.value);
|
|
}}
|
|
/>
|
|
<Button
|
|
className={`mt-3 ${!matches ? "opacity-60" : ""}`}
|
|
onClick={handleNext}
|
|
disabled={!matches || requesting}
|
|
loading={requesting}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VerifyEmailPage;
|