Private servers with password and invite links (Experimental)

src/app/features/shell/title-bar.component.html

@@ -55,8 +55,20 @@
     </button>
     <!-- Anchored dropdown under the menu button -->
     @if (showMenu()) {
-      <div class="absolute right-0 top-full mt-1 z-50 bg-card border border-border rounded-lg shadow-lg w-48">
+      <div class="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border border-border bg-card shadow-lg">
         @if (inRoom()) {
+          <button
+            type="button"
+            (click)="createInviteLink()"
+            [disabled]="creatingInvite()"
+            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            @if (creatingInvite()) {
+              Creating Invite Link…
+            } @else {
+              Create Invite Link
+            }
+          </button>
           <button
             type="button"
             (click)="leaveServer()"
@@ -65,6 +77,11 @@
             Leave Server
           </button>
         }
+        @if (inviteStatus()) {
+          <div class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground">
+            {{ inviteStatus() }}
+          </div>
+        }
         <div class="border-t border-border"></div>
         <button
           type="button"

src/app/features/shell/title-bar.component.ts

@@ -6,6 +6,7 @@ import {
   signal
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { firstValueFrom } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
@@ -25,6 +26,7 @@ import { WebRTCService } from '../../core/services/webrtc.service';
 import { PlatformService } from '../../core/services/platform.service';
 import { STORAGE_KEY_CURRENT_USER_ID } from '../../core/constants';
 import { LeaveServerDialogComponent } from '../../shared';
+import { Room } from '../../core/models/index';
 
 interface WindowControlsAPI {
   minimizeWindow?: () => void;
@@ -84,6 +86,8 @@ export class TitleBarComponent {
   private _showMenu = signal(false);
   showMenu = computed(() => this._showMenu());
   showLeaveConfirm = signal(false);
+  inviteStatus = signal<string | null>(null);
+  creatingInvite = signal(false);
 
   /** Minimize the Electron window. */
   minimize() {
@@ -122,9 +126,44 @@ export class TitleBarComponent {
 
   /** Toggle the server dropdown menu. */
   toggleMenu() {
+    this.inviteStatus.set(null);
     this._showMenu.set(!this._showMenu());
   }
 
+  /** Create a new invite link for the active room and copy it to the clipboard. */
+  async createInviteLink(): Promise<void> {
+    const room = this.currentRoom();
+    const user = this.currentUser();
+
+    if (!room || !user || this.creatingInvite()) {
+      return;
+    }
+
+    this.creatingInvite.set(true);
+    this.inviteStatus.set('Creating invite link…');
+
+    try {
+      const invite = await firstValueFrom(this.serverDirectory.createInvite(
+        room.id,
+        {
+          requesterUserId: user.id,
+          requesterDisplayName: user.displayName,
+          requesterRole: user.role
+        },
+        this.toSourceSelector(room)
+      ));
+
+      await this.copyInviteLink(invite.inviteUrl);
+      this.inviteStatus.set('Invite link copied to clipboard.');
+    } catch (error: unknown) {
+      const inviteError = error as { error?: { error?: string } };
+
+      this.inviteStatus.set(inviteError?.error?.error || 'Unable to create invite link.');
+    } finally {
+      this.creatingInvite.set(false);
+    }
+  }
+
   /** Leave the current server and navigate to the servers list. */
   leaveServer() {
     this.openLeaveConfirm();
@@ -170,4 +209,44 @@ export class TitleBarComponent {
 
     this.router.navigate(['/login']);
   }
+
+  private async copyInviteLink(inviteUrl: string): Promise<void> {
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(inviteUrl);
+        return;
+      } catch {}
+    }
+
+    const textarea = document.createElement('textarea');
+
+    textarea.value = inviteUrl;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    textarea.style.pointerEvents = 'none';
+    document.body.appendChild(textarea);
+    textarea.select();
+
+    try {
+      const copied = document.execCommand('copy');
+
+      if (copied) {
+        return;
+      }
+    } catch {
+      /* fall through to prompt fallback */
+    } finally {
+      document.body.removeChild(textarea);
+    }
+
+    window.prompt('Copy this invite link', inviteUrl);
+  }
+
+  private toSourceSelector(room: Room): { sourceId?: string; sourceUrl?: string } {
+    return {
+      sourceId: room.sourceId,
+      sourceUrl: room.sourceUrl
+    };
+  }
 }