feat: A Username must not be empty

diff --git a/src/app/user/user.component.html b/src/app/user/user.component.html
index b640cfd..3cfc8d3 100644 (file)
--- a/src/app/user/user.component.html
+++ b/src/app/user/user.component.html
@@ -14,6 +14,7 @@
         <div *ngIf="usernameForm.errors?.['required']">
           Name is required.
         </div>
+        <div *ngIf="usernameForm.hasError('whitespace')">The username must not be empty</div>
       </div>
     </div>
     <button type="submit" class="btn btn-primary" (click)="updateName()" [disabled]="usernameForm.invalid">Pick Name</button>

diff --git a/src/app/user/user.component.ts b/src/app/user/user.component.ts
index 0ec3026..23817da 100644 (file)
--- a/src/app/user/user.component.ts
+++ b/src/app/user/user.component.ts
@@ -11,16 +11,22 @@ import { UserService } from "../user.service";
 })
 export class UserComponent {
 
-  usernameForm = new FormControl('', Validators.required);
+  usernameForm = new FormControl('', [ Validators.required, this.noWhitespaceValidator ]);
 
   updateName(): void {
     var input = this.usernameForm.getRawValue();
     if (input !== null) {
-      this.userService.setUser(input);
+      this.userService.setUser(input.trim());
       this.router.navigate(['chatrooms'])
     }
   }
 
+  noWhitespaceValidator(control: FormControl) {
+    const isWhitespace = (control.value || '').trim().length === 0;
+    const isValid = !isWhitespace;
+    return isValid ? null : { 'whitespace': true };
+  }
+
   constructor(
     private userService: UserService,
     private router: Router) {}