feat: Implement staff invitation system with role-based permissions
- Add StaffInvitation model with token-based 7-day expiration
- Create invitation API endpoints (create, cancel, resend, accept, decline)
- Add permissions JSONField to User model for granular access control
- Implement frontend invite modal with role-specific permissions:
- Manager: can_invite_staff, can_manage_resources, can_manage_services,
can_view_reports, can_access_settings, can_refund_payments
- Staff: can_view_all_schedules, can_manage_own_appointments
- Add edit staff modal with permissions management and deactivate option
- Create AcceptInvitePage for invitation acceptance flow
- Add active/inactive staff separation with collapsible section
- Auto-create bookable resource when configured at invite time
- Remove Quick Add Appointment from dashboard
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
352
frontend/src/pages/AcceptInvitePage.tsx
Normal file
352
frontend/src/pages/AcceptInvitePage.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
useInvitationDetails,
|
||||
useAcceptInvitation,
|
||||
useDeclineInvitation,
|
||||
} from '../hooks/useInvitations';
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
import {
|
||||
Loader2,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Building2,
|
||||
Mail,
|
||||
User,
|
||||
Lock,
|
||||
AlertCircle,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from 'lucide-react';
|
||||
|
||||
const AcceptInvitePage: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const token = searchParams.get('token');
|
||||
|
||||
const { data: invitation, isLoading, error } = useInvitationDetails(token);
|
||||
const acceptInvitationMutation = useAcceptInvitation();
|
||||
const declineInvitationMutation = useDeclineInvitation();
|
||||
const { setTokens } = useAuth();
|
||||
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [formError, setFormError] = useState('');
|
||||
const [accepted, setAccepted] = useState(false);
|
||||
const [declined, setDeclined] = useState(false);
|
||||
|
||||
const handleAccept = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setFormError('');
|
||||
|
||||
// Validate
|
||||
if (!firstName.trim()) {
|
||||
setFormError(t('acceptInvite.firstNameRequired', 'First name is required'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password || password.length < 8) {
|
||||
setFormError(t('acceptInvite.passwordMinLength', 'Password must be at least 8 characters'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setFormError(t('acceptInvite.passwordsMustMatch', 'Passwords do not match'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await acceptInvitationMutation.mutateAsync({
|
||||
token: token!,
|
||||
firstName: firstName.trim(),
|
||||
lastName: lastName.trim(),
|
||||
password,
|
||||
});
|
||||
|
||||
// Set auth tokens and redirect to dashboard
|
||||
setTokens(result.access, result.refresh);
|
||||
setAccepted(true);
|
||||
|
||||
// Redirect after a short delay
|
||||
setTimeout(() => {
|
||||
navigate('/');
|
||||
}, 2000);
|
||||
} catch (err: any) {
|
||||
setFormError(err.response?.data?.error || t('acceptInvite.acceptFailed', 'Failed to accept invitation'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDecline = async () => {
|
||||
if (!confirm(t('acceptInvite.confirmDecline', 'Are you sure you want to decline this invitation?'))) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await declineInvitationMutation.mutateAsync(token!);
|
||||
setDeclined(true);
|
||||
} catch (err: any) {
|
||||
setFormError(err.response?.data?.error || t('acceptInvite.declineFailed', 'Failed to decline invitation'));
|
||||
}
|
||||
};
|
||||
|
||||
// No token provided
|
||||
if (!token) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
|
||||
<XCircle size={48} className="mx-auto text-red-500 mb-4" />
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{t('acceptInvite.invalidLink', 'Invalid Invitation Link')}
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{t('acceptInvite.noToken', 'This invitation link is invalid. Please check your email for the correct link.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<Loader2 size={48} className="mx-auto text-brand-600 animate-spin mb-4" />
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{t('acceptInvite.loading', 'Loading invitation...')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state (invalid/expired token)
|
||||
if (error || !invitation) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
|
||||
<AlertCircle size={48} className="mx-auto text-amber-500 mb-4" />
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{t('acceptInvite.expiredTitle', 'Invitation Expired or Invalid')}
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{t(
|
||||
'acceptInvite.expiredDescription',
|
||||
'This invitation has expired or is no longer valid. Please contact the person who sent the invitation to request a new one.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Accepted state
|
||||
if (accepted) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
|
||||
<CheckCircle size={48} className="mx-auto text-green-500 mb-4" />
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{t('acceptInvite.welcomeTitle', 'Welcome to the Team!')}
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{t('acceptInvite.redirecting', 'Your account has been created. Redirecting to dashboard...')}
|
||||
</p>
|
||||
<Loader2 size={24} className="mx-auto text-brand-600 animate-spin mt-4" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Declined state
|
||||
if (declined) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-center">
|
||||
<XCircle size={48} className="mx-auto text-gray-400 mb-4" />
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
{t('acceptInvite.declinedTitle', 'Invitation Declined')}
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{t('acceptInvite.declinedDescription', "You've declined this invitation. You can close this page.")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Main acceptance form
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-brand-600 p-6 text-center">
|
||||
<h1 className="text-2xl font-bold text-white mb-2">
|
||||
{t('acceptInvite.title', "You're Invited!")}
|
||||
</h1>
|
||||
<p className="text-brand-100">
|
||||
{t('acceptInvite.subtitle', 'Join the team and start scheduling')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Invitation Details */}
|
||||
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center text-brand-600 dark:text-brand-400">
|
||||
<Building2 size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
||||
{t('acceptInvite.business', 'Business')}
|
||||
</p>
|
||||
<p className="font-semibold text-gray-900 dark:text-white">{invitation.business_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400">
|
||||
<Mail size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
||||
{t('acceptInvite.invitedAs', 'Invited As')}
|
||||
</p>
|
||||
<p className="font-semibold text-gray-900 dark:text-white">
|
||||
{invitation.role_display} •{' '}
|
||||
<span className="font-normal text-gray-600 dark:text-gray-400">{invitation.email}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{invitation.invited_by && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 text-center pt-2">
|
||||
{t('acceptInvite.invitedBy', 'Invited by')} <span className="font-medium">{invitation.invited_by}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleAccept} className="p-6 space-y-4">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
{t('acceptInvite.formDescription', 'Create your account to accept this invitation.')}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('acceptInvite.firstName', 'First Name')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
required
|
||||
className="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder="John"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('acceptInvite.lastName', 'Last Name')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('acceptInvite.password', 'Password')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full pl-10 pr-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder="Min. 8 characters"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{t('acceptInvite.confirmPassword', 'Confirm Password')} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
className="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-brand-500"
|
||||
placeholder="Repeat password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{formError && (
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<p className="text-sm text-red-600 dark:text-red-400">{formError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex flex-col gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={acceptInvitationMutation.isPending}
|
||||
className="w-full px-4 py-3 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{acceptInvitationMutation.isPending ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<CheckCircle size={18} />
|
||||
)}
|
||||
{t('acceptInvite.acceptButton', 'Accept Invitation & Create Account')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDecline}
|
||||
disabled={declineInvitationMutation.isPending}
|
||||
className="w-full px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors"
|
||||
>
|
||||
{t('acceptInvite.declineButton', 'Decline Invitation')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AcceptInvitePage;
|
||||
Reference in New Issue
Block a user