Skip to content

Commit e44748e

Browse files
jc21jc21
committed
Set password for users
1 parent 538d28d commit e44748e

File tree

9 files changed

+197
-2
lines changed

9 files changed

+197
-2
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"country-flag-icons": "^1.5.19",
2424
"date-fns": "^4.1.0",
2525
"formik": "^2.4.6",
26+
"generate-password-browser": "^1.1.0",
2627
"humps": "^2.0.1",
2728
"query-string": "^9.2.2",
2829
"react": "^19.1.1",

‎frontend/src/locale/lang/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@
5858
"offline": "Offline",
5959
"online": "Online",
6060
"password": "Password",
61+
"password.generate": "Generate random password",
62+
"password.hide": "Hide Password",
63+
"password.show": "Show Password",
6164
"permissions.hidden": "Hidden",
6265
"permissions.manage": "Manage",
6366
"permissions.view": "View Only",
@@ -101,6 +104,7 @@
101104
"user.new": "New User",
102105
"user.new-password": "New Password",
103106
"user.nickname": "Nickname",
107+
"user.set-password": "Set Password",
104108
"user.set-permissions": "Set Permissions for {name}",
105109
"user.switch-dark": "Switch to Dark mode",
106110
"user.switch-light": "Switch to Light mode",

‎frontend/src/locale/src/en.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,15 @@
176176
"password": {
177177
"defaultMessage": "Password"
178178
},
179+
"password.generate": {
180+
"defaultMessage": "Generate random password"
181+
},
182+
"password.hide": {
183+
"defaultMessage": "Hide Password"
184+
},
185+
"password.show": {
186+
"defaultMessage": "Show Password"
187+
},
179188
"permissions.hidden": {
180189
"defaultMessage": "Hidden"
181190
},
@@ -305,6 +314,9 @@
305314
"user.nickname": {
306315
"defaultMessage": "Nickname"
307316
},
317+
"user.set-password": {
318+
"defaultMessage": "Set Password"
319+
},
308320
"user.set-permissions": {
309321
"defaultMessage": "Set Permissions for {name}"
310322
},

‎frontend/src/modals/SetPasswordModal.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { Field, Form, Formik } from "formik";
2+
import { generate } from "generate-password-browser";
3+
import { useState } from "react";
4+
import { Alert } from "react-bootstrap";
5+
import Modal from "react-bootstrap/Modal";
6+
import { updateAuth } from "src/api/backend";
7+
import { Button } from "src/components";
8+
import { intl } from "src/locale";
9+
import { validateString } from "src/modules/Validations";
10+
11+
interface Props {
12+
userId: number;
13+
onClose: () => void;
14+
}
15+
export function SetPasswordModal({ userId, onClose }: Props) {
16+
const [error, setError] = useState<string | null>(null);
17+
const [showPassword, setShowPassword] = useState(false);
18+
19+
const onSubmit = async (values: any, { setSubmitting }: any) => {
20+
setError(null);
21+
try {
22+
await updateAuth(userId, values.new);
23+
onClose();
24+
} catch (err: any) {
25+
setError(intl.formatMessage({ id: err.message }));
26+
}
27+
setSubmitting(false);
28+
};
29+
30+
return (
31+
<Modal show onHide={onClose} animation={false}>
32+
<Formik
33+
initialValues={
34+
{
35+
new: "",
36+
} as any
37+
}
38+
onSubmit={onSubmit}
39+
>
40+
{({ isSubmitting }) => (
41+
<Form>
42+
<Modal.Header closeButton>
43+
<Modal.Title>{intl.formatMessage({ id: "user.set-password" })}</Modal.Title>
44+
</Modal.Header>
45+
<Modal.Body>
46+
<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
47+
{error}
48+
</Alert>
49+
<div className="mb-3">
50+
<Field name="new" validate={validateString(8, 100)}>
51+
{({ field, form }: any) => (
52+
<>
53+
<p className="text-end">
54+
<small>
55+
<a
56+
href="#"
57+
onClick={(e) => {
58+
e.preventDefault();
59+
form.setFieldValue(
60+
field.name,
61+
generate({
62+
length: 12,
63+
numbers: true,
64+
}),
65+
);
66+
setShowPassword(true);
67+
}}
68+
>
69+
{intl.formatMessage({
70+
id: "password.generate",
71+
})}
72+
</a>{" "}
73+
&mdash;{" "}
74+
<a
75+
href="#"
76+
className="text-xs"
77+
onClick={(e) => {
78+
e.preventDefault();
79+
setShowPassword(!showPassword);
80+
}}
81+
>
82+
{intl.formatMessage({
83+
id: showPassword ? "password.hide" : "password.show",
84+
})}
85+
</a>
86+
</small>
87+
</p>
88+
<div className="form-floating mb-3">
89+
<input
90+
id="new"
91+
type={showPassword ? "text" : "password"}
92+
required
93+
className={`form-control ${form.errors.new && form.touched.new ? "is-invalid" : ""}`}
94+
placeholder={intl.formatMessage({ id: "user.new-password" })}
95+
{...field}
96+
/>
97+
<label htmlFor="new">
98+
{intl.formatMessage({ id: "user.new-password" })}
99+
</label>
100+
101+
{form.errors.new ? (
102+
<div className="invalid-feedback">
103+
{form.errors.new && form.touched.new ? form.errors.new : null}
104+
</div>
105+
) : null}
106+
</div>
107+
</>
108+
)}
109+
</Field>
110+
</div>
111+
</Modal.Body>
112+
<Modal.Footer>
113+
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
114+
{intl.formatMessage({ id: "cancel" })}
115+
</Button>
116+
<Button
117+
type="submit"
118+
actionType="primary"
119+
className="ms-auto"
120+
data-bs-dismiss="modal"
121+
isLoading={isSubmitting}
122+
disabled={isSubmitting}
123+
>
124+
{intl.formatMessage({ id: "save" })}
125+
</Button>
126+
</Modal.Footer>
127+
</Form>
128+
)}
129+
</Formik>
130+
</Modal>
131+
);
132+
}

‎frontend/src/modals/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from "./ChangePasswordModal";
22
export * from "./DeleteConfirmModal";
33
export * from "./PermissionsModal";
4+
export * from "./SetPasswordModal";
45
export * from "./UserModal";

‎frontend/src/pages/Dashboard/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ More for api, then implement here:
134134
- Properly implement refresh tokens
135135
- Add error message_18n for all backend errors
136136
- minor: certificates expand with hosts needs to omit 'is_deleted'
137+
- properly wrap all logger.debug called in isDebug check
138+
137139
`}</code>
138140
</pre>
139141
</div>

‎frontend/src/pages/Users/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export default function Table({
125125
}}
126126
>
127127
<IconLock size={16} />
128-
{intl.formatMessage({ id: "user.change-password" })}
128+
{intl.formatMessage({ id: "user.set-password" })}
129129
</a>
130130
<div className="dropdown-divider" />
131131
<a

‎frontend/src/pages/Users/TableWrapper.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { deleteUser } from "src/api/backend";
55
import { Button, LoadingPage } from "src/components";
66
import { useUser, useUsers } from "src/hooks";
77
import { intl } from "src/locale";
8-
import { DeleteConfirmModal, PermissionsModal, UserModal } from "src/modals";
8+
import { DeleteConfirmModal, PermissionsModal, SetPasswordModal, UserModal } from "src/modals";
99
import { showSuccess } from "src/notifications";
1010
import Table from "./Table";
1111

1212
export default function TableWrapper() {
1313
const [editUserId, setEditUserId] = useState(0 as number | "new");
1414
const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
15+
const [editUserPasswordId, setEditUserPasswordId] = useState(0);
1516
const [deleteUserId, setDeleteUserId] = useState(0);
1617
const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
1718
const { data: currentUser } = useUser("me");
@@ -64,6 +65,7 @@ export default function TableWrapper() {
6465
currentUserId={currentUser?.id}
6566
onEditUser={(id: number) => setEditUserId(id)}
6667
onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
68+
onSetPassword={(id: number) => setEditUserPasswordId(id)}
6769
onDeleteUser={(id: number) => setDeleteUserId(id)}
6870
onNewUser={() => setEditUserId("new")}
6971
/>
@@ -81,6 +83,9 @@ export default function TableWrapper() {
8183
{intl.formatMessage({ id: "user.delete.content" })}
8284
</DeleteConfirmModal>
8385
) : null}
86+
{editUserPasswordId ? (
87+
<SetPasswordModal userId={editUserPasswordId} onClose={() => setEditUserPasswordId(0)} />
88+
) : null}
8489
</div>
8590
</div>
8691
);

‎frontend/yarn.lock‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,11 @@ assertion-error@^2.0.1:
10041004
resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
10051005
integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
10061006

1007+
base64-js@^1.3.1:
1008+
version "1.5.1"
1009+
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
1010+
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
1011+
10071012
bootstrap@5.3.7:
10081013
version "5.3.7"
10091014
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.7.tgz#8640065036124d961d885d80b5945745e1154d90"
@@ -1026,6 +1031,14 @@ browserslist@^4.24.0:
10261031
node-releases "^2.0.19"
10271032
update-browserslist-db "^1.1.3"
10281033

1034+
buffer@^6.0.3:
1035+
version "6.0.3"
1036+
resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
1037+
integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
1038+
dependencies:
1039+
base64-js "^1.3.1"
1040+
ieee754 "^1.2.1"
1041+
10291042
cac@^6.7.14:
10301043
version "6.7.14"
10311044
resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
@@ -1254,6 +1267,14 @@ fsevents@~2.3.2, fsevents@~2.3.3:
12541267
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
12551268
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
12561269

1270+
generate-password-browser@^1.1.0:
1271+
version "1.1.0"
1272+
resolved "https://registry.yarnpkg.com/generate-password-browser/-/generate-password-browser-1.1.0.tgz#ec1661d0f3ce0b36e2ffdf6099578725a43d12e9"
1273+
integrity sha512-qsQve0rVbCqGqAfKgZwjxKUfI1d1nyd22dz+kE8gn1iw1LxGkR+Slsl79XXfm2wxuK27IkopTs5KXcOEQnhg0w==
1274+
dependencies:
1275+
buffer "^6.0.3"
1276+
randombytes "^2.0.5"
1277+
12571278
gensync@^1.0.0-beta.2:
12581279
version "1.0.0-beta.2"
12591280
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -1285,6 +1306,11 @@ humps@^2.0.1:
12851306
resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
12861307
integrity sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==
12871308

1309+
ieee754@^1.2.1:
1310+
version "1.2.1"
1311+
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
1312+
integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
1313+
12881314
immutable@^5.0.2:
12891315
version "5.1.3"
12901316
resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.3.tgz#e6486694c8b76c37c063cca92399fa64098634d4"
@@ -1532,6 +1558,13 @@ raf@^3.4.1:
15321558
dependencies:
15331559
performance-now "^2.1.0"
15341560

1561+
randombytes@^2.0.5:
1562+
version "2.1.0"
1563+
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
1564+
integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
1565+
dependencies:
1566+
safe-buffer "^5.1.0"
1567+
15351568
react-bootstrap@^2.10.10:
15361569
version "2.10.10"
15371570
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.10.10.tgz#be0b0d951a69987152d75c0e6986c80425efdf21"
@@ -1687,6 +1720,11 @@ rooks@^9.2.0:
16871720
raf "^3.4.1"
16881721
use-sync-external-store "^1.4.0"
16891722

1723+
safe-buffer@^5.1.0:
1724+
version "5.2.1"
1725+
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
1726+
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
1727+
16901728
sass@^1.91.0:
16911729
version "1.92.0"
16921730
resolved "https://registry.yarnpkg.com/sass/-/sass-1.92.0.tgz#02d9ae21ce1763def2cd461449aac2eb56364796"

0 commit comments

Comments
 (0)