Skip to content

Commit 8ad95c5

Browse files
jc21jc21
committed
Set password for users
1 parent 038de3e commit 8ad95c5

File tree

7 files changed

+158
-2
lines changed

7 files changed

+158
-2
lines changed

‎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
);

0 commit comments

Comments
 (0)