From e09c48c97776f71ed3065e9d59d44aa6bd415984 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sun, 21 Jan 2024 16:46:38 +0100
Subject: [PATCH] unlink calendar with password

---
 public/locales/de/translation.json |   3 +-
 public/locales/en/translation.json |   3 +-
 src/Components/MyModal/index.js    |  21 +++++
 src/Pages/Store/Calendar/index.js  | 126 ++++++++++++++++++++---------
 4 files changed, 113 insertions(+), 40 deletions(-)

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index 693ed64..ea159e6 100644
--- a/public/locales/de/translation.json
+++ b/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"
     }
   },
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index edca3af..4741c5e 100644
--- a/public/locales/en/translation.json
+++ b/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"
     }
   },
diff --git a/src/Components/MyModal/index.js b/src/Components/MyModal/index.js
index f0f98a5..7840153 100644
--- a/src/Components/MyModal/index.js
+++ b/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,
diff --git a/src/Pages/Store/Calendar/index.js b/src/Pages/Store/Calendar/index.js
index 655b07b..ea814bf 100644
--- a/src/Pages/Store/Calendar/index.js
+++ b/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,46 +164,81 @@ function CardPersonalCalendarSettings({ settings }) {
   }, [usingPrimaryCalendar]);
 
   return (
-    <Card
-      title={t("calendar.cardPersonalCalendarSettings.title")}
-      extra={
-        <Space>
-          <RequestStateItem
-            state={requestState}
-            setRequestState={setRequestState}
-          />
+    <>
+      <Card
+        title={t("calendar.cardPersonalCalendarSettings.title")}
+        extra={
+          <Space>
+            <RequestStateItem
+              state={requestState}
+              setRequestState={setRequestState}
+            />
 
-          <Popconfirm
-            okText={t("common.button.confirm")}
-            cancelText={t("common.button.cancel")}
-            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 onClick={() => setIsModalOpen(true)}>
+              {t("calendar.unlinkGoogleCalendar.button")}
+            </Button>
+          </Space>
+        }
+      >
+        <Form form={form} requiredMark={false}>
+          <Form.Item
+            name="calendarUsingPrimaryCalendar"
+            label={t("common.calendarUsingPrimaryCalendar")}
+            valuePropName="checked"
           >
-            <Button danger>{t("calendar.unlinkGoogleCalendar.button")}</Button>
-          </Popconfirm>
-        </Space>
-      }
-    >
-      <Form form={form} requiredMark={false}>
-        <Form.Item
-          name="calendarUsingPrimaryCalendar"
-          label={t("common.calendarUsingPrimaryCalendar")}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-      </Form>
-    </Card>
+            <Switch />
+          </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>
+    </>
   );
 }