From b25bc9b56a2e4b1df0b039f1bc5bc4dead5335b1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 7 Jun 2020 14:21:17 +0800
Subject: feat(front): Fix #74 .

---
 Timeline/ClientApp/src/locales/en/translation.ts |  5 ++
 Timeline/ClientApp/src/locales/scheme.ts         |  4 ++
 Timeline/ClientApp/src/locales/zh/translation.ts |  4 ++
 Timeline/ClientApp/src/settings/Settings.tsx     | 76 ++++++++++++++++++++----
 4 files changed, 77 insertions(+), 12 deletions(-)

(limited to 'Timeline/ClientApp/src')

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>
     </>
   );
-- 
cgit v1.2.3