From cce376a703c6d6d93522b97a173a9873b72a44c6 Mon Sep 17 00:00:00 2001
From: strNophix <nvdpoel01@gmail.com>
Date: Sun, 19 Jun 2022 22:12:30 +0200
Subject: [PATCH] Added /me page

---
 frontend/src/App.tsx                         |  2 +
 frontend/src/components/pages/user/index.tsx | 74 ++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 frontend/src/components/pages/user/index.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33a4e59..2f3a5c7 100644
--- a/frontend/src/App.tsx
+++ b/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 />} />
diff --git a/frontend/src/components/pages/user/index.tsx b/frontend/src/components/pages/user/index.tsx
new file mode 100644
index 0000000..f1519a8
--- /dev/null
+++ b/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;