303 lines
12 KiB
TypeScript
303 lines
12 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { User, UserSettings } from '../../types';
|
|
import { CameraIcon, TrashIcon, UserIcon } from '../icons/Icons';
|
|
|
|
interface AccountModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
user: User;
|
|
settings: UserSettings;
|
|
onUpdateUser: (user: User) => Promise<void>;
|
|
onUpdateSettings: (settings: UserSettings) => Promise<void>;
|
|
onDeleteAllData: () => Promise<void>;
|
|
}
|
|
|
|
const AccountModal: React.FC<AccountModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
user,
|
|
settings,
|
|
onUpdateUser,
|
|
onUpdateSettings,
|
|
onDeleteAllData,
|
|
}) => {
|
|
const [username, setUsername] = useState(user.username);
|
|
const [successMessage, setSuccessMessage] = useState('');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
const closeButtonRef = useRef<HTMLButtonElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setUsername(user.username);
|
|
setSuccessMessage('');
|
|
setTimeout(() => closeButtonRef.current?.focus(), 100);
|
|
}
|
|
}, [isOpen, user.username]);
|
|
|
|
const handleUsernameSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (username.trim() && username !== user.username) {
|
|
setIsSaving(true);
|
|
try {
|
|
await onUpdateUser({ ...user, username: username.trim() });
|
|
setSuccessMessage('Username updated successfully!');
|
|
setTimeout(() => setSuccessMessage(''), 3000);
|
|
} catch {
|
|
alert('Failed to update username.');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleToggleNotifications = (
|
|
e: React.ChangeEvent<HTMLInputElement>
|
|
) => {
|
|
onUpdateSettings({ ...settings, notificationsEnabled: e.target.checked });
|
|
};
|
|
|
|
const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = async () => {
|
|
setIsSaving(true);
|
|
try {
|
|
await onUpdateUser({ ...user, avatar: reader.result as string });
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const handleRemoveAvatar = async () => {
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { avatar, ...userWithoutAvatar } = user;
|
|
setIsSaving(true);
|
|
try {
|
|
await onUpdateUser(userWithoutAvatar);
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
setIsDeleting(true);
|
|
try {
|
|
await onDeleteAllData();
|
|
} catch {
|
|
alert('Failed to delete data.');
|
|
} finally {
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className='fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 z-50 flex justify-center items-center p-4'
|
|
role='dialog'
|
|
aria-modal='true'
|
|
aria-labelledby='account-title'
|
|
>
|
|
<div
|
|
className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-lg'
|
|
ref={modalRef}
|
|
>
|
|
<div className='p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center'>
|
|
<h3
|
|
id='account-title'
|
|
className='text-xl font-semibold text-slate-800 dark:text-slate-100'
|
|
>
|
|
Account Settings
|
|
</h3>
|
|
<button
|
|
onClick={onClose}
|
|
ref={closeButtonRef}
|
|
className='text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-3xl leading-none'
|
|
aria-label='Close'
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
<div className='p-6 space-y-6 max-h-[60vh] overflow-y-auto'>
|
|
<section>
|
|
<h4 className='text-lg font-medium text-slate-700 dark:text-slate-200 mb-3'>
|
|
Profile
|
|
</h4>
|
|
<div className='flex items-center space-x-4'>
|
|
<div className='relative'>
|
|
{user.avatar ? (
|
|
<img
|
|
src={user.avatar}
|
|
alt='User avatar'
|
|
className='w-20 h-20 rounded-full object-cover'
|
|
/>
|
|
) : (
|
|
<span className='w-20 h-20 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center'>
|
|
<UserIcon className='w-10 h-10 text-slate-500' />
|
|
</span>
|
|
)}
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className='absolute bottom-0 right-0 bg-white dark:bg-slate-600 rounded-full p-1.5 shadow-md border border-slate-200 dark:border-slate-500 hover:bg-slate-100 dark:hover:bg-slate-500'
|
|
aria-label='Change profile picture'
|
|
>
|
|
<CameraIcon className='w-4 h-4 text-slate-700 dark:text-slate-200' />
|
|
</button>
|
|
<input
|
|
type='file'
|
|
ref={fileInputRef}
|
|
onChange={handleAvatarChange}
|
|
accept='image/*'
|
|
className='hidden'
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col'>
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className='px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-md shadow-sm hover:bg-slate-50 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-600'
|
|
>
|
|
Change Picture
|
|
</button>
|
|
{user.avatar && (
|
|
<button
|
|
onClick={handleRemoveAvatar}
|
|
className='mt-2 flex items-center text-sm text-red-600 dark:text-red-500 hover:underline'
|
|
>
|
|
<TrashIcon className='w-3 h-3 mr-1' /> Remove
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<form onSubmit={handleUsernameSubmit} className='space-y-3 mt-4'>
|
|
<div>
|
|
<label
|
|
htmlFor='username'
|
|
className='block text-sm font-medium text-slate-600 dark:text-slate-300'
|
|
>
|
|
Username
|
|
</label>
|
|
<div className='mt-1 flex rounded-md shadow-sm'>
|
|
<input
|
|
type='text'
|
|
id='username'
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
className='flex-1 block w-full min-w-0 rounded-none rounded-l-md px-3 py-2 border border-slate-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
|
|
/>
|
|
<button
|
|
type='submit'
|
|
className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 dark:focus:ring-offset-slate-800'
|
|
disabled={
|
|
username === user.username || !username.trim() || isSaving
|
|
}
|
|
>
|
|
{isSaving ? 'Saving...' : 'Save'}
|
|
</button>
|
|
</div>
|
|
{successMessage && (
|
|
<p className='text-sm text-green-600 dark:text-green-500 mt-2'>
|
|
{successMessage}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 className='text-lg font-medium text-slate-700 dark:text-slate-200 mb-3'>
|
|
Preferences
|
|
</h4>
|
|
<div className='flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg'>
|
|
<span className='font-medium text-slate-800 dark:text-slate-100'>
|
|
Enable Notifications
|
|
</span>
|
|
<label
|
|
htmlFor='notifications-toggle'
|
|
className='relative inline-flex items-center cursor-pointer'
|
|
>
|
|
<input
|
|
type='checkbox'
|
|
id='notifications-toggle'
|
|
className='sr-only peer'
|
|
checked={settings.notificationsEnabled}
|
|
onChange={handleToggleNotifications}
|
|
/>
|
|
<div className="w-11 h-6 bg-slate-200 dark:bg-slate-600 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-600 peer-checked:bg-indigo-600"></div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 className='text-lg font-medium text-red-600 dark:text-red-500 mb-3'>
|
|
Danger Zone
|
|
</h4>
|
|
<div className='p-4 border border-red-300 dark:border-red-500/50 rounded-lg'>
|
|
<div className='flex items-center justify-between'>
|
|
<div>
|
|
<p className='font-semibold text-slate-800 dark:text-slate-100'>
|
|
Delete All Data
|
|
</p>
|
|
<p className='text-sm text-slate-500 dark:text-slate-400'>
|
|
Permanently delete all your medications and history.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
className='px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-slate-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center'
|
|
>
|
|
{isDeleting && <Spinner />}
|
|
{isDeleting ? 'Deleting...' : 'Delete Data'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-end rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
|
|
<button
|
|
type='button'
|
|
onClick={onClose}
|
|
className='px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-md shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-600 dark:focus:ring-offset-slate-800'
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Spinner = () => (
|
|
<svg
|
|
className='animate-spin -ml-1 mr-3 h-5 w-5 text-white'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
fill='none'
|
|
viewBox='0 0 24 24'
|
|
>
|
|
<circle
|
|
className='opacity-25'
|
|
cx='12'
|
|
cy='12'
|
|
r='10'
|
|
stroke='currentColor'
|
|
strokeWidth='4'
|
|
></circle>
|
|
<path
|
|
className='opacity-75'
|
|
fill='currentColor'
|
|
d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
|
|
></path>
|
|
</svg>
|
|
);
|
|
|
|
export default AccountModal;
|