Change password and cancel week

client/src/components/cancel-week/CancelWeek.jsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import PageTitle from "../common/PageTitle";
+import CustomCheckbox from "../common/CustomCheckbox";
+import Button from "../common/Button";
+import "./CancelWeek.scss";
+import { useCancelWeekMutation } from "../../redux/slices/termApiSlice";
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
+export default function CancelWeek() {
+  const [understandCheckbox, setUnderstandCheckbox] = useState(false);
+
+  const [cancelWeek, { isLoading }] = useCancelWeekMutation();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const res = await cancelWeek().unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while canceling the week");
+      toast.success("تم إلغاء الأسبوع بنجاح");
+      navigate("/dashboard");
+    } catch (err) {
+      console.log(err);
+      toast.error("حدث خطأ أثناء إلغاء الأسبوع");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="cancel-week container">
+      <PageTitle title="إلغاء الأسبوع" />
+      <h4>هل أنت متأكد من إلغاء الأسبوع؟</h4>
+      <p>إلغاء الاسبوع قرار مهم و لا يمكن التراجع عنه</p>
+      <CustomCheckbox
+        labels={["لقد فهمت"]}
+        values={["understand"]}
+        checkedValues={understandCheckbox ? ["understand"] : []}
+        onChange={(e) => setUnderstandCheckbox(e.target.checked)}
+        name="understand"
+        required
+      />
+      <Button
+        className="cancel-week__btn Button--medium Button--danger"
+        type="submit"
+      >
+        إلغاء الأسبوع
+      </Button>
+      {isLoading && <p>جاري إلغاء الأسبوع</p>}
+    </form>
+  );
+}

client/src/components/cancel-week/CancelWeek.scss

@@ -0,0 +1,11 @@
+.cancel-week {
+  direction: rtl;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Button {
+    width: 50%;
+    margin-inline: auto;
+  }
+}

client/src/components/captain-profile/CaptainProfile.jsx

@@ -41,11 +41,14 @@ export default function CaptainProfile() {
             {userInfo.rSectorBaseName
               ? userInfo.rSectorBaseName + " " + userInfo.rSectorSuffixName
               : "لا يوجد"}
+            {(userInfo.type === "unit" || userInfo.type == "general") && ""}
           </p>
         </div>
-        {/* TODO: Add the route for The Button Later */}
-        <Button className="captain-profile__info__btn Button--medium Button--primary">
-          تعديل الصفحة الشخصية
+        <Button
+          linkTo="/edit-password"
+          className="captain-profile__info__btn Button--medium Button--primary"
+        >
+          تعديل الرمز السري
         </Button>
       </div>
     </div>

client/src/components/common/InfoSection.jsx

@@ -46,7 +46,7 @@ export default function InfoSection() {
               ? "جاري التحميل"
               : !absenceRate
               ? "لا يوجد بيانات"
-              : Math.reound(absenceRate?.body * 100) + "%"
+              : Math.round(absenceRate?.body * 100) + "%"
           }
           color="dark"
         />

client/src/components/common/TermInfoSection.jsx

@@ -16,15 +16,15 @@ export default function TermInfoSection() {
     isLoading,
   } = useGetRemainingWeeksQuery();
 
-  if (
-    termInfo &&
-    !isFetchingTerm &&
-    curWeek &&
-    !isFetchingWeek &&
-    weeksLeft &&
-    !isFetchingWeeksLeft
-  )
-    console.log({ termInfo, curWeek, weeksLeft });
+  // if (
+  //   termInfo &&
+  //   !isFetchingTerm &&
+  //   curWeek &&
+  //   !isFetchingWeek &&
+  //   weeksLeft &&
+  //   !isFetchingWeeksLeft
+  // )
+  //   console.log({ termInfo, curWeek, weeksLeft });
 
   return (
     <div
@@ -78,7 +78,7 @@ export default function TermInfoSection() {
         }}
         className="row"
       >
-        <Button disabled className="Button--danger">
+        <Button linkTo="/cancel-week" className="Button--danger">
           إلغاء الاسبوع
         </Button>
         <Button linkTo="/edit-term" className="Button--dark">

client/src/components/edit-password/EditPassword.jsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import Button from "../common/Button";
+import TextInput from "../common/Inputs";
+import "./EditPassword.scss";
+import PageTitle from "../common/PageTitle";
+import { useChangePasswordMutation } from "../../redux/slices/usersApiSlice";
+import { toast } from "react-toastify";
+
+export default function EditPassword() {
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+
+  const [changePassword, { isLoading }] = useChangePasswordMutation();
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    console.log({ oldPassword, newPassword });
+
+    try {
+      const res = await changePassword({ oldPassword, newPassword }).unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while changing the password");
+      toast.success("تم تغيير كلمة السر بنجاح");
+    } catch (err) {
+      toast.error("حدث خطأ أثناء تغيير كلمة السر");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <form onSubmit={submitHandler} className="edit-password container">
+      <PageTitle title="تغيير كلمة السر" />
+      <TextInput
+        label="الرمز السري القديم"
+        type="password"
+        name="oldPassword"
+        value={oldPassword}
+        placeholder="********"
+        onChange={(e) => setOldPassword(e.target.value)}
+        required={true}
+      />
+      <TextInput
+        label="الرمز السري الجديد"
+        type="password"
+        name="newPassword"
+        value={newPassword}
+        onChange={(e) => setNewPassword(e.target.value)}
+        placeholder="********"
+        required={true}
+      />
+      <Button
+        className="edit-password__btn Button--medium Button--primary-darker"
+        type="submit"
+      >
+        تغيير كلمة السر
+      </Button>
+      {isLoading && <p>جاري تغيير كلمة السر</p>}
+    </form>
+  );
+}

client/src/components/edit-password/EditPassword.scss

@@ -0,0 +1,11 @@
+.edit-password {
+  direction: rtl;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .Button {
+    width: 50%;
+    margin-inline: auto;
+  }
+}

client/src/redux/slices/termApiSlice.js

@@ -48,6 +48,13 @@ export const termApi = apiSlice.injectEndpoints({
       }),
       invalidatesTags: ["Term", "Weeks"],
     }),
+    CancelWeek: builder.mutation({
+      query: () => ({
+        url: `${TERM_URL}/week`,
+        method: "PATCH",
+      }),
+      invalidatesTags: ["Weeks"],
+    }),
   }),
 });
 
@@ -58,4 +65,5 @@ export const {
   useGetRemainingWeeksQuery,
   useInsertTermMutation,
   useUpdateTermMutation,
+  useCancelWeekMutation,
 } = termApi;

client/src/redux/slices/usersApiSlice.js

@@ -26,8 +26,19 @@ export const usersApi = apiSlice.injectEndpoints({
       }),
       invalidatesTags: ["Captains", "auth"],
     }),
+    changePassword: builder.mutation({
+      query: (data) => ({
+        url: `${USERS_API}/newPassword`,
+        method: "POST",
+        body: data,
+      }),
+    }),
   }),
 });
 
-export const { useLoginMutation, useLogoutMutation, useSignupMutation } =
-  usersApi;
+export const {
+  useLoginMutation,
+  useLogoutMutation,
+  useSignupMutation,
+  useChangePasswordMutation,
+} = usersApi;

client/src/routes.jsx

@@ -30,6 +30,8 @@ import NotificationsPage from "./components/notifications/notificationPage";
 import ScoutsAttendance from "./components/scouts-attendance/ScoutsAttendance";
 import MoneyPage from "./components/moneypage/MoneyPage";
 import CaptainsAttendance from "./components/captains-attendance/CaptainAttendance";
+import EditPassword from "./components/edit-password/EditPassword";
+import CancelWeek from "./components/cancel-week/CancelWeek";
 
 import ActivityPage from "./components/activitypage/ActivityPage";
 import AddActivityPage from "./components/addactivitypage/AddActivityPage";
@@ -49,7 +51,12 @@ function Routes() {
           <Route exact path="/assign-captain" element={<AssignCaptainPage />} />
           <Route exact path="/add-scout" element={<InsertScoutPage />} />
           <Route exact path="/update-scout" element={<UpdateScoutPage />} />
-          <Route exact path="/send-notification" element={<SendNotificationPage />} />
+          <Route exact path="/cancel-week" element={<CancelWeek />} />
+          <Route
+            exact
+            path="/send-notification"
+            element={<SendNotificationPage />}
+          />
           <Route exact path="/notifications" element={<NotificationsPage />} />
           <Route
             exact
@@ -62,6 +69,7 @@ function Routes() {
             element={<CaptainsAttendance />}
           />
           <Route exact path="/finance" element={<MoneyPage />} />
+          <Route exact path="/edit-password" element={<EditPassword />} />
           <Route exact path="/activity" element={<ActivityPage />} />
           <Route exact path="/add-activity" element={<AddActivityPage />} />
         </Route>