Improve auth flows
This commit is contained in:
augmentedpotato
@@ -7,7 +7,7 @@ import { useAuth } from "@/context/AuthContext";
|
||||
const API_BASE = "";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const {user, token, loading, logout} = useAuth();
|
||||
const {user, token, loading, logout, refreshUser} = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const [pets, setPets] = useState([]);
|
||||
@@ -19,14 +19,27 @@ export default function ProfilePage() {
|
||||
const [breed, setBreed] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [petError, setPetError] = useState(null);
|
||||
const [profileForm, setProfileForm] = useState({ fullName: "", email: "", phone: "" });
|
||||
const [profileSubmitting, setProfileSubmitting] = useState(false);
|
||||
const [profileError, setProfileError] = useState(null);
|
||||
const [profileSuccess, setProfileSuccess] = useState(null);
|
||||
const [avatarSubmitting, setAvatarSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && !user) {
|
||||
router.replace("/login");
|
||||
router.replace(`/login?next=${encodeURIComponent("/profile")}`);
|
||||
}
|
||||
|
||||
}, [user, loading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
setProfileForm({
|
||||
fullName: user?.fullName || "",
|
||||
email: user?.email || "",
|
||||
phone: user?.phone || "",
|
||||
});
|
||||
}, [user]);
|
||||
|
||||
const loadPets = useCallback(() => {
|
||||
if (!token) return;
|
||||
setLoadingPets(true);
|
||||
@@ -50,6 +63,105 @@ export default function ProfilePage() {
|
||||
router.push("/");
|
||||
}
|
||||
|
||||
async function handleProfileSubmit(e) {
|
||||
e.preventDefault();
|
||||
setProfileSubmitting(true);
|
||||
setProfileError(null);
|
||||
setProfileSuccess(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/auth/me`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify(profileForm),
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok) {
|
||||
throw new Error(data?.message || `Request failed (${res.status})`);
|
||||
}
|
||||
|
||||
await refreshUser();
|
||||
setProfileSuccess("Profile updated successfully.");
|
||||
}
|
||||
|
||||
catch (err) {
|
||||
setProfileError(err.message);
|
||||
}
|
||||
|
||||
finally {
|
||||
setProfileSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarUpload(file) {
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("avatar", file);
|
||||
setAvatarSubmitting(true);
|
||||
setProfileError(null);
|
||||
setProfileSuccess(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
||||
method: "POST",
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok) {
|
||||
throw new Error(data?.message || "Failed to upload avatar");
|
||||
}
|
||||
|
||||
await refreshUser();
|
||||
setProfileSuccess(data?.message || "Avatar updated successfully.");
|
||||
}
|
||||
|
||||
catch (err) {
|
||||
setProfileError(err.message);
|
||||
}
|
||||
|
||||
finally {
|
||||
setAvatarSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarDelete() {
|
||||
setAvatarSubmitting(true);
|
||||
setProfileError(null);
|
||||
setProfileSuccess(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
||||
method: "DELETE",
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!res.ok) {
|
||||
throw new Error(data?.message || "Failed to delete avatar");
|
||||
}
|
||||
|
||||
await refreshUser();
|
||||
setProfileSuccess(data?.message || "Avatar removed successfully.");
|
||||
}
|
||||
|
||||
catch (err) {
|
||||
setProfileError(err.message);
|
||||
}
|
||||
|
||||
finally {
|
||||
setAvatarSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function openAddForm() {
|
||||
setEditingPet(null);
|
||||
setPetName("");
|
||||
@@ -170,7 +282,11 @@ export default function ProfilePage() {
|
||||
<main className="profile-page-layout">
|
||||
<div className="profile-card">
|
||||
<div className="profile-avatar-circle">
|
||||
{(user.fullName || user.username).charAt(0).toUpperCase()}
|
||||
{user.avatarUrl ? (
|
||||
<img src={user.avatarUrl} alt={user.fullName || user.username} className="profile-avatar-image" />
|
||||
) : (
|
||||
(user.fullName || user.username).charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="profile-name">{user.fullName || user.username}</h1>
|
||||
@@ -185,7 +301,65 @@ export default function ProfilePage() {
|
||||
))}
|
||||
</dl>
|
||||
|
||||
<button className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
|
||||
<form className="profile-update-form" onSubmit={handleProfileSubmit}>
|
||||
<h2 className="profile-update-title">Update Profile</h2>
|
||||
{profileError && <div className="appt-error">{profileError}</div>}
|
||||
{profileSuccess && <div className="appt-success">{profileSuccess}</div>}
|
||||
<label className="appt-label">
|
||||
Full Name
|
||||
<input
|
||||
className="appt-input"
|
||||
type="text"
|
||||
value={profileForm.fullName}
|
||||
onChange={(e) => setProfileForm((current) => ({ ...current, fullName: e.target.value }))}
|
||||
maxLength={100}
|
||||
/>
|
||||
</label>
|
||||
<label className="appt-label">
|
||||
Email
|
||||
<input
|
||||
className="appt-input"
|
||||
type="email"
|
||||
value={profileForm.email}
|
||||
onChange={(e) => setProfileForm((current) => ({ ...current, email: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label className="appt-label">
|
||||
Phone
|
||||
<input
|
||||
className="appt-input"
|
||||
type="text"
|
||||
value={profileForm.phone}
|
||||
onChange={(e) => setProfileForm((current) => ({ ...current, phone: e.target.value }))}
|
||||
maxLength={20}
|
||||
/>
|
||||
</label>
|
||||
<div className="profile-avatar-actions">
|
||||
<label className="profile-avatar-upload-btn">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
className="profile-pet-upload-input"
|
||||
onChange={(e) => {
|
||||
handleAvatarUpload(e.target.files?.[0] || null);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
{avatarSubmitting ? "Working..." : user.avatarUrl ? "Change Avatar" : "Upload Avatar"}
|
||||
</label>
|
||||
{user.avatarUrl && (
|
||||
<button type="button" className="profile-pet-delete-btn" onClick={handleAvatarDelete} disabled={avatarSubmitting}>
|
||||
Remove Avatar
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<button type="submit" className="appt-submit-btn" disabled={profileSubmitting || avatarSubmitting}>
|
||||
{profileSubmitting ? "Saving..." : "Save Profile"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button type="button" className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
|
||||
Log Out
|
||||
</button>
|
||||
</div>
|
||||
@@ -194,7 +368,7 @@ export default function ProfilePage() {
|
||||
<div className="profile-pets-section">
|
||||
<div className="profile-pets-header">
|
||||
<h2 className="profile-pets-title">My Pets</h2>
|
||||
<button className="profile-pets-add-btn" onClick={openAddForm}>+ Add Pet</button>
|
||||
<button type="button" className="profile-pets-add-btn" onClick={openAddForm}>+ Add Pet</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
@@ -285,11 +459,11 @@ export default function ProfilePage() {
|
||||
{pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
|
||||
</div>
|
||||
<div className="profile-pet-card-actions">
|
||||
<button className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
|
||||
<button className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
|
||||
<button type="button" className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user