Changed services h1 to new h1 atom

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import SecretsPage from "./components/pages/secrets";
 import ServicesPage from "./components/pages/services";
 import LoginPage from "./components/pages/login";
 import RequireAuth from "./components/layouts/RequireAuth";
+import UserPage from "./components/pages/user";
 
 export default function App() {
   return (
@@ -13,6 +14,7 @@ export default function App() {
           <Route path="/services" element={<ServicesPage />} />
           <Route path="/routers" element={<RoutersPage />} />
           <Route path="/secrets" element={<SecretsPage />} />
+          <Route path="/me" element={<UserPage />} />
           <Route path="/" element={<Navigate to="/services" />} />
         </Route>
         <Route path="/login" element={<LoginPage />} />

frontend/src/components/atoms/Header1.tsx

@@ -0,0 +1,16 @@
+import { FC, HTMLProps } from "react";
+import clsx from "clsx";
+
+const styleClasses = {
+  base: "text-3xl font-bold mt-12 mb-8",
+};
+
+const Header1: FC<HTMLProps<HTMLParagraphElement>> = (props) => {
+  return (
+    <h1 className={clsx(styleClasses.base, props.className)}>
+      {props.children}
+    </h1>
+  );
+};
+
+export default Header1;

frontend/src/components/layouts/Container.tsx

@@ -2,7 +2,7 @@ import { FC, HTMLProps } from "react";
 import clsx from "clsx";
 
 const styleClasses = {
-  base: "w-full lg:w-1/2 mx-auto",
+  base: "w-full lg:w-1/2 mx-auto px-2",
 };
 
 const Container: FC<HTMLProps<HTMLDivElement>> = (props) => {

frontend/src/components/molecules/Sidebar.tsx

@@ -108,10 +108,10 @@ const Sidebar = () => {
                 </ul>
               </nav>
             </div>
-            <div className="flex flex-shrink-0 py-4 px-5 justify-between items-center border-t border-gray-200">
-              <div className="flex flex-row justify-center items-center space-x-4">
-                <p>admin</p>
-              </div>
+            <div className="flex flex-shrink-0 py-4 px-5 justify-between items-center border-t border-gray-200 space-x-4">
+              <SidebarTab onClick={navFactory("/me")}>
+                <span className="ml-3">admin</span>
+              </SidebarTab>
               <div className="w-6 h-6">
                 <LogoutIcon
                   className="cursor-pointer"

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

@@ -1,6 +1,5 @@
 import { useFormik } from "formik";
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import { useLoginMutation } from "../../../generated/graphql";
 
@@ -23,12 +22,11 @@ const LoginPage = () => {
   });
 
   useEffect(() => {
-    if (!loginMutation.data) return;
-    if (Object.hasOwn(loginMutation.data.login, "message")) {
-      setSubmitError(loginMutation.data.login.message);
+    if (!loginMutation.data) {
       return;
-    }
-    if (Object.hasOwn(loginMutation.data.login, "token")) {
+    } else if (loginMutation.data.login.__typename == "CommonError") {
+      setSubmitError(loginMutation.data.login.message);
+    } else if (loginMutation.data.login.__typename == "AuthSuccess") {
       localStorage.setItem("token", loginMutation.data.login.token);
       navigator("/services");
     }

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

@@ -14,6 +14,7 @@ import {
 } from "../../../generated/graphql";
 import { queryClient } from "../../../main";
 import { useFormik } from "formik";
+import Header1 from "../../atoms/Header1";
 
 const ServicesPage = () => {
   const [toggleCreate, setToggleCreate] = useState(false);
@@ -89,8 +90,8 @@ const ServicesPage = () => {
 
   return (
     <DashboardLayout>
-      <Container className="px-2">
-        <h1 className="text-3xl font-bold mt-12 mb-8">Services</h1>
+      <Container>
+        <Header1>Services</Header1>
         <div className="mb-4 flex items-end justify-between">
           <TextField
             label="Search"

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

@@ -0,0 +1,74 @@
+import { useFormik } from "formik";
+import Button from "../../atoms/Button";
+import Header1 from "../../atoms/Header1";
+import Container from "../../layouts/Container";
+import DashboardLayout from "../../layouts/Dashboard";
+import TextField from "../../molecules/TextField";
+
+const UserPage = () => {
+  const passwordUpdateForm = useFormik({
+    initialValues: { oldPassword: "", newPassword: "", confirmPassword: "" },
+    onSubmit: async (
+      { oldPassword, newPassword, confirmPassword },
+      helpers
+    ) => {
+      if (newPassword !== confirmPassword) {
+        helpers.setFieldError("confirmPassword", "Passwords do not match");
+        return;
+      }
+
+      helpers.resetForm();
+    },
+  });
+
+  return (
+    <DashboardLayout>
+      <Container>
+        <Header1>User settings</Header1>
+        <form
+        // onSubmit={serviceForm.handleSubmit}
+        >
+          <h1 className="mb-4">Update password</h1>
+          <div className="space-y-3">
+            <TextField
+              label="Old Password"
+              required={true}
+              id="oldPassword"
+              placeholder="*****"
+              inputClassName="shadow-none border border-gray-300 bg-white"
+              // onChange={serviceForm.handleChange}
+              // value={serviceForm.values.name}
+            />
+            <TextField
+              label="Password"
+              required={true}
+              id="newPassword"
+              placeholder="*****"
+              inputClassName="shadow-none border border-gray-300 bg-white"
+              // onChange={serviceForm.handleChange}
+              // value={serviceForm.values.name}
+            />
+            <TextField
+              label="Repeat Password"
+              required={true}
+              id="confirmPassword"
+              placeholder="*****"
+              inputClassName="shadow-none border border-gray-300 bg-white"
+              // onChange={serviceForm.handleChange}
+              // value={serviceForm.values.name}
+            />
+
+            <div className="flex justify-end items-center">
+              <Button className="w-20 border border-sky-600">Update</Button>
+              {passwordUpdateForm.errors && (
+                <span>{JSON.stringify(passwordUpdateForm.errors)}</span>
+              )}
+            </div>
+          </div>
+        </form>
+      </Container>
+    </DashboardLayout>
+  );
+};
+
+export default UserPage;

frontend/src/queries/auth.graphql

@@ -1,5 +1,6 @@
 mutation Login($credentials: LoginInput!) {
   login(body: $credentials) {
+    __typename
     ... on AuthSuccess {
       user {
         name