Connected authentication to the backend and fixed CORS

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

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { useLoginMutation } from "../../../generated/graphql";
+
+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 } });
+  };
+
+  useEffect(() => {
+    if (!loginMutation.data) return;
+    if (Object.hasOwn(loginMutation.data.login, "message")) {
+      setSubmitError(loginMutation.data.login.message);
+      return;
+    }
+    if (Object.hasOwn(loginMutation.data.login, "token")) {
+      localStorage.setItem("token", loginMutation.data.login.token);
+      navigator("/services");
+    }
+  }, [loginMutation.data]);
+
+  return (
+    <main>
+      <div className="flex flex-col justify-center min-h-screen py-12 sm:px-6 lg:px-8">
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+          <div className="flex flex-row justify-start items-center w-full space-x-2">
+            <div className="w-16 h-16 bg-sky-300 rounded-md" />
+            <div>
+              <h1 className="text-xl">Traefik</h1>
+              <h2 className="block text-2xl font-extrabold tracking-tighter text-gray-900 transition duration-500 ease-in-out transform hover:text-gray-900">
+                Confman
+              </h2>
+            </div>
+          </div>
+          <div className="py-10">
+            <form
+              className="space-y-6"
+              action="#"
+              method="POST"
+              data-bitwarden-watching="1"
+              onSubmit={handleSubmit(onSubmit)}
+            >
+              <Controller
+                name="name"
+                control={control}
+                defaultValue=""
+                render={({ field }) => (
+                  <TextField label="Username" placeholder="name" {...field} />
+                )}
+              />
+              <Controller
+                name="password"
+                control={control}
+                defaultValue=""
+                render={({ field }) => (
+                  <TextField
+                    type="password"
+                    label="Password"
+                    placeholder="*****"
+                    {...field}
+                  />
+                )}
+              />
+
+              <div>
+                <Button type="submit">Login</Button>
+                {submitError && <span>{submitError}</span>}
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default LoginPage;