Merge branch 'keyshade-xyz:develop' into cli/env

.env.example

@@ -48,3 +48,4 @@ DOMAIN=localhost
 FEEDBACK_FORWARD_EMAIL=
 
 BACKEND_URL=http://localhost:4200
+NEXT_PUBLIC_BACKEND_URL=http://localhost:4200

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

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { z } from 'zod'
 import Cookies from 'js-cookie'
+import { toast } from 'sonner'
 import { LoadingSVG } from '@public/svg/shared'
 import { KeyshadeBigSVG } from '@public/svg/auth'
 import { GeistSansFont } from '@/fonts'
@@ -61,6 +62,9 @@ export default function AuthOTPPage(): React.JSX.Element {
         }
       )
       if (response.status === 401) {
+        toast.warning(
+          'The OTP you entered is either incorrect or has expired. Please enter the correct OTP.'
+        )
         setIsLoading(false)
       }
       const data: User = (await response.json()) as User
@@ -108,7 +112,7 @@ export default function AuthOTPPage(): React.JSX.Element {
               <InputOTP
                 maxLength={6}
                 onChange={(otpVal) => {
-                  setOtp(otpVal as string)
+                  setOtp(otpVal)
                 }}
                 pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
                 value={otp}
@@ -133,7 +137,8 @@ export default function AuthOTPPage(): React.JSX.Element {
             <Button
               className="w-full"
               disabled={isLoading}
-              onClick={() => {
+              onClick={(e) => {
+                e.preventDefault()
                 void handleVerifyOTP(email, otp)
               }}
             >

apps/platform/src/components/ui/input-otp.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react'
 import { OTPInput, OTPInputContext } from 'input-otp'
+import type { OTPInputProps } from 'input-otp'
 import { Dot } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
-const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>>(
-  ({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-      className={cn('disabled:cursor-not-allowed', className as string)}
-      containerClassName={cn(
-        'flex items-center justify-center gap-2 has-[:disabled]:opacity-50',
-        containerClassName as string
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-)
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  OTPInputProps
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    className={cn('disabled:cursor-not-allowed', className)}
+    containerClassName={cn(
+      'flex items-center justify-center gap-2 has-[:disabled]:opacity-50',
+      containerClassName
+    )}
+    ref={ref}
+    {...props}
+  />
+))
 InputOTP.displayName = 'InputOTP'
 
 const InputOTPGroup = React.forwardRef<

package.json

@@ -126,7 +126,7 @@
     "db:validate": "pnpm run --filter=api db:validate",
     "db:format": "pnpm run --filter=api db:format",
     "db:reset": "pnpm run --filter=api db:reset",
-    "format": "prettier apps/**/*.{ts,tsx} packages/**/*.{ts,tsx} --write",
+    "format": "prettier apps/**/*.{ts,tsx} packages/**/*.ts --write",
     "prepare": "husky",
     "sourcemaps:api": "turbo run sourcemaps --filter=api",
     "docker:run:web": "docker run --env-file .env --name ks-web --rm -p 3000:3000 ks-web",