aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/app/views/settings/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/app/views/settings/index.tsx')
-rw-r--r--FrontEnd/src/app/views/settings/index.tsx138
1 files changed, 0 insertions, 138 deletions
diff --git a/FrontEnd/src/app/views/settings/index.tsx b/FrontEnd/src/app/views/settings/index.tsx
deleted file mode 100644
index 04a2777a..00000000
--- a/FrontEnd/src/app/views/settings/index.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import { useHistory } from "react-router";
-import { useTranslation } from "react-i18next";
-import { Container, Form, Row, Col, Button, Modal } from "react-bootstrap";
-
-import { useUser, userService } from "@/services/user";
-
-import ChangePasswordDialog from "./ChangePasswordDialog";
-import ChangeAvatarDialog from "./ChangeAvatarDialog";
-import ChangeNicknameDialog from "./ChangeNicknameDialog";
-
-const ConfirmLogoutDialog: React.FC<{
- onClose: () => void;
- onConfirm: () => void;
-}> = ({ onClose, onConfirm }) => {
- const { t } = useTranslation();
-
- return (
- <Modal show centered onHide={onClose}>
- <Modal.Header>
- <Modal.Title className="text-danger">
- {t("settings.dialogConfirmLogout.title")}
- </Modal.Title>
- </Modal.Header>
- <Modal.Body>{t("settings.dialogConfirmLogout.prompt")}</Modal.Body>
- <Modal.Footer>
- <Button variant="secondary" onClick={onClose}>
- {t("operationDialog.cancel")}
- </Button>
- <Button variant="danger" onClick={onConfirm}>
- {t("operationDialog.confirm")}
- </Button>
- </Modal.Footer>
- </Modal>
- );
-};
-
-const SettingsPage: React.FC = (_) => {
- const { i18n, t } = useTranslation();
- const user = useUser();
- const history = useHistory();
-
- const [dialog, setDialog] = useState<
- null | "changepassword" | "changeavatar" | "changenickname" | "logout"
- >(null);
-
- const language = i18n.language.slice(0, 2);
-
- return (
- <>
- <Container>
- {user ? (
- <div className="cru-card my-3 py-3">
- <h3 className="px-3 mb-3 text-primary">
- {t("settings.subheaders.account")}
- </h3>
- <div
- className="settings-item clickable first"
- onClick={() => setDialog("changeavatar")}
- >
- {t("settings.changeAvatar")}
- </div>
- <div
- className="settings-item clickable"
- onClick={() => setDialog("changenickname")}
- >
- {t("settings.changeNickname")}
- </div>
- <div
- className="settings-item clickable text-danger"
- onClick={() => setDialog("changepassword")}
- >
- {t("settings.changePassword")}
- </div>
- <div
- className="settings-item clickable text-danger"
- onClick={() => {
- setDialog("logout");
- }}
- >
- {t("settings.logout")}
- </div>
- </div>
- ) : null}
- <div className="cru-card my-3 py-3">
- <h3 className="px-3 mb-3 text-primary">
- {t("settings.subheaders.customization")}
- </h3>
- <Row className="settings-item first mx-0">
- <Col xs="12" sm="auto">
- <div>{t("settings.languagePrimary")}</div>
- <small className="d-block text-secondary">
- {t("settings.languageSecondary")}
- </small>
- </Col>
- <Col xs="auto" className="ms-auto">
- <Form.Control
- as="select"
- value={language}
- onChange={(e) => {
- void i18n.changeLanguage(e.target.value);
- }}
- >
- <option value="zh">中文</option>
- <option value="en">English</option>
- </Form.Control>
- </Col>
- </Row>
- </div>
- </Container>
- {(() => {
- switch (dialog) {
- case "changepassword":
- return <ChangePasswordDialog open close={() => setDialog(null)} />;
- case "logout":
- return (
- <ConfirmLogoutDialog
- onClose={() => setDialog(null)}
- onConfirm={() => {
- void userService.logout().then(() => {
- history.push("/");
- });
- }}
- />
- );
- case "changeavatar":
- return <ChangeAvatarDialog open close={() => setDialog(null)} />;
- case "changenickname":
- return <ChangeNicknameDialog open close={() => setDialog(null)} />;
- default:
- return null;
- }
- })()}
- </>
- );
-};
-
-export default SettingsPage;