setting, session and profile
This commit is contained in:
parent
48eea5d201
commit
4a563f4f34
31 changed files with 1797 additions and 159 deletions
|
|
@ -1,3 +1,5 @@
|
|||
import { redirectSessionExpired } from "./auth";
|
||||
|
||||
const API_BASE = "/api/v1";
|
||||
|
||||
function basicAuthHeader({ username, password }) {
|
||||
|
|
@ -21,6 +23,9 @@ async function request(path, { method = "GET", payload, token, basicAuth } = {})
|
|||
const message = Array.isArray(data.detail)
|
||||
? data.detail[0]?.msg
|
||||
: data.detail;
|
||||
if (response.status === 401 && token) {
|
||||
redirectSessionExpired();
|
||||
}
|
||||
throw new Error(message || "Something went wrong. Please try again.");
|
||||
}
|
||||
return data;
|
||||
|
|
@ -28,6 +33,12 @@ async function request(path, { method = "GET", payload, token, basicAuth } = {})
|
|||
|
||||
export const login = (payload) =>
|
||||
request("/auth/login", { method: "POST", payload });
|
||||
export const resendLoginOtp = (payload) =>
|
||||
request("/auth/login/otp/resend", { method: "POST", payload });
|
||||
export const getAccountSecurity = (token) =>
|
||||
request("/auth/me/security", { token });
|
||||
export const updateAccountSecurity = (payload, token) =>
|
||||
request("/auth/me/security", { method: "PATCH", payload, token });
|
||||
export const resetPassword = (payload) =>
|
||||
request("/auth/reset-password", { method: "POST", payload });
|
||||
export const previewInvite = (token) =>
|
||||
|
|
@ -37,10 +48,14 @@ export const acceptInvite = (token, payload) =>
|
|||
method: "POST",
|
||||
payload,
|
||||
});
|
||||
export const sendSignupOtp = (payload) =>
|
||||
request("/auth/signup/otp/send", { method: "POST", payload });
|
||||
export const register = (payload) =>
|
||||
request("/auth/register", { method: "POST", payload });
|
||||
export const getCurrentAccount = (token) =>
|
||||
request("/auth/me", { token });
|
||||
export const updateAccountProfile = (payload, token) =>
|
||||
request("/auth/me", { method: "PATCH", payload, token });
|
||||
export const getMyCompanyDomain = (token) =>
|
||||
request("/domains/me", { token });
|
||||
export const verifyCompanyDns = (token) =>
|
||||
|
|
|
|||
28
frontend/src/auth.js
Normal file
28
frontend/src/auth.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
export const AUTH_TOKEN_KEY = "agmail_access_token";
|
||||
export const AUTH_ACCOUNT_KEY = "agmail_account";
|
||||
|
||||
let sessionRedirecting = false;
|
||||
|
||||
export function getAccessToken() {
|
||||
return sessionStorage.getItem(AUTH_TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function isLoggedIn() {
|
||||
return Boolean(getAccessToken());
|
||||
}
|
||||
|
||||
export function clearSession() {
|
||||
sessionStorage.removeItem(AUTH_TOKEN_KEY);
|
||||
sessionStorage.removeItem(AUTH_ACCOUNT_KEY);
|
||||
}
|
||||
|
||||
export function getBrandHomeHref() {
|
||||
return isLoggedIn() ? "/app" : "/";
|
||||
}
|
||||
|
||||
export function redirectSessionExpired() {
|
||||
if (sessionRedirecting) return;
|
||||
sessionRedirecting = true;
|
||||
clearSession();
|
||||
window.location.replace("/?session=expired");
|
||||
}
|
||||
132
frontend/src/components/AccountProfile.jsx
Normal file
132
frontend/src/components/AccountProfile.jsx
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import { Camera, UserRound } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { updateAccountProfile } from "../api";
|
||||
|
||||
const MAX_AVATAR_BYTES = 512 * 1024;
|
||||
const ALLOWED_TYPES = new Set(["image/jpeg", "image/png", "image/webp"]);
|
||||
|
||||
function accountInitials(account) {
|
||||
return `${account?.first_name?.[0] || ""}${account?.last_name?.[0] || ""}`.toUpperCase() || "AG";
|
||||
}
|
||||
|
||||
export default function AccountProfile({ account, onUpdated }) {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const inputRef = useRef(null);
|
||||
const [status, setStatus] = useState({ loading: false, error: "", notice: "" });
|
||||
|
||||
async function handleFileChange(event) {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (!file) return;
|
||||
|
||||
if (!ALLOWED_TYPES.has(file.type)) {
|
||||
setStatus({ loading: false, error: "Use a JPG, PNG, or WebP image.", notice: "" });
|
||||
return;
|
||||
}
|
||||
if (file.size > MAX_AVATAR_BYTES) {
|
||||
setStatus({ loading: false, error: "Profile picture must be 512 KB or smaller.", notice: "" });
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus({ loading: true, error: "", notice: "" });
|
||||
try {
|
||||
const dataUrl = await new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(String(reader.result || ""));
|
||||
reader.onerror = () => reject(new Error("Could not read that image."));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
const updated = await updateAccountProfile({ profile_picture_url: dataUrl }, token);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(updated));
|
||||
onUpdated?.(updated);
|
||||
setStatus({ loading: false, error: "", notice: "Profile picture updated." });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message, notice: "" });
|
||||
}
|
||||
}
|
||||
|
||||
async function removePhoto() {
|
||||
setStatus({ loading: true, error: "", notice: "" });
|
||||
try {
|
||||
const updated = await updateAccountProfile({ profile_picture_url: null }, token);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(updated));
|
||||
onUpdated?.(updated);
|
||||
setStatus({ loading: false, error: "", notice: "Profile picture removed." });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message, notice: "" });
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="account-profile-page">
|
||||
<header className="account-profile-head">
|
||||
<div>
|
||||
<p className="account-profile-eyebrow">Account</p>
|
||||
<h1>Profile</h1>
|
||||
<p>Update how you appear across Gentic.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="account-profile-card">
|
||||
<div className="account-profile-avatar-block">
|
||||
<div className="account-profile-avatar">
|
||||
{account?.profile_picture_url ? (
|
||||
<img src={account.profile_picture_url} alt="" />
|
||||
) : (
|
||||
<span>{accountInitials(account)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="account-profile-avatar-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="account-profile-btn"
|
||||
disabled={status.loading}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<Camera size={16} />
|
||||
{account?.profile_picture_url ? "Change photo" : "Upload photo"}
|
||||
</button>
|
||||
{account?.profile_picture_url && (
|
||||
<button
|
||||
type="button"
|
||||
className="account-profile-btn subtle"
|
||||
disabled={status.loading}
|
||||
onClick={removePhoto}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
hidden
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="account-profile-fields">
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<div className="account-profile-readonly">
|
||||
<UserRound size={16} />
|
||||
{account?.first_name} {account?.last_name}
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span>Email</span>
|
||||
<div className="account-profile-readonly">{account?.email}</div>
|
||||
</label>
|
||||
<label>
|
||||
<span>Phone</span>
|
||||
<div className="account-profile-readonly">{account?.phone_number || "Not set"}</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{status.notice && <p className="account-profile-notice" role="status">{status.notice}</p>}
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
139
frontend/src/components/AccountSettings.jsx
Normal file
139
frontend/src/components/AccountSettings.jsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getAccountSecurity, updateAccountSecurity } from "../api";
|
||||
import { SESSION_TIMEOUT_OPTIONS, formatSessionTimeout } from "../utils/sessionTimeouts";
|
||||
|
||||
function ToggleRow({ title, description, checked, disabled, onChange }) {
|
||||
return (
|
||||
<div className="security-setting-row">
|
||||
<div>
|
||||
<strong>{title}</strong>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
<label className="security-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={(event) => onChange(event.target.checked)}
|
||||
/>
|
||||
<span aria-hidden="true" />
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AccountSettings() {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const [settings, setSettings] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [notice, setNotice] = useState("");
|
||||
|
||||
const loadSettings = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const data = await getAccountSecurity(token);
|
||||
setSettings(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
}, [loadSettings]);
|
||||
|
||||
async function savePatch(patch) {
|
||||
setSaving(true);
|
||||
setError("");
|
||||
setNotice("");
|
||||
try {
|
||||
const data = await updateAccountSecurity(patch, token);
|
||||
setSettings(data);
|
||||
setNotice("Settings saved.");
|
||||
window.setTimeout(() => setNotice(""), 2500);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
await loadSettings();
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMfa(value) {
|
||||
setSettings((current) => ({ ...current, mfa_enabled: value }));
|
||||
savePatch({ mfa_enabled: value });
|
||||
}
|
||||
|
||||
function updateTimeout(value) {
|
||||
const minutes = Number(value);
|
||||
setSettings((current) => ({ ...current, session_timeout_minutes: minutes }));
|
||||
savePatch({ session_timeout_minutes: minutes });
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="company-people company-security account-settings">
|
||||
<header className="company-people-head">
|
||||
<div>
|
||||
<h1>Settings</h1>
|
||||
<p>Manage sign-in security and how long you stay signed in.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error && <p className="form-error" role="alert">{error}</p>}
|
||||
{notice && <p className="security-notice" role="status">{notice}</p>}
|
||||
|
||||
{loading || !settings ? (
|
||||
<p className="people-table-empty">Loading settings…</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="security-panel">
|
||||
<h2>Multi-factor authentication</h2>
|
||||
<ToggleRow
|
||||
title="Require OTP at sign-in"
|
||||
description={
|
||||
settings.mfa_available
|
||||
? "When enabled, you’ll enter a one-time code sent to your phone after your password."
|
||||
: "Add an Indian (+91) mobile number to your account to use OTP sign-in."
|
||||
}
|
||||
checked={settings.mfa_enabled}
|
||||
disabled={saving || !settings.mfa_available}
|
||||
onChange={updateMfa}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="security-panel">
|
||||
<h2>Session duration</h2>
|
||||
<div className="security-setting-row">
|
||||
<div>
|
||||
<strong>Keep me signed in</strong>
|
||||
<p>
|
||||
Your current session lasts up to {formatSessionTimeout(settings.effective_session_timeout_minutes)}.
|
||||
{settings.org_session_timeout_minutes != null
|
||||
? ` Your organization caps sessions at ${formatSessionTimeout(settings.org_session_timeout_minutes)}.`
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
<select
|
||||
className="security-timeout-select"
|
||||
value={settings.session_timeout_minutes}
|
||||
disabled={saving}
|
||||
onChange={(event) => updateTimeout(event.target.value)}
|
||||
>
|
||||
{SESSION_TIMEOUT_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,21 @@
|
|||
export default function Brand({ compact = false }) {
|
||||
import { getBrandHomeHref } from "../auth";
|
||||
|
||||
export default function Brand({ compact = false, forceHome = false }) {
|
||||
const href = forceHome ? "/app" : getBrandHomeHref();
|
||||
|
||||
function handleClick(event) {
|
||||
if (!forceHome) return;
|
||||
event.preventDefault();
|
||||
window.location.assign("/app");
|
||||
}
|
||||
|
||||
return (
|
||||
<a className={`brand${compact ? " brand-compact" : ""}`} href="/" aria-label="Agmail home">
|
||||
<a
|
||||
className={`brand${compact ? " brand-compact" : ""}`}
|
||||
href={href}
|
||||
aria-label={forceHome || getBrandHomeHref() === "/app" ? "Go to inbox" : "Agmail home"}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span className="brand-mark" aria-hidden="true">
|
||||
<span className="robot-eyes"><i /><i /></span>
|
||||
<span className="robot-smile" />
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getOrgSecurity, updateOrgSecurity } from "../api";
|
||||
|
||||
const SESSION_TIMEOUTS = [
|
||||
{ value: 15, label: "15 minutes" },
|
||||
{ value: 30, label: "30 minutes" },
|
||||
{ value: 60, label: "1 hour" },
|
||||
{ value: 120, label: "2 hours" },
|
||||
{ value: 480, label: "8 hours" },
|
||||
{ value: 1440, label: "24 hours" },
|
||||
];
|
||||
import { SESSION_TIMEOUT_OPTIONS } from "../utils/sessionTimeouts";
|
||||
|
||||
function ToggleRow({ title, description, checked, disabled, onChange }) {
|
||||
return (
|
||||
|
|
@ -136,7 +128,7 @@ export default function CompanySecurity() {
|
|||
disabled={saving}
|
||||
onChange={(event) => updateTimeout(event.target.value)}
|
||||
>
|
||||
{SESSION_TIMEOUTS.map((option) => (
|
||||
{SESSION_TIMEOUT_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
LogOut,
|
||||
Mail,
|
||||
Menu,
|
||||
PanelLeftOpen,
|
||||
HandHelping,
|
||||
Plug,
|
||||
Send,
|
||||
|
|
@ -24,10 +23,17 @@ import {
|
|||
Trash2,
|
||||
Users,
|
||||
UsersRound,
|
||||
UserRound,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getCurrentAccount, getMyCompanyDomain } from "../api";
|
||||
import {
|
||||
AUTH_ACCOUNT_KEY,
|
||||
AUTH_TOKEN_KEY,
|
||||
clearSession,
|
||||
getAccessToken,
|
||||
} from "../auth";
|
||||
import Brand from "./Brand";
|
||||
import MobileChrome from "./MobileChrome";
|
||||
import { ShellModeContext } from "../shellMode";
|
||||
|
|
@ -43,6 +49,8 @@ import CompanyOverviewSetup, { isOrgSetupComplete } from "./CompanyOverviewSetup
|
|||
import ChangePasswordModal from "./ChangePasswordModal";
|
||||
import ComposeDock, { triggerOpenCompose } from "./ComposeDock";
|
||||
import HumanHandoff from "./HumanHandoff";
|
||||
import AccountProfile from "./AccountProfile";
|
||||
import AccountSettings from "./AccountSettings";
|
||||
import MailboxView from "./MailboxView";
|
||||
|
||||
const mailItems = [
|
||||
|
|
@ -87,11 +95,6 @@ const manageNavItems = [
|
|||
[Settings, "Settings"],
|
||||
];
|
||||
|
||||
function clearSession() {
|
||||
sessionStorage.removeItem("agmail_access_token");
|
||||
sessionStorage.removeItem("agmail_account");
|
||||
}
|
||||
|
||||
function SidebarSection({ title, children, className = "" }) {
|
||||
return (
|
||||
<section className={`dashboard-sidebar-section ${className}`}>
|
||||
|
|
@ -112,7 +115,10 @@ export default function DashboardPage() {
|
|||
const [needsDnsSetup, setNeedsDnsSetup] = useState(false);
|
||||
const [domainError, setDomainError] = useState("");
|
||||
const [active, setActive] = useState("Inbox");
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [sidebarExpanded, setSidebarExpanded] = useState(
|
||||
() => typeof window !== "undefined" && window.matchMedia("(min-width: 1200px)").matches,
|
||||
);
|
||||
const [sheet, setSheet] = useState(null);
|
||||
const [notice, setNotice] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -134,7 +140,7 @@ export default function DashboardPage() {
|
|||
const handleStats = useCallback((stats) => setMailStats(stats), []);
|
||||
|
||||
useEffect(() => {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
const token = getAccessToken();
|
||||
if (!token) {
|
||||
window.location.replace("/login");
|
||||
return;
|
||||
|
|
@ -142,7 +148,7 @@ export default function DashboardPage() {
|
|||
|
||||
getCurrentAccount(token)
|
||||
.then(async (currentAccount) => {
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(currentAccount));
|
||||
sessionStorage.setItem(AUTH_ACCOUNT_KEY, JSON.stringify(currentAccount));
|
||||
setAccount(currentAccount);
|
||||
setMustChangePassword(Boolean(currentAccount.must_change_password));
|
||||
if (currentAccount.account_type === "company" && currentAccount.is_domain_owner) {
|
||||
|
|
@ -157,6 +163,7 @@ export default function DashboardPage() {
|
|||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!getAccessToken()) return;
|
||||
clearSession();
|
||||
window.location.replace("/login");
|
||||
});
|
||||
|
|
@ -176,10 +183,24 @@ export default function DashboardPage() {
|
|||
|
||||
function closeMobileMenu() {
|
||||
if (window.matchMedia("(max-width: 767.98px)").matches) {
|
||||
setMenuOpen(false);
|
||||
setMobileMenuOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
if (window.matchMedia("(max-width: 767.98px)").matches) {
|
||||
setMobileMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
setSidebarExpanded((open) => !open);
|
||||
}
|
||||
|
||||
const sidebarClasses = [
|
||||
"dashboard-sidebar",
|
||||
mobileMenuOpen ? "open" : "",
|
||||
sidebarExpanded ? "expanded" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
function selectCompanyItem(label) {
|
||||
setCompanyActive(label);
|
||||
setAgentNav(null);
|
||||
|
|
@ -251,6 +272,19 @@ export default function DashboardPage() {
|
|||
triggerOpenCompose(context);
|
||||
}
|
||||
|
||||
function openProfile() {
|
||||
setCompanyActive(null);
|
||||
setActive("Profile");
|
||||
setAgentNav(null);
|
||||
closeMobileMenu();
|
||||
setSheet(null);
|
||||
}
|
||||
|
||||
function updateAccount(next) {
|
||||
setAccount(next);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(next));
|
||||
}
|
||||
|
||||
function openExternalThread(threadId) {
|
||||
setCompanyActive(null);
|
||||
setActive("Inbox");
|
||||
|
|
@ -323,22 +357,24 @@ export default function DashboardPage() {
|
|||
data-onboarding={isOrgOnboarding ? "true" : undefined}
|
||||
>
|
||||
<header className="dashboard-mobile-header">
|
||||
<Brand />
|
||||
<button aria-label="Open navigation" type="button" onClick={() => { setSheet(null); setMenuOpen(true); }}>
|
||||
<Brand forceHome />
|
||||
<button aria-label="Open navigation" type="button" onClick={() => { setSheet(null); setMobileMenuOpen(true); }}>
|
||||
<Menu size={21} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{menuOpen && <button className="dashboard-scrim" aria-label="Close navigation" onClick={() => setMenuOpen(false)} />}
|
||||
<aside className={menuOpen ? "dashboard-sidebar open" : "dashboard-sidebar"}>
|
||||
{mobileMenuOpen && (
|
||||
<button className="dashboard-scrim" aria-label="Close navigation" onClick={() => setMobileMenuOpen(false)} />
|
||||
)}
|
||||
<aside className={sidebarClasses}>
|
||||
<div className="dashboard-brand-row">
|
||||
<Brand />
|
||||
<Brand forceHome />
|
||||
<button
|
||||
aria-label={menuOpen ? "Collapse navigation" : "Expand navigation"}
|
||||
aria-label={(mobileMenuOpen || sidebarExpanded) ? "Collapse navigation" : "Expand navigation"}
|
||||
type="button"
|
||||
onClick={() => setMenuOpen((open) => !open)}
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
{menuOpen ? <X size={19} /> : <PanelLeftOpen size={19} />}
|
||||
{(mobileMenuOpen || sidebarExpanded) ? <X size={19} /> : <Menu size={19} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -452,8 +488,13 @@ export default function DashboardPage() {
|
|||
</div>
|
||||
|
||||
<div className="dashboard-profile">
|
||||
<span>{account.first_name[0]}{account.last_name[0]}</span>
|
||||
{account.profile_picture_url ? (
|
||||
<img src={account.profile_picture_url} alt="" className="dashboard-profile-photo" />
|
||||
) : (
|
||||
<span>{account.first_name[0]}{account.last_name[0]}</span>
|
||||
)}
|
||||
<div><strong>{account.first_name} {account.last_name}</strong><small>{account.email}</small></div>
|
||||
<button aria-label="Open profile" title="Profile" type="button" onClick={openProfile}><UserRound size={17} /></button>
|
||||
<button aria-label="Log out" title="Log out" type="button" onClick={logout}><LogOut size={17} /></button>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -485,6 +526,8 @@ export default function DashboardPage() {
|
|||
initialThreadId={openThreadId}
|
||||
onLogout={logout}
|
||||
onOpenSettings={() => selectMailItem("Settings")}
|
||||
onOpenProfile={openProfile}
|
||||
onAccountUpdate={updateAccount}
|
||||
onCompose={openCompose}
|
||||
onStats={handleStats}
|
||||
/>
|
||||
|
|
@ -497,6 +540,8 @@ export default function DashboardPage() {
|
|||
account={account}
|
||||
onLogout={logout}
|
||||
onOpenSettings={() => selectMailItem("Settings")}
|
||||
onOpenProfile={openProfile}
|
||||
onAccountUpdate={updateAccount}
|
||||
onCompose={openCompose}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -508,9 +553,14 @@ export default function DashboardPage() {
|
|||
account={account}
|
||||
onLogout={logout}
|
||||
onOpenSettings={() => selectMailItem("Settings")}
|
||||
onOpenProfile={openProfile}
|
||||
onAccountUpdate={updateAccount}
|
||||
onCompose={openCompose}
|
||||
/>
|
||||
)}
|
||||
{!companyActive && active === "Profile" && (
|
||||
<AccountProfile account={account} onUpdated={updateAccount} />
|
||||
)}
|
||||
{companyActive === "Overview" && isDomainOwner && !isOrgSetupComplete(account.id) && (
|
||||
<CompanyOverviewSetup
|
||||
account={account}
|
||||
|
|
@ -556,7 +606,10 @@ export default function DashboardPage() {
|
|||
<p>Company {companyActive.toLowerCase()} controls will appear here.</p>
|
||||
</section>
|
||||
)}
|
||||
{!companyActive && !["Inbox", "Outbox", "Trash"].includes(active) && (
|
||||
{!companyActive && active === "Settings" && (
|
||||
<AccountSettings />
|
||||
)}
|
||||
{!companyActive && !["Inbox", "Outbox", "Trash", "Settings"].includes(active) && (
|
||||
<section className="dashboard-empty">
|
||||
<span><Sparkles size={24} /></span>
|
||||
<h2>{active} is ready for you</h2>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default function InviteAcceptPage() {
|
|||
const result = await acceptInvite(token, { password });
|
||||
sessionStorage.setItem("agmail_access_token", result.access_token);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
|
||||
window.location.assign("/app");
|
||||
window.location.replace("/app");
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,84 @@
|
|||
import { ArrowRight, Mail } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { login } from "../api";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { login, resendLoginOtp } from "../api";
|
||||
import { AUTH_ACCOUNT_KEY, AUTH_TOKEN_KEY, isLoggedIn } from "../auth";
|
||||
import AuthLayout from "./AuthLayout";
|
||||
import PasswordField from "./PasswordField";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [status, setStatus] = useState({ loading: false, error: "" });
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [challenge, setChallenge] = useState(null);
|
||||
const [otpCooldown, setOtpCooldown] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoggedIn()) {
|
||||
window.location.replace("/app");
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!otpCooldown) return undefined;
|
||||
const timer = window.setInterval(() => {
|
||||
setOtpCooldown((value) => (value > 1 ? value - 1 : 0));
|
||||
}, 1000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [otpCooldown]);
|
||||
|
||||
const otpValid = /^\d{6}$/.test(otp.trim());
|
||||
const canSubmit = useMemo(() => {
|
||||
if (status.loading || !email.trim() || !password) return false;
|
||||
if (challenge) return otpValid;
|
||||
return true;
|
||||
}, [status.loading, email, password, challenge, otpValid]);
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
setStatus({ loading: true, error: "" });
|
||||
const form = new FormData(event.currentTarget);
|
||||
try {
|
||||
const result = await login({
|
||||
email: form.get("email"),
|
||||
password: form.get("password"),
|
||||
email: email.trim(),
|
||||
password,
|
||||
...(challenge
|
||||
? { challenge_token: challenge.challenge_token, otp: otp.trim() }
|
||||
: {}),
|
||||
});
|
||||
sessionStorage.setItem("agmail_access_token", result.access_token);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
|
||||
window.location.assign("/app");
|
||||
if (result.mfa_required) {
|
||||
setChallenge(result);
|
||||
setOtp("");
|
||||
setOtpCooldown(60);
|
||||
setStatus({ loading: false, error: "" });
|
||||
return;
|
||||
}
|
||||
sessionStorage.setItem(AUTH_TOKEN_KEY, result.access_token);
|
||||
sessionStorage.setItem(AUTH_ACCOUNT_KEY, JSON.stringify(result.account));
|
||||
window.location.replace("/app");
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResendOtp() {
|
||||
if (!challenge || otpCooldown > 0 || status.loading) return;
|
||||
setStatus({ loading: true, error: "" });
|
||||
try {
|
||||
await resendLoginOtp({ challenge_token: challenge.challenge_token });
|
||||
setOtpCooldown(60);
|
||||
setStatus({ loading: false, error: "" });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
}
|
||||
|
||||
function resetChallenge() {
|
||||
setChallenge(null);
|
||||
setOtp("");
|
||||
setOtpCooldown(0);
|
||||
setStatus({ loading: false, error: "" });
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout
|
||||
eyebrow="Welcome back"
|
||||
|
|
@ -31,27 +86,92 @@ export default function LoginPage() {
|
|||
description="Sign in to continue working alongside your agents."
|
||||
>
|
||||
<>
|
||||
<div className="card-heading"><h2>Log in to agmail</h2><p>Enter your account details below.</p></div>
|
||||
<form className="auth-form" onSubmit={handleSubmit}>
|
||||
<label>Email address<div className="input-wrap"><Mail size={16} /><input name="email" type="email" placeholder="you@gentic.email" required autoComplete="email" /></div></label>
|
||||
<label>
|
||||
<span className="auth-label-row">
|
||||
Password
|
||||
<a className="auth-forgot" href="/forgot-password">Forgot password?</a>
|
||||
</span>
|
||||
<PasswordField
|
||||
name="password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</label>
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
<button className="button button-coral auth-submit" disabled={status.loading}>
|
||||
{status.loading ? "Signing in…" : "Log in"} <ArrowRight size={16} />
|
||||
</button>
|
||||
</form>
|
||||
<div className="card-heading">
|
||||
<h2>{challenge ? "Verify it’s you" : "Log in to agmail"}</h2>
|
||||
<p>
|
||||
{challenge
|
||||
? `Enter the 6-digit code sent to ${challenge.phone_hint}.`
|
||||
: "Enter your account details below."}
|
||||
</p>
|
||||
</div>
|
||||
<form className="auth-form" onSubmit={handleSubmit}>
|
||||
{!challenge && (
|
||||
<>
|
||||
<label>
|
||||
Email address
|
||||
<div className="input-wrap">
|
||||
<Mail size={16} />
|
||||
<input
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="you@gentic.email"
|
||||
required
|
||||
autoComplete="email"
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span className="auth-label-row">
|
||||
Password
|
||||
<a className="auth-forgot" href="/forgot-password">Forgot password?</a>
|
||||
</span>
|
||||
<PasswordField
|
||||
name="password"
|
||||
placeholder="Your password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
{challenge && (
|
||||
<div className="auth-otp-block">
|
||||
<div className="auth-otp-head">
|
||||
<label htmlFor="login-otp">Verification code</label>
|
||||
<button
|
||||
type="button"
|
||||
className="auth-otp-send"
|
||||
disabled={status.loading || otpCooldown > 0}
|
||||
onClick={handleResendOtp}
|
||||
>
|
||||
{otpCooldown > 0 ? `Resend in ${otpCooldown}s` : "Resend code"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="input-wrap">
|
||||
<input
|
||||
id="login-otp"
|
||||
name="otp"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
placeholder="6-digit code"
|
||||
value={otp}
|
||||
onChange={(event) => setOtp(event.target.value.replace(/\D/g, "").slice(0, 6))}
|
||||
/>
|
||||
</div>
|
||||
<button type="button" className="auth-otp-send" onClick={resetChallenge}>
|
||||
Use a different account
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
<button className="button button-coral auth-submit" disabled={!canSubmit}>
|
||||
{status.loading
|
||||
? challenge
|
||||
? "Verifying…"
|
||||
: "Signing in…"
|
||||
: challenge
|
||||
? "Verify and continue"
|
||||
: "Log in"} <ArrowRight size={16} />
|
||||
</button>
|
||||
</form>
|
||||
{!challenge && (
|
||||
<p className="auth-switch">New to agmail? <a href="/signup">Create an account</a></p>
|
||||
)}
|
||||
</>
|
||||
</AuthLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ import MailRow from "./MailRow";
|
|||
import MailboxEmptyState from "./MailboxEmptyState";
|
||||
import MailboxSelectionBar from "./MailboxSelectionBar";
|
||||
import StickyNotesPanel from "./StickyNotesPanel";
|
||||
import WorkspaceAccountMenu from "./WorkspaceAccountMenu";
|
||||
import { useShellMode } from "../shellMode";
|
||||
import { shellTitle } from "./MobileChrome";
|
||||
import {
|
||||
|
|
@ -117,6 +118,8 @@ export default function MailboxView({
|
|||
initialThreadId = null,
|
||||
onLogout,
|
||||
onOpenSettings,
|
||||
onOpenProfile,
|
||||
onAccountUpdate,
|
||||
onCompose,
|
||||
onStats,
|
||||
}) {
|
||||
|
|
@ -149,8 +152,10 @@ export default function MailboxView({
|
|||
dateTo: "",
|
||||
});
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setStatus({ loading: true, error: "" });
|
||||
const load = useCallback(async ({ silent = false } = {}) => {
|
||||
if (!silent) {
|
||||
setStatus({ loading: true, error: "" });
|
||||
}
|
||||
try {
|
||||
const result = await listThreads(
|
||||
{
|
||||
|
|
@ -171,15 +176,44 @@ export default function MailboxView({
|
|||
setTotal(page.total);
|
||||
setStatus({ loading: false, error: "" });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
if (!silent) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
}
|
||||
}, [cursor, filters, mailbox, pageSize, token]);
|
||||
|
||||
const canAutoRefresh = !cursor
|
||||
&& !filters.query.trim()
|
||||
&& filters.read === "all"
|
||||
&& !filters.sender.trim()
|
||||
&& !filters.dateFrom
|
||||
&& !filters.dateTo;
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = window.setTimeout(load, filters.query ? 250 : 0);
|
||||
const timeout = window.setTimeout(() => load(), filters.query ? 250 : 0);
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [load, refreshKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!canAutoRefresh) return undefined;
|
||||
const intervalId = window.setInterval(() => {
|
||||
if (document.visibilityState === "visible") {
|
||||
load({ silent: true });
|
||||
}
|
||||
}, 30000);
|
||||
return () => window.clearInterval(intervalId);
|
||||
}, [canAutoRefresh, load]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleVisibilityChange() {
|
||||
if (document.visibilityState === "visible" && canAutoRefresh) {
|
||||
load({ silent: true });
|
||||
}
|
||||
}
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||||
return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||
}, [canAutoRefresh, load]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!initialThreadId) return undefined;
|
||||
let cancelled = false;
|
||||
|
|
@ -638,7 +672,6 @@ export default function MailboxView({
|
|||
setPageMenuOpen(false);
|
||||
}
|
||||
|
||||
const initials = `${account?.first_name?.[0] || ""}${account?.last_name?.[0] || ""}`.toUpperCase();
|
||||
const rangeStart = emails.length ? cursorHistory.length * pageSize + 1 : 0;
|
||||
const rangeEnd = emails.length ? rangeStart + emails.length - 1 : 0;
|
||||
const rangeLabel = emails.length === 0
|
||||
|
|
@ -697,14 +730,12 @@ export default function MailboxView({
|
|||
<button type="button" className="workspace-icon" aria-label="Theme"><Sun size={16} /></button>
|
||||
<button type="button" className="workspace-icon" aria-label="Help"><CircleHelp size={16} /></button>
|
||||
<button type="button" className="workspace-icon" aria-label="Settings" onClick={onOpenSettings}><Settings size={16} /></button>
|
||||
<button type="button" className="workspace-account" onClick={onLogout} title="Log out">
|
||||
<span>{initials || "AG"}</span>
|
||||
<div>
|
||||
<strong>{account?.first_name} {account?.last_name}</strong>
|
||||
<small>{account?.email}</small>
|
||||
</div>
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
<WorkspaceAccountMenu
|
||||
account={account}
|
||||
onOpenProfile={onOpenProfile}
|
||||
onOpenSettings={onOpenSettings}
|
||||
onLogout={onLogout}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { ArrowRight, Bot, Check, Inbox, Menu, Send, Sparkles } from "lucide-react";
|
||||
import Brand from "./Brand";
|
||||
import SessionExpiredNotice from "./SessionExpiredNotice";
|
||||
|
||||
export default function MobileLanding() {
|
||||
return (
|
||||
<main className="mobile-landing">
|
||||
<SessionExpiredNotice />
|
||||
<nav className="mobile-nav">
|
||||
<Brand />
|
||||
<button className="icon-button" aria-label="Open menu"><Menu size={21} /></button>
|
||||
|
|
|
|||
10
frontend/src/components/SessionExpiredNotice.jsx
Normal file
10
frontend/src/components/SessionExpiredNotice.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export default function SessionExpiredNotice() {
|
||||
const expired = new URLSearchParams(window.location.search).get("session") === "expired";
|
||||
if (!expired) return null;
|
||||
|
||||
return (
|
||||
<div className="session-expired-banner" role="status">
|
||||
Your session expired. <a href="/login">Log in</a> to continue where you left off.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,85 @@
|
|||
import {
|
||||
ArrowRight, Building2, CalendarDays, Mail, Phone, UserRound,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { register } from "../api";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { register, sendSignupOtp } from "../api";
|
||||
import AuthLayout from "./AuthLayout";
|
||||
import PasswordField from "./PasswordField";
|
||||
|
||||
const COUNTRY_CODES = [
|
||||
{ code: "91", label: "India (+91)" },
|
||||
{ code: "1", label: "United States (+1)" },
|
||||
{ code: "44", label: "United Kingdom (+44)" },
|
||||
{ code: "61", label: "Australia (+61)" },
|
||||
{ code: "971", label: "UAE (+971)" },
|
||||
];
|
||||
|
||||
const INDIA_CODE = "91";
|
||||
const INDIAN_PHONE_RE = /^[6-9]\d{9}$/;
|
||||
|
||||
export default function SignupPage() {
|
||||
const [accountType, setAccountType] = useState("individual");
|
||||
const [countryCode, setCountryCode] = useState(INDIA_CODE);
|
||||
const [phone, setPhone] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [otpSent, setOtpSent] = useState(false);
|
||||
const [otpCooldown, setOtpCooldown] = useState(0);
|
||||
const [status, setStatus] = useState({ loading: false, error: "" });
|
||||
const [otpStatus, setOtpStatus] = useState({ loading: false, error: "", notice: "" });
|
||||
|
||||
const isIndia = countryCode === INDIA_CODE;
|
||||
const phoneDigits = phone.replace(/\D/g, "");
|
||||
const indianPhoneValid = INDIAN_PHONE_RE.test(phoneDigits);
|
||||
const otpValid = /^\d{6}$/.test(otp.trim());
|
||||
|
||||
useEffect(() => {
|
||||
if (!otpCooldown) return undefined;
|
||||
const timer = window.setInterval(() => {
|
||||
setOtpCooldown((value) => (value > 1 ? value - 1 : 0));
|
||||
}, 1000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [otpCooldown]);
|
||||
|
||||
useEffect(() => {
|
||||
setOtp("");
|
||||
setOtpSent(false);
|
||||
setOtpStatus({ loading: false, error: "", notice: "" });
|
||||
}, [countryCode, phoneDigits]);
|
||||
|
||||
const canSendOtp = useMemo(
|
||||
() => isIndia && indianPhoneValid && !otpStatus.loading && otpCooldown === 0,
|
||||
[isIndia, indianPhoneValid, otpStatus.loading, otpCooldown],
|
||||
);
|
||||
|
||||
const canSubmit = useMemo(() => {
|
||||
if (status.loading) return false;
|
||||
if (!phoneDigits) return false;
|
||||
if (isIndia) return otpSent && otpValid;
|
||||
return true;
|
||||
}, [status.loading, phoneDigits, isIndia, otpSent, otpValid]);
|
||||
|
||||
async function handleSendOtp() {
|
||||
setOtpStatus({ loading: true, error: "", notice: "" });
|
||||
try {
|
||||
const result = await sendSignupOtp({
|
||||
country_code: countryCode,
|
||||
phone: phoneDigits,
|
||||
});
|
||||
setOtpSent(true);
|
||||
setOtpCooldown(60);
|
||||
setOtpStatus({
|
||||
loading: false,
|
||||
error: "",
|
||||
notice: result.message || "Verification code sent.",
|
||||
});
|
||||
} catch (error) {
|
||||
setOtpStatus({ loading: false, error: error.message, notice: "" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
if (!canSubmit) return;
|
||||
setStatus({ loading: true, error: "" });
|
||||
const form = new FormData(event.currentTarget);
|
||||
try {
|
||||
|
|
@ -22,12 +90,14 @@ export default function SignupPage() {
|
|||
first_name: form.get("first_name"),
|
||||
last_name: form.get("last_name"),
|
||||
date_of_birth: form.get("date_of_birth"),
|
||||
phone_number: form.get("phone_number"),
|
||||
country_code: countryCode,
|
||||
phone: phoneDigits,
|
||||
otp: isIndia ? otp.trim() : null,
|
||||
password: form.get("password"),
|
||||
});
|
||||
sessionStorage.setItem("agmail_access_token", result.access_token);
|
||||
sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
|
||||
window.location.assign("/app");
|
||||
window.location.replace("/app");
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message });
|
||||
}
|
||||
|
|
@ -67,10 +137,80 @@ export default function SignupPage() {
|
|||
<label>Last name<div className="input-wrap"><UserRound size={16} /><input name="last_name" placeholder="Morgan" required /></div></label>
|
||||
</div>
|
||||
<label>Date of birth<div className="input-wrap"><CalendarDays size={16} /><input name="date_of_birth" type="date" required /></div></label>
|
||||
<label>Phone number<div className="input-wrap"><Phone size={16} /><input name="phone_number" type="tel" placeholder="+1 555 123 4567" required /></div></label>
|
||||
<label>
|
||||
Phone number
|
||||
<div className="phone-row">
|
||||
<div className="input-wrap phone-country-wrap">
|
||||
<select
|
||||
aria-label="Country code"
|
||||
value={countryCode}
|
||||
onChange={(event) => setCountryCode(event.target.value)}
|
||||
>
|
||||
{COUNTRY_CODES.map((item) => (
|
||||
<option key={item.code} value={item.code}>{item.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="input-wrap">
|
||||
<Phone size={16} />
|
||||
<input
|
||||
name="phone"
|
||||
type="tel"
|
||||
inputMode="numeric"
|
||||
autoComplete="tel-national"
|
||||
placeholder={isIndia ? "9149154337" : "555 123 4567"}
|
||||
value={phone}
|
||||
onChange={(event) => setPhone(event.target.value.replace(/\D/g, ""))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isIndia && (
|
||||
<small className="field-hint">Indian numbers require SMS verification.</small>
|
||||
)}
|
||||
</label>
|
||||
|
||||
{isIndia && (
|
||||
<div className="auth-otp-block">
|
||||
<div className="auth-otp-head">
|
||||
<label htmlFor="signup-otp">Verification code</label>
|
||||
<button
|
||||
type="button"
|
||||
className="auth-otp-send"
|
||||
disabled={!canSendOtp}
|
||||
onClick={handleSendOtp}
|
||||
>
|
||||
{otpStatus.loading
|
||||
? "Sending…"
|
||||
: otpCooldown > 0
|
||||
? `Resend in ${otpCooldown}s`
|
||||
: otpSent
|
||||
? "Resend code"
|
||||
: "Send code"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="input-wrap">
|
||||
<input
|
||||
id="signup-otp"
|
||||
name="otp"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
placeholder="6-digit code"
|
||||
maxLength={6}
|
||||
value={otp}
|
||||
onChange={(event) => setOtp(event.target.value.replace(/\D/g, "").slice(0, 6))}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{otpStatus.notice && <p className="field-hint auth-otp-notice">{otpStatus.notice}</p>}
|
||||
{otpStatus.error && <p className="form-error" role="alert">{otpStatus.error}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label>Password<PasswordField name="password" placeholder="8+ characters" minLength={8} required autoComplete="new-password" /><small className="field-hint">Use uppercase, lowercase, and a number.</small></label>
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
<button className="button button-coral auth-submit" disabled={status.loading}>
|
||||
<button className="button button-coral auth-submit" disabled={!canSubmit}>
|
||||
{status.loading ? "Creating account…" : "Create account"} <ArrowRight size={16} />
|
||||
</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
Paperclip, Search, Send, ShieldCheck, Sparkles,
|
||||
} from "lucide-react";
|
||||
import Brand from "./Brand";
|
||||
import SessionExpiredNotice from "./SessionExpiredNotice";
|
||||
|
||||
const mail = [
|
||||
{ sender: "Research agent", subject: "Market brief is ready", time: "10:42", color: "coral" },
|
||||
|
|
@ -13,6 +14,7 @@ const mail = [
|
|||
export default function WebLanding() {
|
||||
return (
|
||||
<main className="landing">
|
||||
<SessionExpiredNotice />
|
||||
<nav className="nav shell">
|
||||
<Brand />
|
||||
<div className="nav-links"><a href="#product">Product</a><a href="#security">Security</a><a href="#about">About</a></div>
|
||||
|
|
|
|||
76
frontend/src/components/WorkspaceAccountMenu.jsx
Normal file
76
frontend/src/components/WorkspaceAccountMenu.jsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { ChevronDown, LogOut, Settings, UserRound } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
function accountInitials(account) {
|
||||
return `${account?.first_name?.[0] || ""}${account?.last_name?.[0] || ""}`.toUpperCase() || "AG";
|
||||
}
|
||||
|
||||
export default function WorkspaceAccountMenu({
|
||||
account,
|
||||
onOpenProfile,
|
||||
onOpenSettings,
|
||||
onLogout,
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const wrapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return undefined;
|
||||
function handlePointerDown(event) {
|
||||
if (!wrapRef.current?.contains(event.target)) setOpen(false);
|
||||
}
|
||||
function handleKeyDown(event) {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
function choose(action) {
|
||||
setOpen(false);
|
||||
action?.();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="workspace-account-wrap" ref={wrapRef}>
|
||||
<button
|
||||
type="button"
|
||||
className="workspace-account"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((value) => !value)}
|
||||
>
|
||||
{account?.profile_picture_url ? (
|
||||
<img src={account.profile_picture_url} alt="" className="workspace-account-photo" />
|
||||
) : (
|
||||
<span>{accountInitials(account)}</span>
|
||||
)}
|
||||
<div>
|
||||
<strong>{account?.first_name} {account?.last_name}</strong>
|
||||
<small>{account?.email}</small>
|
||||
</div>
|
||||
<ChevronDown size={14} className={open ? "open" : ""} />
|
||||
</button>
|
||||
{open && (
|
||||
<div className="workspace-account-menu" role="menu">
|
||||
<button type="button" role="menuitem" onClick={() => choose(onOpenProfile)}>
|
||||
<UserRound size={16} />
|
||||
Profile
|
||||
</button>
|
||||
<button type="button" role="menuitem" onClick={() => choose(onOpenSettings)}>
|
||||
<Settings size={16} />
|
||||
Settings
|
||||
</button>
|
||||
<button type="button" role="menuitem" className="danger" onClick={() => choose(onLogout)}>
|
||||
<LogOut size={16} />
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -112,17 +112,17 @@
|
|||
height:min(78vh,calc(100vh - 32px));
|
||||
}
|
||||
|
||||
.dashboard:has(.dashboard-sidebar.open) { grid-template-columns:228px minmax(0,1fr); }
|
||||
.dashboard-sidebar.open {
|
||||
.dashboard:has(.dashboard-sidebar.expanded) { grid-template-columns:228px minmax(0,1fr); }
|
||||
.dashboard-sidebar.expanded {
|
||||
width:228px;
|
||||
padding:var(--space-4) var(--space-3) var(--space-3);
|
||||
}
|
||||
.dashboard-sidebar.open .dashboard-brand-row { flex-direction:row; justify-content:space-between; padding:0 6px 2px; }
|
||||
.dashboard-sidebar.open .dashboard-brand-row .brand > span:not(.brand-mark),
|
||||
.dashboard-sidebar.open .dashboard-compose span,
|
||||
.dashboard-sidebar.open .dashboard-sidebar-section h2,
|
||||
.dashboard-sidebar.open .dashboard-nav-item span,
|
||||
.dashboard-sidebar.open .dashboard-profile > div {
|
||||
.dashboard-sidebar.expanded .dashboard-brand-row { flex-direction:row; justify-content:space-between; padding:0 6px 2px; }
|
||||
.dashboard-sidebar.expanded .dashboard-brand-row .brand > span:not(.brand-mark),
|
||||
.dashboard-sidebar.expanded .dashboard-compose span,
|
||||
.dashboard-sidebar.expanded .dashboard-sidebar-section h2,
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item span,
|
||||
.dashboard-sidebar.expanded .dashboard-profile > div {
|
||||
position:static;
|
||||
width:auto;
|
||||
height:auto;
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
margin:0;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.dashboard-sidebar.open .dashboard-nav-item em {
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item em {
|
||||
position:static;
|
||||
width:auto;
|
||||
min-width:18px;
|
||||
|
|
@ -141,20 +141,83 @@
|
|||
margin-left:auto;
|
||||
padding:0 6px;
|
||||
}
|
||||
.dashboard-sidebar.open .dashboard-sidebar-section h2 { margin:0 0 var(--space-2); padding:0 var(--space-2); }
|
||||
.dashboard-sidebar.open .dashboard-compose {
|
||||
.dashboard-sidebar.expanded .dashboard-sidebar-section h2 { margin:0 0 var(--space-2); padding:0 var(--space-2); }
|
||||
.dashboard-sidebar.expanded .dashboard-compose {
|
||||
width:calc(100% - 8px);
|
||||
margin:var(--space-4) var(--space-1) 0;
|
||||
padding:0 var(--space-4);
|
||||
}
|
||||
.dashboard-sidebar.open .dashboard-nav-item { justify-content:flex-start; padding:0 var(--space-3); gap:var(--space-3); }
|
||||
.dashboard-sidebar.open .dashboard-nav-item span { position:static; width:auto; height:auto; clip:auto; overflow:visible; flex:1; min-width:0; }
|
||||
.dashboard-sidebar.open .dashboard-profile {
|
||||
grid-template-columns:34px minmax(0,1fr) 31px;
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item { justify-content:flex-start; padding:0 var(--space-3); gap:var(--space-3); }
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item span { position:static; width:auto; height:auto; clip:auto; overflow:visible; flex:1; min-width:0; }
|
||||
.dashboard-sidebar.expanded .dashboard-profile {
|
||||
grid-template-columns:34px minmax(0,1fr) 31px 31px;
|
||||
padding-left:5px;
|
||||
padding-right:5px;
|
||||
}
|
||||
.dashboard-sidebar.open .dashboard-profile > button { display:grid; }
|
||||
.dashboard-sidebar.expanded .dashboard-profile > button { display:grid; }
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.dashboard { grid-template-columns:72px minmax(0,1fr); }
|
||||
.dashboard:has(.dashboard-sidebar.expanded) { grid-template-columns:228px minmax(0,1fr); }
|
||||
.dashboard-sidebar {
|
||||
width:72px;
|
||||
padding:16px 8px 12px;
|
||||
}
|
||||
.dashboard-brand-row { flex-direction:column; justify-content:center; padding:0; gap:6px; }
|
||||
.dashboard-brand-row .brand > span:not(.brand-mark),
|
||||
.dashboard-compose span,
|
||||
.dashboard-sidebar-section h2,
|
||||
.dashboard-nav-item em,
|
||||
.dashboard-profile > div { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
|
||||
.dashboard-brand-row > button { display:grid; width:32px; height:32px; color:#c8c3d4; }
|
||||
.dashboard-profile > button { display:none; }
|
||||
.dashboard-compose { width:44px; min-height:40px; margin:16px auto 0; padding:0; }
|
||||
.dashboard-nav-item { justify-content:center; padding:0; gap:0; }
|
||||
.dashboard-nav-item span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
|
||||
.dashboard-profile { grid-template-columns:34px; justify-content:center; padding-left:0; padding-right:0; }
|
||||
.dashboard-sidebar.expanded {
|
||||
width:228px;
|
||||
padding:var(--space-4) var(--space-3) var(--space-3);
|
||||
}
|
||||
.dashboard-sidebar.expanded .dashboard-brand-row { flex-direction:row; justify-content:space-between; padding:0 6px 2px; }
|
||||
.dashboard-sidebar.expanded .dashboard-brand-row .brand > span:not(.brand-mark),
|
||||
.dashboard-sidebar.expanded .dashboard-compose span,
|
||||
.dashboard-sidebar.expanded .dashboard-sidebar-section h2,
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item span,
|
||||
.dashboard-sidebar.expanded .dashboard-profile > div {
|
||||
position:static;
|
||||
width:auto;
|
||||
height:auto;
|
||||
clip:auto;
|
||||
overflow:visible;
|
||||
margin:0;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item em {
|
||||
position:static;
|
||||
width:auto;
|
||||
min-width:18px;
|
||||
height:18px;
|
||||
clip:auto;
|
||||
overflow:visible;
|
||||
margin-left:auto;
|
||||
padding:0 6px;
|
||||
}
|
||||
.dashboard-sidebar.expanded .dashboard-sidebar-section h2 { margin:0 0 var(--space-2); padding:0 var(--space-2); }
|
||||
.dashboard-sidebar.expanded .dashboard-compose {
|
||||
width:calc(100% - 8px);
|
||||
margin:var(--space-4) var(--space-1) 0;
|
||||
padding:0 var(--space-4);
|
||||
}
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item { justify-content:flex-start; padding:0 var(--space-3); gap:var(--space-3); }
|
||||
.dashboard-sidebar.expanded .dashboard-nav-item span { position:static; width:auto; height:auto; clip:auto; overflow:visible; flex:1; min-width:0; }
|
||||
.dashboard-sidebar.expanded .dashboard-profile {
|
||||
grid-template-columns:34px minmax(0,1fr) 31px 31px;
|
||||
padding-left:5px;
|
||||
padding-right:5px;
|
||||
}
|
||||
.dashboard-sidebar.expanded .dashboard-profile > button { display:grid; }
|
||||
}
|
||||
|
||||
@media (max-width:767.98px) {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ a { color:inherit; text-decoration:none; }
|
|||
.robot-smile { width:14px; height:7px; position:absolute; left:9px; bottom:6px; border:2px solid white; border-top:0; border-radius:0 0 10px 10px; transform:rotate(4deg); }
|
||||
.brand-compact { line-height:0; }
|
||||
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; }
|
||||
.session-expired-banner { margin:0; padding:10px 16px; text-align:center; background:#fff1ed; border-bottom:1px solid #ffd3ca; color:#8f4a3d; font-size:12px; font-weight:500; }
|
||||
.session-expired-banner a { color:#c95945; font-weight:700; text-decoration:none; }
|
||||
.session-expired-banner a:hover { text-decoration:underline; }
|
||||
.nav-links,.nav-actions,.hero-actions,.trust-line { display:flex; align-items:center; }
|
||||
.nav-links { gap:38px; margin-left:80px; color:#4f4f62; font-size:14px; }
|
||||
.nav-actions,.hero-actions { gap:10px; }
|
||||
|
|
@ -116,6 +119,16 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.type-card>span { display:grid; gap:3px; }.type-card strong { font-size:11px; }.type-card small { color:#97919a; font-size:8px; font-weight:500; line-height:1.3; }
|
||||
.type-card svg { color:#77727c; }.type-card.selected svg { color:var(--coral); }
|
||||
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
|
||||
.phone-row { display:grid; grid-template-columns:132px minmax(0,1fr); gap:10px; margin-top:7px; }
|
||||
.phone-country-wrap { padding:0 10px; }
|
||||
.phone-country-wrap select { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; font-weight:600; cursor:pointer; }
|
||||
.auth-otp-block { display:grid; gap:8px; }
|
||||
.auth-otp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
|
||||
.auth-otp-head label { margin:0; font-size:12px; font-weight:600; color:#5a5562; }
|
||||
.auth-otp-send { padding:0; border:0; background:transparent; color:#7357f6; font-size:11px; font-weight:700; white-space:nowrap; }
|
||||
.auth-otp-send:hover:not(:disabled) { color:#5a3fe0; }
|
||||
.auth-otp-send:disabled { color:#b7b3be; cursor:not-allowed; }
|
||||
.auth-otp-notice { margin:0; color:#3d8a5d; }
|
||||
.email-builder>span { padding-left:10px; border-left:1px solid #eae5e1; color:#7e7982; font-size:11px; white-space:nowrap; }
|
||||
.field-hint { display:block; margin-top:6px; color:#99939b; font-size:9px; font-weight:500; }
|
||||
.auth-submit { width:100%; margin-top:3px; }
|
||||
|
|
@ -142,7 +155,8 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.dashboard-profile>div { min-width:0; display:grid; gap:2px; }
|
||||
.dashboard-profile strong,.dashboard-profile small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.dashboard-profile strong { font-size:11px; }.dashboard-profile small { color:#99949d; font-size:8px; }
|
||||
.dashboard-profile button,.dashboard-brand-row>button,.dashboard-mobile-header>button { width:31px; height:31px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#8c8790; }
|
||||
.dashboard-profile button,.dashboard-mobile-header>button { width:31px; height:31px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#8c8790; }
|
||||
.dashboard-brand-row>button { width:31px; height:31px; display:none; place-items:center; border:0; border-radius:9px; background:transparent; color:#8c8790; }
|
||||
.dashboard-profile button:hover { color:var(--ink); background:#f5f1ee; }
|
||||
.dashboard-content { min-width:0; padding:28px clamp(28px,4vw,60px); background:#f5f4f2; }
|
||||
.dashboard-content-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
|
||||
|
|
@ -1269,7 +1283,7 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
|
|||
.compose-window.expanded { width:calc(100vw - 24px); min-width:0; height:min(78vh,calc(100vh - 24px)); }
|
||||
}
|
||||
@media(max-width:480px) {
|
||||
.account-types,.field-row { grid-template-columns:1fr; }.auth-story h1 br { display:none; }
|
||||
.account-types,.field-row,.phone-row { grid-template-columns:1fr; }.auth-story h1 br { display:none; }
|
||||
.compose-dock { right:0 !important; bottom:0; width:100%; }
|
||||
.compose-dock-expanded { width:100%; }
|
||||
.compose-window { width:100vw; height:min(88vh,100vh); border-radius:14px 14px 0 0; }
|
||||
|
|
@ -1308,7 +1322,11 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
|
|||
.dashboard { grid-template-columns:228px minmax(0,1fr); background:var(--canvas); }
|
||||
.dashboard-sidebar { width:228px; min-height:100vh; max-height:100vh; padding:var(--space-4) var(--space-3) var(--space-3); display:flex; flex-direction:column; overflow:hidden; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#171329 0%,#120f24 55%,#100d20 100%); box-shadow:inset -1px 0 0 #ffffff08; position:sticky; top:0; transform:none; }
|
||||
.dashboard-brand-row { flex-shrink:0; padding:0 6px 2px; }
|
||||
.dashboard-sidebar-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
|
||||
.dashboard-sidebar-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#ffffff28 transparent; }
|
||||
.dashboard-sidebar-scroll::-webkit-scrollbar { width:6px; }
|
||||
.dashboard-sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
|
||||
.dashboard-sidebar-scroll::-webkit-scrollbar-thumb { border-radius:999px; background:#ffffff28; }
|
||||
.dashboard-sidebar-scroll::-webkit-scrollbar-thumb:hover { background:#ffffff40; }
|
||||
.dashboard-brand-row>button { color:#c8c3d4; }
|
||||
.dashboard-sidebar .brand { color:#fff; font-size:17px; }
|
||||
.dashboard-sidebar .brand-mark { background:#fff; }
|
||||
|
|
@ -1343,8 +1361,10 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
|
|||
.dashboard-sidebar-mail,.dashboard-sidebar-labels,.dashboard-sidebar-agent,.dashboard-sidebar-company { flex:0 0 auto; }
|
||||
.dashboard-sidebar-company.dashboard-sidebar-first { margin-top:var(--space-4); padding-top:0; border-top:0; }
|
||||
.dashboard-company-item.active { background:rgba(255,255,255,0.09); box-shadow:inset 2px 0 0 #a78bfa; }
|
||||
.dashboard-profile { margin-top:auto; padding-top:var(--space-3); border-top:1px solid #ffffff10; flex:0 0 auto; }
|
||||
.dashboard-profile>span { background:linear-gradient(180deg,#ff9a82,#ff6f57); color:#2a2038; }
|
||||
.dashboard-profile { margin-top:auto; padding-top:var(--space-3); border-top:1px solid #ffffff10; flex:0 0 auto; grid-template-columns:34px minmax(0,1fr) 31px 31px; }
|
||||
.dashboard-profile>span,.dashboard-profile-photo { width:34px; height:34px; border-radius:11px; }
|
||||
.dashboard-profile-photo { object-fit:cover; display:block; }
|
||||
.dashboard-profile>span { background:linear-gradient(180deg,#ff9a82,#ff6f57); color:#2a2038; display:grid; place-items:center; font-size:10px; font-weight:700; text-transform:uppercase; }
|
||||
.dashboard-profile strong { color:#fff; }
|
||||
.dashboard-profile small,.dashboard-profile button { color:#9a95a8; }
|
||||
.dashboard-profile button:hover { background:#ffffff12; color:#fff; }
|
||||
|
|
@ -1388,9 +1408,37 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
|
|||
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
|
||||
@keyframes scaleIn { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
|
||||
@keyframes slideInDetail { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
|
||||
.workspace-account { margin-left:2px; padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1); display:flex; align-items:center; gap:var(--space-2); border:0; border-radius:var(--radius-lg); background:transparent; color:#6d6872; transition:background var(--motion-fast) var(--ease-standard); }
|
||||
.workspace-account-wrap { position:relative; margin-left:2px; }
|
||||
.workspace-account { padding:var(--space-1) var(--space-2) var(--space-1) var(--space-1); display:flex; align-items:center; gap:var(--space-2); border:0; border-radius:var(--radius-lg); background:transparent; color:#6d6872; transition:background var(--motion-fast) var(--ease-standard); }
|
||||
.workspace-account:hover { background:#f8f6f3; }
|
||||
.workspace-account>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#6d4aff; color:#fff; font-size:11px; font-weight:700; }
|
||||
.workspace-account>span,.workspace-account-photo { width:34px; height:34px; flex-shrink:0; border-radius:50%; }
|
||||
.workspace-account-photo { object-fit:cover; display:block; }
|
||||
.workspace-account>span { display:grid; place-items:center; background:#6d4aff; color:#fff; font-size:11px; font-weight:700; }
|
||||
.workspace-account svg { color:#9a95a3; transition:transform var(--motion-fast) var(--ease-standard); }
|
||||
.workspace-account svg.open { transform:rotate(180deg); }
|
||||
.workspace-account-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:196px; padding:6px; display:grid; gap:2px; border:1px solid var(--border-normal); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-float); }
|
||||
.workspace-account-menu button { min-height:36px; padding:0 10px; display:flex; align-items:center; gap:10px; border:0; border-radius:8px; background:transparent; color:#3d3948; font-size:12px; font-weight:600; text-align:left; }
|
||||
.workspace-account-menu button:hover { background:#f7f5fa; }
|
||||
.workspace-account-menu button.danger { color:#b54f3d; }
|
||||
.workspace-account-menu button.danger:hover { background:#fdeeed; }
|
||||
.account-profile-page { max-width:720px; }
|
||||
.account-profile-head h1 { margin:4px 0 0; font:700 clamp(28px,3vw,34px)/1.15 "Manrope"; letter-spacing:-.04em; }
|
||||
.account-profile-head p { margin:8px 0 0; color:#77758a; font-size:13px; }
|
||||
.account-profile-eyebrow { margin:0; color:#7357f6; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
|
||||
.account-profile-card { margin-top:18px; padding:20px; border:1px solid #ece9ee; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(20,18,30,.04); }
|
||||
.account-profile-avatar-block { display:flex; align-items:center; gap:16px; padding-bottom:18px; border-bottom:1px solid #f0eef2; }
|
||||
.account-profile-avatar { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:linear-gradient(180deg,#ff9a82,#ff6f57); color:#2a2038; font-size:22px; font-weight:700; }
|
||||
.account-profile-avatar img { width:100%; height:100%; object-fit:cover; }
|
||||
.account-profile-avatar-actions { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.account-profile-btn { height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; border:1px solid #e4e1e8; border-radius:10px; background:#fff; color:#3d3948; font-size:12px; font-weight:600; }
|
||||
.account-profile-btn.subtle { color:#77758a; }
|
||||
.account-profile-btn:hover:not(:disabled) { background:#f7f5fa; }
|
||||
.account-profile-btn:disabled { opacity:.55; cursor:wait; }
|
||||
.account-profile-fields { margin-top:18px; display:grid; gap:14px; }
|
||||
.account-profile-fields label { display:grid; gap:6px; }
|
||||
.account-profile-fields label>span { color:#77758a; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
|
||||
.account-profile-readonly { min-height:42px; padding:0 12px; display:flex; align-items:center; gap:8px; border:1px solid #ece9ee; border-radius:10px; background:#faf9fc; color:#3d3948; font-size:13px; }
|
||||
.account-profile-notice { margin:14px 0 0; color:#3d8a5d; font-size:12px; }
|
||||
.workspace-account div { min-width:0; display:grid; text-align:left; }
|
||||
.workspace-account strong,.workspace-account small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.workspace-account strong { color:#241f2b; font-size:12px; font-weight:600; }
|
||||
|
|
|
|||
22
frontend/src/utils/sessionTimeouts.js
Normal file
22
frontend/src/utils/sessionTimeouts.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
export const SESSION_TIMEOUT_OPTIONS = [
|
||||
{ value: 60, label: "1 hour" },
|
||||
{ value: 120, label: "2 hours" },
|
||||
{ value: 240, label: "4 hours" },
|
||||
{ value: 480, label: "8 hours" },
|
||||
{ value: 720, label: "12 hours" },
|
||||
{ value: 1440, label: "1 day" },
|
||||
{ value: 2880, label: "2 days" },
|
||||
{ value: 4320, label: "3 days" },
|
||||
{ value: 7200, label: "5 days" },
|
||||
{ value: 10080, label: "1 week" },
|
||||
{ value: 20160, label: "2 weeks" },
|
||||
{ value: 43200, label: "30 days" },
|
||||
{ value: 64800, label: "45 days" },
|
||||
{ value: 86400, label: "60 days" },
|
||||
{ value: 129600, label: "90 days" },
|
||||
];
|
||||
|
||||
export function formatSessionTimeout(minutes) {
|
||||
const match = SESSION_TIMEOUT_OPTIONS.find((option) => option.value === minutes);
|
||||
return match?.label || `${minutes} minutes`;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue