ing

@overflow/member/component/member-reset-password.component.html

@@ -14,8 +14,8 @@
                                     <span class="md-inputfield">
                                         <input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
                                     </span>
-                                    <div *ngIf="formErrors.email" class="help is-danger">
+                                    <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
-                                        {{ formErrors.email }}
+                                      Invalid email
                                     </div>
                                 </div>
 

@overflow/member/component/member-reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import {FormGroup, FormBuilder, Validators, AbstractControl} from '@angular/forms';
 
 @Component({
   selector: 'of-member-reset-password',
@@ -9,14 +9,11 @@ export class MemberResetPasswordComponent implements OnInit {
   @Output() resetPassword = new EventEmitter<string>();
 
   resetPasswordForm: FormGroup;
-  formErrors = {
+  email: AbstractControl;
-    'email': ''
-  };
 
   constructor(
     private formBuilder: FormBuilder
   ) {
-
   }
 
   ngOnInit() {
@@ -27,6 +24,8 @@ export class MemberResetPasswordComponent implements OnInit {
       ]
       ]
     });
+
+    this.email = this.resetPasswordForm.controls['email'];
   }
 
   resetPasswordFormSubmit() {

@overflow/member/component/member-signin.component.html

@@ -9,12 +9,32 @@
                         </div>
                         <div class="ui-g-12">
                             <span class="md-inputfield">
-                                <input type="email" id="email" autocomplete="off" placeholder="email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                                <input
+                                  type="email"
+                                  id="email"
+                                  autocomplete="off"
+                                  placeholder="email"
+                                  formControlName="email"
+                                  required
+                                  class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                              <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
+                                Invalid email
+                              </div>
                             </span>
                         </div>
                         <div class="ui-g-12">
                             <span class="md-inputfield">
-                                <input type="password" id="password" autocomplete="off" placeholder="password" formControlName="password" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                                <input
+                                  type="password"
+                                  id="password"
+                                  autocomplete="off"
+                                  placeholder="password"
+                                  formControlName="password"
+                                  required
+                                  class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                              <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
+                                  Required Password
+                              </div>
                             </span>
                         </div>
                         <div class="ui-g-12">
@@ -22,13 +42,13 @@
                                 <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                                 <span class="ui-button-text ui-c">Sign In</span>
                             </button>
-                            <a href="javascript:void(0)" (click)="resetPassword.emit()">Forgot Password</a>
+                            <a href="#" (click)="onResetPassword()">Forgot Password</a>
                             |
-                            <a href="javascript:void(0)" (click)="signup.emit()">Sign Up</a>
+                            <a href="#" (click)="onSignup()">Sign Up</a>
                         </div>
                     </div>
                 </div>
             </td>
         </tr>
     </table>
-</form>
+</form>

@overflow/member/component/member-signin.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import {FormGroup, FormBuilder, Validators, AbstractControl} from '@angular/forms';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Store, select } from '@ngrx/store';
 import { Member } from '@overflow/commons-typescript/model/member';
 
 @Component({
@@ -11,17 +9,17 @@ import { Member } from '@overflow/commons-typescript/model/member';
 export class MemberSigninComponent implements OnInit {
   @Input() member: Member;
   @Input() signinError: string;
+
   @Output() resetPassword = new EventEmitter();
   @Output() signup = new EventEmitter();
   @Output() signin = new EventEmitter<{email: string, password: string}>();
 
   errorMessage: string | null;
 
+  email: AbstractControl;
+  password: AbstractControl;
+
   signinForm: FormGroup;
-  formErrors = {
-    'email': '',
-    'password': ''
-  };
 
   constructor(
     private formBuilder: FormBuilder,
@@ -44,12 +42,12 @@ export class MemberSigninComponent implements OnInit {
       'password': [
         '',
         [
-          Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
+          Validators.required
-          Validators.minLength(6),
-          Validators.maxLength(25)
         ]
       ],
     });
+    this.email = this.signinForm.controls['email'];
+    this.password = this.signinForm.controls['password'];
   }
 
   signinFormSubmit() {
@@ -57,4 +55,11 @@ export class MemberSigninComponent implements OnInit {
     this.signin.emit(formValue);
   }
 
+  onResetPassword() {
+    this.resetPassword.emit();
+  }
+
+  onSignup() {
+    this.signup.emit();
+  }
 }

@overflow/member/container/member-signin-container.component.html

@@ -1,5 +1,7 @@
 <of-member-signin
   [member]="member$ | async"
   (signin)="onSignin($event)"
+  (signup)="onSignup()"
+  (resetPassword)="onResetPassword()"
 >
 </of-member-signin>

@overflow/member/container/member-signin-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
@@ -13,6 +13,10 @@ import { Member } from '@overflow/commons-typescript/model/member';
 })
 export class MemberSigninContainerComponent implements OnInit {
   @Input() returnURL: string;
+
+  @Output() resetPassword = new EventEmitter();
+  @Output() signup = new EventEmitter();
+
   member$: Observable<Member>;
   pending$: Observable<boolean>;
   error$: Observable<any>;
@@ -31,4 +35,12 @@ export class MemberSigninContainerComponent implements OnInit {
   onSignin(info: {email: string, password: string}) {
     this.store.dispatch(new MemberEntityStore.Signin({...info, returnURL: this.returnURL}));
   }
+
+  onSignup() {
+    this.signup.emit();
+  }
+
+  onResetPassword() {
+    this.resetPassword.emit();
+  }
 }

src/app/pages/auth/signin/signin-page.component.html

@@ -1,6 +1,6 @@
 <div class="ui-g">
   <div class="ui-g-12 ui-md-9 ui-lg-7">
-    <of-member-signin-container></of-member-signin-container>
+    <of-member-signin-container (signup)="onSignup()" (resetPassword)="onResetPassword()"></of-member-signin-container>
   </div>
   <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
     <table class="login-table">
@@ -24,4 +24,4 @@
       </tr>
     </table>
   </div>
-</div>
+</div>

src/app/pages/auth/signin/signin-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 
 @Component({
@@ -11,10 +11,19 @@ export class SigninPageComponent implements OnInit {
   returnURL: string;
 
   constructor(
+    private router: Router,
     private activatedRoute: ActivatedRoute,
   ) { }
 
   ngOnInit() {
     this.returnURL = this.activatedRoute.snapshot.queryParams['returnURL'] || '/';
   }
+
+  onResetPassword() {
+    this.router.navigate(['/auth/reset-password']);
+  }
+
+  onSignup() {
+    this.router.navigate(['/auth/signup']);
+  }
 }

src/environments/environment.ts

@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  restBaseURL: 'http://192.168.1.101:19080/webapp',
+  restBaseURL: 'http://192.168.1.103:19080/webapp',
   webappRPCConfig: {
     url: 'ws://192.168.1.101:19090/webapp',
     reconnectInterval: 5000,