Random Bugs (#2531)

UI/Web/src/app/admin/edit-user/edit-user.component.html

@@ -19,6 +19,9 @@
                                 <div *ngIf="userForm.get('username')?.errors?.required">
                                     {{t('required')}}
                                 </div>
+                              <div *ngIf="userForm.get('username')?.errors?.pattern">
+                                    {{t('username-pattern', {characters: allowedCharacters})}}
+                                </div>
                             </div>
                         </div>
                     </div>

UI/Web/src/app/admin/edit-user/edit-user.component.ts

@@ -12,6 +12,8 @@ import { RoleSelectorComponent } from '../role-selector/role-selector.component'
 import { NgIf } from '@angular/common';
 import {TranslocoDirective} from "@ngneat/transloco";
 
+const AllowedUsernameCharacters = /^[\sa-zA-Z0-9\-._@+/\s]*$/;
+
 @Component({
     selector: 'app-edit-user',
     templateUrl: './edit-user.component.html',
@@ -30,6 +32,8 @@ export class EditUserComponent implements OnInit {
 
   userForm: FormGroup = new FormGroup({});
 
+  allowedCharacters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+/';
+
   public get email() { return this.userForm.get('email'); }
   public get username() { return this.userForm.get('username'); }
   public get password() { return this.userForm.get('password'); }
@@ -39,7 +43,7 @@ export class EditUserComponent implements OnInit {
 
   ngOnInit(): void {
     this.userForm.addControl('email', new FormControl(this.member.email, [Validators.required, Validators.email]));
-    this.userForm.addControl('username', new FormControl(this.member.username, [Validators.required]));
+    this.userForm.addControl('username', new FormControl(this.member.username, [Validators.required, Validators.pattern(AllowedUsernameCharacters)]));
 
     this.userForm.get('email')?.disable();
     this.selectedRestriction = this.member.ageRestriction;

UI/Web/src/app/admin/invite-user/invite-user.component.html

@@ -39,8 +39,12 @@
 
       <ng-container *ngIf="emailLink !== ''">
         <h4>{{t('setup-user-title')}}</h4>
-        <p>{{t('setup-user-description')}}
-        </p>
+        <p>{{t('setup-user-description')}}</p>
+        @if (inviteError) {
+          <div class="alert alert-warning" role="alert">
+            <strong>{{t('notice')}}</strong> {{t('email-not-sent')}}
+          </div>
+        }
         <a class="email-link" href="{{emailLink}}" target="_blank" rel="noopener noreferrer">{{t('setup-user-account')}}</a>
         <app-api-key [title]="t('invite-url-label')" [tooltipText]="t('setup-user-account-tooltip')" [hideData]="false" [showRefresh]="false" [transform]="makeLink"></app-api-key>
       </ng-container>

UI/Web/src/app/admin/invite-user/invite-user.component.ts

@@ -34,6 +34,7 @@ export class InviteUserComponent implements OnInit {
   selectedRestriction: AgeRestriction = {ageRating: AgeRating.NotApplicable, includeUnknowns: false};
   emailLink: string = '';
   invited: boolean = false;
+  inviteError: boolean = false;
 
   private readonly cdRef = inject(ChangeDetectorRef);
 
@@ -65,14 +66,24 @@ export class InviteUserComponent implements OnInit {
       this.emailLink = data.emailLink;
       this.isSending = false;
       this.invited = true;
+      this.cdRef.markForCheck();
+
+      if (data.invalidEmail) {
+        this.toastr.info(translate('toasts.email-not-sent'));
+        this.inviteError = true;
+        this.cdRef.markForCheck();
+        return;
+      }
+
       if (data.emailSent) {
         this.toastr.info(translate('toasts.email-sent', {email: email}));
         this.modal.close(true);
       }
-      this.cdRef.markForCheck();
+
     }, err => {
+      // Note to self: If you need to catch an error, do it, but don't toast because interceptor handles that
       this.isSending = false;
-      this.toastr.error(err)
+      this.cdRef.markForCheck();
     });
   }
 

UI/Web/src/app/admin/manage-users/manage-users.component.ts

@@ -115,7 +115,7 @@ export class ManageUsersComponent implements OnInit {
     this.serverService.isServerAccessible().subscribe(canAccess => {
       this.accountService.resendConfirmationEmail(member.id).subscribe(async (email) => {
         if (canAccess) {
-          this.toastr.info(this.translocoService.translate('toasts.email-sent-to-user', {user: member.username}));
+          this.toastr.info(this.translocoService.translate('toasts.email-sent', {user: member.username}));
           return;
         }
         await this.confirmService.alert(