unlink calendar with password

public/locales/de/translation.json

@@ -170,7 +170,8 @@
     },
     "unlinkGoogleCalendar": {
       "title": "Google Kalender trennen",
-      "description": "Möchten Sie die Verbindung zu Ihrem Google Kalender wirklich trennen?",
+      "description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.",
+      "checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)",
       "button": "Google Kalender trennen"
     }
   },

public/locales/en/translation.json

@@ -173,7 +173,8 @@
     },
     "unlinkGoogleCalendar": {
       "title": "Unlink Google Calendar",
-      "description": "Are you sure you want to unlink your Google Calendar?",
+      "description": "For security reasons, you need to enter your password to unlink your Google Calendar.",
+      "checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)",
       "button": "Unlink Google Calendar"
     }
   },

src/Components/MyModal/index.js

@@ -104,6 +104,27 @@ export function MyModalOnlyCloseButtonFooter({ onCancel }) {
   return <Button onClick={onCancel}>{t("common.button.close")}</Button>;
 }
 
+export function MyModalCloseConfirmButtonFooter({
+  onCancel,
+  onConfirm,
+  isConfirmButtonLoading,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Button onClick={onCancel}>{t("common.button.close")}</Button>
+      <Button
+        onClick={onConfirm}
+        type="primary"
+        loading={isConfirmButtonLoading}
+      >
+        {t("common.button.confirm")}
+      </Button>
+    </>
+  );
+}
+
 export function MyModalCloseSaveButtonFooter({
   onCancel,
   onSave,

src/Pages/Store/Calendar/index.js

@@ -1,6 +1,7 @@
 import {
   Button,
   Card,
+  Checkbox,
   Col,
   Form,
   Popconfirm,
@@ -9,10 +10,12 @@ import {
   Space,
   Spin,
   Switch,
+  Typography,
 } from "antd";
 import { useTranslation } from "react-i18next";
 import {
   Constants,
+  EncodeStringToBase64,
   getUserSessionFromLocalStorage,
   myFetch,
 } from "../../../utils";
@@ -21,11 +24,16 @@ import MyCenteredContainer from "../../../Components/MyContainer";
 import {
   MyCalendarMaxFutureBookingDaysFormInput,
   MyCalendarMinEarliestBookingTimeFormInput,
+  MyPasswordFormInput,
 } from "../../../Components/MyFormInputs";
 import {
   RequestState,
   RequestStateItem,
 } from "../../../Components/MyRequestStateItem";
+import MyModal, {
+  MyModalCloseConfirmButtonFooter,
+  MyModalCloseSaveButtonFooter,
+} from "../../../Components/MyModal";
 
 export default function StoreCalendar() {
   const { t } = useTranslation();
@@ -104,15 +112,22 @@ export default function StoreCalendar() {
 function CardPersonalCalendarSettings({ settings }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const [formUnlinkCalendar] = Form.useForm();
 
   const [requestState, setRequestState] = useState(RequestState.INIT);
   const delayTimeout = useRef();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isRequesting, setIsRequesting] = useState(false);
 
   const usingPrimaryCalendar = Form.useWatch(
     "calendarUsingPrimaryCalendar",
     form
   );
 
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
   useEffect(() => {
     if (!settings) return;
 
@@ -149,6 +164,7 @@ function CardPersonalCalendarSettings({ settings }) {
   }, [usingPrimaryCalendar]);
 
   return (
+    <>
       <Card
         title={t("calendar.cardPersonalCalendarSettings.title")}
         extra={
@@ -158,24 +174,9 @@ function CardPersonalCalendarSettings({ settings }) {
               setRequestState={setRequestState}
             />
 
-          <Popconfirm
+            <Button danger onClick={() => setIsModalOpen(true)}>
-            okText={t("common.button.confirm")}
+              {t("calendar.unlinkGoogleCalendar.button")}
-            cancelText={t("common.button.cancel")}
+            </Button>
-            title={t("calendar.unlinkGoogleCalendar.title")}
-            description={t("calendar.unlinkGoogleCalendar.description")}
-            onConfirm={() => {
-              myFetch("/calendar/settings/personal/unlink", "POST")
-                .then((res) => {
-                  console.log(res);
-                  window.location.reload();
-                })
-                .catch((errStatus) => {
-                  console.log(errStatus);
-                });
-            }}
-          >
-            <Button danger>{t("calendar.unlinkGoogleCalendar.button")}</Button>
-          </Popconfirm>
           </Space>
         }
       >
@@ -189,6 +190,55 @@ function CardPersonalCalendarSettings({ settings }) {
           </Form.Item>
         </Form>
       </Card>
+
+      <MyModal
+        title={t("calendar.unlinkGoogleCalendar.title")}
+        isOpen={isModalOpen}
+        onCancel={handleModalClose}
+        footer={
+          <MyModalCloseConfirmButtonFooter
+            onCancel={handleModalClose}
+            isConfirmButtonLoading={isRequesting}
+            onConfirm={() => {
+              formUnlinkCalendar.validateFields().then((values) => {
+                setIsRequesting(true);
+
+                myFetch("/calendar/settings/personal/unlink", "POST", {
+                  password: EncodeStringToBase64(values.password),
+                  deleteCalendars: values.deleteEvents,
+                })
+                  .then((res) => {
+                    console.log(res);
+                    window.location.reload();
+                  })
+                  .catch((errStatus) => {
+                    console.log(errStatus);
+                    setIsRequesting(false);
+                    // TODO: show error message
+                  });
+              });
+            }}
+          />
+        }
+      >
+        <>
+          <Form
+            form={formUnlinkCalendar}
+            requiredMark={false}
+            layout="vertical"
+          >
+            <p>{t("calendar.unlinkGoogleCalendar.description")}</p>
+            <MyPasswordFormInput />
+
+            <Form.Item>
+              <Checkbox>
+                {t("calendar.unlinkGoogleCalendar.checkboxDeleteCalendars")}
+              </Checkbox>
+            </Form.Item>
+          </Form>
+        </>
+      </MyModal>
+    </>
   );
 }