feat: add delete account modal

src/locales/en/en.json

@@ -8,7 +8,10 @@
     "selectDates": "Select dates",
     "selectAppAndDates": "Select App & Dates",
     "from": "From",
-    "to": "To"
+    "to": "To",
+    "confirm": "Confirm",
+    "password": "Password",
+    "passwordPlaceholder": "Enter your password"
   },
   "auth": {
     "entrance": "Sign In",
@@ -155,7 +158,8 @@
     "cancel": "Cancel",
     "delete": "Delete",
     "search": "Search",
-    "save": "Save"
+    "save": "Save",
+    "confirm": "Confirm"
   },
   "notFound": {
     "code": "404",

src/locales/ru/ru.json

@@ -8,7 +8,10 @@
     "selectDates": "Выбрать даты",
     "selectAppAndDates": "Выбрать приложение и даты",
     "from": "От",
-    "to": "До"
+    "to": "До",
+    "confirm": "Подтвердить",
+    "password": "Пароль",
+    "passwordPlaceholder": "Введите ваш пароль"
   },
   "auth": {
     "entrance": "Вход",
@@ -150,7 +153,8 @@
     "logout": "Выйти",
     "cancel": "Отмена",
     "search": "Поиск",
-    "save": "Сохранить"
+    "save": "Сохранить",
+    "confirm": "Подтвердить"
   },
   "notFound": {
     "code": "404",

src/pages/Settings/Settings.tsx

@@ -13,9 +13,12 @@ import { logout } from "../../stores/slices/authSlice";
 import CModal from "../../components/CModal";
 import CButton from "../../components/CButton";
 import { Link } from "react-router-dom";
+import CInput from "../../components/CInput";
 
 const Settings: React.FC = () => {
   const [isOpenLogoutModal, setIsOpenLogoutModal] = useState(false);
+  const [isOpenDeleteAccountModal, setIsOpenDeleteAccountModal] =
+    useState(false);
   const { language, changeLanguage } = useLanguage();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -24,6 +27,10 @@ const Settings: React.FC = () => {
     setIsOpenLogoutModal((prev) => !prev);
   };
 
+  const toggleDeleteAccountModal = () => {
+    setIsOpenDeleteAccountModal((prev) => !prev);
+  };
+
   return (
     <div className="settings">
       <h3 className="settings__title">{t("settings.title")}</h3>
@@ -60,7 +67,10 @@ const Settings: React.FC = () => {
 
         <h3>{t("settings.account")}</h3>
 
-        <div className="settings__content__action">
+        <div
+          className="settings__content__action"
+          onClick={toggleDeleteAccountModal}
+        >
           <FiUserMinus className="settings__content__action__icon" />{" "}
           {t("settings.deleteAccount")}
         </div>
@@ -97,6 +107,28 @@ const Settings: React.FC = () => {
           </div>
         }
       />
+
+      <CModal
+        isOpen={isOpenDeleteAccountModal}
+        onToggle={toggleDeleteAccountModal}
+        content={
+          <div className="modal__box">
+            <h3 className="modal__box__title">{t("common.confirm")}</h3>
+            <CInput
+              placeholder={t("common.passwordPlaceholder")}
+              label={t("common.password")}
+              type="password"
+            />
+            <div className="modal__box__actions">
+              <CButton
+                title={t("button.cancel")}
+                onClick={toggleDeleteAccountModal}
+              />
+              <CButton title={t("button.confirm")} variant="danger" />
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 };