feat/clinet: render error msg when email already exists

clients/apps/web/src/components/Form/EmailUpdateForm.tsx

@@ -12,13 +12,19 @@ import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
 interface EmailUpdateformProps {
-  returnTo?: string 
+  returnTo?: string
   onEmailUpdateRequest?: () => void
+  onEmailUpdateExists?: () => void
+  onEmailUpdateForm?: () => void
+  setErr?: (value: string | null) => void
 }
 
 const EmailUpdateForm: React.FC<EmailUpdateformProps> = ({
   returnTo,
-  onEmailUpdateRequest
+  onEmailUpdateRequest,
+  onEmailUpdateExists,
+  onEmailUpdateForm,
+  setErr,
 }) => {
   const form = useForm<{ email: string }>()
   const { control, handleSubmit, setError } = form
@@ -28,13 +34,18 @@ const EmailUpdateForm: React.FC<EmailUpdateformProps> = ({
   const onSubmit: SubmitHandler<{ email: string }> = async ({ email }) => {
     setLoading(true)
     try {
-      sendEmailUpdate(email, returnTo)
+      await sendEmailUpdate(email, returnTo)
       onEmailUpdateRequest?.()
     } catch (e) {
       if (e instanceof ResponseError) {
         const body = await e.response.json()
         if (e.response.status === 422) {
           const validationErrors = body['detail'] as ValidationError[]
+          if (setErr) setErr(body['detail'][0].msg)
+          onEmailUpdateExists?.()
+          setTimeout(() => {
+            onEmailUpdateForm?.()
+          }, 6000)
           setValidationErrors(validationErrors, setError)
         } else if (body['detail']) {
           setError('email', { message: body['detail'] })
@@ -84,4 +95,4 @@ const EmailUpdateForm: React.FC<EmailUpdateformProps> = ({
   )
 }
 
-export default EmailUpdateForm
+export default EmailUpdateForm

clients/apps/web/src/components/Settings/AuthenticationSettings.tsx

@@ -144,9 +144,10 @@ const AuthenticationSettings = () => {
 
   const searchParams = useSearchParams()
   const [updateEmailStage, setUpdateEmailStage] = useState<
-    'off' | 'form' | 'request' | 'verified'
+    'off' | 'form' | 'request' | 'verified' | 'exists'
   >((searchParams.get('update_email') as 'verified' | null) || 'off')
   const [userReloaded, setUserReloaded] = useState(false)
+  const [errMsg, setErrMsg] = useState<string | null>(null)
 
   useEffect(() => {
     if (!userReloaded && updateEmailStage === 'verified') {
@@ -156,7 +157,7 @@ const AuthenticationSettings = () => {
   }, [updateEmailStage, reloadUser, userReloaded])
 
   const updateEmailContent: Record<
-    'off' | 'form' | 'request' | 'verified',
+    'off' | 'form' | 'request' | 'verified' | 'exists',
     React.ReactNode
   > = {
     off: (
@@ -180,6 +181,9 @@ const AuthenticationSettings = () => {
     form: (
       <EmailUpdateForm
         onEmailUpdateRequest={() => setUpdateEmailStage('request')}
+        onEmailUpdateExists={() => setUpdateEmailStage('exists')}
+        onEmailUpdateForm={() => setUpdateEmailStage('form')}
+        setErr={setErrMsg}
       />
     ),
     request: (
@@ -192,6 +196,11 @@ const AuthenticationSettings = () => {
         Your email has been updated!
       </div>
     ),
+    exists: (
+      <div className="text-center text-sm text-red-700 dark:text-red-500">
+        {errMsg}
+      </div>
+    ),
   }
 
   return (

clients/apps/web/src/hooks/emailUpdate.ts

@@ -11,11 +11,11 @@ export const useSendEmailUpdate = () => {
     async (email: string, return_to?: string) => {
       const body: EmailUpdateRequest = {
         email,
-        return_to
+        return_to,
       }
       await api.emailUpdate.requestEmailUpdate({ body })
     },
     [router],
   )
   return func
-}
+}