From 2545cff401ee2749d186e84c04e1ca3944f99e39 Mon Sep 17 00:00:00 2001 From: Marc Schmidt Date: Sun, 7 Jul 2024 19:47:01 +0200 Subject: [PATCH] feat: add better user creation flow Closes: #134 --- .../user-created-dialog.component.html | 34 +++++++++++++ .../user-created-dialog.component.ts | 51 +++++++++++++++++++ .../user-dialog/user-dialog.component.html | 3 ++ .../user-dialog/user-dialog.component.ts | 9 +++- src/client/src/app/i18n/de.json | 10 +++- src/client/src/app/i18n/en.json | 12 ++++- 6 files changed, 114 insertions(+), 5 deletions(-) create mode 100644 src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.html create mode 100644 src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.ts diff --git a/src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.html b/src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.html new file mode 100644 index 0000000..bc58a13 --- /dev/null +++ b/src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.html @@ -0,0 +1,34 @@ + +
+
+ + @if (user()?.loginToken; as loginToken) { + + } +
+ +
+ diff --git a/src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.ts b/src/client/src/app/components/users/user-created-dialog/user-created-dialog.component.ts new file mode 100644 index 0000000..f0ada1e --- /dev/null +++ b/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(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, + }); + } +} diff --git a/src/client/src/app/components/users/user-dialog/user-dialog.component.html b/src/client/src/app/components/users/user-dialog/user-dialog.component.html index fb11684..b532764 100644 --- a/src/client/src/app/components/users/user-dialog/user-dialog.component.html +++ b/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" >
@if (hasFailed()) { @@ -191,3 +192,5 @@

{{ translations.users_dialog_roles_title() }}

+ + diff --git a/src/client/src/app/components/users/user-dialog/user-dialog.component.ts b/src/client/src/app/components/users/user-dialog/user-dialog.component.ts index 6f95398..2034f42 100644 --- a/src/client/src/app/components/users/user-dialog/user-dialog.component.ts +++ b/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(null), alias: new FormControl('', { 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()) diff --git a/src/client/src/app/i18n/de.json b/src/client/src/app/i18n/de.json index 31bfd57..2fd014f 100644 --- a/src/client/src/app/i18n/de.json +++ b/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.", diff --git a/src/client/src/app/i18n/en.json b/src/client/src/app/i18n/en.json index 7150371..5ff6c52 100644 --- a/src/client/src/app/i18n/en.json +++ b/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.",