add users

2026-10-04 20:42:40 +05:30 · 2026-10-04 20:42:40 +05:30 · ee23b71f0f
commit ee23b71f0f
parent c01914736b
12 changed files with 506 additions and 182 deletions
--- a/frontend/src/components/AddEmployeeForm.jsx
+++ b/frontend/src/components/AddEmployeeForm.jsx
@ -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>
+  );
+}
--- a/frontend/src/components/CompanyOverviewSetup.jsx
+++ b/frontend/src/components/CompanyOverviewSetup.jsx
@ -1,5 +1,6 @@
 import { ArrowRight, Check } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import AddEmployeeForm from "./AddEmployeeForm";

 const STEPS = [
  { id: 1, title: "Add domain", hint: "Use your company domain for email" },
@ -126,6 +127,7 @@ export default function CompanyOverviewSetup({ account, companyDomain, onComplet
  const [details, setDetails] = useState(() => loadDetails(account, companyDomain));
  const [fieldErrors, setFieldErrors] = useState({});
  const [submitAttempted, setSubmitAttempted] = useState(false);
+  const [addedEmployees, setAddedEmployees] = useState([]);

  useEffect(() => {
    localStorage.setItem(storageKey(account.id, "step"), String(step));
@ -296,20 +298,41 @@ export default function CompanyOverviewSetup({ account, companyDomain, onComplet
          )}

          {step === 5 && (
-            <div className="org-setup-form-shell">
-              <h2>Add employees</h2>
-              <p className="org-setup-lead">
-                Invite teammates to <strong>{companyDomainName}</strong>. You can add people now or skip and do this later from People.
-              </p>
-              <div className="org-setup-placeholder">
-                Employee invites will be available here soon.
+            <>
+              <div className="org-setup-panel-intro">
+                <h2>Add employees</h2>
+                <p className="org-setup-section-label">
+                  Invite teammates to <strong>{companyDomainName}</strong>. You can add people now or skip and do this later from People.
+                </p>
              </div>
-              <div className="org-setup-actions">
-                <button type="button" className="button button-purple org-setup-submit" onClick={() => setStep(6)}>
-                  Continue <ArrowRight size={16} />
-                </button>
+
+              {addedEmployees.length > 0 && (
+                <ul className="employee-added-list">
+                  {addedEmployees.map((employee) => (
+                    <li key={employee.id}>
+                      <strong>{employee.first_name} {employee.last_name}</strong>
+                      <span>{employee.email}</span>
+                      <em>{employee.member_status === "invited" ? "Invited" : "Active"}</em>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              <AddEmployeeForm
+                companyDomain={companyDomainName}
+                variant="inline"
+                submitLabel="Add employee"
+                onCreated={(member) => setAddedEmployees((current) => [...current, member])}
+              />
+
+              <div className="org-setup-form-shell org-setup-step-actions">
+                <div className="org-setup-actions">
+                  <button type="button" className="button button-purple org-setup-submit" onClick={() => setStep(6)}>
+                    {addedEmployees.length > 0 ? "Continue" : "Skip for now"} <ArrowRight size={16} />
+                  </button>
+                </div>
              </div>
-            </div>
+            </>
          )}

          {step === 6 && (
--- a/frontend/src/components/CompanyPeople.jsx
+++ b/frontend/src/components/CompanyPeople.jsx
@ -9,7 +9,8 @@ import {
  XCircle,
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createOrgMember, listOrgMembers } from "../api";
+import { listOrgMembers } from "../api";
+import AddEmployeeForm from "./AddEmployeeForm";

 const STATUS_TABS = [
  { key: "all", label: "All users" },
@ -18,8 +19,6 @@ const STATUS_TABS = [
  { key: "suspended", label: "Suspended" },
 ];

-const GROUP_OPTIONS = ["Admin", "HR", "Engineering", "Finance"];
-
 function initials(firstName, lastName) {
  return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase();
 }
@ -60,57 +59,6 @@ function StatusBadge({ status }) {
 }

 function AddUserPanel({ companyDomain, onClose, onCreated }) {
-  const token = sessionStorage.getItem("agmail_access_token");
-  const [form, setForm] = useState({
-    first_name: "",
-    last_name: "",
-    email_local: "",
-    org_role: "user",
-    groups: [],
-    send_invitation: true,
-    password: "",
-  });
-  const [status, setStatus] = useState({ loading: false, error: "" });
-
-  function updateField(field, value) {
-    setForm((current) => ({ ...current, [field]: value }));
-  }
-
-  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();
-    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,
-          org_role: form.org_role,
-          send_invitation: form.send_invitation,
-          password: form.send_invitation ? undefined : form.password,
-        },
-        token,
-      );
-      onCreated?.(member);
-      onClose();
-    } catch (error) {
-      setStatus({ loading: false, error: error.message });
-    }
-  }
-
  return (
    <div className="people-drawer-scrim" onClick={onClose}>
      <aside
@ -126,109 +74,14 @@ function AddUserPanel({ companyDomain, onClose, onCreated }) {
          </button>
        </header>

-        <form className="people-drawer-form" onSubmit={handleSubmit}>
-          <div className="people-drawer-row">
-            <label>
-              First name <span aria-hidden="true">*</span>
-              <input
-                required
-                value={form.first_name}
-                onChange={(event) => updateField("first_name", event.target.value)}
-                placeholder="Rahul"
-              />
-            </label>
-            <label>
-              Last name <span aria-hidden="true">*</span>
-              <input
-                required
-                value={form.last_name}
-                onChange={(event) => updateField("last_name", event.target.value)}
-                placeholder="Sharma"
-              />
-            </label>
-          </div>
-
-          <label>
-            Email <span aria-hidden="true">*</span>
-            <div className="people-email-field">
-              <input
-                required
-                value={form.email_local}
-                onChange={(event) => updateField("email_local", event.target.value)}
-                placeholder="rahul"
-              />
-              <span>@{companyDomain}</span>
-            </div>
-            <small>This will be their login email address</small>
-          </label>
-
-          <label>
-            Role
-            <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>
-            <small>Users can access email. User Admins can manage people.</small>
-          </label>
-
-          <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>
-            <small>Group assignment is saved locally for now.</small>
-          </fieldset>
-
-          <label className="people-toggle-row">
-            <span>
-              <strong>Send invitation email</strong>
-              <small>They will receive an activation link to set their password.</small>
-            </span>
-            <input
-              type="checkbox"
-              checked={form.send_invitation}
-              onChange={(event) => updateField("send_invitation", event.target.checked)}
-            />
-          </label>
-
-          {!form.send_invitation && (
-            <label>
-              Password <span aria-hidden="true">*</span>
-              <input
-                required
-                type="password"
-                value={form.password}
-                onChange={(event) => updateField("password", event.target.value)}
-                placeholder="Set an initial password"
-                minLength={8}
-              />
-              <small>Must include uppercase, lowercase, and a number.</small>
-            </label>
-          )}
-
-          {status.error && <p className="form-error" role="alert">{status.error}</p>}
-
-          <footer className="people-drawer-actions">
-            <button type="button" className="button button-outline" onClick={onClose}>
-              Cancel
-            </button>
-            <button className="button button-purple" type="submit" disabled={status.loading}>
-              {status.loading ? "Creating…" : "Create user"}
-            </button>
-          </footer>
-        </form>
+        <AddEmployeeForm
+          companyDomain={companyDomain}
+          onCreated={(member) => {
+            onCreated?.(member);
+            onClose();
+          }}
+          onCancel={onClose}
+        />
      </aside>
    </div>
  );