Private servers with password and invite links (Experimental)

src/app/features/settings/settings-modal/server-settings/server-settings.component.html

@@ -95,6 +95,84 @@
             [class.cursor-not-allowed]="!isAdmin()"
           />
         </div>
+
+        @if (isAdmin()) {
+          <div class="rounded-lg border border-border bg-secondary/40 p-4 space-y-3">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <p class="text-sm font-medium text-foreground">Server Password</p>
+                <p class="text-xs text-muted-foreground">
+                  @if (hasPassword() && passwordAction() !== 'remove') {
+                    Joined members stay whitelisted until they are kicked or banned.
+                  } @else {
+                    Add an optional password so new members need it to join.
+                  }
+                </p>
+              </div>
+
+              @if (hasPassword() && passwordAction() !== 'remove') {
+                <button
+                  type="button"
+                  (click)="markPasswordForRemoval()"
+                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
+                >
+                  Remove Password
+                </button>
+              } @else if (hasPassword() && passwordAction() === 'remove') {
+                <button
+                  type="button"
+                  (click)="keepCurrentPassword()"
+                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
+                >
+                  Keep Password
+                </button>
+              }
+            </div>
+
+            <div class="text-xs text-muted-foreground">
+              @if (hasPassword() && passwordAction() !== 'remove') {
+                Password protection is currently enabled.
+              } @else if (hasPassword() && passwordAction() === 'remove') {
+                Password protection will be removed when you save.
+              } @else {
+                Password protection is currently disabled.
+              }
+            </div>
+
+            <div>
+              <label
+                for="room-password"
+                class="block text-xs font-medium text-muted-foreground mb-1"
+              >
+                {{ hasPassword() ? 'Set New Password' : 'Set Password' }}
+              </label>
+              <input
+                type="password"
+                id="room-password"
+                [ngModel]="roomPassword"
+                (ngModelChange)="onPasswordInput($event)"
+                class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                [placeholder]="hasPassword() ? 'Leave blank to keep the current password' : 'Optional password required for new joins'"
+              />
+
+              @if (passwordAction() === 'update') {
+                <p class="mt-2 text-xs text-muted-foreground">The new password will replace the current one when you save.</p>
+              }
+
+              @if (passwordError()) {
+                <p class="mt-2 text-xs text-destructive">{{ passwordError() }}</p>
+              }
+            </div>
+          </div>
+        } @else {
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-foreground">Server Password</p>
+              <p class="text-xs text-muted-foreground">Invite links bypass the password, but bans still apply.</p>
+            </div>
+            <span class="text-sm text-muted-foreground">{{ hasPassword() ? 'Enabled' : 'Disabled' }}</span>
+          </div>
+        }
       </div>
     </section>