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;