feat(communication): add project subrooms and isolated guest access
This commit is contained in:
168
frontend/pages/communication/collaboration.vue
Normal file
168
frontend/pages/communication/collaboration.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<script setup>
|
||||
const { $api } = useNuxtApp()
|
||||
const route = useRoute()
|
||||
const state = ref({ rooms: [], invitations: [], managedRooms: [], projects: [], canManage: false, contact: '' })
|
||||
const contacts = ref([]), selected = ref(''), error = ref(''), busy = ref(false), creating = ref(false), showCreate = ref(false), showManagement = ref(false)
|
||||
const management = ref({ members: [], invitations: [] }), inviteResult = ref(null)
|
||||
const create = reactive({ name: '', topic: '', projectId: String(route.query.project || '') })
|
||||
const invite = reactive({ kind: 'user', userId: '', name: '', email: '', contact: '', role: 'participant', overviewAllowed: false, expiresAt: '', sendEmail: true })
|
||||
const details = reactive({ name: '', topic: '', status: 'active', overview: { title: '', status: '', date: '', description: '' } })
|
||||
const federation = ref(null), partnerUrl = ref('')
|
||||
const selectedManaged = computed(() => state.value.managedRooms.find(r => r.id === selected.value))
|
||||
const visibleRooms = computed(() => {
|
||||
const rooms = new Map(state.value.rooms.map(r => [r.id, r]))
|
||||
state.value.managedRooms.filter(r => !route.query.project || Number(r.projectId) === Number(route.query.project)).forEach(r => rooms.set(r.id, { ...rooms.get(r.id), ...r }))
|
||||
return [...rooms.values()]
|
||||
})
|
||||
const readable = computed(() => state.value.rooms.some(r => r.id === selected.value))
|
||||
const message = e => e?.data?.message || e?.data?.error || 'Die Aktion konnte nicht ausgeführt werden.'
|
||||
async function refresh() {
|
||||
try {
|
||||
state.value = await $api('/api/collaboration')
|
||||
if (!selected.value && visibleRooms.value.length) selected.value = visibleRooms.value[0].id
|
||||
} catch (e) { error.value = message(e) }
|
||||
}
|
||||
async function run(fn) {
|
||||
busy.value = true; error.value = ''
|
||||
try { await fn() } catch (e) { error.value = message(e) } finally { busy.value = false }
|
||||
}
|
||||
async function createRoom() {
|
||||
await run(async () => {
|
||||
const room = await $api('/api/collaboration/rooms', { method: 'POST', body: { ...create, projectId: create.projectId ? Number(create.projectId) : null } })
|
||||
await refresh(); selected.value = room.id; showCreate.value = false; create.name = ''; create.topic = ''
|
||||
})
|
||||
}
|
||||
async function loadManagement() {
|
||||
if (!selectedManaged.value) return
|
||||
const roomId = selected.value
|
||||
const [result, people] = await Promise.all([$api(`/api/collaboration/rooms/${roomId}/management`), $api('/api/collaboration/contacts')])
|
||||
if (roomId !== selected.value) return
|
||||
management.value = result; contacts.value = people.contacts
|
||||
Object.assign(details, { name: selectedManaged.value.name, topic: selectedManaged.value.topic, status: selectedManaged.value.status, overview: { title: '', status: '', date: '', description: '', ...selectedManaged.value.overview } })
|
||||
}
|
||||
async function invitePerson() {
|
||||
await run(async () => {
|
||||
inviteResult.value = await $api(`/api/collaboration/rooms/${selected.value}/invitations`, { method: 'POST', body: { ...invite, expiresAt: invite.expiresAt ? new Date(`${invite.expiresAt}T23:59:59`).toISOString() : null } })
|
||||
await loadManagement(); await refresh()
|
||||
})
|
||||
}
|
||||
async function respond(id, accept) {
|
||||
await run(async () => {
|
||||
const result = await $api(`/api/collaboration/invitations/${id}/${accept ? 'accept' : 'decline'}`, { method: 'POST' })
|
||||
await refresh(); if (accept && result.roomId) selected.value = result.roomId
|
||||
})
|
||||
}
|
||||
async function revoke(id, invitation = false) {
|
||||
await run(async () => {
|
||||
await $api(`/api/collaboration/rooms/${selected.value}/${invitation ? 'invitations' : 'members'}/${id}`, { method: 'DELETE' })
|
||||
await loadManagement(); await refresh()
|
||||
})
|
||||
}
|
||||
async function saveRoom() {
|
||||
await run(async () => {
|
||||
await $api(`/api/collaboration/rooms/${selected.value}`, { method: 'PATCH', body: details })
|
||||
await refresh(); await loadManagement()
|
||||
})
|
||||
}
|
||||
async function copy(value) { await run(() => navigator.clipboard.writeText(value)) }
|
||||
async function partners() { await run(async () => { federation.value = await $api('/api/collaboration/federation') }) }
|
||||
async function savePartner(origin, active = true) {
|
||||
await run(async () => {
|
||||
federation.value = await $api('/api/collaboration/federation', { method: 'POST', body: { origin, active } })
|
||||
partnerUrl.value = ''
|
||||
})
|
||||
}
|
||||
watch(selected, () => { showManagement.value = false; inviteResult.value = null; management.value = { members: [], invitations: [] } })
|
||||
let timer
|
||||
onMounted(async () => { await refresh(); timer = setInterval(() => { if (!document.hidden && !busy.value) void refresh() }, 15000) })
|
||||
onBeforeUnmount(() => clearInterval(timer))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full space-y-5 p-4 sm:p-6">
|
||||
<header class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div><h1 class="text-2xl font-semibold">Zusammenarbeit</h1><p class="mt-1 text-sm text-gray-500">Gemeinsame Chats und geschützte Projekt-Unterräume</p></div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UButton v-if="state.contact" variant="outline" @click="copy(state.contact)">Meine Kontaktadresse kopieren</UButton>
|
||||
<UButton v-if="state.canManage" variant="outline" @click="partners">Partnerinstanzen</UButton>
|
||||
<UButton v-if="state.canManage" @click="showCreate = !showCreate">Unterraum erstellen</UButton>
|
||||
</div>
|
||||
</header>
|
||||
<p v-if="error" role="alert" class="rounded-lg bg-red-50 p-3 text-red-700">{{ error }}</p>
|
||||
<section v-if="federation" class="rounded-xl border border-gray-200 p-4 dark:border-gray-700">
|
||||
<div class="flex justify-between"><h2 class="font-semibold">Freigegebene Partnerinstanzen</h2><button @click="federation = null">Schließen</button></div>
|
||||
<p class="my-2 text-sm text-gray-500">Beide Firmen geben die jeweils andere Instanz frei. Einzelne Personen erhalten anschließend eine eigene Einladung.</p>
|
||||
<form class="flex flex-wrap gap-2" @submit.prevent="savePartner(partnerUrl)"><label class="flex-1"><span class="sr-only">Adresse der Partnerinstanz</span><input v-model="partnerUrl" type="url" required placeholder="https://partner.example/backend" class="field" /></label><UButton type="submit" :loading="busy">Partner freigeben</UButton></form>
|
||||
<div v-for="partner in federation.partners" :key="partner.origin" class="mt-3 flex items-center justify-between gap-3 text-sm"><span>{{ partner.origin }} · {{ partner.active ? 'Freigegeben' : 'Gesperrt' }}</span><UButton variant="outline" size="xs" :disabled="busy" @click="savePartner(partner.origin, !partner.active)">{{ partner.active ? 'Sperren' : 'Freigeben' }}</UButton></div>
|
||||
</section>
|
||||
<form v-if="showCreate" class="grid gap-3 rounded-xl border border-gray-200 p-4 sm:grid-cols-2 dark:border-gray-700" @submit.prevent="createRoom">
|
||||
<label class="text-sm">Projekt<select v-model="create.projectId" class="field"><option value="">Freier Partnerchat</option><option v-for="project in state.projects" :key="project.id" :value="String(project.id)">{{ project.name }}</option></select></label>
|
||||
<label class="text-sm">Name des Unterraums<input v-model="create.name" required maxlength="160" class="field" placeholder="z. B. Abstimmung Gerüstbau" /></label>
|
||||
<label class="text-sm sm:col-span-2">Beschreibung<input v-model="create.topic" maxlength="1000" class="field" /></label>
|
||||
<p class="text-xs text-gray-500">Du nimmst als Ersteller am Chat teil. Weitere Personen werden ausdrücklich eingeladen.</p>
|
||||
<div class="flex justify-end gap-2"><UButton variant="ghost" @click="showCreate = false">Abbrechen</UButton><UButton type="submit" :loading="busy">Erstellen</UButton></div>
|
||||
</form>
|
||||
<section v-if="state.invitations.length" class="space-y-2">
|
||||
<h2 class="font-semibold">Einladungen</h2>
|
||||
<div v-for="invitation in state.invitations" :key="invitation.id" class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-green-200 bg-green-50 p-3 text-gray-900">
|
||||
<div><p class="font-medium">{{ invitation.name }}</p><p class="text-sm">{{ invitation.ownerName }} · {{ invitation.role === 'reader' ? 'Nur lesen' : 'Chatteilnahme' }}{{ invitation.overviewAllowed ? ' · Projektübersicht freigegeben' : '' }}</p></div>
|
||||
<div class="flex gap-2"><UButton variant="outline" :disabled="busy" @click="respond(invitation.id, false)">Ablehnen</UButton><UButton :disabled="busy" @click="respond(invitation.id, true)">Annehmen</UButton></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="grid items-start gap-5 lg:grid-cols-[16rem_minmax(0,1fr)]">
|
||||
<aside class="space-y-2">
|
||||
<h2 class="mb-3 font-semibold">Meine Unterräume</h2>
|
||||
<p v-if="!visibleRooms.length" class="text-sm text-gray-500">Hier erscheinen deine Einladungen und freigegebenen Unterräume.</p>
|
||||
<button v-for="item in visibleRooms" :key="item.id" class="w-full rounded-xl border p-3 text-left" :class="selected === item.id ? 'border-green-600 bg-green-50 text-gray-900' : 'border-gray-200 dark:border-gray-700'" @click="selected = item.id">
|
||||
<span class="flex items-center justify-between gap-2"><span class="font-medium">{{ item.name }}</span><span v-if="item.unread" class="rounded-full bg-green-700 px-2 text-xs text-white">{{ item.unread }}</span></span>
|
||||
<span class="mt-1 block text-xs text-gray-500">{{ item.ownerName || (item.projectId ? 'Projekt-Unterraum' : 'Partnerchat') }}{{ item.remote ? ' · Extern' : '' }}{{ item.status !== 'active' ? ` · ${item.status === 'blocked' ? 'Gesperrt' : 'Archiviert'}` : '' }}</span>
|
||||
</button>
|
||||
</aside>
|
||||
<div class="min-w-0 space-y-4">
|
||||
<UButton v-if="selectedManaged" variant="outline" :disabled="busy" @click="run(async () => { await loadManagement(); showManagement = !showManagement })">Teilnehmer und Freigaben verwalten</UButton>
|
||||
<section v-if="showManagement && selectedManaged" class="space-y-5 rounded-xl border border-gray-200 p-4 dark:border-gray-700">
|
||||
<form class="space-y-3" @submit.prevent="invitePerson">
|
||||
<h2 class="font-semibold">Person in diesen Unterraum einladen</h2>
|
||||
<label class="block text-sm">Teilnehmerart<select v-model="invite.kind" class="field"><option value="user">Eigene Mitarbeiter</option><option value="contact">FEDEO-Kontakt</option><option v-if="selectedManaged.projectId" value="guest">Gast ohne FEDEO-Konto</option></select></label>
|
||||
<label v-if="invite.kind === 'user'" class="block text-sm">Person<select v-model="invite.userId" class="field" required><option value="">Bitte auswählen</option><option v-for="person in contacts" :key="person.id" :value="person.id">{{ person.name }}</option></select></label>
|
||||
<template v-else-if="invite.kind === 'guest'"><label class="block text-sm">Name<input v-model="invite.name" required class="field" /></label><label class="block text-sm">E-Mail-Adresse<input v-model="invite.email" type="email" required class="field" /></label><label class="flex items-center gap-2 text-sm"><input v-model="invite.sendEmail" type="checkbox" /> Einladung per E-Mail senden</label></template>
|
||||
<label v-else class="block text-sm">Persönliche FEDEO-Kontaktadresse<input v-model="invite.contact" type="url" required class="field" placeholder="Kontaktadresse der Person einfügen" /></label>
|
||||
<div class="grid gap-3 sm:grid-cols-2"><label class="text-sm">Rechte<select v-model="invite.role" class="field"><option value="participant">Lesen und schreiben</option><option value="reader">Nur lesen</option></select></label><label class="text-sm">Zugang bis (optional)<input v-model="invite.expiresAt" type="date" class="field" /></label></div>
|
||||
<label class="flex items-center gap-2 text-sm"><input v-model="invite.overviewAllowed" type="checkbox" /> Freigegebene Projektübersicht anzeigen</label>
|
||||
<p class="text-xs text-gray-500">Die Einladung gilt nur für diesen Unterraum. Nachrichten sind ab dem Beitritt sichtbar. Gastzugänge gelten ohne gewähltes Ablaufdatum 30 Tage.</p>
|
||||
<UButton type="submit" :loading="busy">Einladen</UButton>
|
||||
</form>
|
||||
<div v-if="inviteResult" role="status" class="space-y-2 rounded-lg bg-green-50 p-3 text-sm text-gray-900"><p>Einladung erstellt. {{ inviteResult.mailSent ? 'E-Mail wurde versendet.' : '' }}</p><template v-if="inviteResult.url"><p v-if="invite.sendEmail && !inviteResult.mailSent" class="text-amber-800">Die E-Mail konnte nicht versendet werden. Du kannst den Einladungslink kopieren.</p><UButton variant="outline" size="sm" @click="copy(inviteResult.url)">Einladungslink kopieren</UButton></template></div>
|
||||
<div class="space-y-3"><h3 class="font-semibold">Teilnehmer</h3>
|
||||
<div v-for="member in management.members" :key="member.id" class="space-y-2 rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-700">
|
||||
<p class="font-medium">{{ member.name }}{{ member.kind === 'guest' ? ' · Gast' : '' }}{{ member.status === 'revoked' ? ' · Entzogen' : '' }}</p>
|
||||
<form v-if="member.status === 'active'" class="flex flex-wrap items-center gap-3" @submit.prevent="run(async () => { await $api(`/api/collaboration/rooms/${selected}/members/${member.id}`, { method: 'PATCH', body: { role: member.role, overviewAllowed: member.overviewAllowed } }); await loadManagement(); await refresh() })">
|
||||
<label>Rolle<select v-model="member.role" class="field"><option value="participant">Lesen und schreiben</option><option value="reader">Nur lesen</option></select></label>
|
||||
<label class="flex items-center gap-2"><input v-model="member.overviewAllowed" type="checkbox" /> Projektübersicht</label>
|
||||
<UButton type="submit" variant="outline" size="xs" :disabled="busy">Rechte speichern</UButton>
|
||||
<UButton color="error" variant="outline" size="xs" :disabled="busy" @click="revoke(member.id)">Zugang entziehen</UButton>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="management.invitations.some(i => i.status === 'pending')" class="space-y-2"><h3 class="font-semibold">Offene Einladungen</h3><div v-for="item in management.invitations.filter(i => i.status === 'pending')" :key="item.id" class="flex items-center justify-between gap-2 text-sm"><span>{{ item.name }} · bis {{ new Date(item.expiresAt).toLocaleDateString('de-DE') }}</span><UButton variant="outline" size="xs" :disabled="busy" @click="revoke(item.id, true)">Widerrufen</UButton></div></div>
|
||||
<form class="space-y-3 border-t border-gray-200 pt-4 dark:border-gray-700" @submit.prevent="saveRoom">
|
||||
<h3 class="font-semibold">Unterraum und freigegebene Informationen</h3>
|
||||
<label class="block text-sm">Raumname<input v-model="details.name" required maxlength="160" class="field" /></label>
|
||||
<label class="block text-sm">Beschreibung<input v-model="details.topic" maxlength="1000" class="field" /></label>
|
||||
<label class="block text-sm">Status<select v-model="details.status" class="field"><option value="active">Aktiv</option><option value="archived">Archiviert – nur lesen</option><option value="blocked">Gesperrt – kein Zugriff</option></select></label>
|
||||
<p class="text-xs text-gray-500">Die folgenden Angaben sehen ausschließlich Teilnehmer mit freigegebener Projektübersicht.</p>
|
||||
<div class="grid gap-3 sm:grid-cols-2"><label class="text-sm">Externer Projekttitel<input v-model="details.overview.title" maxlength="160" class="field" /></label><label class="text-sm">Projektstatus<input v-model="details.overview.status" maxlength="160" class="field" /></label><label class="text-sm">Termin<input v-model="details.overview.date" maxlength="160" class="field" /></label></div>
|
||||
<label class="block text-sm">Freigegebene Hinweise<textarea v-model="details.overview.description" maxlength="2000" rows="3" class="field" /></label>
|
||||
<UButton type="submit" :loading="busy">Speichern</UButton>
|
||||
</form>
|
||||
</section>
|
||||
<CollaborationRoom v-if="selected && readable" :key="selected" :room-id="selected" :api="$api" @changed="refresh" />
|
||||
<p v-else-if="selected" class="rounded-xl border border-gray-200 p-6 text-sm text-gray-500 dark:border-gray-700">Du hast derzeit keinen Lesezugriff auf diesen Unterraum. Die Verwaltung ist davon unabhängig.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.field { display: block; width: 100%; margin-top: .25rem; border: 1px solid #9ca3af; border-radius: .5rem; padding: .55rem .7rem; background: transparent; }
|
||||
</style>
|
||||
89
frontend/pages/guest.vue
Normal file
89
frontend/pages/guest.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<script setup>
|
||||
definePageMeta({ layout: 'notLoggedIn' })
|
||||
useHead({ title: 'FEDEO · Gastzugang', meta: [{ name: 'referrer', content: 'no-referrer' }, { name: 'robots', content: 'noindex,nofollow' }] })
|
||||
const config = useRuntimeConfig()
|
||||
const token = ref(''), invitationToken = ref(''), workspaceId = ref(''), address = ref(''), challengeId = ref(''), code = ref('')
|
||||
const invitation = ref(null), rooms = ref([]), selected = ref(''), error = ref(''), busy = ref(false), sent = ref(false)
|
||||
const api = async (path, options = {}) => $fetch(path, {
|
||||
baseURL: config.public.apiBase, credentials: 'omit', ...options,
|
||||
headers: { ...options.headers, ...(token.value ? { Authorization: `Bearer ${token.value}` } : {}) }
|
||||
})
|
||||
const message = e => e?.data?.message || e?.data?.error || 'Die Aktion konnte nicht ausgeführt werden.'
|
||||
function expire() { token.value = ''; rooms.value = []; selected.value = ''; invitation.value = null; sessionStorage.removeItem('fedeo-guest-session') }
|
||||
async function run(fn) { busy.value = true; error.value = ''; try { await fn() } catch (e) { error.value = message(e) } finally { busy.value = false } }
|
||||
async function refresh() {
|
||||
if (!token.value) return
|
||||
try {
|
||||
rooms.value = (await api('/guest/api/rooms')).rooms
|
||||
if (!rooms.value.some(r => r.id === selected.value)) selected.value = rooms.value[0]?.id || ''
|
||||
} catch (e) { error.value = message(e); if ([401, 403].includes(e?.statusCode || e?.status)) expire() }
|
||||
}
|
||||
async function requestCode() {
|
||||
await run(async () => {
|
||||
const result = await api('/guest/api/auth/request', { method: 'POST', body: invitationToken.value ? { invitationToken: invitationToken.value } : { workspaceId: workspaceId.value, email: address.value } })
|
||||
challengeId.value = result.challengeId; sent.value = true
|
||||
})
|
||||
}
|
||||
async function verify() {
|
||||
await run(async () => {
|
||||
const result = await api('/guest/api/auth/verify', { method: 'POST', body: { challengeId: challengeId.value, code: code.value } })
|
||||
token.value = result.token; workspaceId.value = result.workspaceId; code.value = ''
|
||||
sessionStorage.setItem('fedeo-guest-session', result.token)
|
||||
localStorage.setItem('fedeo-guest-workspace', result.workspaceId)
|
||||
if (invitationToken.value) invitation.value = await api('/guest/api/invitation', { method: 'POST', body: { token: invitationToken.value } })
|
||||
await refresh()
|
||||
})
|
||||
}
|
||||
async function accept() {
|
||||
await run(async () => {
|
||||
const result = await api(`/guest/api/invitations/${invitation.value.id}/accept`, { method: 'POST', body: { token: invitationToken.value } })
|
||||
invitation.value = null; invitationToken.value = ''; sessionStorage.removeItem('fedeo-guest-invite')
|
||||
await refresh(); selected.value = result.roomId
|
||||
})
|
||||
}
|
||||
async function logout() { try { await api('/guest/api/logout', { method: 'POST' }) } finally { expire(); sent.value = false } }
|
||||
let timer
|
||||
onMounted(async () => {
|
||||
const fragment = new URLSearchParams(window.location.hash.slice(1))
|
||||
invitationToken.value = fragment.get('invite') || sessionStorage.getItem('fedeo-guest-invite') || ''
|
||||
if (invitationToken.value) sessionStorage.setItem('fedeo-guest-invite', invitationToken.value)
|
||||
history.replaceState(null, '', window.location.pathname)
|
||||
workspaceId.value = localStorage.getItem('fedeo-guest-workspace') || ''
|
||||
token.value = sessionStorage.getItem('fedeo-guest-session') || ''
|
||||
if (token.value) {
|
||||
await run(async () => {
|
||||
if (invitationToken.value) invitation.value = await api('/guest/api/invitation', { method: 'POST', body: { token: invitationToken.value } })
|
||||
await refresh()
|
||||
})
|
||||
}
|
||||
timer = setInterval(() => { if (!document.hidden && !busy.value) void refresh() }, 15000)
|
||||
})
|
||||
onBeforeUnmount(() => clearInterval(timer))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mx-auto min-h-screen max-w-5xl space-y-5 p-4 sm:p-8">
|
||||
<header class="flex items-center justify-between gap-3"><div><p class="text-sm font-semibold text-green-700">FEDEO</p><h1 class="text-2xl font-semibold">Deine Projekt-Unterräume</h1></div><UButton v-if="token" variant="outline" @click="logout">Abmelden</UButton></header>
|
||||
<p v-if="error" role="alert" class="rounded-lg bg-red-50 p-3 text-red-700">{{ error }}</p>
|
||||
<section v-if="!token" class="mx-auto max-w-md space-y-4 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
|
||||
<h2 class="text-lg font-semibold">Als Gast anmelden</h2>
|
||||
<p class="text-sm text-gray-500">Du erhältst einen Anmeldecode an die E-Mail-Adresse deiner Einladung. Deine Anmeldung gilt nur für freigegebene Unterräume.</p>
|
||||
<form v-if="!sent" class="space-y-4" @submit.prevent="requestCode">
|
||||
<template v-if="!invitationToken"><label class="block text-sm">E-Mail-Adresse<input v-model="address" type="email" required autocomplete="email" class="mt-1 w-full rounded-lg border border-gray-300 p-2" /></label><p v-if="!workspaceId" class="text-sm text-gray-500">Öffne zuerst deinen persönlichen Einladungslink.</p></template>
|
||||
<UButton type="submit" :loading="busy" :disabled="!invitationToken && !workspaceId">Anmeldecode anfordern</UButton>
|
||||
</form>
|
||||
<form v-else class="space-y-4" @submit.prevent="verify">
|
||||
<p role="status" class="text-sm">Wenn eine gültige Einladung oder ein Zugang vorliegt, wurde ein Code versendet.</p>
|
||||
<label class="block text-sm">Anmeldecode<input v-model="code" required inputmode="numeric" autocomplete="one-time-code" maxlength="8" class="mt-1 w-full rounded-lg border border-gray-300 p-2 tracking-widest" /></label>
|
||||
<div class="flex gap-2"><UButton type="submit" :loading="busy">Anmelden</UButton><UButton variant="ghost" :disabled="busy" @click="sent = false">Zurück</UButton></div>
|
||||
</form>
|
||||
</section>
|
||||
<section v-if="token && invitation" class="space-y-3 rounded-xl border border-green-200 bg-green-50 p-5 text-gray-900">
|
||||
<h2 class="font-semibold">Einladung: {{ invitation.name }}</h2><p class="text-sm">{{ invitation.topic }}</p>
|
||||
<p class="text-sm">{{ invitation.role === 'reader' ? 'Du kannst Nachrichten lesen.' : 'Du kannst Nachrichten lesen und schreiben.' }} {{ invitation.overviewAllowed ? 'Eine begrenzte Projektübersicht ist freigegeben.' : '' }}</p>
|
||||
<p class="text-sm">Dein Zugriff gilt für diesen Unterraum. Du siehst die dort eingeladenen Teilnehmer und Nachrichten ab deinem Beitritt.</p>
|
||||
<UButton :loading="busy" @click="accept">Einladung annehmen</UButton>
|
||||
</section>
|
||||
<template v-if="token"><nav v-if="rooms.length" aria-label="Freigegebene Unterräume" class="flex flex-wrap gap-2"><UButton v-for="room in rooms" :key="room.id" :variant="selected === room.id ? 'solid' : 'outline'" @click="selected = room.id">{{ room.name }}{{ room.unread ? ` (${room.unread})` : '' }}</UButton></nav><p v-else-if="!invitation" class="rounded-xl border border-gray-200 p-6 text-gray-500">Derzeit sind keine Unterräume für dich freigegeben.</p><CollaborationRoom v-if="selected" :key="selected" :room-id="selected" :api="api" base="/guest/api" @changed="refresh" @unauthorized="expire" /></template>
|
||||
</main>
|
||||
</template>
|
||||
Reference in New Issue
Block a user