fix(ts): refactor codebase for capacitor setup

app/(auth)/login/page.tsx

@@ -9,28 +9,39 @@ import FormField from "@/components/FormField";
 import { login } from "@/lib/auth";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import { useAuth } from "@/context/AuthContext";
+import { LoginForm } from "@/types/auth";
 
-const page = () => {
+const LoginPage = () => {
   const router = useRouter();
   const { setToken } = useAuth();
-  const [form, setForm] = useState({
+
+  const [form, setForm] = useState<LoginForm>({
     email: "",
     password: "",
   });
-  const [error, setError] = useState(null);
+
+  const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  // For Rafeed
-  // Function to login a user. I've kept it in a barebones form right now, but you can just call the login function from  /lib/auth.ts and pass on the form.
   const loginUser = async () => {
     try {
       setIsLoading(true);
       setError(null);
-      await login(form, setToken); // Call the login function
-      router.push("/home"); // Redirect on successful login
-    } catch (error) {
-      console.log(error);
-      setError(error.message); // Handle error messages
+      await login(form, setToken);
+      router.push("/home");
+    } catch (err: unknown) {
+      console.error(err);
+
+      if (
+        typeof err === "object" &&
+        err !== null &&
+        "message" in err &&
+        typeof err.message === "string"
+      ) {
+        setError(err.message);
+      } else {
+        setError("An unexpected error occurred.");
+      }
     } finally {
       setIsLoading(false);
     }
@@ -63,13 +74,17 @@ const page = () => {
                   title="Email Address"
                   value={form.email}
                   placeholder="Enter your email address..."
-                  handleChangeText={(e) => setForm({ ...form, email: e })}
+                  handleChangeText={(value) =>
+                    setForm({ ...form, email: value })
+                  }
                 />
                 <FormField
                   title="Password"
                   value={form.password}
                   placeholder="Enter a password"
-                  handleChangeText={(e) => setForm({ ...form, password: e })}
+                  handleChangeText={(value) =>
+                    setForm({ ...form, password: value })
+                  }
                 />
               </div>
 
@@ -94,7 +109,7 @@ const page = () => {
               className="text-center mb-[70px]"
               style={{ fontFamily: "Montserrat, sans-serif" }}
             >
-              Don't have an account?{" "}
+              Don&apos;t have an account?{" "}
               <Link href="/register" className="text-[#276ac0] hover:underline">
                 Register here.
               </Link>
@@ -106,4 +121,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default LoginPage;

app/(auth)/register/page.tsx

@@ -10,11 +10,18 @@ import { useAuth } from "@/context/AuthContext";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import FormField from "@/components/FormField";
 import DestructibleAlert from "@/components/DestructibleAlert";
+import { RegisterForm } from "@/types/auth";
+
+interface CustomError extends Error {
+  response?: {
+    detail?: string;
+  };
+}
 
 export default function RegisterPage() {
   const { setToken } = useAuth();
   const router = useRouter();
-  const [form, setForm] = useState({
+  const [form, setForm] = useState<RegisterForm>({
     name: "",
     institution: "",
     sscRoll: "",
@@ -25,13 +32,12 @@ export default function RegisterPage() {
   });
   const [error, setError] = useState<string | null>(null);
 
-  const handleError = (error: any) => {
+  const handleError = (error: { detail: string }) => {
     if (error?.detail) {
       const match = error.detail.match(/Key \((.*?)\)=\((.*?)\)/);
       if (match) {
         const field = match[1];
-        const value = match[2];
-        return `The ${field} already exists. Please use a different value.`;
+        return `The ${field} already exists. Please try again.`;
       }
     }
     return "An unexpected error occurred. Please try again.";
@@ -56,16 +62,30 @@ export default function RegisterPage() {
       setError(validationError);
       return;
     }
+
     try {
       await register(form, setToken);
       router.push("/home");
-    } catch (error: any) {
-      console.error("Error:", error.response || error.message);
-      if (error.response?.detail) {
-        const decodedError = handleError({ detail: error.response.detail });
-        setError(decodedError);
+    } catch (error) {
+      // Type guard for built-in Error type
+      if (error instanceof Error) {
+        console.error(
+          "Error:",
+          (error as CustomError).response || error.message
+        );
+
+        const response = (error as CustomError).response;
+
+        if (response?.detail) {
+          const decodedError = handleError({ detail: response.detail });
+          setError(decodedError);
+        } else {
+          setError(error.message || "An unexpected error occurred.");
+        }
       } else {
-        setError(error.message || "An unexpected error occurred.");
+        // Fallback for non-standard errors
+        console.error("Unexpected error:", error);
+        setError("An unexpected error occurred.");
       }
     }
   };
@@ -148,7 +168,7 @@ export default function RegisterPage() {
             </button>
 
             <p className="text-center text-sm">
-              Already have an account?{" "}
+              Already have an account?
               <Link href="/login" className="text-blue-600">
                 Login here
               </Link>