Connected service management front to back; migrated to formik

frontend/src/components/pages/login/index.tsx

@@ -1,3 +1,4 @@
+import { useFormik } from "formik";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
@@ -7,18 +8,19 @@ import Button from "../../atoms/Button";
 import TextField from "../../molecules/TextField";
 
 const LoginPage = () => {
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm();
   const navigator = useNavigate();
   const loginMutation = useLoginMutation();
   const [submitError, setSubmitError] = useState("");
 
-  const onSubmit = ({ name, password }: any) => {
-    loginMutation.mutate({ credentials: { name, password } });
-  };
+  const loginForm = useFormik({
+    initialValues: {
+      name: "",
+      password: "",
+    },
+    onSubmit: ({ name, password }) => {
+      loginMutation.mutate({ credentials: { name, password } });
+    },
+  });
 
   useEffect(() => {
     if (!loginMutation.data) return;
@@ -48,35 +50,31 @@ const LoginPage = () => {
           <div className="py-10">
             <form
               className="space-y-6"
-              action="#"
-              method="POST"
               data-bitwarden-watching="1"
-              onSubmit={handleSubmit(onSubmit)}
+              onSubmit={loginForm.handleSubmit}
             >
-              <Controller
-                name="name"
-                control={control}
-                defaultValue=""
-                render={({ field }) => (
-                  <TextField label="Username" placeholder="name" {...field} />
-                )}
+              <TextField
+                label="Username"
+                placeholder="name"
+                id="name"
+                size="lg"
+                onChange={loginForm.handleChange}
+                value={loginForm.values.name}
               />
-              <Controller
-                name="password"
-                control={control}
-                defaultValue=""
-                render={({ field }) => (
-                  <TextField
-                    type="password"
-                    label="Password"
-                    placeholder="*****"
-                    {...field}
-                  />
-                )}
+              <TextField
+                type="password"
+                id="password"
+                label="Password"
+                size="lg"
+                placeholder="*****"
+                onChange={loginForm.handleChange}
+                value={loginForm.values.password}
               />
 
               <div>
-                <Button type="submit">Login</Button>
+                <Button type="submit" size="lg">
+                  Login
+                </Button>
                 {submitError && <span>{submitError}</span>}
               </div>
             </form>