975 lines
43 KiB
TypeScript
975 lines
43 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
import * as yup from 'yup';
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
Save,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Lock,
|
|
Camera,
|
|
Shield,
|
|
ShieldCheck,
|
|
ShieldOff,
|
|
Copy,
|
|
Eye,
|
|
EyeOff,
|
|
RefreshCw,
|
|
KeyRound
|
|
} from 'lucide-react';
|
|
import { toast } from 'react-toastify';
|
|
import authService from '../../services/api/authService';
|
|
import useAuthStore from '../../store/useAuthStore';
|
|
import { Loading, EmptyState } from '../../components/common';
|
|
import { useAsync } from '../../hooks/useAsync';
|
|
import { useGlobalLoading } from '../../contexts/GlobalLoadingContext';
|
|
import { normalizeImageUrl } from '../../utils/imageUtils';
|
|
|
|
const profileValidationSchema = yup.object().shape({
|
|
name: yup
|
|
.string()
|
|
.required('Full name is required')
|
|
.min(2, 'Full name must be at least 2 characters')
|
|
.max(100, 'Full name cannot exceed 100 characters'),
|
|
email: yup
|
|
.string()
|
|
.required('Email is required')
|
|
.email('Invalid email address'),
|
|
phone: yup
|
|
.string()
|
|
.required('Phone number is required')
|
|
.matches(
|
|
/^[\d\s\-\+\(\)]{5,}$/,
|
|
'Please enter a valid phone number'
|
|
),
|
|
});
|
|
|
|
const passwordValidationSchema = yup.object().shape({
|
|
currentPassword: yup
|
|
.string()
|
|
.required('Current password is required'),
|
|
newPassword: yup
|
|
.string()
|
|
.required('New password is required')
|
|
.min(6, 'Password must be at least 6 characters'),
|
|
confirmPassword: yup
|
|
.string()
|
|
.required('Please confirm your password')
|
|
.oneOf([yup.ref('newPassword')], 'Passwords must match'),
|
|
});
|
|
|
|
type ProfileFormData = yup.InferType<typeof profileValidationSchema>;
|
|
type PasswordFormData = yup.InferType<typeof passwordValidationSchema>;
|
|
|
|
const ProfilePage: React.FC = () => {
|
|
const { userInfo, setUser } = useAuthStore();
|
|
const { setLoading } = useGlobalLoading();
|
|
const [activeTab, setActiveTab] = useState<'profile' | 'password' | 'mfa'>('profile');
|
|
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
|
const [showPassword, setShowPassword] = useState<{
|
|
current: boolean;
|
|
new: boolean;
|
|
confirm: boolean;
|
|
}>({
|
|
current: false,
|
|
new: false,
|
|
confirm: false,
|
|
});
|
|
|
|
|
|
const [mfaStatus, setMfaStatus] = useState<{mfa_enabled: boolean; backup_codes_count: number} | null>(null);
|
|
const [mfaSecret, setMfaSecret] = useState<string | null>(null);
|
|
const [mfaQrCode, setMfaQrCode] = useState<string | null>(null);
|
|
const [mfaVerificationToken, setMfaVerificationToken] = useState<string>('');
|
|
const [showBackupCodes, setShowBackupCodes] = useState<string[] | null>(null);
|
|
const [showMfaSecret, setShowMfaSecret] = useState<boolean>(false);
|
|
|
|
|
|
const fetchProfile = async () => {
|
|
const response = await authService.getProfile();
|
|
if (response.status === 'success' || response.success) {
|
|
const user = response.data?.user || response.data;
|
|
if (user) {
|
|
setUser(user as any);
|
|
return user;
|
|
}
|
|
}
|
|
throw new Error('Failed to load profile');
|
|
};
|
|
|
|
const {
|
|
data: profileData,
|
|
loading: loadingProfile,
|
|
error: profileError,
|
|
execute: refetchProfile
|
|
} = useAsync(fetchProfile, {
|
|
immediate: true,
|
|
onError: (error: any) => {
|
|
toast.error(error.message || 'Unable to load profile');
|
|
}
|
|
});
|
|
|
|
|
|
const {
|
|
register: registerProfile,
|
|
handleSubmit: handleSubmitProfile,
|
|
formState: { errors: profileErrors },
|
|
reset: resetProfile,
|
|
} = useForm<ProfileFormData>({
|
|
resolver: yupResolver(profileValidationSchema),
|
|
defaultValues: {
|
|
name: ((userInfo && 'user' in userInfo ? userInfo.user : userInfo) as any)?.name || '',
|
|
email: ((userInfo && 'user' in userInfo ? userInfo.user : userInfo) as any)?.email || '',
|
|
phone: ((userInfo && 'user' in userInfo ? userInfo.user : userInfo) as any)?.phone || '',
|
|
},
|
|
});
|
|
|
|
|
|
const {
|
|
register: registerPassword,
|
|
handleSubmit: handleSubmitPassword,
|
|
formState: { errors: passwordErrors },
|
|
reset: resetPassword,
|
|
} = useForm<PasswordFormData>({
|
|
resolver: yupResolver(passwordValidationSchema),
|
|
});
|
|
|
|
|
|
const fetchMFAStatus = async () => {
|
|
try {
|
|
const response = await authService.getMFAStatus();
|
|
|
|
if (response) {
|
|
setMfaStatus({
|
|
mfa_enabled: response.mfa_enabled || false,
|
|
backup_codes_count: response.backup_codes_count || 0,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch MFA status:', error);
|
|
}
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (profileData || userInfo) {
|
|
const data = profileData || (userInfo && 'user' in userInfo ? userInfo.user : userInfo);
|
|
resetProfile({
|
|
name: (data as any)?.name || '',
|
|
email: (data as any)?.email || '',
|
|
phone: (data as any)?.phone || '',
|
|
});
|
|
if ((data as any)?.avatar) {
|
|
|
|
setAvatarPreview(normalizeImageUrl((data as any).avatar));
|
|
} else {
|
|
setAvatarPreview(null);
|
|
}
|
|
}
|
|
}, [profileData, userInfo, resetProfile]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'mfa') {
|
|
fetchMFAStatus();
|
|
}
|
|
|
|
}, [activeTab]);
|
|
|
|
|
|
const onSubmitProfile = async (data: ProfileFormData) => {
|
|
try {
|
|
setLoading(true, 'Updating profile...');
|
|
|
|
if ('updateProfile' in authService) {
|
|
const response = await (authService as any).updateProfile({
|
|
full_name: data.name,
|
|
email: data.email,
|
|
phone_number: data.phone,
|
|
});
|
|
|
|
if (response.status === 'success' || response.success) {
|
|
const updatedUser = response.data?.user || response.data;
|
|
if (updatedUser) {
|
|
setUser(updatedUser);
|
|
toast.success('Profile updated successfully!');
|
|
refetchProfile();
|
|
}
|
|
}
|
|
} else {
|
|
const { updateUser } = await import('../../services/api/userService');
|
|
const user = userInfo && 'user' in userInfo ? userInfo.user : userInfo;
|
|
const response = await updateUser((user as any)?.id || (userInfo as any)?.id, {
|
|
full_name: data.name,
|
|
email: data.email,
|
|
phone_number: data.phone,
|
|
});
|
|
|
|
if ((response as any).success || (response as any).status === 'success') {
|
|
const updatedUser = response.data?.user || response.data;
|
|
if (updatedUser) {
|
|
setUser({
|
|
id: updatedUser.id,
|
|
name: (updatedUser as any).full_name || (updatedUser as any).name,
|
|
email: updatedUser.email,
|
|
phone: (updatedUser as any).phone_number || (updatedUser as any).phone,
|
|
avatar: (updatedUser as any).avatar,
|
|
role: updatedUser.role,
|
|
});
|
|
toast.success('Profile updated successfully!');
|
|
refetchProfile();
|
|
}
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
const errorMessage =
|
|
error.response?.data?.message ||
|
|
error.message ||
|
|
'Failed to update profile';
|
|
toast.error(errorMessage);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
const onSubmitPassword = async (data: PasswordFormData) => {
|
|
try {
|
|
setLoading(true, 'Changing password...');
|
|
|
|
if ('updateProfile' in authService) {
|
|
const response = await (authService as any).updateProfile({
|
|
currentPassword: data.currentPassword,
|
|
password: data.newPassword,
|
|
});
|
|
|
|
if (response.status === 'success' || response.success) {
|
|
toast.success('Password changed successfully!');
|
|
resetPassword();
|
|
}
|
|
} else {
|
|
const { updateUser } = await import('../../services/api/userService');
|
|
const user = userInfo && 'user' in userInfo ? userInfo.user : userInfo;
|
|
const response = await updateUser((user as any)?.id || (userInfo as any)?.id, {
|
|
password: data.newPassword,
|
|
});
|
|
|
|
if ((response as any).success || (response as any).status === 'success') {
|
|
toast.success('Password changed successfully!');
|
|
resetPassword();
|
|
}
|
|
}
|
|
} catch (error: any) {
|
|
const errorMessage =
|
|
error.response?.data?.message ||
|
|
error.message ||
|
|
'Failed to change password';
|
|
toast.error(errorMessage);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
|
|
const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
|
|
if (!file.type.startsWith('image/')) {
|
|
toast.error('Please select an image file');
|
|
return;
|
|
}
|
|
|
|
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
toast.error('Image size must be less than 2MB');
|
|
return;
|
|
}
|
|
|
|
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setAvatarPreview(reader.result as string);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
|
|
try {
|
|
setLoading(true, 'Uploading avatar...');
|
|
const response = await authService.uploadAvatar(file);
|
|
|
|
if (response.status === 'success' && response.data?.user) {
|
|
const updatedUser = response.data.user;
|
|
|
|
const avatarUrl = (response.data as any).full_url || normalizeImageUrl((updatedUser as any).avatar);
|
|
setUser({
|
|
id: updatedUser.id,
|
|
name: (updatedUser as any).name || (updatedUser as any).full_name,
|
|
email: updatedUser.email,
|
|
phone: (updatedUser as any).phone || (updatedUser as any).phone_number,
|
|
avatar: avatarUrl,
|
|
role: updatedUser.role,
|
|
});
|
|
setAvatarPreview(avatarUrl || null);
|
|
toast.success('Avatar uploaded successfully!');
|
|
refetchProfile();
|
|
}
|
|
} catch (error: any) {
|
|
const errorMessage =
|
|
error.response?.data?.detail ||
|
|
error.message ||
|
|
'Failed to upload avatar';
|
|
toast.error(errorMessage);
|
|
|
|
setAvatarPreview(userInfo?.avatar ? normalizeImageUrl(userInfo.avatar) : null);
|
|
} finally {
|
|
setLoading(false);
|
|
|
|
e.target.value = '';
|
|
}
|
|
};
|
|
|
|
if (loadingProfile) {
|
|
return <Loading fullScreen text="Loading profile..." />;
|
|
}
|
|
|
|
if (profileError && !userInfo) {
|
|
return (
|
|
<div className="container mx-auto px-3 sm:px-4 py-4 sm:py-8">
|
|
<EmptyState
|
|
title="Unable to Load Profile"
|
|
description={profileError.message || 'Something went wrong. Please try again.'}
|
|
action={{
|
|
label: 'Retry',
|
|
onClick: refetchProfile
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-8">
|
|
<div className="container mx-auto max-w-5xl">
|
|
{}
|
|
<div className="mb-6 sm:mb-8 animate-fade-in">
|
|
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-2">
|
|
Profile Settings
|
|
</h1>
|
|
<p className="text-sm sm:text-base text-gray-600 font-light tracking-wide">
|
|
Manage your account information and security preferences
|
|
</p>
|
|
</div>
|
|
|
|
{}
|
|
<div className="mb-4 sm:mb-6 border-b border-gray-200 overflow-x-auto">
|
|
<div className="flex space-x-4 sm:space-x-8 min-w-max">
|
|
<button
|
|
onClick={() => setActiveTab('profile')}
|
|
className={`py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap ${
|
|
activeTab === 'profile'
|
|
? 'border-[#d4af37] text-[#d4af37]'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<User className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2" />
|
|
Profile Information
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('password')}
|
|
className={`py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap ${
|
|
activeTab === 'password'
|
|
? 'border-[#d4af37] text-[#d4af37]'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<KeyRound className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2" />
|
|
Change Password
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('mfa')}
|
|
className={`py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors whitespace-nowrap ${
|
|
activeTab === 'mfa'
|
|
? 'border-[#d4af37] text-[#d4af37]'
|
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<Shield className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2" />
|
|
Two-Factor Authentication
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{activeTab === 'profile' && (
|
|
<div className="luxury-glass rounded-sm p-4 sm:p-6 lg:p-8 border border-[#d4af37]/20 shadow-2xl animate-slide-up">
|
|
<form onSubmit={handleSubmitProfile(onSubmitProfile)} className="space-y-5 sm:space-y-6">
|
|
{}
|
|
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 pb-5 sm:pb-6 border-b border-gray-200">
|
|
<div className="relative">
|
|
{avatarPreview || userInfo?.avatar ? (
|
|
<img
|
|
src={avatarPreview || normalizeImageUrl(userInfo?.avatar)}
|
|
alt="Profile"
|
|
className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover ring-4 ring-[#d4af37]/20 shadow-lg"
|
|
/>
|
|
) : (
|
|
<div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center ring-4 ring-[#d4af37]/20 shadow-lg">
|
|
<User className="w-10 h-10 sm:w-12 sm:h-12 text-white" />
|
|
</div>
|
|
)}
|
|
<label
|
|
htmlFor="avatar-upload"
|
|
className="absolute bottom-0 right-0 p-2 bg-gradient-to-br from-[#d4af37] to-[#c9a227] rounded-full cursor-pointer hover:from-[#f5d76e] hover:to-[#d4af37] transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-[#d4af37]/40 hover:-translate-y-0.5 active:translate-y-0"
|
|
>
|
|
<Camera className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
|
|
<input
|
|
id="avatar-upload"
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleAvatarChange}
|
|
className="hidden"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<User className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
Full Name
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<input
|
|
{...registerProfile('name')}
|
|
type="text"
|
|
className={`luxury-input text-sm sm:text-base ${
|
|
profileErrors.name ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Enter your full name"
|
|
/>
|
|
{profileErrors.name && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{profileErrors.name.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<Mail className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
Email Address
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<input
|
|
{...registerProfile('email')}
|
|
type="email"
|
|
className={`luxury-input text-sm sm:text-base ${
|
|
profileErrors.email ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Enter your email"
|
|
/>
|
|
{profileErrors.email && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{profileErrors.email.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<Phone className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
Phone Number
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<input
|
|
{...registerProfile('phone')}
|
|
type="tel"
|
|
className={`luxury-input text-sm sm:text-base ${
|
|
profileErrors.phone ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Enter your phone number"
|
|
/>
|
|
{profileErrors.phone && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{profileErrors.phone.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div className="flex justify-end pt-4 sm:pt-5 border-t border-gray-200">
|
|
<button
|
|
type="submit"
|
|
className="btn-luxury-primary flex items-center space-x-2 px-4 sm:px-6 py-2.5 sm:py-3 rounded-sm font-semibold text-xs sm:text-sm relative"
|
|
>
|
|
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
|
|
<Save className="w-4 h-4 sm:w-5 sm:h-5 relative z-10" />
|
|
<span className="relative z-10">Save Changes</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{activeTab === 'password' && (
|
|
<div className="luxury-glass rounded-sm p-4 sm:p-6 lg:p-8 border border-[#d4af37]/20 shadow-2xl animate-slide-up">
|
|
<form onSubmit={handleSubmitPassword(onSubmitPassword)} className="space-y-5 sm:space-y-6">
|
|
{}
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/60 rounded-sm p-4 sm:p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-1.5 sm:p-2 bg-blue-100 rounded-full flex-shrink-0">
|
|
<KeyRound className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm sm:text-base font-semibold text-blue-900 mb-1.5">
|
|
Password Requirements
|
|
</h4>
|
|
<ul className="text-xs sm:text-sm text-blue-700 space-y-1 font-light">
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-blue-500 mt-0.5">•</span>
|
|
<span>At least 6 characters long</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="text-blue-500 mt-0.5">•</span>
|
|
<span>Use a combination of letters and numbers for better security</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<Lock className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
Current Password
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...registerPassword('currentPassword')}
|
|
type={showPassword.current ? 'text' : 'password'}
|
|
className={`luxury-input text-sm sm:text-base pr-10 sm:pr-12 ${
|
|
passwordErrors.currentPassword ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Enter your current password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword({ ...showPassword, current: !showPassword.current })}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-[#d4af37] transition-colors"
|
|
>
|
|
{showPassword.current ? (
|
|
<EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
) : (
|
|
<Eye className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{passwordErrors.currentPassword && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{passwordErrors.currentPassword.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<Lock className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
New Password
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...registerPassword('newPassword')}
|
|
type={showPassword.new ? 'text' : 'password'}
|
|
className={`luxury-input text-sm sm:text-base pr-10 sm:pr-12 ${
|
|
passwordErrors.newPassword ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Enter your new password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword({ ...showPassword, new: !showPassword.new })}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-[#d4af37] transition-colors"
|
|
>
|
|
{showPassword.new ? (
|
|
<EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
) : (
|
|
<Eye className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{passwordErrors.newPassword && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{passwordErrors.newPassword.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
<Lock className="w-4 h-4 sm:w-5 sm:h-5 inline mr-2 text-[#d4af37]" />
|
|
Confirm New Password
|
|
<span className="text-red-500 ml-1">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
{...registerPassword('confirmPassword')}
|
|
type={showPassword.confirm ? 'text' : 'password'}
|
|
className={`luxury-input text-sm sm:text-base pr-10 sm:pr-12 ${
|
|
passwordErrors.confirmPassword ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : ''
|
|
}`}
|
|
placeholder="Confirm your new password"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword({ ...showPassword, confirm: !showPassword.confirm })}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-[#d4af37] transition-colors"
|
|
>
|
|
{showPassword.confirm ? (
|
|
<EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
) : (
|
|
<Eye className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{passwordErrors.confirmPassword && (
|
|
<p className="mt-1.5 text-xs sm:text-sm text-red-600 font-light flex items-center gap-1.5">
|
|
<AlertCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" />
|
|
{passwordErrors.confirmPassword.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{}
|
|
<div className="flex justify-end pt-4 sm:pt-5 border-t border-gray-200">
|
|
<button
|
|
type="submit"
|
|
className="btn-luxury-primary flex items-center space-x-2 px-4 sm:px-6 py-2.5 sm:py-3 rounded-sm font-semibold text-xs sm:text-sm relative"
|
|
>
|
|
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
|
|
<Lock className="w-4 h-4 sm:w-5 sm:h-5 relative z-10" />
|
|
<span className="relative z-10">Change Password</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
{activeTab === 'mfa' && (
|
|
<div className="luxury-glass rounded-sm p-4 sm:p-6 lg:p-8 border border-[#d4af37]/20 shadow-2xl animate-slide-up space-y-5 sm:space-y-6">
|
|
{}
|
|
<div>
|
|
<h2 className="text-xl sm:text-2xl font-serif font-semibold text-gray-900 mb-2 flex items-center gap-2">
|
|
<Shield className="w-5 h-5 sm:w-6 sm:h-6 text-[#d4af37]" />
|
|
Two-Factor Authentication
|
|
</h2>
|
|
<p className="text-xs sm:text-sm text-gray-600 font-light leading-relaxed">
|
|
Add an extra layer of security to your account by requiring a verification code in addition to your password.
|
|
</p>
|
|
</div>
|
|
|
|
{mfaStatus?.mfa_enabled ? (
|
|
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{}
|
|
<div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200/60 rounded-sm p-4 sm:p-5 shadow-lg">
|
|
<div className="flex items-start sm:items-center gap-3 sm:gap-4">
|
|
<div className="p-2 sm:p-2.5 bg-green-100 rounded-full flex-shrink-0">
|
|
<ShieldCheck className="w-5 h-5 sm:w-6 sm:h-6 text-green-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-base sm:text-lg font-semibold text-green-900 mb-1">MFA is Enabled</h3>
|
|
<p className="text-xs sm:text-sm text-green-700 font-light mb-1.5">
|
|
Your account is protected with two-factor authentication.
|
|
</p>
|
|
<p className="text-xs text-green-600 font-medium">
|
|
Remaining backup codes: <span className="font-semibold">{mfaStatus.backup_codes_count}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
{showBackupCodes && (
|
|
<div className="bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200/60 rounded-sm p-4 sm:p-5 shadow-lg">
|
|
<div className="mb-4">
|
|
<h3 className="font-semibold text-yellow-900 mb-2 flex items-center gap-2 text-sm sm:text-base">
|
|
<AlertCircle className="w-5 h-5 text-yellow-600" />
|
|
Save Your Backup Codes
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-yellow-700 font-light leading-relaxed">
|
|
Store these codes in a safe place. Each code can only be used once.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 mb-4">
|
|
{showBackupCodes.map((code, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-white border border-yellow-300/60 rounded-sm px-3 sm:px-4 py-2 sm:py-2.5 font-mono text-xs sm:text-sm flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
|
|
>
|
|
<span className="text-gray-900 font-medium">{code}</span>
|
|
<button
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(code);
|
|
toast.success('Code copied!');
|
|
}}
|
|
className="text-yellow-600 hover:text-yellow-800 transition-colors p-1 hover:bg-yellow-50 rounded"
|
|
>
|
|
<Copy className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={() => setShowBackupCodes(null)}
|
|
className="text-xs sm:text-sm text-yellow-700 hover:text-yellow-900 underline font-medium transition-colors"
|
|
>
|
|
I've saved these codes
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{}
|
|
<div className="bg-white border border-gray-200 rounded-sm p-4 sm:p-5">
|
|
<h3 className="text-sm sm:text-base font-semibold text-gray-900 mb-2 flex items-center gap-2">
|
|
<RefreshCw className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37]" />
|
|
Backup Codes
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-gray-600 font-light mb-4 leading-relaxed">
|
|
If you lose access to your authenticator app, you can use backup codes to access your account.
|
|
</p>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
setLoading(true, 'Regenerating backup codes...');
|
|
const response = await authService.regenerateBackupCodes();
|
|
if (response.status === 'success' && response.data?.backup_codes) {
|
|
setShowBackupCodes(response.data.backup_codes);
|
|
await fetchMFAStatus();
|
|
toast.success('Backup codes regenerated. Please save them!');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to regenerate backup codes');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gradient-to-r from-yellow-50 to-amber-50 border border-yellow-200/60 rounded-sm text-sm sm:text-base font-medium text-yellow-900 hover:from-yellow-100 hover:to-amber-100 transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
|
|
>
|
|
<RefreshCw className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
Regenerate Backup Codes
|
|
</button>
|
|
</div>
|
|
|
|
{}
|
|
<div className="border-t border-gray-200 pt-5 sm:pt-6">
|
|
<h3 className="text-sm sm:text-base font-semibold text-red-900 mb-2 flex items-center gap-2">
|
|
<ShieldOff className="w-4 h-4 sm:w-5 sm:h-5 text-red-600" />
|
|
Disable MFA
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-gray-600 font-light mb-4 leading-relaxed">
|
|
Disabling MFA will reduce the security of your account. We recommend keeping it enabled.
|
|
</p>
|
|
<button
|
|
onClick={async () => {
|
|
if (!window.confirm('Are you sure you want to disable MFA? This will reduce your account security.')) {
|
|
return;
|
|
}
|
|
try {
|
|
setLoading(true, 'Disabling MFA...');
|
|
const response = await authService.disableMFA();
|
|
if (response.status === 'success') {
|
|
await fetchMFAStatus();
|
|
toast.success('MFA disabled successfully');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to disable MFA');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gradient-to-r from-red-50 to-rose-50 border border-red-200/60 rounded-sm text-sm sm:text-base font-medium text-red-900 hover:from-red-100 hover:to-rose-100 transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
|
|
>
|
|
<ShieldOff className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
Disable MFA
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{!mfaSecret ? (
|
|
|
|
<div>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
setLoading(true, 'Initializing MFA...');
|
|
const response = await authService.initMFA();
|
|
if (response.status === 'success' && response.data) {
|
|
setMfaSecret(response.data.secret || '');
|
|
setMfaQrCode(response.data.qr_code || '');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Failed to initialize MFA');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className="btn-luxury-primary w-full sm:w-auto flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-3.5 rounded-sm font-semibold text-sm sm:text-base relative"
|
|
>
|
|
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
|
|
<Shield className="w-5 h-5 sm:w-6 sm:h-6 relative z-10" />
|
|
<span className="relative z-10">Enable Two-Factor Authentication</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{}
|
|
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200/60 rounded-sm p-4 sm:p-5 shadow-lg">
|
|
<h3 className="font-semibold text-blue-900 mb-2 text-sm sm:text-base flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
Step 1: Scan QR Code
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-blue-700 font-light mb-4 leading-relaxed">
|
|
Use your authenticator app (Google Authenticator, Authy, etc.) to scan this QR code.
|
|
</p>
|
|
{mfaQrCode && (
|
|
<div className="flex justify-center mb-4">
|
|
<img
|
|
src={mfaQrCode}
|
|
alt="MFA QR Code"
|
|
className="border-4 border-white rounded-lg shadow-xl max-w-[200px] sm:max-w-[250px]"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="bg-white border border-blue-200/60 rounded-sm p-3 sm:p-4 shadow-sm">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs sm:text-sm font-medium text-gray-700">Manual Entry Key:</span>
|
|
<button
|
|
onClick={() => setShowMfaSecret(!showMfaSecret)}
|
|
className="text-blue-600 hover:text-blue-800 transition-colors p-1 hover:bg-blue-50 rounded"
|
|
>
|
|
{showMfaSecret ? (
|
|
<EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
) : (
|
|
<Eye className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<code className="flex-1 font-mono text-xs sm:text-sm bg-gray-50 p-2 sm:p-2.5 rounded border border-gray-200 text-gray-900 break-all">
|
|
{showMfaSecret ? mfaSecret : '••••••••••••••••'}
|
|
</code>
|
|
<button
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(mfaSecret || '');
|
|
toast.success('Secret key copied!');
|
|
}}
|
|
className="px-3 sm:px-4 py-2 bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700 rounded-sm hover:from-blue-200 hover:to-indigo-200 transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
|
|
>
|
|
<Copy className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{}
|
|
<div className="bg-white border border-gray-200 rounded-sm p-4 sm:p-5">
|
|
<h3 className="font-semibold text-gray-900 mb-2 text-sm sm:text-base flex items-center gap-2">
|
|
<KeyRound className="w-4 h-4 sm:w-5 sm:h-5 text-[#d4af37]" />
|
|
Step 2: Verify Setup
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-gray-600 font-light mb-4 leading-relaxed">
|
|
Enter the 6-digit code from your authenticator app to complete the setup.
|
|
</p>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm sm:text-base font-medium text-gray-700 mb-2">
|
|
Verification Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={mfaVerificationToken}
|
|
onChange={(e) => setMfaVerificationToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
|
placeholder="000000"
|
|
maxLength={6}
|
|
className="luxury-input text-center text-lg sm:text-xl tracking-widest font-mono"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<button
|
|
onClick={async () => {
|
|
if (!mfaVerificationToken || mfaVerificationToken.length !== 6) {
|
|
toast.error('Please enter a valid 6-digit code');
|
|
return;
|
|
}
|
|
try {
|
|
setLoading(true, 'Enabling MFA...');
|
|
const response = await authService.enableMFA(mfaSecret || '', mfaVerificationToken);
|
|
if (response.status === 'success' && response.data?.backup_codes) {
|
|
setShowBackupCodes(response.data.backup_codes);
|
|
await fetchMFAStatus();
|
|
setMfaSecret(null);
|
|
setMfaQrCode(null);
|
|
setMfaVerificationToken('');
|
|
toast.success('MFA enabled successfully!');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.detail || 'Invalid verification code');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
className="btn-luxury-primary flex-1 flex items-center justify-center gap-2 px-4 sm:px-6 py-2.5 sm:py-3 rounded-sm font-semibold text-sm sm:text-base relative"
|
|
>
|
|
<span className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/20 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></span>
|
|
<ShieldCheck className="w-4 h-4 sm:w-5 sm:h-5 relative z-10" />
|
|
<span className="relative z-10">Verify & Enable</span>
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setMfaSecret(null);
|
|
setMfaQrCode(null);
|
|
setMfaVerificationToken('');
|
|
setShowMfaSecret(false);
|
|
}}
|
|
className="px-4 sm:px-6 py-2.5 sm:py-3 border border-gray-300 text-gray-700 rounded-sm hover:bg-gray-50 transition-all duration-300 font-medium text-sm sm:text-base shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProfilePage;
|