diff --git a/frontend/src/locale/lang/en.json b/frontend/src/locale/lang/en.json index 1d270543..e1e7cc5e 100644 --- a/frontend/src/locale/lang/en.json +++ b/frontend/src/locale/lang/en.json @@ -58,6 +58,9 @@ "offline": "Offline", "online": "Online", "password": "Password", + "password.generate": "Generate random password", + "password.hide": "Hide Password", + "password.show": "Show Password", "permissions.hidden": "Hidden", "permissions.manage": "Manage", "permissions.view": "View Only", @@ -101,6 +104,7 @@ "user.new": "New User", "user.new-password": "New Password", "user.nickname": "Nickname", + "user.set-password": "Set Password", "user.set-permissions": "Set Permissions for {name}", "user.switch-dark": "Switch to Dark mode", "user.switch-light": "Switch to Light mode", diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json index 541e3732..951a47ba 100644 --- a/frontend/src/locale/src/en.json +++ b/frontend/src/locale/src/en.json @@ -176,6 +176,15 @@ "password": { "defaultMessage": "Password" }, + "password.generate": { + "defaultMessage": "Generate random password" + }, + "password.hide": { + "defaultMessage": "Hide Password" + }, + "password.show": { + "defaultMessage": "Show Password" + }, "permissions.hidden": { "defaultMessage": "Hidden" }, @@ -305,6 +314,9 @@ "user.nickname": { "defaultMessage": "Nickname" }, + "user.set-password": { + "defaultMessage": "Set Password" + }, "user.set-permissions": { "defaultMessage": "Set Permissions for {name}" }, diff --git a/frontend/src/modals/SetPasswordModal.tsx b/frontend/src/modals/SetPasswordModal.tsx new file mode 100644 index 00000000..95a6db4f --- /dev/null +++ b/frontend/src/modals/SetPasswordModal.tsx @@ -0,0 +1,132 @@ +import { Field, Form, Formik } from "formik"; +import { generate } from "generate-password-browser"; +import { useState } from "react"; +import { Alert } from "react-bootstrap"; +import Modal from "react-bootstrap/Modal"; +import { updateAuth } from "src/api/backend"; +import { Button } from "src/components"; +import { intl } from "src/locale"; +import { validateString } from "src/modules/Validations"; + +interface Props { + userId: number; + onClose: () => void; +} +export function SetPasswordModal({ userId, onClose }: Props) { + const [error, setError] = useState(null); + const [showPassword, setShowPassword] = useState(false); + + const onSubmit = async (values: any, { setSubmitting }: any) => { + setError(null); + try { + await updateAuth(userId, values.new); + onClose(); + } catch (err: any) { + setError(intl.formatMessage({ id: err.message })); + } + setSubmitting(false); + }; + + return ( + + + {({ isSubmitting }) => ( +
+ + {intl.formatMessage({ id: "user.set-password" })} + + + setError(null)} dismissible> + {error} + +
+ + {({ field, form }: any) => ( + <> +

+ + { + e.preventDefault(); + form.setFieldValue( + field.name, + generate({ + length: 12, + numbers: true, + }), + ); + setShowPassword(true); + }} + > + {intl.formatMessage({ + id: "password.generate", + })} + {" "} + —{" "} + { + e.preventDefault(); + setShowPassword(!showPassword); + }} + > + {intl.formatMessage({ + id: showPassword ? "password.hide" : "password.show", + })} + + +

+
+ + + + {form.errors.new ? ( +
+ {form.errors.new && form.touched.new ? form.errors.new : null} +
+ ) : null} +
+ + )} +
+
+
+ + + + +
+ )} +
+
+ ); +} diff --git a/frontend/src/modals/index.ts b/frontend/src/modals/index.ts index d6224c97..bbe23714 100644 --- a/frontend/src/modals/index.ts +++ b/frontend/src/modals/index.ts @@ -1,4 +1,5 @@ export * from "./ChangePasswordModal"; export * from "./DeleteConfirmModal"; export * from "./PermissionsModal"; +export * from "./SetPasswordModal"; export * from "./UserModal"; diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 22eb6707..4824eb04 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -134,6 +134,8 @@ More for api, then implement here: - Properly implement refresh tokens - Add error message_18n for all backend errors - minor: certificates expand with hosts needs to omit 'is_deleted' +- properly wrap all logger.debug called in isDebug check + `} diff --git a/frontend/src/pages/Users/Table.tsx b/frontend/src/pages/Users/Table.tsx index 5d8498bf..21265615 100644 --- a/frontend/src/pages/Users/Table.tsx +++ b/frontend/src/pages/Users/Table.tsx @@ -125,7 +125,7 @@ export default function Table({ }} > - {intl.formatMessage({ id: "user.change-password" })} + {intl.formatMessage({ id: "user.set-password" })}
setEditUserId(id)} onEditPermissions={(id: number) => setEditUserPermissionsId(id)} + onSetPassword={(id: number) => setEditUserPasswordId(id)} onDeleteUser={(id: number) => setDeleteUserId(id)} onNewUser={() => setEditUserId("new")} /> @@ -81,6 +83,9 @@ export default function TableWrapper() { {intl.formatMessage({ id: "user.delete.content" })} ) : null} + {editUserPasswordId ? ( + setEditUserPasswordId(0)} /> + ) : null}
);