238 lines
18 KiB
JavaScript
238 lines
18 KiB
JavaScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
||
import { Check, Copy, KeyRound, Link2, ShieldCheck, Trash2, Users } from 'lucide-react'
|
||
import { drive, message } from '@/api/client'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import QuotaField from '@/components/drive/QuotaField'
|
||
import {fromQuota, toQuota} from '@/lib/quota-utils'
|
||
import {fmtSize} from '@/lib/drive-format'
|
||
|
||
const options = [
|
||
{ key: 'can_view_parent', label: 'Voir les fichiers du parent' },
|
||
{ key: 'can_write_parent', label: 'Modifier les fichiers du parent' },
|
||
{ key: 'can_invite', label: 'Créer des sous-utilisateurs' },
|
||
]
|
||
function Permissions({ value, onChange, disabled = false, maxRights = {}, fixedRead = false }) {
|
||
return <div className="space-y-2">{options.map(opt => <label key={opt.key} className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1 text-sm">
|
||
<Checkbox disabled={disabled || maxRights[opt.key] === false || (fixedRead && opt.key === 'can_view_parent')} checked={Boolean(value[opt.key])} onCheckedChange={checked => onChange({ ...value, [opt.key]:Boolean(checked), ...(opt.key==='can_view_parent' && !checked ? {can_write_parent:false} : opt.key==='can_write_parent' && checked ? {can_view_parent:true} : {}) })}/>{opt.label}
|
||
</label>)}</div>
|
||
}
|
||
|
||
export default function MembersPage({ controller, user, embedded = false }) {
|
||
const { spaces, activeSpaceId, loadSpaces, managedSpaceId, setManagedSpaceId, setSpaceDialog } = controller
|
||
const [parentId, setParentId] = useState(managedSpaceId || user.space_id)
|
||
const [record, setRecord] = useState(null)
|
||
const reloadSequence = useRef(0)
|
||
const [rights, setRights] = useState({can_view_parent:true,can_write_parent:false,can_invite:false})
|
||
const [url, setUrl] = useState('')
|
||
const [title, setTitle] = useState('')
|
||
const [busy, setBusy] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [info, setInfo] = useState('')
|
||
const [expires, setExpires] = useState('7')
|
||
const [rootQuota, setRootQuota] = useState('')
|
||
const [userQuery, setUserQuery] = useState('')
|
||
const [userResults, setUserResults] = useState([])
|
||
const [searching, setSearching] = useState(false)
|
||
const [selectedAccount, setSelectedAccount] = useState(null)
|
||
const [directRights, setDirectRights] = useState({can_write:false,can_invite:false})
|
||
const mine = spaces.find(s => s.id === user.space_id)
|
||
const managed = spaces.filter(s => !s.is_private && s.can_invite && (!embedded || s.id === managedSpaceId))
|
||
|
||
const selectedManagedSpace = managed.find(space => space.id === parentId)
|
||
// Never render stale information from a previously selected parent space.
|
||
const selectedRecord = record?.parent?.id === parentId ? record : null
|
||
const managedKey = managed.map(space => space.id).join(',')
|
||
useEffect(() => { if (managedSpaceId) setParentId(managedSpaceId) }, [managedSpaceId])
|
||
useEffect(() => {
|
||
if (managed.length && !managed.some(space => space.id === parentId)) setParentId(managed[0].id)
|
||
}, [managedKey, parentId])
|
||
const reload = useCallback(async () => {
|
||
const sequence = ++reloadSequence.current
|
||
if (!managedKey.split(',').includes(String(parentId))) {setRecord(null);return}
|
||
try {
|
||
const nextRecord = await drive.members(parentId)
|
||
if (sequence !== reloadSequence.current) return
|
||
// Responses for a previously selected space must never overwrite this one.
|
||
if (nextRecord?.parent?.id !== parentId) throw new Error('Réponse incohérente pour cet espace.')
|
||
setRecord(nextRecord)
|
||
setError('')
|
||
} catch (e) {
|
||
if (sequence === reloadSequence.current) setError(e?.response ? message(e) : e.message || message(e))
|
||
}
|
||
}, [parentId,managedKey])
|
||
useEffect(() => { reload() }, [reload])
|
||
useEffect(() => { setTitle(mine?.display_name || '') }, [mine?.display_name])
|
||
useEffect(() => { setRootQuota(fromQuota(mine?.quota_bytes)) }, [mine?.quota_bytes])
|
||
|
||
const create = async () => {
|
||
setBusy(true);setError('');setUrl('')
|
||
try {
|
||
const inv = await drive.invite({ ...rights, expires_days:Number(expires), parent_space:parentId })
|
||
setUrl(`${window.location.origin}/invite/${inv.token}`)
|
||
setInfo('Invitation créée ! Le lien n’est affiché qu’une seule fois : copie-le maintenant.')
|
||
await reload()
|
||
} catch(e) { setError(e?.response ? message(e) : (e.message || message(e))) } finally { setBusy(false) }
|
||
}
|
||
const change = async (id, data) => {
|
||
setBusy(true);setError('')
|
||
try {await drive.memberPatch(id,data);await reload();await loadSpaces();controller.reloadStats();setInfo('Paramètres de l’espace mis à jour.')}
|
||
catch(e){setError(e?.response ? message(e) : (e.message || message(e)))}finally{setBusy(false)}
|
||
}
|
||
const revoke = async id => {
|
||
setBusy(true)
|
||
try {await drive.revokeInvite(id);await reload();setInfo('Invitation révoquée.')}
|
||
catch(e){setError(message(e))}finally{setBusy(false)}
|
||
}
|
||
const saveRootQuota = async () => {
|
||
setBusy(true);setError('')
|
||
try {
|
||
await drive.spaceQuota(user.space_id, toQuota(rootQuota))
|
||
await loadSpaces(); await reload(); controller.reloadStats()
|
||
setInfo('Limite de stockage enregistrée.')
|
||
} catch(e) {setError(e?.response ? message(e) : (e.message || message(e)))}
|
||
finally {setBusy(false)}
|
||
}
|
||
useEffect(() => {
|
||
if (selectedAccount?.username === userQuery || userQuery.trim().length < 2) { setUserResults([]); return }
|
||
let alive = true
|
||
const timer = setTimeout(async () => {
|
||
setSearching(true)
|
||
try { const users = await drive.searchUsers(userQuery.trim(), parentId); if(alive) setUserResults(users) }
|
||
catch(e) { if(alive) setError(message(e)) }
|
||
finally { if(alive) setSearching(false) }
|
||
}, 300)
|
||
return () => { alive = false; clearTimeout(timer) }
|
||
}, [userQuery, parentId, selectedAccount?.username])
|
||
const addExisting = async () => {
|
||
if (!selectedAccount) return
|
||
setBusy(true); setError('')
|
||
try {
|
||
await drive.addUser(selectedAccount.id,parentId,directRights.can_write,directRights.can_invite)
|
||
setInfo(`Accès accordé à ${selectedAccount.first_name} ${selectedAccount.last_name}`.trim())
|
||
setSelectedAccount(null);setUserQuery('');setUserResults([])
|
||
await reload();await loadSpaces()
|
||
} catch(e) { setError(message(e)) }
|
||
finally { setBusy(false) }
|
||
}
|
||
const updateGrant = async (grantId, data) => {
|
||
setBusy(true);setError('')
|
||
try { await drive.grantPatch(grantId,data);await reload();setInfo('Droits mis à jour.') }
|
||
catch(e){setError(message(e))}finally{setBusy(false)}
|
||
}
|
||
const revokeGrant = async grantId => {
|
||
setBusy(true);setError('')
|
||
try {await drive.grantRemove(grantId);await reload();setInfo('Accès révoqué.')}
|
||
catch(e){setError(message(e))}finally{setBusy(false)}
|
||
}
|
||
const manageSubspace = child => {
|
||
// Close the access dialog before opening the *child's* settings.
|
||
setManagedSpaceId(null)
|
||
setSpaceDialog({ mode: 'manage', spaceId: child.id })
|
||
}
|
||
const rename = async () => {
|
||
setBusy(true)
|
||
try {await drive.renameSpace(title);await loadSpaces();setInfo('Nom de ton espace enregistré.')}
|
||
catch(e){setError(message(e))}finally{setBusy(false)}
|
||
}
|
||
|
||
return <section className={embedded ? "min-h-0 flex-1 overflow-y-auto p-4 sm:p-6" : "min-h-0 flex-1 overflow-y-auto p-4 sm:p-7"}>
|
||
<div className="mx-auto max-w-5xl space-y-6">
|
||
{!embedded && <div><h1 className="text-2xl font-semibold">Espaces & invitations</h1></div>}
|
||
{error && <div className="rounded-xl border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive">{error}</div>}
|
||
{info && <div className="rounded-xl border bg-muted p-3 text-sm">{info}</div>}
|
||
{embedded && selectedManagedSpace && <div className="rounded-2xl border bg-card p-4 text-sm">
|
||
<p className="font-semibold">Gestion de « {selectedManagedSpace.display_name} »</p>
|
||
</div>}
|
||
{!embedded && mine?.user_id === user.id && <div className="rounded-2xl border bg-card p-5"><h2 className="mb-3 font-semibold">Nom de mon espace</h2>
|
||
<div className="flex flex-wrap gap-2"><Input className="max-w-sm" value={title} onChange={e=>setTitle(e.target.value)} maxLength={120}/><Button disabled={busy||!title.trim()} onClick={rename}>Enregistrer</Button></div>
|
||
</div>}
|
||
{!embedded && user.is_admin && <div className="rounded-2xl border bg-card p-5 space-y-4">
|
||
<h2 className="font-semibold">Quota de mon espace racine</h2>
|
||
<QuotaField id="root-quota" value={rootQuota} onChange={setRootQuota} disabled={busy}/>
|
||
<Button variant="outline" disabled={busy} onClick={saveRootQuota}>Enregistrer la limite</Button>
|
||
</div>}
|
||
{managed.length > 0 ? <>
|
||
{managed.length > 1 && <div className="rounded-2xl border bg-card p-5">
|
||
<label className="block text-sm font-semibold">Espace à gérer
|
||
<select className="mt-2 w-full rounded-lg border bg-background p-2" value={parentId} onChange={e=>{setParentId(Number(e.target.value));setSelectedAccount(null);setUserQuery('')}}>
|
||
{managed.map(space=><option key={space.id} value={space.id}>{space.display_name}</option>)}
|
||
</select>
|
||
</label>
|
||
</div>}
|
||
<div className="rounded-2xl border bg-card p-5 space-y-4">
|
||
<div className="flex items-center gap-2 font-semibold"><Users className="size-5 text-primary"/> Ajouter un utilisateur existant</div>
|
||
<p className="text-sm text-muted-foreground">Cherche son identifiant, vérifie son nom et prénom, puis autorise l'accès à cet espace. Ses fichiers personnels restent privés.</p>
|
||
<Input value={userQuery} onChange={e=>{setUserQuery(e.target.value);setSelectedAccount(null)}} placeholder="Rechercher par nom d’utilisateur…" aria-label="Rechercher un utilisateur" />
|
||
{searching && <p className="text-xs text-muted-foreground">Recherche en cours…</p>}
|
||
{!!userResults.length && <div className="max-h-52 space-y-1 overflow-auto rounded-lg border p-1" role="listbox" aria-label="Utilisateurs trouvés">
|
||
{userResults.map(account=><button type="button" key={account.id} onClick={()=>{setSelectedAccount(account);setUserQuery(account.username);setUserResults([])}} className="w-full rounded-md px-3 py-2 text-left text-sm hover:bg-muted">
|
||
<span className="font-medium">{[account.first_name,account.last_name].filter(Boolean).join(' ') || account.username}</span>
|
||
<span className="ml-2 text-muted-foreground">@{account.username}</span>
|
||
</button>)}
|
||
</div>}
|
||
{selectedAccount && <div className="space-y-3 rounded-xl border p-3">
|
||
<p className="text-sm">Utilisateur sélectionné : <strong>{[selectedAccount.first_name,selectedAccount.last_name].filter(Boolean).join(' ')}</strong> (@{selectedAccount.username})</p>
|
||
<label className="flex items-center gap-2 text-sm"><Checkbox disabled={!selectedManagedSpace?.can_write} checked={directRights.can_write} onCheckedChange={v=>setDirectRights(prev=>({...prev,can_write:!!v}))}/> Autoriser les modifications dans cet espace</label>
|
||
<label className="flex items-center gap-2 text-sm"><Checkbox disabled={!selectedManagedSpace?.can_invite} checked={directRights.can_invite} onCheckedChange={v=>setDirectRights(prev=>({...prev,can_invite:!!v}))}/> Autoriser la gestion des utilisateurs de cet espace</label>
|
||
<Button disabled={busy} onClick={addExisting}>Ajouter cet utilisateur</Button>
|
||
</div>}
|
||
{!!selectedRecord?.grants?.length && <div className="space-y-2 border-t pt-3"><h3 className="text-sm font-semibold">Utilisateurs ajoutés directement</h3>
|
||
{record.grants.map(g=><DirectMember key={g.id} grant={g} maxRights={selectedManagedSpace} busy={busy} save={data=>updateGrant(g.id,data)} remove={()=>revokeGrant(g.id)}/>)}
|
||
</div>}
|
||
</div>
|
||
<div className="rounded-2xl border bg-card p-5 space-y-4">
|
||
<div className="flex items-center gap-2 font-semibold"><KeyRound className="size-5 text-primary"/> Créer une invitation</div>
|
||
<Permissions value={rights} onChange={setRights} fixedRead maxRights={{can_view_parent:true,can_write_parent:!!selectedManagedSpace?.can_write,can_invite:!!selectedManagedSpace?.can_invite}}/>
|
||
<label className="block text-sm">Expiration du lien
|
||
<select value={expires} onChange={e=>setExpires(e.target.value)} className="ml-3 rounded-lg border bg-background px-2 py-1"><option value="1">1 jour</option><option value="7">7 jours</option><option value="14">14 jours</option><option value="30">30 jours</option></select>
|
||
</label>
|
||
<Button onClick={create} disabled={busy}><Link2/> Générer une invitation</Button>
|
||
{url && <div className="rounded-xl border bg-muted/50 p-3"><div className="flex gap-2"><Input readOnly value={url}/><Button variant="outline" onClick={async()=>{try{await navigator.clipboard.writeText(url);setInfo('Lien copié.')}catch{setInfo('Sélectionne et copie le lien affiché.')}}}><Copy/></Button></div></div>}
|
||
</div>
|
||
<div className="rounded-2xl border bg-card p-5 space-y-4"><h2 className="flex items-center gap-2 font-semibold"><Users className="size-5 text-primary"/> Sous-utilisateurs et sous-espaces</h2>
|
||
{!selectedRecord?.children?.length && <p className="text-sm text-muted-foreground">Aucun sous-utilisateur dans cet espace.</p>}
|
||
{selectedRecord?.children?.map(child=><MemberRow key={child.id} child={child} maxRights={selectedManagedSpace} busy={busy} save={data=>change(child.id,data)} onManage={() => manageSubspace(child)} onInvalid={setError}/>)}
|
||
</div>
|
||
<div className="rounded-2xl border bg-card p-5"><h2 className="mb-3 flex items-center gap-2 font-semibold"><ShieldCheck className="size-5 text-primary"/> Invitations</h2>
|
||
<div className="space-y-2">{selectedRecord?.invitations?.map(inv=><div key={inv.id} className="flex items-center justify-between gap-2 rounded-lg border p-3 text-sm"><span>Créée le {new Date(inv.created_at).toLocaleDateString('fr-FR')} · {inv.used?'Utilisée':inv.revoked?'Révoquée':new Date(inv.expires_at)<new Date()?'Expirée':'En attente'}</span>{!inv.used&&!inv.revoked&&<Button size="icon-sm" variant="ghost" title="Révoquer" disabled={busy} onClick={()=>revoke(inv.id)}><Trash2 className="size-4"/></Button>}</div>)}</div>
|
||
</div>
|
||
</> : <p className="rounded-2xl border bg-card p-5 text-sm text-muted-foreground">La création de sous-utilisateurs n’est pas autorisée pour ton compte.</p>}
|
||
</div>
|
||
</section>
|
||
}
|
||
|
||
function MemberRow({child,save,busy,onManage,onInvalid,maxRights}) {
|
||
const [rights,setRights]=useState({can_view_parent:child.can_view_parent,can_write_parent:child.can_write_parent,can_invite:child.can_invite})
|
||
const [quota,setQuota]=useState(fromQuota(child.quota_bytes))
|
||
useEffect(()=>{setRights({can_view_parent:child.can_view_parent,can_write_parent:child.can_write_parent,can_invite:child.can_invite});setQuota(fromQuota(child.quota_bytes))},[child])
|
||
if (!child.has_account) return <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border p-4">
|
||
<div className="min-w-0">
|
||
<div className="text-sm font-semibold">{child.display_name}</div>
|
||
<p className="mt-1 text-xs text-muted-foreground">Sous-espace partagé indépendant</p>
|
||
</div>
|
||
{child.can_invite && <Button type="button" size="sm" variant="outline" disabled={busy} onClick={onManage}>Gérer ce sous-espace</Button>}
|
||
</div>
|
||
return <div className="rounded-xl border p-4"><div className="mb-2 flex flex-wrap items-center justify-between gap-2"><div><div className="font-medium">{child.display_name}</div><div className="text-xs text-muted-foreground">{[child.first_name,child.last_name].filter(Boolean).join(' ') || child.username} · @{child.username} · {child.is_active?'Actif':'Suspendu'}</div></div><div className="flex gap-2"><Button size="sm" variant="outline" disabled={busy} onClick={()=>{try{save({...rights,...(quota === fromQuota(child.quota_bytes) ? {} : {quota_bytes:toQuota(quota)})})}catch(e){onInvalid(e.message)}}}><Check className="size-4"/> Appliquer</Button><Button size="sm" variant="outline" disabled={busy} onClick={()=>save({is_active:!child.is_active})}>{child.is_active?'Suspendre':'Réactiver'}</Button></div></div><Permissions value={rights} onChange={setRights} maxRights={{can_write_parent:!!maxRights?.can_write,can_invite:!!maxRights?.can_invite}}/>
|
||
<div className="mt-3 border-t pt-3 space-y-3"><QuotaField id={`quota-${child.id}`} value={quota} onChange={setQuota} disabled={busy}/>
|
||
<p className="text-xs text-muted-foreground">Utilisé : {fmtSize(child.used_bytes || 0)}{child.reserved_bytes > 0 ? ` · Transferts réservés : ${fmtSize(child.reserved_bytes)}` : ''} · Disponible : {child.available_bytes == null ? 'Sans limite' : fmtSize(child.available_bytes)}</p>
|
||
</div></div>
|
||
}
|
||
|
||
|
||
function DirectMember({grant,save,remove,busy,maxRights}) {
|
||
const [canWrite,setCanWrite] = useState(grant.can_write)
|
||
const [canInvite,setCanInvite] = useState(grant.can_invite)
|
||
useEffect(()=>{setCanWrite(grant.can_write);setCanInvite(grant.can_invite)},[grant])
|
||
return <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border p-3">
|
||
<div className="min-w-36"><div className="text-sm font-semibold">{[grant.first_name,grant.last_name].filter(Boolean).join(' ') || grant.username}</div><div className="text-xs text-muted-foreground">@{grant.username}</div></div>
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<label className="flex items-center gap-2 text-xs"><Checkbox disabled={!maxRights?.can_write} checked={canWrite} onCheckedChange={v=>setCanWrite(!!v)}/> Écriture</label>
|
||
<label className="flex items-center gap-2 text-xs"><Checkbox disabled={!maxRights?.can_invite} checked={canInvite} onCheckedChange={v=>setCanInvite(!!v)}/> Invitations</label>
|
||
<Button size="sm" variant="outline" disabled={busy} onClick={()=>save({can_write:canWrite,can_invite:canInvite})}>Enregistrer</Button>
|
||
<Button size="sm" variant="ghost" disabled={busy} onClick={remove} title="Retirer l’accès"><Trash2 className="size-4" /></Button>
|
||
</div>
|
||
</div>
|
||
}
|