feat: admin panel and invite acceptance UI
This commit is contained in:
362
src/pages/AdminPage.tsx
Normal file
362
src/pages/AdminPage.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Users, Mail, Plus, Trash2, Copy, Check } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import type { User, Invite } from '@/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function AdminPage() {
|
||||
const { user: currentUser } = useAuthStore();
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [invites, setInvites] = useState<Invite[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<'users' | 'invites'>('users');
|
||||
|
||||
// Invite form
|
||||
const [showInviteForm, setShowInviteForm] = useState(false);
|
||||
const [inviteEmail, setInviteEmail] = useState('');
|
||||
const [inviteName, setInviteName] = useState('');
|
||||
const [inviteRole, setInviteRole] = useState<'admin' | 'user'>('user');
|
||||
const [inviteError, setInviteError] = useState('');
|
||||
const [inviteUrl, setInviteUrl] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [usersData, invitesData] = await Promise.all([
|
||||
api.getUsers(),
|
||||
api.getInvites(),
|
||||
]);
|
||||
setUsers(usersData);
|
||||
setInvites(invitesData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load admin data:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateInvite = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setInviteError('');
|
||||
|
||||
try {
|
||||
const result = await api.createInvite({ email: inviteEmail, name: inviteName, role: inviteRole });
|
||||
setInviteUrl(result.setupUrl);
|
||||
setInvites([result, ...invites]);
|
||||
} catch (error) {
|
||||
setInviteError(error instanceof Error ? error.message : 'Failed to create invite');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyUrl = () => {
|
||||
navigator.clipboard.writeText(inviteUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleChangeRole = async (userId: string, role: 'admin' | 'user') => {
|
||||
try {
|
||||
await api.updateUserRole(userId, role);
|
||||
setUsers(users.map(u => u.id === userId ? { ...u, role } : u));
|
||||
} catch (error) {
|
||||
console.error('Failed to update role:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (userId: string) => {
|
||||
if (!confirm('Are you sure you want to delete this user? All their data will be lost.')) return;
|
||||
try {
|
||||
await api.deleteUser(userId);
|
||||
setUsers(users.filter(u => u.id !== userId));
|
||||
} catch (error) {
|
||||
console.error('Failed to delete user:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteInvite = async (inviteId: string) => {
|
||||
try {
|
||||
await api.deleteInvite(inviteId);
|
||||
setInvites(invites.filter(i => i.id !== inviteId));
|
||||
} catch (error) {
|
||||
console.error('Failed to delete invite:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const resetInviteForm = () => {
|
||||
setShowInviteForm(false);
|
||||
setInviteEmail('');
|
||||
setInviteName('');
|
||||
setInviteRole('user');
|
||||
setInviteError('');
|
||||
setInviteUrl('');
|
||||
};
|
||||
|
||||
if (currentUser?.role !== 'admin') {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-red-500 font-medium">Access denied. Admin only.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-6">Admin</h1>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-4 border-b border-slate-200 mb-6">
|
||||
<button
|
||||
onClick={() => setActiveTab('users')}
|
||||
className={cn(
|
||||
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
|
||||
activeTab === 'users'
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
)}
|
||||
>
|
||||
<Users className="w-4 h-4 inline mr-2" />
|
||||
Users ({users.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('invites')}
|
||||
className={cn(
|
||||
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
|
||||
activeTab === 'invites'
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
)}
|
||||
>
|
||||
<Mail className="w-4 h-4 inline mr-2" />
|
||||
Invites ({invites.filter(i => i.status === 'pending').length} pending)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12 text-slate-500">Loading...</div>
|
||||
) : activeTab === 'users' ? (
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-x-auto">
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-left text-sm text-slate-500">
|
||||
<th className="px-4 py-3 font-medium">Name</th>
|
||||
<th className="px-4 py-3 font-medium">Email</th>
|
||||
<th className="px-4 py-3 font-medium">Role</th>
|
||||
<th className="px-4 py-3 font-medium">Joined</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="border-b border-slate-100 last:border-0">
|
||||
<td className="px-4 py-3 text-sm font-medium text-slate-900">{user.name}</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-600">{user.email}</td>
|
||||
<td className="px-4 py-3">
|
||||
{user.id === currentUser?.id ? (
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
|
||||
{user.role}
|
||||
</span>
|
||||
) : (
|
||||
<select
|
||||
value={user.role || 'user'}
|
||||
onChange={(e) => handleChangeRole(user.id, e.target.value as 'admin' | 'user')}
|
||||
className={cn(
|
||||
'px-2 py-1 text-xs rounded-full border-none cursor-pointer appearance-none',
|
||||
user.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
|
||||
)}
|
||||
>
|
||||
<option value="user">user</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-500">
|
||||
{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{user.id !== currentUser?.id && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
className="p-1 text-slate-400 hover:text-red-500 transition-colors"
|
||||
title="Delete user"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{/* Create invite button/form */}
|
||||
{!showInviteForm ? (
|
||||
<button
|
||||
onClick={() => setShowInviteForm(true)}
|
||||
className="mb-4 inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Invite User
|
||||
</button>
|
||||
) : (
|
||||
<div className="mb-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
|
||||
<h3 className="font-medium text-slate-900 mb-4">Invite New User</h3>
|
||||
|
||||
{inviteUrl ? (
|
||||
<div>
|
||||
<p className="text-sm text-green-600 mb-2">✓ Invite created! Share this link:</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={inviteUrl}
|
||||
readOnly
|
||||
className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCopyUrl}
|
||||
className="px-3 py-2 border border-slate-300 rounded-lg hover:bg-slate-100 transition-colors"
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4 text-slate-600" />}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={resetInviteForm}
|
||||
className="mt-3 text-sm text-slate-500 hover:text-slate-700"
|
||||
>
|
||||
Create another invite
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleCreateInvite} className="space-y-4">
|
||||
{inviteError && (
|
||||
<p className="text-sm text-red-500">{inviteError}</p>
|
||||
)}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={inviteName}
|
||||
onChange={(e) => setInviteName(e.target.value)}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="john@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1">Role</label>
|
||||
<select
|
||||
value={inviteRole}
|
||||
onChange={(e) => setInviteRole(e.target.value as 'admin' | 'user')}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Send Invite
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetInviteForm}
|
||||
className="px-4 py-2 border border-slate-300 text-sm font-medium rounded-lg hover:bg-slate-100 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invites list */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 overflow-x-auto">
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200 text-left text-sm text-slate-500">
|
||||
<th className="px-4 py-3 font-medium">Name</th>
|
||||
<th className="px-4 py-3 font-medium">Email</th>
|
||||
<th className="px-4 py-3 font-medium">Role</th>
|
||||
<th className="px-4 py-3 font-medium">Status</th>
|
||||
<th className="px-4 py-3 font-medium">Expires</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invites.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-slate-500">
|
||||
No invites yet
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
invites.map((invite) => (
|
||||
<tr key={invite.id} className="border-b border-slate-100 last:border-0">
|
||||
<td className="px-4 py-3 text-sm font-medium text-slate-900">{invite.name}</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-600">{invite.email}</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn(
|
||||
'px-2 py-1 text-xs rounded-full',
|
||||
invite.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-700'
|
||||
)}>
|
||||
{invite.role}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={cn(
|
||||
'px-2 py-1 text-xs rounded-full',
|
||||
invite.status === 'accepted' ? 'bg-green-100 text-green-700' :
|
||||
invite.status === 'expired' ? 'bg-red-100 text-red-700' :
|
||||
'bg-yellow-100 text-yellow-700'
|
||||
)}>
|
||||
{invite.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-500">
|
||||
{new Date(invite.expiresAt).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
{invite.status === 'pending' && (
|
||||
<button
|
||||
onClick={() => handleDeleteInvite(invite.id)}
|
||||
className="p-1 text-slate-400 hover:text-red-500 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
180
src/pages/InvitePage.tsx
Normal file
180
src/pages/InvitePage.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Network, Eye, EyeOff } from 'lucide-react';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import LoadingSpinner from '@/components/LoadingSpinner';
|
||||
|
||||
export default function InvitePage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { checkSession } = useAuthStore();
|
||||
|
||||
const [invite, setInvite] = useState<{ email: string; name: string; role: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submitError, setSubmitError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
(async () => {
|
||||
try {
|
||||
const data = await api.validateInvite(token);
|
||||
setInvite(data);
|
||||
setName(data.name);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Invalid or expired invite');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [token]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitError('');
|
||||
|
||||
if (password.length < 8) {
|
||||
setSubmitError('Password must be at least 8 characters');
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
setSubmitError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const result = await api.acceptInvite(token!, password, name);
|
||||
// If we got a token, store it
|
||||
if (result.token) {
|
||||
api.setToken(result.token);
|
||||
}
|
||||
// Now log in with the credentials
|
||||
try {
|
||||
await api.login(invite!.email, password);
|
||||
} catch {
|
||||
// Login might fail if token auth already worked
|
||||
}
|
||||
await checkSession();
|
||||
navigate('/');
|
||||
} catch (err: any) {
|
||||
setSubmitError(err.message || 'Failed to create account');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-slate-50">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-slate-50 p-4">
|
||||
<div className="w-full max-w-md text-center">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 bg-red-100 rounded-2xl mb-4">
|
||||
<Network className="w-8 h-8 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 mb-2">Invalid Invite</h1>
|
||||
<p className="text-slate-500">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-2xl mb-4">
|
||||
<Network className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Welcome to NetworkCRM</h1>
|
||||
<p className="text-slate-500 mt-1">You've been invited to join as <span className="font-medium text-slate-700">{invite?.role}</span></p>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
||||
<div className="mb-6 p-3 bg-blue-50 rounded-lg">
|
||||
<p className="text-sm text-blue-700">
|
||||
Setting up account for <strong>{invite?.email}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{submitError && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
|
||||
{submitError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">Password</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
placeholder="Min 8 characters"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">Confirm Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
placeholder="Re-enter password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="w-full py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{submitting ? <LoadingSpinner size="sm" className="text-white" /> : null}
|
||||
{submitting ? 'Creating account...' : 'Create Account'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user