add users
This commit is contained in:
parent
c01914736b
commit
ee23b71f0f
12 changed files with 506 additions and 182 deletions
299
frontend/src/components/AddEmployeeForm.jsx
Normal file
299
frontend/src/components/AddEmployeeForm.jsx
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
import { ArrowRight, Plus } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { createOrgMember } from "../api";
|
||||
|
||||
const GROUP_OPTIONS = ["Admin", "HR", "Engineering", "Finance"];
|
||||
const EMAIL_LOCAL_PATTERN = /^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,62}[A-Za-z0-9])?$/;
|
||||
|
||||
function RequiredLabel({ children }) {
|
||||
return (
|
||||
<span className="org-setup-label-text">
|
||||
{children}
|
||||
<span className="org-setup-required" aria-hidden="true">*</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function SetupField({ label, error, children, hint }) {
|
||||
return (
|
||||
<label className={`org-setup-field${error ? " has-error" : ""}`}>
|
||||
{label}
|
||||
{children}
|
||||
{hint && <small className="org-setup-field-hint">{hint}</small>}
|
||||
{error && <span className="org-setup-field-error" role="alert">{error}</span>}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function validateForm(form, companyDomain) {
|
||||
const errors = {};
|
||||
if (!form.first_name.trim()) errors.first_name = "Please enter a first name.";
|
||||
if (!form.last_name.trim()) errors.last_name = "Please enter a last name.";
|
||||
const local = form.email_local.trim();
|
||||
if (!local) {
|
||||
errors.email_local = "Please enter a work email address.";
|
||||
} else if (!EMAIL_LOCAL_PATTERN.test(local)) {
|
||||
errors.email_local = "Enter a valid email address before @.";
|
||||
}
|
||||
if (!form.password.trim()) {
|
||||
errors.password = "Please set an initial password.";
|
||||
}
|
||||
if (form.send_invitation) {
|
||||
const invite = form.invitation_email.trim();
|
||||
if (!invite) {
|
||||
errors.invitation_email = "Please enter a personal email for the invitation.";
|
||||
} else if (invite.endsWith(`@${companyDomain}`)) {
|
||||
errors.invitation_email = "Use a personal email, not your company domain.";
|
||||
}
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
||||
export default function AddEmployeeForm({
|
||||
companyDomain,
|
||||
platformDomain = "gentic.email",
|
||||
variant = "drawer",
|
||||
submitLabel = "Create user",
|
||||
onCreated,
|
||||
onCancel,
|
||||
}) {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const [form, setForm] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email_local: "",
|
||||
invitation_email: "",
|
||||
org_role: "user",
|
||||
groups: [],
|
||||
send_invitation: true,
|
||||
force_password_change: true,
|
||||
password: "",
|
||||
});
|
||||
const [fieldErrors, setFieldErrors] = useState({});
|
||||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
const [status, setStatus] = useState({ loading: false, error: "" });
|
||||
|
||||
const formValid = useMemo(
|
||||
() => Object.keys(validateForm(form, companyDomain)).length === 0,
|
||||
[form, companyDomain],
|
||||
);
|
||||
|
||||
function updateField(field, value) {
|
||||
setForm((current) => {
|
||||
const next = { ...current, [field]: value };
|
||||
if (submitAttempted || fieldErrors[field]) {
|
||||
const nextErrors = validateForm(next, companyDomain);
|
||||
setFieldErrors((errors) => ({ ...errors, [field]: nextErrors[field] }));
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function toggleGroup(group) {
|
||||
setForm((current) => {
|
||||
const exists = current.groups.includes(group);
|
||||
return {
|
||||
...current,
|
||||
groups: exists
|
||||
? current.groups.filter((item) => item !== group)
|
||||
: [...current.groups, group],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
setSubmitAttempted(true);
|
||||
const errors = validateForm(form, companyDomain);
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus({ loading: true, error: "" });
|
||||
const email = `${form.email_local.trim().toLowerCase()}@${companyDomain}`;
|
||||
try {
|
||||
const member = await createOrgMember(
|
||||
{
|
||||
first_name: form.first_name.trim(),
|
||||
last_name: form.last_name.trim(),
|
||||
email,
|
||||
invitation_email: form.send_invitation
|
||||
? form.invitation_email.trim().toLowerCase()
|
||||
: undefined,
|
||||
org_role: form.org_role,
|
||||
send_invitation: form.send_invitation,
|
||||
force_password_change: form.force_password_change,
|
||||
password: form.password,
|
||||
},
|
||||
token,
|
||||
);
|
||||
setForm({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email_local: "",
|
||||
invitation_email: "",
|
||||
org_role: "user",
|
||||
groups: [],
|
||||
send_invitation: true,
|
||||
force_password_change: true,
|
||||
password: "",
|
||||
});
|
||||
setFieldErrors({});
|
||||
setSubmitAttempted(false);
|
||||
setStatus({ loading: false, error: "" });
|
||||
onCreated?.(member);
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
const formClass = variant === "inline"
|
||||
? "org-setup-form employee-add-form"
|
||||
: "people-drawer-form employee-add-form";
|
||||
|
||||
return (
|
||||
<form className={formClass} onSubmit={handleSubmit} noValidate>
|
||||
<div className={variant === "inline" ? "org-setup-form-shell" : undefined}>
|
||||
<div className="people-drawer-row">
|
||||
<SetupField
|
||||
label={<RequiredLabel>First name</RequiredLabel>}
|
||||
error={fieldErrors.first_name}
|
||||
>
|
||||
<input
|
||||
value={form.first_name}
|
||||
onChange={(event) => updateField("first_name", event.target.value)}
|
||||
placeholder="Rahul"
|
||||
/>
|
||||
</SetupField>
|
||||
<SetupField
|
||||
label={<RequiredLabel>Last name</RequiredLabel>}
|
||||
error={fieldErrors.last_name}
|
||||
>
|
||||
<input
|
||||
value={form.last_name}
|
||||
onChange={(event) => updateField("last_name", event.target.value)}
|
||||
placeholder="Sharma"
|
||||
/>
|
||||
</SetupField>
|
||||
</div>
|
||||
|
||||
<SetupField
|
||||
label={<RequiredLabel>Work email</RequiredLabel>}
|
||||
error={fieldErrors.email_local}
|
||||
hint="This will be their login email address on your company domain."
|
||||
>
|
||||
<div className="org-setup-email-field">
|
||||
<input
|
||||
value={form.email_local}
|
||||
onChange={(event) => updateField("email_local", event.target.value)}
|
||||
placeholder="rahul"
|
||||
/>
|
||||
<span>@{companyDomain}</span>
|
||||
</div>
|
||||
</SetupField>
|
||||
|
||||
<SetupField
|
||||
label={<RequiredLabel>Invitation email</RequiredLabel>}
|
||||
error={fieldErrors.invitation_email}
|
||||
hint={`Personal email where AGMail sends the setup invite from @${platformDomain}.`}
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
value={form.invitation_email}
|
||||
onChange={(event) => updateField("invitation_email", event.target.value)}
|
||||
placeholder="rahul@gmail.com"
|
||||
disabled={!form.send_invitation}
|
||||
/>
|
||||
</SetupField>
|
||||
|
||||
<SetupField
|
||||
label="Role"
|
||||
hint="Users can access email. User Admins can manage people."
|
||||
>
|
||||
<select
|
||||
value={form.org_role}
|
||||
onChange={(event) => updateField("org_role", event.target.value)}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">User Admin</option>
|
||||
</select>
|
||||
</SetupField>
|
||||
|
||||
<fieldset className="people-groups-field">
|
||||
<legend>Groups</legend>
|
||||
<div className="people-groups-options">
|
||||
{GROUP_OPTIONS.map((group) => (
|
||||
<button
|
||||
key={group}
|
||||
type="button"
|
||||
className={`people-group-chip${form.groups.includes(group) ? " active" : ""}`}
|
||||
onClick={() => toggleGroup(group)}
|
||||
>
|
||||
{group}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<SetupField
|
||||
label={<RequiredLabel>Initial password</RequiredLabel>}
|
||||
error={fieldErrors.password}
|
||||
hint="Must include uppercase, lowercase, and a number."
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(event) => updateField("password", event.target.value)}
|
||||
placeholder="Set an initial password"
|
||||
/>
|
||||
</SetupField>
|
||||
|
||||
<label className="people-toggle-row">
|
||||
<span>
|
||||
<strong>Send invitation email</strong>
|
||||
<small>Invite is sent from @{platformDomain} to the personal email above.</small>
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.send_invitation}
|
||||
onChange={(event) => updateField("send_invitation", event.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="people-toggle-row">
|
||||
<span>
|
||||
<strong>Require password change on first login</strong>
|
||||
<small>Employee must choose a new password before using AGMail.</small>
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.force_password_change}
|
||||
onChange={(event) => updateField("force_password_change", event.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
|
||||
<footer className={variant === "inline" ? "org-setup-actions" : "people-drawer-actions"}>
|
||||
{onCancel && (
|
||||
<button type="button" className="button button-outline" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="button button-purple org-setup-submit"
|
||||
type="submit"
|
||||
disabled={!formValid || status.loading}
|
||||
>
|
||||
{status.loading ? "Creating…" : (
|
||||
variant === "inline" ? (
|
||||
<><Plus size={16} /> {submitLabel}</>
|
||||
) : submitLabel
|
||||
)}
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue