cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add drag and drop uploads and profile workspace polish

Browse Source
This commit is contained in:
cesnimda
2026-03-22 14:36:36 +01:00
parent 51e3d695b3
commit 8bd6f30973
2 changed files with 134 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/pages/ProfilePage.tsx
+35 -71
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useMemo, useState } from "react";
import { Alert, Avatar, Box, Button, Paper, TextField, Typography } from "@mui/material";
import { Alert, Avatar, Box, Button, Chip, Divider, Paper, TextField, Typography } from "@mui/material";
import { api } from "../api";
import GoogleAuthCard from "../components/GoogleAuthCard";
import { useToast } from "../toast";
type MeResponse = {
@@ -42,6 +43,7 @@ export default function ProfilePage() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [displayName, setDisplayName] = useState("");
const [headline, setHeadline] = useState("");
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
@@ -55,6 +57,7 @@ export default function ProfilePage() {
setFirstName(r.data?.firstName ?? "");
setLastName(r.data?.lastName ?? "");
setDisplayName(r.data?.displayName ?? "");
setHeadline(window.localStorage.getItem("profileHeadline") ?? "");
} catch {
setMe(null);
}
@@ -64,27 +67,26 @@ export default function ProfilePage() {
void loadProfile();
}, []);
const initials = useMemo(
() => initialsFrom([me?.displayName, me?.firstName, me?.lastName, me?.userName, me?.email]),
[me],
);
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(" ");
return (
<Paper sx={{ mt: 0, p: 2 }}>
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
<Avatar sx={{ width: 52, height: 52, fontWeight: 900 }}>{initials}</Avatar>
<Box>
<Typography variant="h5" sx={{ fontWeight: 900 }}>
Profile
</Typography>
<Typography sx={{ color: "text.secondary" }}>
{me?.displayName || fullName || me?.userName || me?.email || "-"}
</Typography>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
{me?.email || "-"} {me?.provider ? `(${me.provider})` : ""}
</Typography>
<Paper sx={{ mt: 0, p: 2.5 }}>
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
<Avatar sx={{ width: 64, height: 64, fontWeight: 900, fontSize: 24 }}>{initials}</Avatar>
<Box>
<Typography variant="h5" sx={{ fontWeight: 900 }}>
Profile
</Typography>
<Typography sx={{ color: "text.secondary" }}>{me?.displayName || fullName || me?.userName || me?.email || "-"}</Typography>
<Typography variant="body2" sx={{ color: "text.secondary" }}>{headline || "Add a short headline to personalize your account view."}</Typography>
</Box>
</Box>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "flex-start" }}>
<Chip label={me?.provider === "local" ? "Local account" : me?.provider === "google" ? "Google session" : "External session"} color={me?.provider === "local" ? "primary" : "default"} />
<Chip label={me?.googleLink?.linked ? `Google linked${me.googleLink.email ? `: ${me.googleLink.email}` : ""}` : "Google not linked"} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
</Box>
</Box>
@@ -104,15 +106,19 @@ export default function ProfilePage() {
<TextField label="Username" value={userName} onChange={(e) => setUserName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="First name" value={firstName} onChange={(e) => setFirstName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="Last name" value={lastName} onChange={(e) => setLastName(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth sx={{ gridColumn: "1 / -1" }} />
<TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={!isLocal} fullWidth />
<TextField
label="Profile headline"
value={headline}
onChange={(e) => setHeadline(e.target.value)}
helperText="Stored only in this browser to personalize your workspace."
fullWidth
/>
<Box sx={{ gridColumn: "1 / -1" }}>
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
<Typography variant="body2" sx={{ color: "text.secondary" }}>
Google account: {me?.googleLink?.linked ? `Linked${me.googleLink.email ? ` to ${me.googleLink.email}` : ""}` : "Not linked"}
</Typography>
</Box>
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
<Button
variant="contained"
disabled={!isLocal || loading}
@@ -120,6 +126,7 @@ export default function ProfilePage() {
setLoading(true);
try {
await api.put("/auth/profile", { email, userName, firstName, lastName, displayName });
window.localStorage.setItem("profileHeadline", headline.trim());
await loadProfile();
toast("Profile updated.", "success");
} catch (e: any) {
@@ -135,30 +142,13 @@ export default function ProfilePage() {
</Box>
<Box sx={{ gridColumn: "1 / -1", mt: 1 }}>
<Divider sx={{ mb: 2 }} />
<Typography variant="h6">Change password</Typography>
{!isLocal ? (
<Typography sx={{ color: "text.secondary" }}>
Password changes are only available for local accounts.
</Typography>
) : null}
{!isLocal ? <Typography sx={{ color: "text.secondary" }}>Password changes are only available for local accounts.</Typography> : null}
</Box>
<TextField
label="Current password"
type="password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
disabled={!isLocal}
fullWidth
/>
<TextField
label="New password"
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
disabled={!isLocal}
fullWidth
/>
<TextField label="Current password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} disabled={!isLocal} fullWidth />
<TextField label="New password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} disabled={!isLocal} fullWidth />
<Box sx={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
<Button
@@ -167,33 +157,7 @@ export default function ProfilePage() {
onClick={async () => {
setLoading(true);
try {
await api.post("/auth/change-password", {
currentPassword,
newPassword,
});
setCurrentPassword("");
setNewPassword("");
toast("Password updated.", "success");
} catch (e: any) {
const msg = e?.response?.data || e?.message || "Failed to change password.";
toast(String(msg), "error");
} finally {
setLoading(false);
}
}}
>
Update password
</Button>
</Box>
</Box>
</Paper>
);
}
try {
await api.post("/auth/change-password", {
currentPassword,
newPassword,
});
await api.post("/auth/change-password", { currentPassword, newPassword });
setCurrentPassword("");
setNewPassword("");
toast("Password updated.", "success");