User settings now allows username change

src/app/settings/user-settings/user-settings.component.html

@@ -49,19 +49,27 @@
     <div class="half">
         <h3>Change Username</h3>
 
-        <label for="username" class="hidden">New Username</label>
-        <input type="text" id="username" placeholder="New Username">
+        <form>
+            <label for="username" class="hidden">New Username</label>
+            <input type="text" id="username" name="username"
+                placeholder="New Username"
+                [(ngModel)]="changeUsername.newName" >
 
-        <button>Change Username</button>
-        <button class="flat">Reset</button>
+            <button type="submit" [disabled]="changeUsername.submitted"
+                (click)="updateUsername()">Change Username</button>
+            <button class="flat" [disabled]="changeUsername.submitted"
+                (click)="resetUsernameForm()">Reset</button>
+        </form>
 
-        <h3 class="tall">Change Email</h3>
+        <form>
+            <h3 class="tall">Change Email</h3>
 
-        <label for="email" class="hidden">New Email</label>
-        <input type="text" id="email" placeholder="New Email">
+            <label for="email" class="hidden">New Email</label>
+            <input type="text" id="email" placeholder="New Email">
 
-        <button>Change Email</button>
-        <button class="flat">Reset</button>
+            <button type="submit">Change Email</button>
+            <button class="flat">Reset</button>
+        </form>
 
         <div class="hold-bottom">
             <label>

src/app/settings/user-settings/user-settings.component.ts

@@ -16,6 +16,11 @@ interface PassForm {
     submitted: boolean;
 };
 
+interface UsernameForm {
+    newName: string;
+    submitted: boolean;
+};
+
 @Component({
     selector: 'tb-user-settings',
     templateUrl: 'app/settings/user-settings/user-settings.component.html',
@@ -24,12 +29,13 @@ interface PassForm {
 export class UserSettings {
     private user: User;
     private changePassword: PassForm;
+    private changeUsername: UsernameForm;
 
     constructor(private auth: AuthService,
             private notes: NotificationsService,
             private userService: UserSettingsService) {
-        this.user = auth.activeUser;
-        this.resetPasswordForm();
+        auth.userChanged.subscribe(user => this.user = user);
+        this.resetForms();
     }
 
     updatePassword() {
@@ -41,14 +47,37 @@ export class UserSettings {
 
         this.userService
             .changePassword(this.changePassword.current,
-                            this.changePassword.newPass)
+                    this.changePassword.newPass)
             .subscribe((response: ApiResponse) => {
                 response.alerts.forEach(msg => {
                     this.notes.add(new Notification(msg.type, msg.text));
-
-                    this.resetPasswordForm();
-                    this.changePassword.submitted = false;
                 });
+
+                this.resetPasswordForm();
+                this.changePassword.submitted = false;
+            });
+    }
+
+    updateUsername() {
+        this.changeUsername.submitted = true;
+
+        if (this.changeUsername.newName === '') {
+            this.notes.add(new Notification('error',
+                'New Username cannot be blank.'));
+            this.changeUsername.submitted = false;
+
+            return;
+        }
+
+        this.userService
+            .changeUsername(this.changeUsername.newName)
+            .subscribe((response: ApiResponse) => {
+                response.alerts.forEach(msg => {
+                    this.notes.add(new Notification(msg.type, msg.text));
+                });
+
+                this.resetUsernameForm();
+                this.changeUsername.submitted = false;
             });
     }
 
@@ -61,6 +90,18 @@ export class UserSettings {
         };
     }
 
+    resetUsernameForm() {
+        this.changeUsername = {
+            newName: '',
+            submitted: false
+        };
+    }
+
+    private resetForms() {
+        this.resetPasswordForm();
+        this.resetUsernameForm();
+    }
+
     private validatePassForm() {
         if (this.changePassword.current === '' ||
                 this.changePassword.newPass === '' ||

src/app/settings/user-settings/user-settings.service.ts

@@ -21,8 +21,9 @@ interface UpdateUser extends User {
 export class UserSettingsService {
     activeUser: User = null;
 
-    constructor(auth: AuthService, constants: Constants, private http: Http) {
-        this.activeUser = auth.activeUser;
+    constructor(constants: Constants,
+            private auth: AuthService, private http: Http) {
+        auth.userChanged.subscribe(user => this.activeUser = user);
     }
 
     changePassword(oldPass: string, newPass: string): Observable<ApiResponse> {
@@ -42,5 +43,24 @@ export class UserSettingsService {
                 return Observable.of(response);
             });
     }
+
+    changeUsername(newName: string): Observable<ApiResponse> {
+        let updateUser = this.activeUser;
+        updateUser.username = newName;
+
+        let json = JSON.stringify(updateUser);
+
+        return this.http.post('api/users/' + this.activeUser.id, json)
+            .map(res => {
+                let response: ApiResponse = res.json();
+                this.auth.updateUser(JSON.parse(response.data[1]));
+
+                return response;
+            })
+            .catch((res, caught) => {
+                let response: ApiResponse = res.json();
+                return Observable.of(response);
+            });
+    }
 }
 

src/app/shared/auth/auth.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Router } from '@angular/router';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/catch';
@@ -11,17 +12,23 @@ import { Constants } from '../constants';
 
 @Injectable()
 export class AuthService {
-    activeUser: User = null;
+    private activeUser = new BehaviorSubject<User>(null);
+
+    public userChanged = this.activeUser.asObservable();
 
     constructor(constants: Constants, private http: Http,
             private router: Router) {
     }
 
+    updateUser(user: User): void {
+        this.activeUser.next(user);
+    }
+
     authenticate(): Observable<boolean> {
         return this.http.post('api/authenticate', null)
             .map(res => {
                 let response: ApiResponse = res.json();
-                this.activeUser = response.data[1];
+                this.updateUser(response.data[1]);
 
                 return this.activeUser !== null;
             })
@@ -41,13 +48,13 @@ export class AuthService {
         return this.http.post('api/login', json)
             .map(res => {
                 let response: ApiResponse = res.json();
-                this.activeUser = response.data[1];
+                this.updateUser(response.data[1]);
 
                 return response;
             })
             .catch((res, caught) => {
                 let response: ApiResponse = res.json();
-                this.activeUser = null;
+                this.updateUser(null);
 
                 return Observable.of(response);
             });

src/app/shared/top-nav/top-nav.component.ts

@@ -20,7 +20,9 @@ export class TopNav {
             private authService: AuthService,
             private notes: NotificationsService) {
         this.version = constants.VERSION;
-        this.username = authService.activeUser.username;
+
+        authService.userChanged
+            .subscribe(user => this.username = user.username);
     }
 
     logout(): void {