feat: verification pages

web/src/pages/Verify/Email/index.tsx

@@ -0,0 +1,49 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useAuth } from "@/store/auth";
+import maskEmail from "@/util/maskEmail";
+import { useCallback, useMemo, useState, type FC } from "react";
+import { useNavigate } from "react-router";
+
+const VerifyEmailPage: FC = () => {
+  const profile = useAuth((s) => s.profile);
+  const navigate = useNavigate();
+
+  const [email, setEmail] = useState("");
+  const matches = useMemo(
+    () => email === profile?.email,
+    [email, profile?.email],
+  );
+
+  const handleNext = useCallback(() => {
+    if (matches) {
+      navigate("/verify/email/otp");
+    }
+  }, [matches, navigate]);
+
+  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}
+      >
+        Next
+      </Button>
+    </div>
+  );
+};
+
+export default VerifyEmailPage;