feat: add better user creation flow (#136)

Closes: #134

src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.html

@@ -0,0 +1,34 @@
+<p-dialog
+  [header]="translations.users_userCreatedDialog_title() | interpolate: user()"
+  [visible]="visible()"
+  (visibleChange)="visible.set($event)"
+  [modal]="true"
+  [draggable]="false"
+  [resizable]="false"
+>
+  <div class="flex flex-col items-end gap-2">
+    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+      <p-button
+        styleClass="w-full"
+        [icon]="'i-[mdi--text-account]'"
+        [label]="translations.users_userCreatedDialog_copyWelcomeMessage()"
+        (onClick)="copyWelcomeMessage()"
+      />
+      @if (user()?.loginToken; as loginToken) {
+        <p-button
+          styleClass="w-full"
+          [icon]="'i-[mdi--lock]'"
+          [label]="translations.users_userCreatedDialog_copyPassword()"
+          (onClick)="copyPassword(loginToken)"
+        />
+      }
+    </div>
+    <p-button
+      styleClass="w-full"
+      [icon]="'i-[mdi--check]'"
+      [label]="translations.shared_done()"
+      (onClick)="visible.set(false)"
+      [text]="true"
+    />
+  </div>
+</p-dialog>

src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import copyToClipboard from 'copy-to-clipboard';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+
+import { interpolate, InterpolatePipe } from '../../../directives/interpolate.pipe';
+import { User } from '../../../models/parsed-models';
+import { TranslateService } from '../../../services/translate.service';
+
+@Component({
+  selector: 'app-user-created-dialog',
+  standalone: true,
+  imports: [ButtonModule, CommonModule, DialogModule, InterpolatePipe],
+  templateUrl: './user-created-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserCreatedDialogComponent {
+  private readonly _messageService = inject(MessageService);
+  protected readonly translations = inject(TranslateService).translations;
+
+  protected readonly visible = signal(false);
+  protected readonly user = signal<User | undefined>(undefined);
+
+  public open(user: User) {
+    this.user.set(user);
+    this.visible.set(true);
+  }
+
+  protected copyWelcomeMessage() {
+    const message = interpolate(this.translations.users_userCreatedDialog_welcomeMessage(), {
+      url: (document.head.querySelector('base') as HTMLBaseElement).href,
+    });
+    copyToClipboard(message);
+    this._messageService.add({
+      severity: 'success',
+      summary: this.translations.users_userCreatedDialog_welcomeMessageCopied(),
+      life: 2000,
+    });
+  }
+
+  protected copyPassword(password: string) {
+    copyToClipboard(password);
+    this._messageService.add({
+      severity: 'success',
+      summary: this.translations.users_dialog_loginTokenCopied(),
+      life: 2000,
+    });
+  }
+}

src/client/src/app/components/users/user-dialog/user-dialog.component.html

@@ -8,6 +8,7 @@
   (visibleChange)="visible.set($event)"
   [modal]="true"
   [draggable]="false"
+  [resizable]="false"
 >
   <div class="grid grid-cols-1 gap-6 sm:grid-cols-2" [formGroup]="form">
     @if (hasFailed()) {
@@ -191,3 +192,5 @@ <h4 class="m-0 mb-2">{{ translations.users_dialog_roles_title() }}</h4>
     </p-listbox>
   </ng-template>
 </p-overlayPanel>
+
+<app-user-created-dialog />

src/client/src/app/components/users/user-dialog/user-dialog.component.ts

@@ -6,6 +6,7 @@ import {
   effect,
   inject,
   signal,
+  viewChild,
 } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -40,6 +41,7 @@ import { TranslateService } from '../../../services/translate.service';
 import { areArraysEqual } from '../../../utils/array.utils';
 import { notNullish } from '../../../utils/common.utils';
 import { selectSignal } from '../../../utils/ngrx.utils';
+import { UserCreatedDialogComponent } from '../user-created-dialog/user-created-dialog.component';
 import { UserItemComponent } from '../user-item/user-item.component';
 
 @Component({
@@ -59,6 +61,7 @@ import { UserItemComponent } from '../user-item/user-item.component';
     MessagesModule,
     OverlayPanelModule,
     ReactiveFormsModule,
+    UserCreatedDialogComponent,
     UserItemComponent,
   ],
   templateUrl: './user-dialog.component.html',
@@ -71,6 +74,8 @@ export class UserDialogComponent {
   private readonly _allUsers = selectSignal(userSelectors.selectEntities);
   private readonly _randomId = Math.random().toString(36).substring(2, 9);
 
+  private readonly _userCreatedDialog = viewChild.required(UserCreatedDialogComponent);
+
   protected readonly form = this._formBuilder.group({
     id: new FormControl<string | null>(null),
     alias: new FormControl<string>('', { nonNullable: true, validators: [Validators.required] }),
@@ -124,10 +129,10 @@ export class UserDialogComponent {
     actions$
       .pipe(ofType(addUserAction.success, updateUserAction.success), takeUntilDestroyed())
       .subscribe(({ type, response }) => {
+        this.close();
         if (type === addUserAction.success.type) {
-          this.copyLoginToken(response.loginToken);
+          this._userCreatedDialog().open(response);
         }
-        this.close();
       });
     actions$
       .pipe(ofType(loadUserLoginTokenAction.success), takeUntilDestroyed())

src/client/src/app/i18n/de.json

@@ -206,6 +206,13 @@
       "titleDefault": "Testbenachrichtigung",
       "body": "Inhalt",
       "bodyDefault": "Benachrichtigungen funktionieren!!! Wohoo ⛳"
+    },
+    "userCreatedDialog": {
+      "title": "User \"{{alias}}\" created",
+      "copyWelcomeMessage": "Willkommensnachricht kopieren",
+      "copyPassword": "Passwort kopieren",
+      "welcomeMessage": "Hallo Liebe Minigolffreunde!\nDie Anmeldung zum Minigolffreitag läuft ab jetzt über die Web-basierte App, welche du unter:\n{{url}}\naufrufen kannst.\nSpeichere sie dir als Lesezeichen, oder füge sie zu deinem Home-Bildschirm hinzu um jederzeit darauf zugreifen zu können.\nMelde dich dort bitte mit deinem Passwort an und registriere dich selber für deine Spielzeiten.\nBitte schreibe doch trotzdem im Facebook Beitrag, dass du dich registriert hast, damit dort die Konversation aufrecht erhalten wird.\nViel Spaß beim Minigolfen!\nDein Orga-Team",
+      "welcomeMessageCopied": "Willkommensnachricht kopiert"
     }
   },
   "playerEvents": {
@@ -266,7 +273,8 @@
     "minutes": "Minuten",
     "none": "Keine",
     "send": "Senden",
-    "sent": "Gesendet"
+    "sent": "Gesendet",
+    "done": "Fertig"
   },
   "validation": {
     "required": "Darf nicht leer sein.",

src/client/src/app/i18n/en.json

@@ -206,6 +206,13 @@
       "titleDefault": "test notification",
       "body": "body",
       "bodyDefault": "Notifications are working!!! Wohoo ⛳"
+    },
+    "userCreatedDialog": {
+      "title": "User \"{{alias}}\" created",
+      "copyWelcomeMessage": "Copy welcome message",
+      "copyPassword": "Copy password",
+      "welcomeMessage": "Hello dear minigolf friends!\nRegistration for Minigolf Friday is now possible via the web-based app, which you can download at:\n{{url}}.\nSave it as a bookmark or add it to your home screen so that you can access it at any time.\nPlease log in there with your password and register yourself for your game times.\nPlease still write in the Facebook post that you have registered so that the conversation is maintained there.\nHave fun playing mini golf!\nYour organization team",
+      "welcomeMessageCopied": "Welcome message copied"
     }
   },
   "playerEvents": {
@@ -265,8 +272,9 @@
     "minute": "Minute",
     "minutes": "Minutes",
     "none": "None",
-    "send": "send",
-    "sent": "sent"
+    "send": "Send",
+    "sent": "Sent",
+    "done": "Done"
   },
   "validation": {
     "required": "Cannot be blank.",