-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
SettingsPage.tsx
125 lines (105 loc) · 3.5 KB
/
SettingsPage.tsx
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
117
118
119
120
121
122
123
124
125
import app from '../../forum/app';
import UserPage, { IUserPageAttrs } from './UserPage';
import ItemList from '../../common/utils/ItemList';
import Switch from '../../common/components/Switch';
import Button from '../../common/components/Button';
import FieldSet from '../../common/components/FieldSet';
import NotificationGrid from './NotificationGrid';
import ChangePasswordModal from './ChangePasswordModal';
import ChangeEmailModal from './ChangeEmailModal';
import listItems from '../../common/helpers/listItems';
import extractText from '../../common/utils/extractText';
import type Mithril from 'mithril';
import classList from '../../common/utils/classList';
/**
* The `SettingsPage` component displays the user's settings control panel, in
* the context of their user profile.
*/
export default class SettingsPage<CustomAttrs extends IUserPageAttrs = IUserPageAttrs> extends UserPage<CustomAttrs> {
discloseOnlineLoading?: boolean;
oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
super.oninit(vnode);
this.show(app.session.user!);
app.setTitle(extractText(app.translator.trans('core.forum.settings.title')));
}
content() {
return (
<div className="SettingsPage">
<ul>{listItems(this.settingsItems().toArray())}</ul>
</div>
);
}
/**
* Build an item list for the user's settings controls.
*/
settingsItems() {
const items = new ItemList<Mithril.Children>();
['account', 'notifications', 'privacy'].forEach((section, index) => {
const sectionItems = `${section}Items` as 'accountItems' | 'notificationsItems' | 'privacyItems';
items.add(
section,
<FieldSet
className={classList(`Settings-${section}`, { 'FieldSet--col': section === 'account' })}
label={app.translator.trans(`core.forum.settings.${section}_heading`)}
>
{this[sectionItems]().toArray()}
</FieldSet>,
100 - index * 10
);
});
return items;
}
/**
* Build an item list for the user's account settings.
*/
accountItems() {
const items = new ItemList<Mithril.Children>();
items.add(
'changePassword',
<Button className="Button" onclick={() => app.modal.show(ChangePasswordModal)}>
{app.translator.trans('core.forum.settings.change_password_button')}
</Button>,
100
);
items.add(
'changeEmail',
<Button className="Button" onclick={() => app.modal.show(ChangeEmailModal)}>
{app.translator.trans('core.forum.settings.change_email_button')}
</Button>,
90
);
return items;
}
/**
* Build an item list for the user's notification settings.
*/
notificationsItems() {
const items = new ItemList<Mithril.Children>();
items.add('notificationGrid', <NotificationGrid user={this.user} />, 100);
return items;
}
/**
* Build an item list for the user's privacy settings.
*/
privacyItems() {
const items = new ItemList<Mithril.Children>();
items.add(
'discloseOnline',
<Switch
state={this.user!.preferences()?.discloseOnline}
onchange={(value: boolean) => {
this.discloseOnlineLoading = true;
this.user!.savePreferences({ discloseOnline: value }).then(() => {
this.discloseOnlineLoading = false;
m.redraw();
});
}}
loading={this.discloseOnlineLoading}
>
{app.translator.trans('core.forum.settings.privacy_disclose_online_label')}
</Switch>,
100
);
return items;
}
}