From 8d5be0f0d406476829e08d2e3c3c1e82faacd430 Mon Sep 17 00:00:00 2001
From: Khennee <iambishawn@gmail.com>
Date: Sat, 7 Dec 2024 23:40:20 +0800
Subject: [PATCH] change password page

---
 frontend/src/components/Header.tsx    |  8 ++-
 frontend/src/main.tsx                 |  8 +++
 frontend/src/pages/ChangePassword.tsx | 88 +++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/ChangePassword.tsx

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 135c0c7..d7a3a33 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -43,6 +43,10 @@ const Header = () => {
     logout();
   };
 
+  const handleChangePassword = () => ( 
+    navigate("/changepassword")
+  )
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -144,10 +148,10 @@ const Header = () => {
                 </span>
                 <span
                   // THIS SHOULD BE FOR RESETTING PASSWORD NOT LOG OUT
-                  onClick={handleLogOut}
+                  onClick={ handleChangePassword }
                   className="block font-syke-medium text-sm px-4 py-2 hover:bg-buttongreen cursor-pointer"
                 >
-                  Reset Password
+                  Change Password
                 </span>
                 <span
                   onClick={handleLogOut}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 12d7058..75eeb30 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -33,6 +33,7 @@ import { Slide, ToastContainer } from "react-toastify";
 import ViewProfile from "./pages/ViewProfile.tsx";
 import Protocols from "./components/Policies/protocols.tsx";
 import Rules from "./components/Policies/rules.tsx";
+import ChangePassword from "./pages/ChangePassword.tsx";
 
 const Main = () => {
   const { appLoading }: LoadingContextType = useLoading();
@@ -107,7 +108,14 @@ const Main = () => {
               path="/rules"
               element={<Rules />}
             />
+
+            <Route 
+            path="/changepassword"
+            element = { <ChangePassword/> }
+            />
+            
           </Route>
+          
 
           {/* ADMIN ROUTES */}
           <Route element={<RequireAuth forAdmin={true} />}>
diff --git a/frontend/src/pages/ChangePassword.tsx b/frontend/src/pages/ChangePassword.tsx
new file mode 100644
index 0000000..aa99a9b
--- /dev/null
+++ b/frontend/src/pages/ChangePassword.tsx
@@ -0,0 +1,88 @@
+import Header from "../components/Header";
+import { useNavigate } from "react-router-dom";
+const ChangePassword = () => {
+    const navigate = useNavigate()
+
+    const handleCancelButton = () => { 
+        navigate("/homepage")
+    }
+
+    const handleSubmitButton = () => { 
+        //pass
+    }
+
+  return (
+    <div className="flex flex-col items-center bg-policies-bg bg-cover bg-no-repeat sm:bg-top md:bg-right lg:bg-left h-screen">
+
+      <div>
+        <Header />
+      </div>
+
+      <div className="space-y-5 w-full max-w-md mt-8">
+
+        <div className="flex flex-col space-y-4">
+
+          <div className="flex-1">
+            <h1 
+            className="text-white font-syke-light text-xl">
+                Current Password
+                </h1>
+            <input
+              type="password"
+              className="bg-secondgrey border-b font-syke-regular text-[1.2rem] w-full mt-1 px-4 py-2 h-10 border-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+              name="current_password"
+              required
+            />
+          </div>
+
+          <div className="flex-1">
+            <h1 className="text-white font-syke-light text-xl">
+                New Password
+                </h1>
+            <input
+              type="password"
+              className="bg-secondgrey border-b font-syke-regular text-[1.2rem] w-full mt-1 px-4 py-2 h-10 border-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+              name="new_password"
+              required
+            />
+          </div>
+
+          <div className="flex-1">
+            <h1 className="text-white font-syke-light text-xl">
+                Confirm Password
+                </h1>
+            <input
+              type="password"
+              className="bg-secondgrey border-b font-syke-regular text-[1.2rem] w-full mt-1 px-4 py-2 h-10 border-none focus:outline-none focus:shadow-inner focus:ring-1 focus:ring-textgreen text-white placeholder-white placeholder-opacity-25 rounded-sm"
+              name="confirm_password"
+              required
+            />
+          </div>
+
+        </div>
+
+      </div>
+      
+        <div className="flex justify-between w-full max-w-sm p-5">
+
+            <button
+                type="button"
+                onClick={ handleCancelButton }
+                className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm">
+                Cancel
+            </button>
+
+            <button
+                type="button"
+                onClick={ handleSubmitButton }
+                className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm">
+                Confirm
+            </button>
+
+        </div>
+
+    </div>
+  );
+};
+
+export default ChangePassword;