setting, session and profile fix
This commit is contained in:
parent
e3d8215f2f
commit
068142ed61
7 changed files with 134 additions and 66 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import { Camera, UserRound } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { updateAccountProfile } from "../api";
|
||||
|
||||
|
|
@ -9,10 +8,18 @@ function accountInitials(account) {
|
|||
return `${account?.first_name?.[0] || ""}${account?.last_name?.[0] || ""}`.toUpperCase() || "AG";
|
||||
}
|
||||
|
||||
function displayPhone(phone) {
|
||||
if (!phone) return "Not set";
|
||||
return phone.replace(/^\+/, "");
|
||||
}
|
||||
|
||||
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: "" });
|
||||
const fullName = `${account?.first_name || ""} ${account?.last_name || ""}`.trim();
|
||||
const isCompany = account?.account_type === "company";
|
||||
const hasPhoto = Boolean(account?.profile_picture_url);
|
||||
|
||||
async function handleFileChange(event) {
|
||||
const file = event.target.files?.[0];
|
||||
|
|
@ -39,7 +46,7 @@ export default function AccountProfile({ account, onUpdated }) {
|
|||
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." });
|
||||
setStatus({ loading: false, error: "", notice: "Saved" });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message, notice: "" });
|
||||
}
|
||||
|
|
@ -51,7 +58,7 @@ export default function AccountProfile({ account, onUpdated }) {
|
|||
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." });
|
||||
setStatus({ loading: false, error: "", notice: "Saved" });
|
||||
} catch (error) {
|
||||
setStatus({ loading: false, error: error.message, notice: "" });
|
||||
}
|
||||
|
|
@ -60,42 +67,48 @@ export default function AccountProfile({ account, onUpdated }) {
|
|||
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>
|
||||
<p className="account-profile-eyebrow">{isCompany ? "Company workspace" : "Personal workspace"}</p>
|
||||
<h1>Profile</h1>
|
||||
<p>Manage your personal information and how you appear across Gentic.</p>
|
||||
<p className="account-profile-meta">
|
||||
{isCompany ? "Company account" : "Personal account"} · {isCompany ? "Company" : "Individual"}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="account-profile-card">
|
||||
<div className="account-profile-avatar-block">
|
||||
<div className="account-profile-section">
|
||||
<div className="account-profile-identity">
|
||||
<div className="account-profile-avatar">
|
||||
{account?.profile_picture_url ? (
|
||||
{hasPhoto ? (
|
||||
<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 && (
|
||||
<div className="account-profile-identity-copy">
|
||||
<strong>{fullName}</strong>
|
||||
<div className="account-profile-identity-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="account-profile-btn subtle"
|
||||
className="account-profile-link"
|
||||
disabled={status.loading}
|
||||
onClick={removePhoto}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
Remove
|
||||
{hasPhoto ? "Change photo" : "Upload photo"}
|
||||
</button>
|
||||
)}
|
||||
{hasPhoto && (
|
||||
<>
|
||||
<span aria-hidden="true">·</span>
|
||||
<button
|
||||
type="button"
|
||||
className="account-profile-link subtle"
|
||||
disabled={status.loading}
|
||||
onClick={removePhoto}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
|
|
@ -109,23 +122,28 @@ export default function AccountProfile({ account, onUpdated }) {
|
|||
<div className="account-profile-fields">
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<div className="account-profile-readonly">
|
||||
<UserRound size={16} />
|
||||
{account?.first_name} {account?.last_name}
|
||||
</div>
|
||||
<input value={fullName} readOnly disabled />
|
||||
</label>
|
||||
<label>
|
||||
<span>Email</span>
|
||||
<div className="account-profile-readonly">{account?.email}</div>
|
||||
<input value={account?.email || ""} readOnly disabled />
|
||||
<small>Your Gentic email address</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>Phone</span>
|
||||
<div className="account-profile-readonly">{account?.phone_number || "Not set"}</div>
|
||||
<input value={displayPhone(account?.phone_number)} readOnly disabled />
|
||||
</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 className="account-profile-footer">
|
||||
{status.error && <p className="form-error" role="alert">{status.error}</p>}
|
||||
{status.notice && !status.error && (
|
||||
<p className="account-profile-saved" role="status">{status.notice}</p>
|
||||
)}
|
||||
{status.loading && !status.notice && (
|
||||
<p className="account-profile-saved" role="status">Saving…</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue