email wiring
This commit is contained in:
parent
ee23b71f0f
commit
42cd937f0a
12 changed files with 494 additions and 45 deletions
|
|
@ -1,8 +1,7 @@
|
|||
import { ArrowRight, Plus } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { createOrgMember } from "../api";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { createOrgMember, createOrgSection, listOrgSections } 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 }) {
|
||||
|
|
@ -58,13 +57,19 @@ export default function AddEmployeeForm({
|
|||
onCancel,
|
||||
}) {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const [sections, setSections] = useState([]);
|
||||
const [sectionsLoading, setSectionsLoading] = useState(true);
|
||||
const [showNewSection, setShowNewSection] = useState(false);
|
||||
const [newSectionName, setNewSectionName] = useState("");
|
||||
const [sectionError, setSectionError] = useState("");
|
||||
const [creatingSection, setCreatingSection] = useState(false);
|
||||
const [form, setForm] = useState({
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email_local: "",
|
||||
invitation_email: "",
|
||||
org_role: "user",
|
||||
groups: [],
|
||||
section_id: null,
|
||||
send_invitation: true,
|
||||
force_password_change: true,
|
||||
password: "",
|
||||
|
|
@ -73,6 +78,30 @@ export default function AddEmployeeForm({
|
|||
const [submitAttempted, setSubmitAttempted] = useState(false);
|
||||
const [status, setStatus] = useState({ loading: false, error: "" });
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setSectionsLoading(true);
|
||||
listOrgSections(token)
|
||||
.then((items) => {
|
||||
if (!cancelled) {
|
||||
setSections(items);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) {
|
||||
setSections([]);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) {
|
||||
setSectionsLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [token]);
|
||||
|
||||
const formValid = useMemo(
|
||||
() => Object.keys(validateForm(form, companyDomain)).length === 0,
|
||||
[form, companyDomain],
|
||||
|
|
@ -89,16 +118,32 @@ export default function AddEmployeeForm({
|
|||
});
|
||||
}
|
||||
|
||||
function toggleGroup(group) {
|
||||
setForm((current) => {
|
||||
const exists = current.groups.includes(group);
|
||||
return {
|
||||
...current,
|
||||
groups: exists
|
||||
? current.groups.filter((item) => item !== group)
|
||||
: [...current.groups, group],
|
||||
};
|
||||
});
|
||||
function selectSection(sectionId) {
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
section_id: current.section_id === sectionId ? null : sectionId,
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleCreateSection() {
|
||||
const name = newSectionName.trim();
|
||||
if (!name) {
|
||||
setSectionError("Enter a section name.");
|
||||
return;
|
||||
}
|
||||
setCreatingSection(true);
|
||||
setSectionError("");
|
||||
try {
|
||||
const section = await createOrgSection({ name }, token);
|
||||
setSections((current) => [...current, section].sort((a, b) => a.name.localeCompare(b.name)));
|
||||
setForm((current) => ({ ...current, section_id: section.id }));
|
||||
setNewSectionName("");
|
||||
setShowNewSection(false);
|
||||
} catch (error) {
|
||||
setSectionError(error.message);
|
||||
} finally {
|
||||
setCreatingSection(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
|
|
@ -121,6 +166,7 @@ export default function AddEmployeeForm({
|
|||
invitation_email: form.send_invitation
|
||||
? form.invitation_email.trim().toLowerCase()
|
||||
: undefined,
|
||||
section_id: form.section_id || undefined,
|
||||
org_role: form.org_role,
|
||||
send_invitation: form.send_invitation,
|
||||
force_password_change: form.force_password_change,
|
||||
|
|
@ -134,7 +180,7 @@ export default function AddEmployeeForm({
|
|||
email_local: "",
|
||||
invitation_email: "",
|
||||
org_role: "user",
|
||||
groups: [],
|
||||
section_id: null,
|
||||
send_invitation: true,
|
||||
force_password_change: true,
|
||||
password: "",
|
||||
|
|
@ -221,19 +267,51 @@ export default function AddEmployeeForm({
|
|||
</SetupField>
|
||||
|
||||
<fieldset className="people-groups-field">
|
||||
<legend>Groups</legend>
|
||||
<legend>Section</legend>
|
||||
<p className="org-setup-field-hint people-section-hint">
|
||||
Department or team. Group emails are managed separately under Groups.
|
||||
</p>
|
||||
<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>
|
||||
))}
|
||||
{sectionsLoading ? (
|
||||
<span className="people-section-loading">Loading sections…</span>
|
||||
) : (
|
||||
sections.map((section) => (
|
||||
<button
|
||||
key={section.id}
|
||||
type="button"
|
||||
className={`people-group-chip${form.section_id === section.id ? " active" : ""}`}
|
||||
onClick={() => selectSection(section.id)}
|
||||
>
|
||||
{section.name}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="people-group-chip people-section-add"
|
||||
onClick={() => setShowNewSection((current) => !current)}
|
||||
>
|
||||
+ Add section
|
||||
</button>
|
||||
</div>
|
||||
{showNewSection && (
|
||||
<div className="people-section-create">
|
||||
<input
|
||||
value={newSectionName}
|
||||
onChange={(event) => setNewSectionName(event.target.value)}
|
||||
placeholder="e.g. Marketing"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="button button-outline"
|
||||
onClick={handleCreateSection}
|
||||
disabled={creatingSection}
|
||||
>
|
||||
{creatingSection ? "Creating…" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{sectionError && <span className="org-setup-field-error" role="alert">{sectionError}</span>}
|
||||
</fieldset>
|
||||
|
||||
<SetupField
|
||||
|
|
|
|||
138
frontend/src/components/ChangePasswordModal.jsx
Normal file
138
frontend/src/components/ChangePasswordModal.jsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { useState } from "react";
|
||||
import { changePassword } from "../api";
|
||||
|
||||
function validateForm(form) {
|
||||
const errors = {};
|
||||
if (!form.current_password.trim()) {
|
||||
errors.current_password = "Enter your current password.";
|
||||
}
|
||||
if (!form.new_password.trim()) {
|
||||
errors.new_password = "Enter a new password.";
|
||||
} else if (form.new_password.length < 8) {
|
||||
errors.new_password = "Password must be at least 8 characters.";
|
||||
}
|
||||
if (!form.confirm_password.trim()) {
|
||||
errors.confirm_password = "Confirm your new password.";
|
||||
} else if (form.new_password !== form.confirm_password) {
|
||||
errors.confirm_password = "Passwords do not match.";
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
||||
export default function ChangePasswordModal({ account, onComplete }) {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const [form, setForm] = useState({
|
||||
current_password: "",
|
||||
new_password: "",
|
||||
confirm_password: "",
|
||||
});
|
||||
const [fieldErrors, setFieldErrors] = useState({});
|
||||
const [status, setStatus] = useState({ loading: false, error: "" });
|
||||
|
||||
function updateField(field, value) {
|
||||
setForm((current) => ({ ...current, [field]: value }));
|
||||
if (fieldErrors[field]) {
|
||||
setFieldErrors((errors) => ({ ...errors, [field]: undefined }));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const errors = validateForm(form);
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus({ loading: true, error: "" });
|
||||
try {
|
||||
const updated = await changePassword(
|
||||
{
|
||||
current_password: form.current_password,
|
||||
new_password: form.new_password,
|
||||
},
|
||||
token,
|
||||
);
|
||||
onComplete(updated);
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="change-password-scrim" role="presentation">
|
||||
<section
|
||||
className="change-password-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="change-password-title"
|
||||
>
|
||||
<header className="change-password-head">
|
||||
<p className="eyebrow">Account security</p>
|
||||
<h2 id="change-password-title">Choose a new password</h2>
|
||||
<p>
|
||||
Hi {account.first_name}, your administrator requires you to set a new password
|
||||
before using AGMail.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form className="change-password-form" onSubmit={handleSubmit} noValidate>
|
||||
<label>
|
||||
Current password
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={form.current_password}
|
||||
onChange={(event) => updateField("current_password", event.target.value)}
|
||||
/>
|
||||
{fieldErrors.current_password && (
|
||||
<span className="org-setup-field-error" role="alert">
|
||||
{fieldErrors.current_password}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<label>
|
||||
New password
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={form.new_password}
|
||||
onChange={(event) => updateField("new_password", event.target.value)}
|
||||
/>
|
||||
{fieldErrors.new_password && (
|
||||
<span className="org-setup-field-error" role="alert">
|
||||
{fieldErrors.new_password}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Confirm new password
|
||||
<input
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={form.confirm_password}
|
||||
onChange={(event) => updateField("confirm_password", event.target.value)}
|
||||
/>
|
||||
{fieldErrors.confirm_password && (
|
||||
<span className="org-setup-field-error" role="alert">
|
||||
{fieldErrors.confirm_password}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
|
||||
<button
|
||||
className="button button-purple"
|
||||
type="submit"
|
||||
disabled={status.loading}
|
||||
>
|
||||
{status.loading ? "Updating…" : "Update password"}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,11 +29,8 @@ function roleLabel(member) {
|
|||
return "User";
|
||||
}
|
||||
|
||||
function groupLabel(member) {
|
||||
if (member.is_domain_owner || member.org_role === "owner" || member.org_role === "admin") {
|
||||
return "Admin";
|
||||
}
|
||||
return "—";
|
||||
function sectionLabel(member) {
|
||||
return member.section_name || "—";
|
||||
}
|
||||
|
||||
function StatusBadge({ status }) {
|
||||
|
|
@ -98,6 +95,7 @@ export default function CompanyPeople({ account }) {
|
|||
const [search, setSearch] = useState("");
|
||||
const [roleFilter, setRoleFilter] = useState("all");
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [notice, setNotice] = useState("");
|
||||
|
||||
const loadMembers = useCallback(async () => {
|
||||
setLoading(true);
|
||||
|
|
@ -187,6 +185,7 @@ export default function CompanyPeople({ account }) {
|
|||
</select>
|
||||
</div>
|
||||
|
||||
{notice && <p className="people-notice" role="status">{notice}</p>}
|
||||
{error && <p className="form-error" role="alert">{error}</p>}
|
||||
|
||||
<div className="people-table-wrap">
|
||||
|
|
@ -198,7 +197,7 @@ export default function CompanyPeople({ account }) {
|
|||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th>Group</th>
|
||||
<th>Section</th>
|
||||
<th>Storage</th>
|
||||
<th>Last active</th>
|
||||
<th aria-label="Actions" />
|
||||
|
|
@ -230,7 +229,7 @@ export default function CompanyPeople({ account }) {
|
|||
<td>{member.email}</td>
|
||||
<td><StatusBadge status={member.member_status} /></td>
|
||||
<td>{roleLabel(member)}</td>
|
||||
<td>{groupLabel(member)}</td>
|
||||
<td>{sectionLabel(member)}</td>
|
||||
<td>{member.member_status === "invited" ? "—" : "—"}</td>
|
||||
<td>{member.member_status === "invited" ? "—" : "—"}</td>
|
||||
<td>
|
||||
|
|
@ -249,7 +248,17 @@ export default function CompanyPeople({ account }) {
|
|||
<AddUserPanel
|
||||
companyDomain={companyDomain}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
onCreated={() => loadMembers()}
|
||||
onCreated={(member) => {
|
||||
loadMembers();
|
||||
if (member.invitation_sent) {
|
||||
setNotice(`Invitation email sent to ${member.invitation_email}.`);
|
||||
} else if (member.member_status === "invited") {
|
||||
setNotice("User created. Invitation email was not sent.");
|
||||
} else {
|
||||
setNotice("User created.");
|
||||
}
|
||||
window.setTimeout(() => setNotice(""), 5000);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ import CompanyGroups from "./CompanyGroups";
|
|||
import CompanyPeople from "./CompanyPeople";
|
||||
import CompanySecurity from "./CompanySecurity";
|
||||
import CompanyOverviewSetup, { isOrgSetupComplete } from "./CompanyOverviewSetup";
|
||||
import ChangePasswordModal from "./ChangePasswordModal";
|
||||
import ComposeModal from "./ComposeModal";
|
||||
import MailboxView from "./MailboxView";
|
||||
|
||||
|
|
@ -113,6 +114,7 @@ export default function DashboardPage() {
|
|||
const [agentNav, setAgentNav] = useState(null);
|
||||
const [labelsExpanded, setLabelsExpanded] = useState(false);
|
||||
const [companyActive, setCompanyActive] = useState(null);
|
||||
const [mustChangePassword, setMustChangePassword] = useState(false);
|
||||
const [mailStats, setMailStats] = useState({
|
||||
unread: 0,
|
||||
starred: 0,
|
||||
|
|
@ -134,6 +136,7 @@ export default function DashboardPage() {
|
|||
.then(async (currentAccount) => {
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(currentAccount));
|
||||
setAccount(currentAccount);
|
||||
setMustChangePassword(Boolean(currentAccount.must_change_password));
|
||||
if (currentAccount.account_type === "company" && currentAccount.is_domain_owner) {
|
||||
try {
|
||||
const domain = await getMyCompanyDomain(token);
|
||||
|
|
@ -490,6 +493,16 @@ export default function DashboardPage() {
|
|||
)}
|
||||
</main>
|
||||
{notice && <div className="dashboard-notice" role="status">{notice}</div>}
|
||||
{mustChangePassword && (
|
||||
<ChangePasswordModal
|
||||
account={account}
|
||||
onComplete={(updated) => {
|
||||
setAccount(updated);
|
||||
setMustChangePassword(false);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(updated));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{composeOpen && <ComposeModal account={account} onClose={() => setComposeOpen(false)} onSent={emailSent} />}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue