Merge pull request #6 from agilesix/ui

fix registration not displaying and switch error messages to uswds
agilesix · Feb 23, 2018 · a496cd1 · a496cd1
2 parents cf41a82 + f8fc171
commit a496cd1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/frontend/src/app/auth/auth.component.ts b/frontend/src/app/auth/auth.component.ts
@@ -8,7 +8,7 @@ import { Router } from '@angular/router';
 })
 export class AuthComponent implements OnInit {
 
-  @Input() authMode: 'Login' | 'Register' = 'Login';
+  @Input() authMode: 'login' | 'register' = 'login';
 
   constructor( private router: Router ) { }
 
@@ -33,11 +33,11 @@ export class AuthComponent implements OnInit {
   }
 
   isLoginMode() {
-    return this.authMode === 'Login';
+    return this.authMode === 'login';
   }
 
   isRegisterMode() {
-    return this.authMode === 'Register';
+    return this.authMode === 'register';
   }
 
 

diff --git a/frontend/src/app/register-form/register-form.component.html b/frontend/src/app/register-form/register-form.component.html
@@ -6,26 +6,32 @@
            name='email'
            [(ngModel)]="signUpUser.email"
            class="validate" />
+
+    <!-- Name field needs wired up (added to db?)-->
+    <label for="email">Name</label>
+    <input id="name"
+           type="text"
+           name='name' />
+
     <label for="password_create">Password</label>
     <input id="password_create"
            type="password"
            required
            name='password'
            [(ngModel)]="signUpUser.password"
            class="validate" />
-    <label for="password_confirmation">Password confirmation</label>
-    <input id="password_confirmation"
-           type="password"
-           required
-           name='password_confirmation'
-           [(ngModel)]="signUpUser.passwordConfirmation"
-           class="validate" />
 
-    <div class="usa-alert usa-alert-error" *ngIf="signUpUser.password != signUpUser.passwordConfirmation">
-        <div class="usa-alert-body">
-            <p class="usa-alert-text">Passwords must match</p>
-        </div>
+    <div [ngClass]="{'usa-input-error' : signUpUser.password != signUpUser.passwordConfirmation}">
+        <label for="password_confirmation">Password confirmation</label>
+        <input id="password_confirmation"
+               type="password"
+               required
+               name='password_confirmation'
+               [(ngModel)]="signUpUser.passwordConfirmation"
+               class="validate" />
+        <span class="usa-input-error-message" *ngIf="signUpUser.password != signUpUser.passwordConfirmation" role="alert">Passwords must match</span>
     </div>
+
     <input type="submit" 
            [disabled]="!(f.valid) || !(signUpUser.password == signUpUser.passwordConfirmation)" 
            value="Sign up" />

diff --git a/frontend/src/app/register-form/register-form.component.ts b/frontend/src/app/register-form/register-form.component.ts
@@ -1,5 +1,4 @@
-
-import {Component, OnInit, EventEmitter, Output} from '@angular/core';
+import {Component, OnInit, Output, EventEmitter} from '@angular/core';
 import {AuthService} from '../services/auth.service';
 
 @Component({
@@ -17,28 +16,24 @@ export class RegisterFormComponent implements OnInit {
 
   @Output() onFormResult = new EventEmitter<any>();
 
-  constructor(public authService: AuthService) { }
+  constructor(public authService: AuthService) {}
 
   ngOnInit() {}
 
-
   onSignUpSubmit() {
 
     this.authService.registerUser(this.signUpUser).subscribe(
-
-        (res) => {
-
+        res => {
           if (res.status === 200) {
             this.onFormResult.emit({signedUp: true, res});
           }
-
         },
-
-        (err) => {
-          console.log(err.json());
+        err => {
+          console.log('err:', err);
           this.onFormResult.emit({signedUp: false, err});
         }
     );
 
   }
+
 }
diff --git a/frontend/src/app/toolbar/toolbar.component.html b/frontend/src/app/toolbar/toolbar.component.html
@@ -27,7 +27,7 @@
     </nav>
 
     <div class="a2-profile center-align" *ngIf="(authService.userSignedIn$ | async)">
-        <img src="./../../../assets/images/avatar.png" class="circle img-50" alt="John Smith">
+        <img *ngIf="authTokenService.currentUserData" src="./../../../assets/images/avatar.png" class="circle img-50" alt="John Smith">
         <p *ngIf="authTokenService.currentUserData">
             <b>{{authTokenService.currentUserData.name}} Bob Smith</b>
             <br/><small>{{authTokenService.currentUserData.email}}</small>