Skip to content

Commit 33b0b1a

Browse files
hotzenklotzhotzenklotz
committed
formatting
1 parent 9367076 commit 33b0b1a

File tree

9 files changed

+172
-170
lines changed

9 files changed

+172
-170
lines changed

‎biome.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,10 @@
100100
},
101101
"overrides": [
102102
{
103-
"include": [
104-
"**/package.json"
105-
],
103+
"include": ["**/package.json"],
106104
"formatter": {
107105
"lineWidth": 1
108106
}
109107
}
110108
]
111-
}
109+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { SafetyOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
12
import { Layout, Menu } from "antd";
2-
import { Route, Switch, useLocation, useHistory } from "react-router-dom";
3-
import { LockOutlined, SafetyOutlined, SettingOutlined, UserOutlined } from "@ant-design/icons";
4-
import ChangePasswordView from "./change_password_view";
3+
import { Route, Switch, useHistory, useLocation } from "react-router-dom";
54
import AuthTokenView from "./auth_token_view";
5+
import ChangePasswordView from "./change_password_view";
66
import ProfileView from "./profile_view";
77

88
const { Sider, Content } = Layout;

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import Icon, { CopyOutlined, InfoCircleOutlined, SwapOutlined } from "@ant-design/icons";
1+
import { InfoCircleOutlined, SwapOutlined } from "@ant-design/icons";
22
import { getAuthToken, revokeAuthToken } from "admin/rest_api";
3-
import { Button, Typography, Descriptions, Form, Input, Row, Space, Spin, Popover } from "antd";
3+
import { Button, Descriptions, Popover, Spin, Typography } from "antd";
44
import { useWkSelector } from "libs/react_hooks";
5-
import Toast from "libs/toast";
65
import { useEffect, useState } from "react";
76
import { AccountSettingTitle } from "./profile_view";
87

@@ -34,18 +33,6 @@ function AuthTokenView() {
3433
}
3534
};
3635

37-
const copyTokenToClipboard = async () => {
38-
await navigator.clipboard.writeText(currentToken);
39-
Toast.success("Token copied to clipboard");
40-
};
41-
42-
const copyOrganizationIdToClipboard = async () => {
43-
if (activeUser != null) {
44-
await navigator.clipboard.writeText(activeUser.organization);
45-
Toast.success("Organization ID copied to clipboard");
46-
}
47-
};
48-
4936
const APIitems = [
5037
{
5138
label: "Auth Token",

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

Lines changed: 148 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { LockOutlined } from "@ant-design/icons";
2-
import { Alert, Button, Col, Descriptions, Form, Input, Row, Space } from "antd";
2+
import { Alert, Button, Descriptions, Form, Input, List, Space } from "antd";
33
import Request from "libs/request";
44
import Toast from "libs/toast";
55
import messages from "messages";
6+
import { useState } from "react";
67
import { type RouteComponentProps, withRouter } from "react-router-dom";
78
import { logoutUserAction } from "viewer/model/actions/user_actions";
89
import Store from "viewer/store";
@@ -18,6 +19,7 @@ const MIN_PASSWORD_LENGTH = 8;
1819

1920
function ChangePasswordView({ history }: Props) {
2021
const [form] = Form.useForm();
22+
const [isResetPasswordVisible, setResetPasswordVisible] = useState(false);
2123

2224
function onFinish(formValues: Record<string, any>) {
2325
Request.sendJSONReceiveJSON("/api/auth/changePassword", {
@@ -45,145 +47,160 @@ function ChangePasswordView({ history }: Props) {
4547
return Promise.resolve();
4648
}
4749

48-
const items = [
50+
function getPasswordComponent() {
51+
return isResetPasswordVisible ? (
52+
<Form onFinish={onFinish} form={form}>
53+
<FormItem
54+
name="oldPassword"
55+
rules={[
56+
{
57+
required: true,
58+
message: messages["auth.reset_old_password"],
59+
},
60+
]}
61+
>
62+
<Password
63+
prefix={
64+
<LockOutlined
65+
style={{
66+
fontSize: 13,
67+
}}
68+
/>
69+
}
70+
placeholder="Old Password"
71+
/>
72+
</FormItem>
73+
<FormItem
74+
hasFeedback
75+
name={["password", "password1"]}
76+
rules={[
77+
{
78+
required: true,
79+
message: messages["auth.reset_new_password"],
80+
},
81+
{
82+
min: MIN_PASSWORD_LENGTH,
83+
message: messages["auth.registration_password_length"],
84+
},
85+
{
86+
validator: (_, value: string) =>
87+
checkPasswordsAreMatching(value, ["password", "password2"]),
88+
},
89+
]}
90+
>
91+
<Password
92+
prefix={
93+
<LockOutlined
94+
style={{
95+
fontSize: 13,
96+
}}
97+
/>
98+
}
99+
placeholder="New Password"
100+
/>
101+
</FormItem>
102+
<FormItem
103+
hasFeedback
104+
name={["password", "password2"]}
105+
rules={[
106+
{
107+
required: true,
108+
message: messages["auth.reset_new_password2"],
109+
},
110+
{
111+
min: MIN_PASSWORD_LENGTH,
112+
message: messages["auth.registration_password_length"],
113+
},
114+
{
115+
validator: (_, value: string) =>
116+
checkPasswordsAreMatching(value, ["password", "password1"]),
117+
},
118+
]}
119+
>
120+
<Password
121+
prefix={
122+
<LockOutlined
123+
style={{
124+
fontSize: 13,
125+
}}
126+
/>
127+
}
128+
placeholder="Confirm New Password"
129+
/>
130+
</FormItem>
131+
<Alert
132+
type="info"
133+
message={messages["auth.reset_logout"]}
134+
showIcon
135+
style={{
136+
marginBottom: 24,
137+
}}
138+
/>
139+
<FormItem>
140+
<Space>
141+
<Button onClick={() => setResetPasswordVisible(false)}>Cancel</Button>
142+
<Button type="primary" htmlType="submit">
143+
Update Password
144+
</Button>
145+
</Space>
146+
</FormItem>
147+
</Form>
148+
) : (
149+
<>
150+
<Space.Compact>
151+
<Input.Password visibilityToggle={false} readOnly value="******************" />
152+
<Button type="primary" onClick={handleResetPassword}>
153+
Reset Password
154+
</Button>
155+
</Space.Compact>
156+
</>
157+
);
158+
}
159+
160+
function handleResetPassword() {
161+
setResetPasswordVisible(true);
162+
}
163+
164+
const passwordItems = [
49165
{
50166
label: "Password",
51-
children: (
52-
<>
53-
<Space.Compact>
54-
<Input.Password
55-
prefix={
56-
<LockOutlined
57-
style={{
58-
fontSize: 13,
59-
}}
60-
/>
61-
}
62-
value="***************"
63-
/>
64-
<Button
65-
type="primary"
66-
htmlType="submit"
67-
style={{
68-
width: "100%",
69-
}}
70-
>
71-
Change Password
72-
</Button>
73-
</Space.Compact>
74-
</>
75-
),
167+
children: getPasswordComponent(),
168+
},
169+
];
170+
171+
const passKeyList = [
172+
{
173+
name: "passkey1",
174+
details: "2024-05-01",
175+
},
176+
{
177+
name: "passkey2",
178+
details: "2025-05-01",
76179
},
77180
];
78181

79182
return (
80183
<div>
81184
<AccountSettingTitle title="Password" description="Manage and update your password" />
82-
<Descriptions column={2} layout="vertical" colon={false} items={items} />
83-
<Row>
84-
<Col span={8}>
85-
<Form onFinish={onFinish} form={form}>
86-
<FormItem
87-
name="oldPassword"
88-
rules={[
89-
{
90-
required: true,
91-
message: messages["auth.reset_old_password"],
92-
},
93-
]}
94-
>
95-
<Password
96-
prefix={
97-
<LockOutlined
98-
style={{
99-
fontSize: 13,
100-
}}
101-
/>
102-
}
103-
placeholder="Old Password"
104-
/>
105-
</FormItem>
106-
<FormItem
107-
hasFeedback
108-
name={["password", "password1"]}
109-
rules={[
110-
{
111-
required: true,
112-
message: messages["auth.reset_new_password"],
113-
},
114-
{
115-
min: MIN_PASSWORD_LENGTH,
116-
message: messages["auth.registration_password_length"],
117-
},
118-
{
119-
validator: (_, value: string) =>
120-
checkPasswordsAreMatching(value, ["password", "password2"]),
121-
},
122-
]}
123-
>
124-
<Password
125-
prefix={
126-
<LockOutlined
127-
style={{
128-
fontSize: 13,
129-
}}
130-
/>
131-
}
132-
placeholder="New Password"
133-
/>
134-
</FormItem>
135-
<FormItem
136-
hasFeedback
137-
name={["password", "password2"]}
138-
rules={[
139-
{
140-
required: true,
141-
message: messages["auth.reset_new_password2"],
142-
},
143-
{
144-
min: MIN_PASSWORD_LENGTH,
145-
message: messages["auth.registration_password_length"],
146-
},
147-
{
148-
validator: (_, value: string) =>
149-
checkPasswordsAreMatching(value, ["password", "password1"]),
150-
},
151-
]}
152-
>
153-
<Password
154-
prefix={
155-
<LockOutlined
156-
style={{
157-
fontSize: 13,
158-
}}
159-
/>
160-
}
161-
placeholder="Confirm New Password"
162-
/>
163-
</FormItem>
164-
<Alert
165-
type="info"
166-
message={messages["auth.reset_logout"]}
167-
showIcon
168-
style={{
169-
marginBottom: 24,
170-
}}
171-
/>
172-
<FormItem>
173-
<Button
174-
type="primary"
175-
htmlType="submit"
176-
style={{
177-
width: "100%",
178-
}}
179-
>
180-
Update Password
181-
</Button>
182-
</FormItem>
183-
</Form>
184-
</Col>
185-
</Row>
185+
<Descriptions
186+
column={2}
187+
layout="vertical"
188+
colon={false}
189+
items={passwordItems}
190+
style={{ marginBottom: "3rem" }}
191+
/>
192+
186193
<AccountSettingTitle title="Passkeys" description="Login passwordless with Passkeys" />
194+
<List
195+
className="demo-loadmore-list"
196+
itemLayout="horizontal"
197+
dataSource={passKeyList}
198+
renderItem={(item) => (
199+
<List.Item actions={[<a key="list-delete">Delete</a>]}>
200+
<List.Item.Meta title={item.name} description={item.details} />
201+
</List.Item>
202+
)}
203+
/>
187204
</div>
188205
);
189206
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { Descriptions, Typography, Dropdown, Divider, Card } from "antd";
1+
import { CheckOutlined, DownOutlined } from "@ant-design/icons";
2+
import { updateSelectedThemeOfUser } from "admin/rest_api";
3+
import { Descriptions, Divider, Dropdown, Typography } from "antd";
24
import { useWkSelector } from "libs/react_hooks";
3-
import { formatUserName } from "viewer/model/accessors/user_accessor";
45
import * as Utils from "libs/utils";
5-
import { CheckOutlined, DownOutlined } from "@ant-design/icons";
6-
import type { APIUserTheme } from "types/api_types";
76
import { getSystemColorTheme } from "theme";
8-
import { updateSelectedThemeOfUser } from "admin/rest_api";
9-
import Store from "viewer/store";
10-
import { setActiveUserAction } from "viewer/model/actions/user_actions";
7+
import type { APIUserTheme } from "types/api_types";
8+
import { formatUserName } from "viewer/model/accessors/user_accessor";
119
import { setThemeAction } from "viewer/model/actions/ui_actions";
10+
import { setActiveUserAction } from "viewer/model/actions/user_actions";
11+
import Store from "viewer/store";
1212

13-
const { Title, Text } = Typography;
13+
const { Text } = Typography;
1414

1515
export function AccountSettingTitle({
1616
title,

0 commit comments

Comments
 (0)