cesnimda
384 lines
18 KiB
TypeScript
384 lines
18 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import { Alert, Avatar, Box, Button, Chip, TextField, Typography } from "@mui/material";
|
|
|
|
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
|
import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import GoogleAuthCard from "../components/GoogleAuthCard";
|
|
import MicrosoftAuthCard from "../components/MicrosoftAuthCard";
|
|
import AuthStatusCard from "../components/AuthStatusCard";
|
|
import TwoFactorSettingsCard from "../components/TwoFactorSettingsCard";
|
|
import SessionsSettingsCard from "../components/SessionsSettingsCard";
|
|
import CropImageDialog from "../components/CropImageDialog";
|
|
import { useToast } from "../toast";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import { parseStructuredCvJson } from "../profileCv";
|
|
import { getUserScopedStorageKey } from "../auth";
|
|
import { PageSection } from "../layout/PageLayout";
|
|
|
|
type MeResponse = {
|
|
provider?: "local" | "google" | "external";
|
|
id?: string;
|
|
email?: string;
|
|
userName?: string;
|
|
firstName?: string;
|
|
lastName?: string;
|
|
displayName?: string;
|
|
profileCvText?: string;
|
|
profileCvStructureJson?: string;
|
|
avatarImageDataUrl?: string;
|
|
roles?: string[];
|
|
googleLink?: {
|
|
linked: boolean;
|
|
email?: string | null;
|
|
linkedAt?: string | null;
|
|
} | null;
|
|
};
|
|
|
|
type PendingEmailChange = {
|
|
pendingEmail?: string | null;
|
|
requestedAtUtc?: string | null;
|
|
};
|
|
|
|
const AVATAR_UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp";
|
|
|
|
function initialsFrom(values: Array<string | undefined>) {
|
|
const joined = values.map((x) => (x ?? "").trim()).filter(Boolean);
|
|
if (joined.length === 0) return "?";
|
|
if (joined.length === 1) {
|
|
const parts = joined[0].split(/[\s@._-]+/).filter(Boolean);
|
|
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
|
|
return (parts[0][0] + parts[1][0]).toUpperCase();
|
|
}
|
|
return (joined[0][0] + joined[1][0]).toUpperCase();
|
|
}
|
|
|
|
// ProfilePage backs /profile: account identity + security + preferences. The master career
|
|
// profile lives in CareerProfilePage (/career). Split in Phase 2.2. Saves only identity fields
|
|
// (partial update), never the master profile.
|
|
export default function ProfilePage() {
|
|
// Retained so the shared JSX reads identically; hardcoded for /profile.
|
|
const careerOnly = false;
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
const avatarInputRef = useRef<HTMLInputElement | null>(null);
|
|
const [me, setMe] = useState<MeResponse | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
const [saveError, setSaveError] = useState<string | null>(null);
|
|
const [passwordError, setPasswordError] = useState<string | null>(null);
|
|
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
|
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
|
const [cropOpen, setCropOpen] = useState(false);
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [pendingEmail, setPendingEmail] = useState<string | null>(null);
|
|
const [emailChangePassword, setEmailChangePassword] = useState("");
|
|
const [userName, setUserName] = useState("");
|
|
const [firstName, setFirstName] = useState("");
|
|
const [lastName, setLastName] = useState("");
|
|
const [displayName, setDisplayName] = useState("");
|
|
const [headline, setHeadline] = useState("");
|
|
const [profileCvText, setProfileCvText] = useState("");
|
|
const [currentPassword, setCurrentPassword] = useState("");
|
|
const [newPassword, setNewPassword] = useState("");
|
|
|
|
|
|
const loadProfile = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
// /profile only needs the account row. The master-profile data (runs, structured CV,
|
|
// saved jobs) is loaded by CareerProfilePage on /career.
|
|
const r = await api.get<MeResponse>("/auth/me");
|
|
setMe(r.data);
|
|
setEmail(r.data?.email ?? "");
|
|
setUserName(r.data?.userName ?? "");
|
|
setFirstName(r.data?.firstName ?? "");
|
|
setLastName(r.data?.lastName ?? "");
|
|
setDisplayName(r.data?.displayName ?? "");
|
|
setProfileCvText(r.data?.profileCvText ?? "");
|
|
const persistedHeadline = parseStructuredCvJson(r.data?.profileCvStructureJson).contact.headline;
|
|
const userKey = r.data?.id || r.data?.email || r.data?.userName || "anon";
|
|
setHeadline(persistedHeadline ?? window.localStorage.getItem(getUserScopedStorageKey("profileHeadline", userKey)) ?? "");
|
|
if (r.data?.provider === "local") {
|
|
const pending = await api.get<PendingEmailChange>("/auth/email-change");
|
|
setPendingEmail(pending.data?.pendingEmail ?? null);
|
|
} else {
|
|
setPendingEmail(null);
|
|
}
|
|
setLoadError(null);
|
|
} catch (error: any) {
|
|
setMe(null);
|
|
setLoadError(getApiErrorMessage(error, t("profileLoadFailed")));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
void loadProfile();
|
|
}, [loadProfile]);
|
|
|
|
const initials = useMemo(() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]), [me]);
|
|
const isLocal = me?.provider === "local";
|
|
const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");
|
|
const cvWordCount = profileCvText.trim() ? profileCvText.trim().split(/\s+/).length : 0;
|
|
|
|
const providerLabel = me?.provider === "local" ? t("profileLocalAccount") : me?.provider === "google" ? t("profileGoogleSession") : t("profileExternalSession");
|
|
const googleLabel = me?.googleLink?.linked
|
|
? me.googleLink.email
|
|
? t("profileGoogleLinkedWithEmail", { email: me.googleLink.email })
|
|
: t("profileGoogleLinked")
|
|
: t("profileGoogleNotLinked");
|
|
const cvLabel = profileCvText.trim() ? t("profileCvTextAvailable", { count: cvWordCount }) : t("profileCvTextMissing");
|
|
|
|
return (
|
|
<Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
|
|
<CropImageDialog
|
|
open={cropOpen}
|
|
file={avatarFile}
|
|
onClose={() => {
|
|
setCropOpen(false);
|
|
setAvatarFile(null);
|
|
}}
|
|
onSave={async (blob) => {
|
|
const file = new File([blob], "avatar.png", { type: "image/png" });
|
|
const formData = new FormData();
|
|
formData.append("file", file);
|
|
setUploadingAvatar(true);
|
|
try {
|
|
const response = await api.post<{ avatarImageDataUrl?: string }>("/auth/avatar", formData, {
|
|
headers: { "Content-Type": "multipart/form-data" },
|
|
});
|
|
setMe((prev) => (prev ? { ...prev, avatarImageDataUrl: response.data?.avatarImageDataUrl ?? prev.avatarImageDataUrl } : prev));
|
|
setCropOpen(false);
|
|
setAvatarFile(null);
|
|
toast(t("profileImageUpdated"), "success");
|
|
} catch (e: any) {
|
|
toast(getApiErrorMessage(e, t("profileImageUploadFailed")), "error");
|
|
} finally {
|
|
setUploadingAvatar(false);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{loadError ? (
|
|
<Alert severity="error" sx={{ overflowWrap: "anywhere" }} action={<Button color="inherit" size="small" onClick={() => void loadProfile()}>{t("retry")}</Button>}>
|
|
{t("profileLoadFailed")}
|
|
<Typography variant="body2" sx={{ mt: 0.5 }}>{loadError}</Typography>
|
|
</Alert>
|
|
) : null}
|
|
|
|
{loading ? <Typography role="status" variant="body2" color="text.secondary">{t("loading")}</Typography> : null}
|
|
|
|
<PageSection surface title={careerOnly ? "Master career profile" : t("profileTitle")}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", minWidth: 0 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", minWidth: 0, maxWidth: "100%" }}>
|
|
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1, minWidth: 0, maxWidth: "100%" }}>
|
|
<Avatar src={me?.avatarImageDataUrl || undefined} sx={{ width: 84, height: 84, fontWeight: 900, fontSize: 28, bgcolor: "primary.main", color: "primary.contrastText" }}>{initials}</Avatar>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", justifyContent: "center", maxWidth: "100%", "& .MuiButton-root": { maxWidth: "100%", whiteSpace: "normal" } }}>
|
|
<input
|
|
ref={avatarInputRef}
|
|
type="file"
|
|
accept={AVATAR_UPLOAD_ACCEPT}
|
|
style={{ display: "none" }}
|
|
onChange={(event) => {
|
|
const file = event.target.files?.[0] ?? null;
|
|
event.target.value = "";
|
|
if (!file) return;
|
|
setAvatarFile(file);
|
|
setCropOpen(true);
|
|
}}
|
|
/>
|
|
<Button variant="outlined" size="small" startIcon={<PhotoCameraOutlinedIcon />} disabled={!isLocal || uploadingAvatar} onClick={() => avatarInputRef.current?.click()}>
|
|
{uploadingAvatar ? t("profileUploading") : t("profileChangeImage")}
|
|
</Button>
|
|
{me?.avatarImageDataUrl ? (
|
|
<Button
|
|
variant="text"
|
|
size="small"
|
|
color="inherit"
|
|
startIcon={<DeleteOutlineIcon />}
|
|
disabled={!isLocal || uploadingAvatar}
|
|
onClick={async () => {
|
|
setUploadingAvatar(true);
|
|
try {
|
|
await api.delete("/auth/avatar");
|
|
setMe((prev) => (prev ? { ...prev, avatarImageDataUrl: undefined } : prev));
|
|
toast(t("profileImageRemoved"), "success");
|
|
} catch (e: any) {
|
|
toast(getApiErrorMessage(e, t("profileImageRemoveFailed")), "error");
|
|
} finally {
|
|
setUploadingAvatar(false);
|
|
}
|
|
}}
|
|
>
|
|
{t("profileRemoveImage")}
|
|
</Button>
|
|
) : null}
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, overflowWrap: "anywhere" }}>
|
|
<Typography sx={{ color: "text.secondary" }}>{me?.userName || me?.displayName || fullName || me?.email || "-"}</Typography>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>{headline || t("profileHeadlinePlaceholder")}</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "flex-start", minWidth: 0, maxWidth: "100%", "& .MuiChip-root": { maxWidth: "100%", height: "auto", minHeight: 32 }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere", py: 0.5 } }}>
|
|
<Chip label={providerLabel} color={me?.provider === "local" ? "primary" : "default"} />
|
|
<Chip label={googleLabel} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
|
|
<Chip label={cvLabel} color={profileCvText.trim() ? "success" : "warning"} variant={profileCvText.trim() ? "filled" : "outlined"} />
|
|
</Box>
|
|
</Box>
|
|
</PageSection>
|
|
|
|
{!careerOnly ? <>
|
|
<AuthStatusCard />
|
|
<GoogleAuthCard />
|
|
<MicrosoftAuthCard />
|
|
</> : null}
|
|
|
|
<PageSection surface title={t("profileAccountSection")}>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: 2, minWidth: 0, "& .MuiFormHelperText-root": { overflowWrap: "anywhere" }, "& .MuiButton-root": { maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" } }}>
|
|
{!careerOnly && !isLocal ? <Alert severity="info" sx={{ gridColumn: "1 / -1" }}>{t("profileReadOnlyInfo")}</Alert> : null}
|
|
|
|
{saveError ? <Alert severity="error" sx={{ gridColumn: "1 / -1", overflowWrap: "anywhere" }}>{saveError}</Alert> : null}
|
|
|
|
{!careerOnly ? <>
|
|
<TextField label={t("profileDisplayName")} value={displayName} onChange={(e) => setDisplayName(e.target.value)} disabled={!isLocal} fullWidth />
|
|
<TextField label={t("profileUsername")} value={userName} onChange={(e) => setUserName(e.target.value)} disabled={!isLocal} fullWidth />
|
|
<TextField label={t("profileFirstName")} value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={!isLocal} fullWidth />
|
|
<TextField label={t("profileLastName")} value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={!isLocal} fullWidth />
|
|
<TextField label={t("profileNewEmail")} value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} helperText={t("profileCurrentEmail", { email: me?.email || "-" })} fullWidth />
|
|
<TextField
|
|
label={t("profileHeadline")}
|
|
value={headline}
|
|
onChange={(e) => setHeadline(e.target.value)}
|
|
helperText={t("profileHeadlineHelp")}
|
|
fullWidth
|
|
/>
|
|
</> : null}
|
|
|
|
{!careerOnly && isLocal ? <Box sx={{ gridColumn: "1 / -1", display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "minmax(0, 1fr) auto auto" }, gap: 2, alignItems: "center", minWidth: 0 }}>
|
|
{pendingEmail ? <Alert severity="info" sx={{ gridColumn: "1 / -1", overflowWrap: "anywhere" }}>{t("profilePendingEmail", { email: pendingEmail })}</Alert> : null}
|
|
<TextField label={t("profileEmailChangePassword")} type="password" value={emailChangePassword} onChange={(e) => setEmailChangePassword(e.target.value)} autoComplete="current-password" fullWidth />
|
|
<Button
|
|
type="button"
|
|
variant="outlined"
|
|
disabled={loading || !emailChangePassword || !email.trim() || email.trim().toLowerCase() === (me?.email || "").toLowerCase()}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await api.post<PendingEmailChange>("/auth/email-change/request", { email, currentPassword: emailChangePassword });
|
|
setPendingEmail(result.data?.pendingEmail ?? email.trim());
|
|
setEmailChangePassword("");
|
|
toast(t("profileEmailChangeSent"), "success");
|
|
} catch (e: any) {
|
|
toast(getApiErrorMessage(e, t("profileEmailChangeFailed")), "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
{t("profileRequestEmailChange")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
disabled={loading || !pendingEmail || !emailChangePassword}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
try {
|
|
await api.post("/auth/email-change/cancel", { currentPassword: emailChangePassword });
|
|
setPendingEmail(null);
|
|
setEmail(me?.email ?? "");
|
|
setEmailChangePassword("");
|
|
toast(t("profileEmailChangeCancelled"), "success");
|
|
} catch (e: any) {
|
|
toast(getApiErrorMessage(e, t("profileEmailChangeFailed")), "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
{t("cancel")}
|
|
</Button>
|
|
</Box> : null}
|
|
|
|
|
|
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
|
|
<Button
|
|
type="button"
|
|
variant="contained"
|
|
disabled={!isLocal || loading}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
setSaveError(null);
|
|
try {
|
|
// /profile saves identity only. Omitting the master-profile fields leaves
|
|
// them untouched; they are owned by /career.
|
|
await api.put("/auth/profile", { userName, firstName, lastName, displayName });
|
|
const userKey = me?.id || me?.email || me?.userName;
|
|
if (userKey) window.localStorage.setItem(getUserScopedStorageKey("profileHeadline", userKey), headline.trim());
|
|
await loadProfile();
|
|
toast(t("profileUpdated"), "success");
|
|
} catch (error: any) {
|
|
const message = getApiErrorMessage(error, t("profileUpdateFailed"));
|
|
setSaveError(message);
|
|
toast(message, "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
{t("profileSaveChanges")}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</PageSection>
|
|
|
|
{!careerOnly ? <PageSection surface title={t("profileChangePassword")}>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: 2, minWidth: 0, "& .MuiButton-root": { maxWidth: "100%", whiteSpace: "normal" } }}>
|
|
{!careerOnly && !isLocal ? <Typography sx={{ gridColumn: "1 / -1", color: "text.secondary" }}>{t("profilePasswordLocalOnly")}</Typography> : null}
|
|
|
|
{passwordError ? <Alert severity="error" sx={{ gridColumn: "1 / -1", overflowWrap: "anywhere" }}>{passwordError}</Alert> : null}
|
|
|
|
{!careerOnly ? <>
|
|
<TextField label={t("profileCurrentPassword")} type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} disabled={!isLocal} fullWidth />
|
|
<TextField label={t("profileNewPassword")} type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} disabled={!isLocal} fullWidth />
|
|
|
|
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
|
|
<Button
|
|
type="button"
|
|
variant="outlined"
|
|
disabled={!isLocal || loading}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
setPasswordError(null);
|
|
try {
|
|
await api.post("/auth/change-password", { currentPassword, newPassword });
|
|
setCurrentPassword("");
|
|
setNewPassword("");
|
|
toast(t("profilePasswordUpdated"), "success");
|
|
} catch (error: any) {
|
|
const message = getApiErrorMessage(error, t("profilePasswordUpdateFailed"));
|
|
setPasswordError(message);
|
|
toast(message, "error");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
{t("profileUpdatePassword")}
|
|
</Button>
|
|
</Box>
|
|
</> : null}
|
|
</Box>
|
|
</PageSection> : null}
|
|
|
|
{!careerOnly && isLocal ? <TwoFactorSettingsCard /> : null}
|
|
{!careerOnly && isLocal ? <SessionsSettingsCard /> : null}
|
|
</Box>
|
|
);
|
|
}
|