Skip to content

Commit 58c2d49

Browse files
hotzenklotzhotzenklotz
committed
Refactor account settings view and add profile management
1 parent 8f2428c commit 58c2d49

File tree

4 files changed

+250
-226
lines changed

4 files changed

+250
-226
lines changed

‎frontend/javascripts/admin/auth/account_settings_view.tsx

Lines changed: 28 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,12 @@
11
import { Layout, Menu } from "antd";
22
import { Route, Switch, useLocation, useHistory } from "react-router-dom";
3-
import {
4-
CheckOutlined,
5-
LockOutlined,
6-
MailOutlined,
7-
SafetyOutlined,
8-
SettingOutlined,
9-
} from "@ant-design/icons";
3+
import { LockOutlined, SafetyOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
104
import ChangePasswordView from "./change_password_view";
115
import AuthTokenView from "./auth_token_view";
12-
import { useWkSelector } from "libs/react_hooks";
13-
import type { APIUserTheme } from "types/api_types";
14-
import { getSystemColorTheme } from "theme";
15-
import { updateSelectedThemeOfUser } from "admin/rest_api";
16-
import Store from "viewer/store";
17-
import { setActiveUserAction } from "viewer/model/actions/user_actions";
18-
import { setThemeAction } from "viewer/model/actions/ui_actions";
6+
import ProfileView from "./profile_view";
197

208
const { Sider, Content } = Layout;
219

22-
function EmailSettings() {
23-
return (
24-
<div>
25-
<h2>Email Settings</h2>
26-
<p>Email settings page content will be added here.</p>
27-
</div>
28-
);
29-
}
30-
3110
function PasskeysSettings() {
3211
return (
3312
<div>
@@ -37,66 +16,16 @@ function PasskeysSettings() {
3716
);
3817
}
3918

40-
function AppearanceSettings() {
41-
const activeUser = useWkSelector((state) => state.activeUser);
42-
const { selectedTheme } = activeUser || { selectedTheme: "auto" };
43-
44-
const setSelectedTheme = async (newTheme: APIUserTheme) => {
45-
if (!activeUser) return;
46-
47-
if (newTheme === "auto") newTheme = getSystemColorTheme();
48-
49-
if (selectedTheme !== newTheme) {
50-
const newUser = await updateSelectedThemeOfUser(activeUser.id, newTheme);
51-
Store.dispatch(setThemeAction(newTheme));
52-
Store.dispatch(setActiveUserAction(newUser));
53-
}
54-
};
55-
56-
return (
57-
<div>
58-
<h2>Appearance</h2>
59-
<div style={{ marginTop: 16 }}>
60-
<h3>Theme</h3>
61-
<Menu
62-
mode="inline"
63-
selectedKeys={[selectedTheme]}
64-
items={[
65-
{
66-
key: "auto",
67-
label: "System Default",
68-
icon: selectedTheme === "auto" ? <CheckOutlined /> : null,
69-
onClick: () => setSelectedTheme("auto"),
70-
},
71-
{
72-
key: "light",
73-
label: "Light",
74-
icon: selectedTheme === "light" ? <CheckOutlined /> : null,
75-
onClick: () => setSelectedTheme("light"),
76-
},
77-
{
78-
key: "dark",
79-
label: "Dark",
80-
icon: selectedTheme === "dark" ? <CheckOutlined /> : null,
81-
onClick: () => setSelectedTheme("dark"),
82-
},
83-
]}
84-
/>
85-
</div>
86-
</div>
87-
);
88-
}
89-
9019
function AccountSettingsView() {
9120
const location = useLocation();
9221
const history = useHistory();
93-
const selectedKey = location.pathname.split("/").pop() || "email";
22+
const selectedKey = location.pathname.split("/").pop() || "profile";
9423

9524
const menuItems = [
9625
{
97-
key: "email",
98-
icon: <MailOutlined />,
99-
label: "Email",
26+
key: "profile",
27+
icon: <UserOutlined />,
28+
label: "Profile",
10029
},
10130
{
10231
key: "password",
@@ -113,34 +42,31 @@ function AccountSettingsView() {
11342
icon: <SettingOutlined />,
11443
label: "Auth Token",
11544
},
116-
{
117-
key: "appearance",
118-
icon: <SettingOutlined />,
119-
label: "Appearance",
120-
},
12145
];
12246

12347
return (
124-
<Layout style={{ minHeight: "calc(100vh - 64px)" }}>
125-
<Sider width={200} theme="light">
126-
<Menu
127-
mode="inline"
128-
selectedKeys={[selectedKey]}
129-
style={{ height: "100%" }}
130-
items={menuItems}
131-
onClick={({ key }) => history.push(`/account/${key}`)}
132-
/>
133-
</Sider>
134-
<Content style={{ padding: "24px", minHeight: 280 }}>
135-
<Switch>
136-
<Route path="/account/email" component={EmailSettings} />
137-
<Route path="/account/password" component={ChangePasswordView} />
138-
<Route path="/account/passkeys" component={PasskeysSettings} />
139-
<Route path="/account/token" component={AuthTokenView} />
140-
<Route path="/account/appearance" component={AppearanceSettings} />
141-
<Route path="/account" component={EmailSettings} />
142-
</Switch>
143-
</Content>
48+
<Layout style={{ minHeight: "calc(100vh - 64px)" }} className="container">
49+
<h1>Account Settings</h1>
50+
<Layout>
51+
<Sider width={200}>
52+
<Menu
53+
mode="inline"
54+
selectedKeys={[selectedKey]}
55+
style={{ height: "100%" }}
56+
items={menuItems}
57+
onClick={({ key }) => history.push(`/account/${key}`)}
58+
/>
59+
</Sider>
60+
<Content style={{ padding: "24px", paddingTop: 0, minHeight: 280 }}>
61+
<Switch>
62+
<Route path="/account/profile" component={ProfileView} />
63+
<Route path="/account/password" component={ChangePasswordView} />
64+
<Route path="/account/passkeys" component={PasskeysSettings} />
65+
<Route path="/account/token" component={AuthTokenView} />
66+
<Route path="/account" component={ProfileView} />
67+
</Switch>
68+
</Content>
69+
</Layout>
14470
</Layout>
14571
);
14672
}

‎frontend/javascripts/admin/auth/auth_token_view.tsx

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,11 @@ function AuthTokenView() {
4646

4747
return (
4848
<div>
49-
<Row
50-
justify="center"
51-
style={{
52-
padding: 50,
53-
}}
54-
align="middle"
55-
>
49+
<h2>API Authentication</h2>
50+
<Row>
5651
<Col span={8}>
5752
<Spin size="large" spinning={isLoading}>
58-
<h3>Auth Token</h3>
53+
<h4>Auth Token</h4>
5954
<Form form={form}>
6055
<FormItem>
6156
<Space.Compact>
@@ -95,17 +90,15 @@ function AuthTokenView() {
9590
</>
9691
)}
9792
</Spin>
98-
</Col>
99-
</Row>
100-
<Row justify="center" align="middle">
101-
<Col span={8}>
93+
10294
<p>
103-
An Auth Token is a series of symbols that serves to authenticate you. It is used in
104-
communication with the Python API and sent with every request to verify your identity.
95+
Your Auth Token is a unique string of characters that authenticates you when using our
96+
<a href="https://docs.webknossos.org/webknossos-py/index.html"> Python API</a>. It is
97+
request to verify your identity.
10598
</p>
10699
<p>
107-
You should revoke it if somebody else has acquired your token or you have the suspicion
108-
this has happened.{" "}
100+
Revoke your token if it has been compromised or if you suspect someone else has gained
101+
access to it.
109102
<a href="https://docs.webknossos.org/webknossos-py/index.html">Read more</a>
110103
</p>
111104
</Col>

0 commit comments

Comments
 (0)