blob: b9a8209b64bbab4559ae1ca1a9d86222e653d8db (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import React, { useState } from "react";
import { useHistory } from "react-router";
import { useTranslation } from "react-i18next";
import { useUser, userService } from "@/services/user";
import ChangePasswordDialog from "./ChangePasswordDialog";
import ChangeAvatarDialog from "./ChangeAvatarDialog";
import ChangeNicknameDialog from "./ChangeNicknameDialog";
import ConfirmDialog from "../common/dailog/ConfirmDialog";
import Card from "../common/Card";
import "./index.css";
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 (
<>
<div className="container">
{user ? (
<Card className="my-3 py-3">
<h3 className="px-3 mb-3 cru-color-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 cru-color-danger"
onClick={() => setDialog("changepassword")}
>
{t("settings.changePassword")}
</div>
<div
className="settings-item clickable cru-color-danger"
onClick={() => {
setDialog("logout");
}}
>
{t("settings.logout")}
</div>
</Card>
) : null}
<Card className="my-3 py-3">
<h3 className="px-3 mb-3 cru-color-primary">
{t("settings.subheaders.customization")}
</h3>
<div className="row settings-item first mx-0">
<div className="col col-12 col-sm-auto">
<div>{t("settings.languagePrimary")}</div>
<small className="d-block cru-color-secondary">
{t("settings.languageSecondary")}
</small>
</div>
<div className="col col-12 col-sm-auto">
<select
value={language}
onChange={(e) => {
void i18n.changeLanguage(e.target.value);
}}
>
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
</div>
</Card>
</div>
<ChangePasswordDialog
open={dialog === "changepassword"}
close={() => setDialog(null)}
/>
<ConfirmDialog
title="settings.dialogConfirmLogout.title"
body="settings.dialogConfirmLogout.prompt"
onClose={() => setDialog(null)}
open={dialog === "logout"}
onConfirm={() => {
void userService.logout().then(() => {
history.push("/");
});
}}
/>
<ChangeAvatarDialog
open={dialog === "changeavatar"}
close={() => setDialog(null)}
/>
<ChangeNicknameDialog
open={dialog === "changenickname"}
close={() => setDialog(null)}
/>
</>
);
};
export default SettingsPage;
|
