Skip to content

Make "Create User" dialog similar to other create dialogs #1624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arnei wants to merge 2 commits into
base: r/20.x
Choose a base branch
from
Open

Make "Create User" dialog similar to other create dialogs #1624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08f8ad6
Make "Create User" dialog similar to other create dialogs
Arnei Jun 16, 2026
0a0624e
Add password indicator to user details
Arnei Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/users/partials/wizard/EditUserGeneralTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Field } from "../../../shared/Field";
import { FormikProps } from "formik";
import { NotificationComponent } from "../../../shared/Notifications";
import ModalContent from "../../../shared/modals/ModalContent";
import { PasswordStrengthIndicator } from "./NewUserGeneralTab";

/**
* This component renders the general user information tab in the users details modal.
Expand Down Expand Up @@ -105,6 +106,9 @@ const EditUserGeneralTab = <T extends RequiredFormProps>({
}
/>
</div>
<PasswordStrengthIndicator
password={formik.values.password}
/>
</div>
</ModalContent>
);
Expand Down
179 changes: 96 additions & 83 deletions src/components/users/partials/wizard/NewUserGeneralTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
import cn from "classnames";
import ModalContent from "../../../shared/modals/ModalContent";
import { ParseKeys } from "i18next";
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";

/**
* This component renders the general user information tab for new users in the new users wizard.
Expand All @@ -19,100 +20,112 @@ interface RequiredFormProps {

const NewUserGeneralTab = <T extends RequiredFormProps>({
formik,
nextPage,
}: {
formik: FormikProps<T>
nextPage: (values: T) => void,
}) => {
const { t } = useTranslation();

return (
<ModalContent>
<div className="form-container">
<Notifications context={"other"}/>
{/* Fields for user information needed */}
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.USERNAME")}
<i className="required">*</i>
</label>
<Field
type="text"
name="username"
autoFocus
className={cn({
error: formik.touched.username && formik.errors.username,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.USERNAME") + "..."}
<>
<ModalContent>
<div className="form-container">
<Notifications context={"other"}/>
{/* Fields for user information needed */}
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.USERNAME")}
<i className="required">*</i>
</label>
<Field
type="text"
name="username"
autoFocus
className={cn({
error: formik.touched.username && formik.errors.username,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.USERNAME") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.NAME")}
<i className="required">*</i>
</label>
<Field
type="text"
name="name"
className={cn({
error: formik.touched.name && formik.errors.name,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.NAME") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.EMAIL")}
<i className="required">*</i>
</label>
<Field
type="text"
name="email"
className={cn({
error: formik.touched.email && formik.errors.email,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.EMAIL") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.PASSWORD")}
<i className="required">*</i>
</label>
<Field
type="password"
name="password"
className={cn({
error: formik.touched.password && formik.errors.password,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.PASSWORD") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.REPEAT_PASSWORD")}
<i className="required">*</i>
</label>
<Field
type="password"
name="passwordConfirmation"
className={cn({
error:
formik.touched.passwordConfirmation &&
formik.errors.passwordConfirmation,
})}
placeholder={
t("USERS.USERS.DETAILS.FORM.REPEAT_PASSWORD") + "..."
}
/>
</div>
<PasswordStrengthIndicator
password={formik.values.password}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.NAME")}
<i className="required">*</i>
</label>
<Field
type="text"
name="name"
className={cn({
error: formik.touched.name && formik.errors.name,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.NAME") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.EMAIL")}
<i className="required">*</i>
</label>
<Field
type="text"
name="email"
className={cn({
error: formik.touched.email && formik.errors.email,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.EMAIL") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.PASSWORD")}
<i className="required">*</i>
</label>
<Field
type="password"
name="password"
className={cn({
error: formik.touched.password && formik.errors.password,
})}
placeholder={t("USERS.USERS.DETAILS.FORM.PASSWORD") + "..."}
/>
</div>
<div className="row">
<label>
{t("USERS.USERS.DETAILS.FORM.REPEAT_PASSWORD")}
<i className="required">*</i>
</label>
<Field
type="password"
name="passwordConfirmation"
className={cn({
error:
formik.touched.passwordConfirmation &&
formik.errors.passwordConfirmation,
})}
placeholder={
t("USERS.USERS.DETAILS.FORM.REPEAT_PASSWORD") + "..."
}
/>
</div>
<PasswordStrengthIndicator
password={formik.values.password}
/>
</div>
</ModalContent>

</ModalContent>
{/* Navigation buttons */}
<WizardNavigationButtons
isFirst
formik={formik}
nextPage={nextPage}
cancelTranslationString={"CANCEL"}
/>
</>
);
};

const PasswordStrengthIndicator = ({
export const PasswordStrengthIndicator = ({
password,
}: {
password: string
Expand Down
62 changes: 62 additions & 0 deletions src/components/users/partials/wizard/NewUserSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
import { useTranslation } from "react-i18next";
import Notifications from "../../../shared/Notifications";
import { FormikProps } from "formik";
import { initialFormValuesNewUser } from "../../../../configs/modalConfig";
import ModalContentTable from "../../../shared/modals/ModalContentTable";

/**
* This component renders the summary page for new groups in the new group wizard.
*/
const NewUserSummaryPage = <T extends typeof initialFormValuesNewUser>({
formik,
previousPage,
}: {
formik: FormikProps<T>,
previousPage?: (values: T) => void,
}) => {
const { t } = useTranslation();

// get values of objects in field that should be shown
const getValues = (fields: { name: string }[]) => {
const names = [];
for (const field of fields) {
names.push(field.name);
}
return names;
};

return (
<>
<ModalContentTable>
<Notifications context={"other"}/>

<div className="obj">
<header>{t("USERS.USERS.DETAILS.TABS.SUMMARY")}</header>
<div className="obj-container">
<table className="main-tbl">
<tbody>
<tr>
<td>{t("USERS.USERS.DETAILS.TABS.USER")}</td>
<td>{formik.values.name}</td>
</tr>
<tr>
<td>{t("USERS.USERS.DETAILS.TABS.ROLES")}</td>
<td>{getValues(formik.values.roles).join(", ")}</td>
</tr>
</tbody>
</table>
</div>
</div>
</ModalContentTable>
{/* Button for navigation to next page */}
<WizardNavigationButtons
isLast
previousPage={previousPage}
formik={formik}
/>
</>
);
};

export default NewUserSummaryPage;
Loading
Loading