:explodes:

Author: sahana

bun.lock

@@ -11,21 +11,21 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "next": "15.5.7",
+    "next": "^16.0.10",
     "next-auth": "^4.24.13",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-icons": "^5.5.0",
-    "swr": "^2.3.7"
+    "swr": "^2.3.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/bun": "^1.3.4",
-    "@types/node": "^20.19.26",
+    "@types/node": "^20.19.27",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-config-next": "15.5.6",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3"

package.json

@@ -10,15 +10,20 @@ type LoginResponse = {
 
 export default function LoginPage() {
 
+  const [emailButtonAllow, setEmailButtonAllow] = useState<boolean>(true)
+
   const otpOnClick = async () => {
 
+    setEmailButtonAllow(false)
+
     const email = (document.getElementById('email') as HTMLInputElement).value
 
     if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
       setMessage({
         className: "text-red-500 mb-4 text-center",
         message: "Please enter a valid email address."
       })
+      setEmailButtonAllow(true)
       return;
     } else {
       setMessage({
@@ -46,6 +51,7 @@ export default function LoginPage() {
         message: `An error occurred. Please try again. (code ${response.status})`
       })
     }
+    setEmailButtonAllow(true)
   }
 
   const router = useRouter()
@@ -60,29 +66,31 @@ export default function LoginPage() {
         message: "Please enter a valid 6-digit OTP."
       })
       return;
-    } else {
-      setMessage({
-        className: "hidden",
-        message: ""
-      })
     }
+    setMessage({
+      className: "hidden",
+      message: ""
+    })
 
     const otp = parseInt(otpStr)
 
-    const res = await fetch(apiUrl`api/v1/auth/validate_otp`, {
+    const response = await fetch(apiUrl`api/v1/auth/validate_otp`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ email, otp }),
+      credentials: 'include',
+      body: JSON.stringify({ email, otp })
     })
-
-    if (res.status === 200) {
+    const data = await response.json()
+    if (response.ok) {
       router.push('/dashboard')
-    } else if (res.status === 401) {
+    } else if (response.status == 401) {
       setMessage({
         className: "text-red-500 mb-4 text-center",
-        message: "Invalid OTP. Please try again."
+        message: "Wrong OTP. Please try again."
+      })
+    } else {
+      setMessage({
+        className: "text-red-500 mb-4 text-center",
+        message: data["detail"] || `An error occurred. Please try again. (code ${response.status})`
       })
     }
   }
@@ -109,6 +117,7 @@ export default function LoginPage() {
         />
         <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 w-full"
                 onClick={otpOnClick}
+                disabled={!emailButtonAllow}
         >
           Send OTP
         </button>
@@ -117,14 +126,14 @@ export default function LoginPage() {
         <input type="number"
                id="otp"
                name="otp"
-               className={"bg-gray-100 border-gray-400 text-gray-900 text-2xl text-center rounded-lg w-full [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-moz-appearance:textfield]"}
+               className={"bg-gray-100 border-gray-400 text-gray-900 text-2xl text-center rounded-lg w-full appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-moz-appearance:textfield]"}
                placeholder="674169"
 
         />
-        <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 w-full"
+        <button className="mt-4 px-4 py-2 bg-green-400 text-white rounded-lg hover:bg-green-300 w-full"
                 onClick={validateOnClick}
         >
-          Send OTP
+          Confirm
         </button>
       </div>
     </div>

src/app/login/page.tsx

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "paths": {
       "@/*": [
@@ -32,7 +32,8 @@
     "**/*.ts",
     "**/*.tsx",
     "next-env.d.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"