naim-firebase-auth-wrapper
Version:
React components and hooks for Firebase Authentication and Firestore with Mantine UI
67 lines • 3.67 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { TextInput, Button, Paper, Title, Stack, Avatar, Group, FileInput, Loader } from '@mantine/core';
import { useAuth } from '../hooks/useAuth';
import { getUserProfile, updateUserProfile } from '../services/firestore';
export const UserProfile = ({ onSuccess, onError }) => {
const { user } = useAuth();
const [profile, setProfile] = useState({});
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [photoFile, setPhotoFile] = useState(null);
useEffect(() => {
const loadProfile = async () => {
if (!user)
return;
try {
const userProfile = await getUserProfile(user.uid);
if (userProfile) {
setProfile(userProfile);
}
}
catch (error) {
console.error('Error loading profile:', error);
onError?.(error);
}
finally {
setLoading(false);
}
};
loadProfile();
}, [user, onError]);
const handleSave = async () => {
if (!user)
return;
setSaving(true);
try {
// Handle photo upload if provided
let photoURL = profile.photoURL;
if (photoFile) {
// In a real implementation, you would upload to Firebase Storage
// and get the download URL
// For now, we'll just simulate this
photoURL = URL.createObjectURL(photoFile);
}
const updatedProfile = {
...profile,
photoURL
};
await updateUserProfile(user.uid, updatedProfile);
setProfile(updatedProfile);
onSuccess?.();
}
catch (error) {
console.error('Error updating profile:', error);
onError?.(error);
}
finally {
setSaving(false);
}
};
if (loading) {
return _jsx(Loader, {});
}
return (_jsxs(Paper, { radius: "md", p: "xl", withBorder: true, children: [_jsx(Title, { order: 2, mb: "md", children: "User Profile" }), _jsxs(Stack, { gap: "md", children: [_jsx(Group, { justify: "center", mb: "md", children: _jsx(Avatar, { src: profile.photoURL, size: 120, radius: 120, alt: profile.displayName || 'User' }) }), _jsx(FileInput, { label: "Profile Photo", placeholder: "Upload a new photo", accept: "image/png,image/jpeg", value: photoFile, onChange: setPhotoFile }), _jsx(TextInput, { label: "Display Name", placeholder: "Your name", value: profile.displayName || '', onChange: (e) => setProfile({ ...profile, displayName: e.target.value }) }), _jsx(TextInput, { label: "Email", value: profile.email || '', disabled: true, description: "Email cannot be changed directly" }), _jsx(TextInput, { label: "Phone Number", placeholder: "Your phone number", value: profile.phoneNumber || '', onChange: (e) => setProfile({ ...profile, phoneNumber: e.target.value }) }), _jsx(TextInput, { label: "Address", placeholder: "Your address", value: profile.address || '', onChange: (e) => setProfile({ ...profile, address: e.target.value }) }), _jsx(TextInput, { label: "Date of Birth", type: "date", value: profile.dateOfBirth || '', onChange: (e) => setProfile({ ...profile, dateOfBirth: e.target.value }) }), _jsx(Button, { onClick: handleSave, loading: saving, fullWidth: true, children: "Save Profile" })] })] }));
};
//# sourceMappingURL=UserProfile.js.map