user management tweaks

client/src/app/admin/admin.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { NgArrayPipesModule } from 'angular-pipes';
 
 import { UserService } from './users/user.service';
 
@@ -12,6 +13,7 @@ import { AddUserComponent } from './users/add-user.component';
 
 @NgModule({
   imports: [
+    NgArrayPipesModule,
     CommonModule,
     FormsModule,
     RouterModule.forChild([

client/src/app/admin/users/add-user.component.html

@@ -27,10 +27,11 @@ <h2>Add user</h2>
         <input type="password" id="password" class="form-control"
                name="password"
                #password="ngModel"
+               maxlength="100"
                ngModel required>
         <div *ngIf="password.errors && (password.dirty || password.touched)"
              class="alert alert-danger">
-            <div [hidden]="!username.errors.required">
+            <div [hidden]="!password.errors.required">
               Password is required
             </div>
         </div>
@@ -55,10 +56,13 @@ <h2>Add user</h2>
              [disabled]="!userForm.form.valid">Add user</button>
 
       <div [hidden]="!successAddingUser" class="alert alert-success">
-          <strong>Success: </strong> successfully added user {{ username.value }}
+          <strong>Success: </strong> successfully added a user.
       </div>
       <div [hidden]="!errorAddingUser" class="alert alert-danger">
-          <strong>Error: </strong> failed to add user {{ username.value }}. Does this username already exist?
+          <strong>Error: </strong> failed to add a user. Does this username already exist?
+      </div>
+      <div [hidden]="!invalidUsernameSupplied" class="alert alert-danger">
+          <strong>Error: </strong> the username is invalid. Please make sure you don't have any whitespaces in your username.
       </div>
     </form>
 </div>

client/src/app/admin/users/add-user.component.ts

@@ -12,6 +12,7 @@ export class AddUserComponent implements OnInit {
 
   successAddingUser: boolean = false;
   errorAddingUser: boolean = false;
+  invalidUsernameSupplied: boolean = false;
 
   constructor(
       private userService: UserService
@@ -27,7 +28,16 @@ export class AddUserComponent implements OnInit {
   addUser(user: NgForm){
     this.successAddingUser = false;
     this.errorAddingUser = false;
-    this.userService.addUser(user.value)
+    this.invalidUsernameSupplied = false;
+    // Remove whitespace on both sides of the string
+    user.value.username = user.value.username.trim();
+    user.value.password = user.value.password.trim();
+    // Only submit user when username contains no spaces
+    if (this.hasWhiteSpace(user.value.username)){
+       this.invalidUsernameSupplied = true;
+    }
+    else {
+      this.userService.addUser(user.value)
         .subscribe(
             data => {
               // Success
@@ -36,5 +46,15 @@ export class AddUserComponent implements OnInit {
             error => {
               this.errorAddingUser = true;
             });
+    }
+  }
+
+  /**
+   * Check string for whitespace
+   * @param string
+   * @returns {boolean}
+   */
+  hasWhiteSpace(string) {
+    return string.indexOf(' ') >= 0;
   }
 }

client/src/app/admin/users/users.component.html

@@ -11,7 +11,7 @@ <h2>Users</h2>
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let user of userList; index as i;" [class.selected]="user === selectedUser">
+        <tr *ngFor="let user of userList | orderBy: 'username'" [class.selected]="user === selectedUser">
             <td>{{ user.username }}</td>
             <td *ngIf="!editMode || user.username != editUsername">{{ user.role }}</td>
             <td *ngIf="editMode && user.username == editUsername">

client/src/app/admin/users/users.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { OrderByPipe } from 'angular-pipes/src/array/order-by.pipe';
 
 import { UserService } from './user.service';