feat(platform): Create ui link for resend otp (#489)

Co-authored-by: rajdip-b <agentR47@gmail.com>

apps/platform/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: ['custom/next'],
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module'
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 0,
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/space-before-function-paren': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    'space-before-function-paren': 'off',
+    '@typescript-eslint/member-delimiter-style': 'off'
+  }
+}

apps/platform/src/app/auth/otp/page.tsx

@@ -19,13 +19,15 @@ import {
 import { authEmailAtom } from '@/store'
 import type { User } from '@/types'
 import { zUser } from '@/types'
+import ControllerInstance from '@/lib/controller-instance'
 
 export default function AuthOTPPage(): React.JSX.Element {
   const email = useAtomValue(authEmailAtom)
 
   const [otp, setOtp] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [isInvalidOtp, setIsInvalidOtp] = useState<boolean>(false)
+  const [isLoadingRefresh, setIsLoadingRefresh] = useState<boolean>(false)
 
   const router = useRouter()
 
@@ -88,7 +90,30 @@ export default function AuthOTPPage(): React.JSX.Element {
       }
     }
   }
+  const handleResendOtp = async (userEmail: string): Promise<void> => {
+    try {
+      setIsLoadingRefresh(true)
 
+      const { error, success } =
+        await ControllerInstance.getInstance().authController.resendOTP({
+          userEmail: encodeURIComponent(userEmail)
+        })
+      if (success) {
+        toast.success('OTP successfully sent to your email')
+        setIsLoadingRefresh(false)
+      } else {
+        // eslint-disable-next-line no-console -- we need to log the error
+        console.log(error)
+        toast.error("Couldn't send OTP, too many requests")
+        setIsLoadingRefresh(false)
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console -- we need to log the error
+      console.error(`Failed to send OTP: ${error}`)
+      toast.error("Couldn't send OTP .")
+      setIsLoadingRefresh(false)
+    }
+  }
   return (
     <main className="flex h-dvh items-center justify-center justify-items-center px-4">
       <div className="flex flex-col gap-6">
@@ -144,6 +169,28 @@ export default function AuthOTPPage(): React.JSX.Element {
             >
               {isLoading ? <LoadingSVG className="w-10" /> : 'Verify'}
             </Button>
+            <div className="space-x-reverse-2 flex items-center justify-center text-[#71717A]">
+              <span>Didn’t receive OTP?</span>
+              <span>
+                {isLoadingRefresh ? (
+                  <span>
+                    <LoadingSVG className="h-10 w-10" />
+                  </span>
+                ) : (
+                  <Button
+                    className="text-[#71717A]"
+                    disabled={isLoading}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      void handleResendOtp(email)
+                    }}
+                    variant="link"
+                  >
+                    Resend OTP
+                  </Button>
+                )}
+              </span>
+            </div>
           </form>
         </div>
       </div>

apps/platform/src/lib/controller-instance.ts

@@ -0,0 +1,31 @@
+import { AuthController } from '@keyshade/api-client'
+
+export default class ControllerInstance {
+  private static instance: ControllerInstance | null
+
+  private _authController: AuthController | null = null
+
+  get authController(): AuthController {
+    if (!this._authController) {
+      throw new Error('ControllerInstance not initialized')
+    }
+    return this._authController
+  }
+
+  static initialize(baseUrl: string): void {
+    if (!ControllerInstance.instance) {
+      const instance = new ControllerInstance()
+
+      instance._authController = new AuthController(baseUrl)
+
+      ControllerInstance.instance = instance
+    }
+  }
+
+  static getInstance(): ControllerInstance {
+    if (!ControllerInstance.instance) {
+      throw new Error('ControllerInstance not initialized')
+    }
+    return ControllerInstance.instance
+  }
+}

packages/api-client/src/controllers/auth.ts

@@ -0,0 +1,27 @@
+import {
+  ResendOTPResponse,
+  ResendOTPRequest
+} from '@api-client/types/auth.types'
+import { APIClient } from '@api-client/core/client'
+import { parseResponse } from '@api-client/core/response-parser'
+import { ClientResponse } from '@api-client/types/index.types'
+
+export default class AuthController {
+  private apiClient: APIClient
+
+  constructor(private readonly backendURL: string) {
+    this.apiClient = new APIClient(this.backendURL)
+  }
+
+  async resendOTP(
+    request: ResendOTPRequest,
+    headers?: Record<string, string>
+  ): Promise<ClientResponse<ResendOTPResponse>> {
+    const response = await this.apiClient.post(
+      `/api/auth/resend-otp/${request.userEmail}`,
+      request,
+      headers
+    )
+    return await parseResponse<ResendOTPResponse>(response)
+  }
+}

packages/api-client/src/index.ts

@@ -7,7 +7,7 @@ import VariableController from '@api-client/controllers/variable'
 import WorkspaceController from '@api-client/controllers/workspace'
 import WorkspaceRoleController from '@api-client/controllers/workspace-role'
 import WorkspaceMembershipController from '@api-client/controllers/workspace-membership'
-
+import AuthController from '@api-client/controllers/auth'
 export {
   EnvironmentController,
   SecretController,
@@ -17,5 +17,6 @@ export {
   VariableController,
   WorkspaceController,
   WorkspaceRoleController,
-  WorkspaceMembershipController
+  WorkspaceMembershipController,
+  AuthController
 }

packages/api-client/src/types/auth.types.ts

@@ -0,0 +1,4 @@
+export interface ResendOTPRequest {
+  userEmail: string
+}
+export interface ResendOTPResponse {}