WIP - Change email form

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

@@ -53,7 +53,7 @@
             <label for="username" class="hidden">New Username</label>
             <input type="text" id="username" name="username"
                 placeholder="New Username"
-                [(ngModel)]="changeUsername.newName" >
+                [(ngModel)]="changeUsername.newName">
 
             <button type="submit" [disabled]="changeUsername.submitted"
                 (click)="updateUsername()">Change Username</button>
@@ -65,10 +65,14 @@
             <h3 class="tall">Change Email</h3>
 
             <label for="email" class="hidden">New Email</label>
-            <input type="text" id="email" placeholder="New Email">
+            <input type="text" id="email" name="email"
+                placeholder="New Email - Blank to disable"
+                [(ngModel)]="changeEmail.newEmail">
 
-            <button type="submit">Change Email</button>
-            <button class="flat">Reset</button>
+            <button type="submit" [disabled]="changeEmail.submitted"
+                (click)="updateEmail()">Change Email</button>
+            <button class="flat" [disabled]="changeEmail.submitted"
+                (click)="resetEmailForm()">Reset</button>
         </form>
 
         <div class="hold-bottom">

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

@@ -1,6 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { UserSettingsService } from './user-settings.service';
+import {
+    PassForm,
+    UsernameForm,
+    EmailForm
+} from './user-settings.models';
 import {
     AuthService,
     NotificationsService,
@@ -9,32 +14,24 @@ import {
     ApiResponse
 } from '../../shared/index';
 
-interface PassForm {
-    current: string;
-    newPass: string;
-    verPass: string;
-    submitted: boolean;
-};
-
-interface UsernameForm {
-    newName: string;
-    submitted: boolean;
-};
-
 @Component({
     selector: 'tb-user-settings',
     templateUrl: 'app/settings/user-settings/user-settings.component.html',
     providers: [ UserSettingsService ]
 })
-export class UserSettings {
+export class UserSettings implements OnInit {
     private user: User;
     private changePassword: PassForm;
     private changeUsername: UsernameForm;
+    private changeEmail: EmailForm
 
     constructor(private auth: AuthService,
             private notes: NotificationsService,
             private userService: UserSettingsService) {
         auth.userChanged.subscribe(user => this.user = user);
+    }
+
+    ngOnInit() {
         this.resetForms();
     }
 
@@ -49,10 +46,7 @@ export class UserSettings {
             .changePassword(this.changePassword.current,
                     this.changePassword.newPass)
             .subscribe((response: ApiResponse) => {
-                response.alerts.forEach(msg => {
-                    this.notes.add(new Notification(msg.type, msg.text));
-                });
-
+                this.addAlerts(response.alerts);
                 this.resetPasswordForm();
                 this.changePassword.submitted = false;
             });
@@ -72,34 +66,57 @@ export class UserSettings {
         this.userService
             .changeUsername(this.changeUsername.newName)
             .subscribe((response: ApiResponse) => {
-                response.alerts.forEach(msg => {
-                    this.notes.add(new Notification(msg.type, msg.text));
-                });
-
+                this.addAlerts(response.alerts);
                 this.resetUsernameForm();
                 this.changeUsername.submitted = false;
             });
     }
 
+    updateEmail() {
+        this.changeEmail.submitted = true;
+
+        let emailRegex = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
+        let match = this.changeEmail.newEmail.match(emailRegex);
+
+        if (!match && this.changeEmail.newEmail !== '') {
+            this.notes.add(new Notification('error',
+                'Invalid email address.'));
+            this.changeEmail.submitted = false;
+
+            return;
+        }
+
+        this.userService
+            .changeEmail(this.changeEmail.newEmail)
+            .subscribe((response: ApiResponse) => {
+                this.addAlerts(response.alerts);
+                this.resetEmailForm();
+                this.changeEmail.submitted = false;
+            });
+    }
+
     resetPasswordForm() {
-        this.changePassword = {
-            current: '',
-            newPass: '',
-            verPass: '',
-            submitted: false
-        };
+        this.changePassword = new PassForm();
     }
 
     resetUsernameForm() {
-        this.changeUsername = {
-            newName: '',
-            submitted: false
-        };
+        this.changeUsername = new UsernameForm();
+    }
+
+    resetEmailForm() {
+        this.changeEmail = new EmailForm(this.user.email);
+    }
+
+    private addAlerts(alerts: Array<Notification>) {
+        alerts.forEach(msg => {
+            this.notes.add(msg);
+        });
     }
 
     private resetForms() {
         this.resetPasswordForm();
         this.resetUsernameForm();
+        this.resetEmailForm();
     }
 
     private validatePassForm() {

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

@@ -0,0 +1,18 @@
+export class PassForm {
+    constructor(public current: string = '', public newPass: string = '',
+            public verPass: string = '', public submitted: boolean = false) {
+    }
+};
+
+export class UsernameForm {
+    constructor(public newName: string = '',
+            public submitted: boolean = false) {
+    }
+};
+
+export class EmailForm {
+    constructor(public newEmail: string = '',
+            public submitted: boolean = false) {
+    }
+};
+

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

@@ -62,5 +62,15 @@ export class UserSettingsService {
                 return Observable.of(response);
             });
     }
+
+    changeEmail(newEmail: string): Observable<ApiResponse> {
+        let json = JSON.stringify(this.activeUser);
+
+        return this.http.post('api/users/' + this.activeUser.id, json)
+            .map(res => {
+                let response: ApiResponse = res.json();
+                return response;
+            });
+    }
 }