86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
<div class="min-h-full bg-background px-4 py-8 sm:px-6 lg:px-8">
|
|
<div class="mx-auto flex min-h-[calc(100vh-8rem)] max-w-4xl items-center justify-center">
|
|
<div class="w-full overflow-hidden rounded-3xl border border-border bg-card/90 shadow-2xl backdrop-blur">
|
|
<div class="border-b border-border bg-gradient-to-br from-primary/20 via-transparent to-blue-500/10 px-6 py-8 sm:px-10">
|
|
<div
|
|
class="inline-flex items-center rounded-full border border-border bg-secondary/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.25em] text-muted-foreground"
|
|
>
|
|
Invite link
|
|
</div>
|
|
<h1 class="mt-4 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
|
|
@if (invite()) {
|
|
Join {{ invite()!.server.name }}
|
|
} @else {
|
|
Toju server invite
|
|
}
|
|
</h1>
|
|
<p class="mt-3 max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base">
|
|
@switch (status()) {
|
|
@case ('redirecting') {
|
|
Sign in to continue with this invite.
|
|
}
|
|
@case ('joining') {
|
|
We are connecting you to the invited server.
|
|
}
|
|
@case ('error') {
|
|
This invite could not be completed automatically.
|
|
}
|
|
@default {
|
|
Loading invite details and preparing the correct signal server.
|
|
}
|
|
}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-6 px-6 py-8 sm:px-10 lg:grid-cols-[1.2fr,0.8fr]">
|
|
<section class="space-y-4">
|
|
<div class="rounded-2xl border border-border bg-secondary/20 p-5">
|
|
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Status</h2>
|
|
<p class="mt-3 text-lg font-medium text-foreground">{{ message() }}</p>
|
|
</div>
|
|
|
|
@if (invite()) {
|
|
<div class="rounded-2xl border border-border bg-secondary/20 p-5">
|
|
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Server</h2>
|
|
<p class="mt-3 text-xl font-semibold text-foreground">{{ invite()!.server.name }}</p>
|
|
@if (invite()!.server.description) {
|
|
<p class="mt-2 text-sm leading-6 text-muted-foreground">{{ invite()!.server.description }}</p>
|
|
}
|
|
<div class="mt-4 flex flex-wrap gap-2 text-xs">
|
|
@if (invite()!.server.isPrivate) {
|
|
<span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Private</span>
|
|
}
|
|
@if (invite()!.server.hasPassword) {
|
|
<span class="rounded-full bg-secondary px-2.5 py-1 text-muted-foreground">Password bypassed by invite</span>
|
|
}
|
|
<span class="rounded-full bg-primary/10 px-2.5 py-1 text-primary"> Expires {{ invite()!.expiresAt | date: 'medium' }} </span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</section>
|
|
|
|
<aside class="space-y-4">
|
|
<div class="rounded-2xl border border-border bg-secondary/20 p-5">
|
|
<h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">What happens next</h2>
|
|
<ul class="mt-4 space-y-3 text-sm leading-6 text-muted-foreground">
|
|
<li>• The linked signal server is added to your configured server list if needed.</li>
|
|
<li>• Invite links bypass private and password restrictions.</li>
|
|
<li>• Banned users still cannot join through invites.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
@if (status() === 'error') {
|
|
<button
|
|
type="button"
|
|
(click)="goToSearch()"
|
|
class="inline-flex w-full items-center justify-center rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
Back to server search
|
|
</button>
|
|
}
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|