feat: email verification

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 16, 2024 · 3497623 · 3497623
1 parent ae0dc2c
commit 3497623
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/apps/renderer/src/modules/profile/profile-setting-form.tsx b/apps/renderer/src/modules/profile/profile-setting-form.tsx
@@ -11,6 +11,7 @@ import {
 } from "@follow/components/ui/form/index.jsx"
 import { Input } from "@follow/components/ui/input/index.js"
 import { Label } from "@follow/components/ui/label/index.js"
+import { sendVerificationEmail } from "@follow/shared/auth"
 import { cn } from "@follow/utils/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
@@ -66,6 +67,18 @@ export const ProfileSettingForm = ({
     },
   })
 
+  const verifyEmailMutation = useMutation({
+    mutationFn: async () => {
+      if (!user?.email) return
+      return sendVerificationEmail({
+        email: user.email,
+      })
+    },
+    onSuccess: () => {
+      toast.success(t("profile.email.verification_sent"))
+    },
+  })
+
   function onSubmit(values: z.infer<typeof formSchema>) {
     updateMutation.mutate(values)
   }
@@ -75,7 +88,24 @@ export const ProfileSettingForm = ({
       <form onSubmit={form.handleSubmit(onSubmit)} className={cn("mt-4 space-y-4", className)}>
         <div className="space-y-2">
           <Label>{t("profile.email.label")}</Label>
-          <p className="text-sm text-muted-foreground">{user?.email}</p>
+          <p className="flex gap-2 text-sm text-muted-foreground">
+            {user?.email}
+            <span className={cn(user?.emailVerified ? "text-green-500" : "text-red-500")}>
+              {user?.emailVerified ? t("profile.email.verified") : t("profile.email.unverified")}
+            </span>
+          </p>
+          {!user?.emailVerified && (
+            <Button
+              variant="outline"
+              type="button"
+              isLoading={verifyEmailMutation.isPending}
+              onClick={() => {
+                verifyEmailMutation.mutate()
+              }}
+            >
+              {t("profile.email.send_verification")}
+            </Button>
+          )}
         </div>
         <FormField
           control={form.control}

diff --git a/locales/settings/en.json b/locales/settings/en.json
@@ -263,6 +263,10 @@
   "profile.confirm_password.label": "Confirm Password",
   "profile.current_password.label": "Current Password",
   "profile.email.label": "Email",
+  "profile.email.send_verification": "Send Verification Email",
+  "profile.email.unverified": "Unverified",
+  "profile.email.verification_sent": "Email verification sent",
+  "profile.email.verified": "Verified",
   "profile.handle.description": "Your unique identifier.",
   "profile.handle.label": "Handle",
   "profile.name.description": "Your public display name.",

diff --git a/packages/components/src/ui/button/index.tsx b/packages/components/src/ui/button/index.tsx
@@ -216,29 +216,30 @@ export const Button = React.forwardRef<
         buttonClassName?: string
       }
   >
->(({ className, buttonClassName, isLoading, variant, status, ...props }, ref) => {
+>(({ className, buttonClassName, disabled, isLoading, variant, status, ...props }, ref) => {
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = React.useCallback(
     (e) => {
-      if (isLoading || props.disabled) {
+      if (isLoading || disabled) {
         e.preventDefault()
         return
       }
 
       props.onClick?.(e)
     },
-    [isLoading, props],
+    [disabled, isLoading, props],
   )
   return (
     <MotionButtonBase
       ref={ref}
       className={cn(
         styledButtonVariant({
           variant,
-          status: isLoading || props.disabled ? "disabled" : undefined,
+          status: isLoading || disabled ? "disabled" : undefined,
         }),
         className,
         buttonClassName,
       )}
+      disabled={isLoading || disabled}
       {...props}
       onClick={handleClick}
     >

diff --git a/packages/shared/src/auth.ts b/packages/shared/src/auth.ts
@@ -39,6 +39,7 @@ export const {
   linkSocial,
   listAccounts,
   resetPassword,
+  sendVerificationEmail,
   signIn,
   signOut,
   signUp,

diff --git a/packages/shared/src/hono.ts b/packages/shared/src/hono.ts
@@ -9038,6 +9038,14 @@ declare const auth: {
                 token: string;
             }): Promise<void>;
         };
+        emailVerification: {
+            sendOnSignUp: true;
+            sendVerificationEmail({ user, url }: {
+                user: better_auth.User;
+                url: string;
+                token: string;
+            }): Promise<void>;
+        };
         plugins: ({
             id: "custom-session";
             endpoints: {