feat(front): Fix #74 .

4 files changed, 77 insertions, 12 deletions

diff --git a/Timeline/ClientApp/src/locales/en/translation.ts b/Timeline/ClientApp/src/locales/en/translation.ts
index 6faf1121..99783d04 100644
--- a/Timeline/ClientApp/src/locales/en/translation.ts
+++ b/Timeline/ClientApp/src/locales/en/translation.ts
@@ -146,6 +146,11 @@ const translation: TranslationResource = {
       errorEmptyNewPassword: "New password can't be empty.",

       errorRetypeNotMatch: 'Password retyped does not match.',

     },

+    dialogConfirmLogout: {

+      title: 'Confirm Logout',

+      prompt:

+        'Are you sure to log out? All cached data in the browser will be deleted.',

+    },

   },

   about: {

     author: {

diff --git a/Timeline/ClientApp/src/locales/scheme.ts b/Timeline/ClientApp/src/locales/scheme.ts
index fef39a8e..0bf08257 100644
--- a/Timeline/ClientApp/src/locales/scheme.ts
+++ b/Timeline/ClientApp/src/locales/scheme.ts
@@ -135,6 +135,10 @@ export default interface TranslationResource {
       errorEmptyNewPassword: string;

       errorRetypeNotMatch: string;

     };

+    dialogConfirmLogout: {

+      title: string;

+      prompt: string;

+    };

   };

   about: {

     author: {

diff --git a/Timeline/ClientApp/src/locales/zh/translation.ts b/Timeline/ClientApp/src/locales/zh/translation.ts
index 130ee297..4054893e 100644
--- a/Timeline/ClientApp/src/locales/zh/translation.ts
+++ b/Timeline/ClientApp/src/locales/zh/translation.ts
@@ -142,6 +142,10 @@ const translation: TranslationResource = {
       errorEmptyNewPassword: '新密码不能为空',

       errorRetypeNotMatch: '两次输入的密码不一致',

     },

+    dialogConfirmLogout: {

+      title: '确定注销',

+      prompt: '您确定注销此账号？这将删除所有已经缓存在浏览器的数据。',

+    },

   },

   about: {

     author: {

diff --git a/Timeline/ClientApp/src/settings/Settings.tsx b/Timeline/ClientApp/src/settings/Settings.tsx
index cd4db9c9..bf7ee4ef 100644
--- a/Timeline/ClientApp/src/settings/Settings.tsx
+++ b/Timeline/ClientApp/src/settings/Settings.tsx
@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import { useHistory } from 'react-router';

 import { useTranslation } from 'react-i18next';

 import axios, { AxiosError } from 'axios';

-import { Container, Row, Col, Input } from 'reactstrap';

+import {

+  Container,

+  Row,

+  Col,

+  Input,

+  Modal,

+  ModalHeader,

+  ModalBody,

+  ModalFooter,

+  Button,

+} from 'reactstrap';

 

 import { apiBaseUrl } from '../config';

 

@@ -116,12 +126,38 @@ const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => {
   );

 };

 

+const ConfirmLogoutDialog: React.FC<{

+  toggle: () => void;

+  onConfirm: () => void;

+}> = ({ toggle, onConfirm }) => {

+  const { t } = useTranslation();

+

+  return (

+    <Modal isOpen centered>

+      <ModalHeader className="text-danger">

+        {t('settings.dialogConfirmLogout.title')}

+      </ModalHeader>

+      <ModalBody>{t('settings.dialogConfirmLogout.prompt')}</ModalBody>

+      <ModalFooter>

+        <Button color="secondary" onClick={toggle}>

+          {t('operationDialog.cancel')}

+        </Button>

+        <Button color="danger" onClick={onConfirm}>

+          {t('operationDialog.confirm')}

+        </Button>

+      </ModalFooter>

+    </Modal>

+  );

+};

+

 const Settings: React.FC = (_) => {

   const { i18n, t } = useTranslation();

   const user = useUser();

   const history = useHistory();

 

-  const [dialog, setDialog] = useState<null | 'changepassword'>(null);

+  const [dialog, setDialog] = useState<null | 'changepassword' | 'logout'>(

+    null

+  );

 

   const language = i18n.language.slice(0, 2);

 

@@ -157,8 +193,7 @@ const Settings: React.FC = (_) => {
                 <h5

                   className="text-danger"

                   onClick={() => {

-                    userLogout();

-                    history.push('/');

+                    setDialog('logout');

                   }}

                 >

                   {t('settings.logout')}

@@ -185,14 +220,31 @@ const Settings: React.FC = (_) => {
             </Input>

           </Col>

         </Row>

-        {dialog === 'changepassword' ? (

-          <ChangePasswordDialog

-            open

-            close={() => {

-              setDialog(null);

-            }}

-          />

-        ) : null}

+        {(() => {

+          switch (dialog) {

+            case 'changepassword':

+              return (

+                <ChangePasswordDialog

+                  open

+                  close={() => {

+                    setDialog(null);

+                  }}

+                />

+              );

+            case 'logout':

+              return (

+                <ConfirmLogoutDialog

+                  toggle={() => setDialog(null)}

+                  onConfirm={() => {

+                    userLogout();

+                    history.push('/');

+                  }}

+                />

+              );

+            default:

+              return null;

+          }

+        })()}

       </Container>

     </>

   );