From 4069a3f88fdd7f50445aacd29b071033ffbba6d0 Mon Sep 17 00:00:00 2001
From: Rameez Saiyid <rsaiyid@roblox.com>
Date: Fri, 17 Nov 2023 03:20:41 -0800
Subject: [PATCH] add button, types, sb send otp

---
 .../components/Auth/interfaces/VerifyOtp.tsx  | 41 +++++++++++++++----
 packages/shared/src/localization/en.json      |  4 +-
 packages/shared/src/types.ts                  |  2 +
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/Auth/interfaces/VerifyOtp.tsx b/packages/react/src/components/Auth/interfaces/VerifyOtp.tsx
index 44353ce0..8a31a74d 100644
--- a/packages/react/src/components/Auth/interfaces/VerifyOtp.tsx
+++ b/packages/react/src/components/Auth/interfaces/VerifyOtp.tsx
@@ -36,29 +36,46 @@ function VerifyOtp({
   const [token, setToken] = useState('')
   const [error, setError] = useState('')
   const [message, setMessage] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [loadingOtp, setLoadingOtp] = useState(false)
+  const [loadingVerify, setLoadingVerify] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
     setMessage('')
-    setLoading(true)
+    setLoadingVerify(true)
 
-    let verifyOpts: VerifyOtpParams = {
+    let verifyOtps: VerifyOtpParams = {
       email,
       token,
       type: otpType as EmailOtpType,
     }
     if (['sms', 'phone_change'].includes(otpType)) {
-      verifyOpts = {
+      verifyOtps = {
         phone,
         token,
         type: otpType as MobileOtpType,
       }
     }
-    const { error } = await supabaseClient.auth.verifyOtp(verifyOpts)
+    const { error } = await supabaseClient.auth.verifyOtp(verifyOtps)
     if (error) setError(error.message)
-    setLoading(false)
+    setLoadingVerify(false)
+  }
+
+  const sendOtp = async () => {
+    setLoadingOtp(true)
+
+    let verifyOtps: VerifyOtpParams = {
+      email,
+    }
+    if (['sms', 'phone_change'].includes(otpType)) {
+      verifyOtps = {
+        phone,
+      }
+    }
+    const { error } = await supabaseClient.auth.signInWithOtp(verifyOtps)
+    if (error) setError(error.message)
+    setLoadingOtp(false)
   }
 
   const labels = i18n?.verify_otp
@@ -101,6 +118,14 @@ function VerifyOtp({
             />
           </div>
         )}
+        <Button
+          color="secondary"
+          onClick={sendOtp}
+          loading={loadingOtp}
+          appearance={appearance}
+        >
+          {loadingOtp ? labels?.sending_button_label : labels?.send_button_label}
+        </Button>
         <div>
           <Label htmlFor="token" appearance={appearance}>
             {labels?.token_input_label}
@@ -119,10 +144,10 @@ function VerifyOtp({
         <Button
           color="primary"
           type="submit"
-          loading={loading}
+          loading={loadingVerify}
           appearance={appearance}
         >
-          {loading ? labels?.loading_button_label : labels?.button_label}
+          {loadingVerify ? labels?.loading_button_label : labels?.button_label}
         </Button>
         {showLinks && (
           <Anchor
diff --git a/packages/shared/src/localization/en.json b/packages/shared/src/localization/en.json
index c1824c2a..9e27dca2 100644
--- a/packages/shared/src/localization/en.json
+++ b/packages/shared/src/localization/en.json
@@ -52,6 +52,8 @@
     "token_input_label": "Token",
     "token_input_placeholder": "Your Otp token",
     "button_label": "Verify token",
-    "loading_button_label": "Signing in ..."
+    "loading_button_label": "Signing in ...",
+    "send_button_label": "Send OTP",
+    "sending_button_label": "Sending OTP ...",
   }
 }
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index d578b6dd..034d98f1 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -164,5 +164,7 @@ export type I18nVariables = {
     token_input_placeholder?: string
     button_label?: string
     loading_button_label?: string
+    send_button_label?: string
+    sending_button_label?: string
   }
 }