fix(loginPage): login page hooks form intregation

src/app/(auth)/log-in/page.tsx

@@ -15,6 +15,7 @@ import { useState } from 'react';
 import { loginApi } from "@/services/api/loginApi";
 import { FormControl } from '@mui/material';
 import CustomTextField from "@/ui/CustomTextField";
+import { useRouter } from "next/navigation";
 
 const loginSchema = z.object({
   username: z.string(),
@@ -24,7 +25,7 @@ const loginSchema = z.object({
 type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
-
+  const router = useRouter()
   const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
   });
@@ -36,9 +37,8 @@ export default function LoginPage() {
       const response = await loginApi(data);
       localStorage.setItem('token', response.token);
       localStorage.setItem('refreshToken', response.refreshToken);
-      console.log("🚀 ~ response @@@ @@@ @@@  @@@ @@@@:", response)
 
-      // router.push('/dashboard');
+      router.push('/home');
     } catch (err) {
       setError('Invalid credentials');
     }

src/ui/CustomTextField.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import TextField from '@mui/material/TextField';
 import { Controller } from 'react-hook-form';
+import { styled } from "@mui/material/styles";
 
 interface CustomTextFieldProps {
   name: string;
@@ -12,13 +13,35 @@ interface CustomTextFieldProps {
   helperText?: string;
 }
 
+// Define your styled component
+const CssTextField = styled(TextField)({
+  width: "100%",
+  "& label.Mui-focused": {
+    color: "var(--primary)",
+  },
+  "& .MuiInputBase-root": {
+    borderRadius: 8,
+  },
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: "var(--input-border-default)",
+    },
+    "&:hover fieldset": {
+      borderColor: "var(--input-border-hover)",
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: "var(--primary)",
+    },
+  },
+});
+
 const CustomTextField: React.FC<CustomTextFieldProps> = ({ name, control, label, type = 'text', error, helperText }) => {
   return (
     <Controller
       name={name}
       control={control}
       render={({ field }) => (
-        <TextField
+        <CssTextField
           {...field}
           label={label}
           type={type}

src/ui/CustomizedInputsStyled.tsx

@@ -5,7 +5,6 @@ import { styled } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import { Controller } from 'react-hook-form';
 
 // Define your styled component
 const CssTextField = styled(TextField)({
@@ -33,10 +32,6 @@ type InputType = {
   label: string;
   type: string;
   endAdornmentBoolean?: React.ReactNode;
-  name: string;
-  control: any;
-  error?: boolean;
-  helperText?: string;
 };
 
 // Client component
@@ -44,28 +39,16 @@ export default function CustomizedInputsStyled({
   label,
   type,
   endAdornmentBoolean,
-  name,
-  control,
-  error,
-  helperText,
 }: InputType) {
   return (
-    <Controller
+    <>
-      name={name}
+      <CssTextField
-      control={control}
+        label={label}
-      render={({ field }) => (
+        type={type}
-        <CssTextField
+        id="custom-css-outlined-input"
-          label={label}
+        InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}
-          InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}
+
-          id="custom-css-outlined-input"
+      />
-          {...field}
+    </>
-          type={type}
-          error={error}
-          helperText={helperText}
-          variant="outlined"
-          fullWidth
-        />
-      )}
-    />
   );
 }