blob: f25911d751a82cf3bc7001d530bc231beafcf0b0 (
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
115
116
|
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 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>
</Card>
) : null}
<Card className="my-3 py-3">
<h3 className="px-3 mb-3 text-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 text-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>
{(() => {
switch (dialog) {
case "changepassword":
return <ChangePasswordDialog open close={() => setDialog(null)} />;
case "logout":
return (
<ConfirmDialog
title="settings.dialogConfirmLogout.title"
body="settings.dialogConfirmLogout.prompt"
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;
|
