setting, session and profile fix

This commit is contained in:
debu-2 2026-10-07 03:36:56 +05:30
parent e3d8215f2f
commit 068142ed61
7 changed files with 134 additions and 66 deletions

View file

@ -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>
);