From 5809b605b1ff67fc6e279d85d1896b8c4e969506 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Tue, 10 Apr 2018 16:30:05 +0900
Subject: [PATCH 1/2] signup ing

---
 .../component/signin/signin.component.html    |  2 -
 .../component/signin/signin.component.scss    | 37 ----------------
 .../component/signup/signup.component.html    | 42 ++++++++++++++++++-
 .../component/signup/signup.component.ts      | 22 +++++++---
 src/packages/member/member.module.ts          |  2 +
 5 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/src/packages/member/component/signin/signin.component.html b/src/packages/member/component/signin/signin.component.html
index 842018b..9fe1fb3 100644
--- a/src/packages/member/component/signin/signin.component.html
+++ b/src/packages/member/component/signin/signin.component.html
@@ -29,8 +29,6 @@
                     <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
                     <span class="ui-button-text ui-c">Sign Up</span>
                 </button>
-
-
             </div>
         </div>
     </div>
diff --git a/src/packages/member/component/signin/signin.component.scss b/src/packages/member/component/signin/signin.component.scss
index 067d3f5..e69de29 100644
--- a/src/packages/member/component/signin/signin.component.scss
+++ b/src/packages/member/component/signin/signin.component.scss
@@ -1,37 +0,0 @@
-$gray-lighter: #eceeef !default;
-$image_path: "/assets/images/" !default;
-
-$prefix: 'sigin';
-
-.#{$prefix} {
-
-  &-conainer {
-    min-height: 100%;
-    background-size: cover;
-    padding: 100px;
-  }
-
-  &-main {
-    position: relative;
-    margin: 0 auto;
-    width: 500px;
-  }
-}
-
-.full-width {
-  width: 100%;
-}
-
-.help {
-
-}
-
-.is-danger {
-
-}
-
-.redirect {
-  font-size: 14px;
-  margin-left: 10px;
-  color: #00AAAA;
-}
\ No newline at end of file
diff --git a/src/packages/member/component/signup/signup.component.html b/src/packages/member/component/signup/signup.component.html
index 095c6ba..d5b0b46 100644
--- a/src/packages/member/component/signup/signup.component.html
+++ b/src/packages/member/component/signup/signup.component.html
@@ -1 +1,41 @@
-<div>signup</div>
\ No newline at end of file
+<form [formGroup]="signupForm" (ngSubmit)="signup()">
+    <div class="card login-panel ui-fluid">
+        <div class="ui-g">
+            <div class="ui-g-12">
+                <img src="assets/layout/images/logo-ultima.svg">
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required>
+                    <div *ngIf="signupForm.get('email').touched && signupForm.get('email').errors" class="ui-message ui-messages-error ui-corner-all">
+                        Not valid email
+                    </div>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
+                        required #passwsord="ngModel">
+                    <div #password *ngIf="signupForm.get('password').touched && signupForm.get('password').errors" class="ui-message ui-messages-error ui-corner-all">
+                        Not valid password
+                    </div>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
+                        required validateEqual="password" #confirmPassword="ngModel">
+                    <div *ngIf="pwConfirm.valid || (confirmPassword.pristine && !f.submitted)" class="ui-message ui-messages-error ui-corner-all">
+                        Not matched password
+                    </div>
+                </span>
+            </div>
+            <div class="ui-g-12">
+                <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                    <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
+                    <span class="ui-button-text ui-c">Sign Up</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/packages/member/component/signup/signup.component.ts b/src/packages/member/component/signup/signup.component.ts
index 1421ef7..d5c82b1 100644
--- a/src/packages/member/component/signup/signup.component.ts
+++ b/src/packages/member/component/signup/signup.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
+import { Member } from '@loafer/core/reflect';
 
 @Component({
   selector: 'of-member-signup',
@@ -18,6 +19,7 @@ export class SignupComponent implements OnInit {
     'phone': '',
     'company': ''
   };
+  member: Member;
 
   constructor(
     private router: Router,
@@ -36,15 +38,14 @@ export class SignupComponent implements OnInit {
       ]
       ],
       'password': ['', [
+        Validators.required,
         Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
         Validators.minLength(6),
-        Validators.maxLength(25)
+        Validators.maxLength(25),
       ]
       ],
       'pwConfirm': ['', [
-        Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
-        Validators.minLength(6),
-        Validators.maxLength(25)
+        Validators.required,
       ]
       ],
       'name': ['', [
@@ -59,8 +60,17 @@ export class SignupComponent implements OnInit {
         Validators.required
       ]
       ],
-    });
+    }, this.pwdMatchValidator);
+  }
 
+  pwdMatchValidator(frm: FormGroup) {
+    return frm.get('password').value === frm.get('pwConfirm').value
+       ? null : {'mismatch': true};
+ }
+
+  signup() {
+    const signinValue = Object.assign({}, this.signupForm.value);
+    console.log(signinValue);
   }
 
 }
diff --git a/src/packages/member/member.module.ts b/src/packages/member/member.module.ts
index b832843..0dd42fc 100644
--- a/src/packages/member/member.module.ts
+++ b/src/packages/member/member.module.ts
@@ -7,6 +7,7 @@ import { MemberRESTModule } from './member-rest.module';
 
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
+import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 
 @NgModule({
   imports: [
@@ -16,6 +17,7 @@ import { SERVICES } from './service';
     ReactiveFormsModule,
     MemberStoreModule,
     MemberRESTModule,
+    PrimeNGModules
   ],
   declarations: [
     COMPONENTS,

From d5140adfca639bdb4d2cf3d79e6f9fccf8c3c5cf Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Tue, 10 Apr 2018 19:19:41 +0900
Subject: [PATCH 2/2] signup

---
 .../component/signup/signup.component.html    | 42 ++++++++++++---
 .../component/signup/signup.component.ts      | 53 ++++++++++++-------
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/packages/member/component/signup/signup.component.html b/src/packages/member/component/signup/signup.component.html
index d5b0b46..9fff794 100644
--- a/src/packages/member/component/signup/signup.component.html
+++ b/src/packages/member/component/signup/signup.component.html
@@ -7,29 +7,57 @@
             <div class="ui-g-12">
                 <span class="md-inputfield">
                     <input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required>
-                    <div *ngIf="signupForm.get('email').touched && signupForm.get('email').errors" class="ui-message ui-messages-error ui-corner-all">
-                        Not valid email
+                    <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 id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
-                        required #passwsord="ngModel">
-                    <div #password *ngIf="signupForm.get('password').touched && signupForm.get('password').errors" class="ui-message ui-messages-error ui-corner-all">
-                        Not valid password
+                        required>
+                    <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
+                        Invalid password
                     </div>
                 </span>
             </div>
             <div class="ui-g-12">
                 <span class="md-inputfield">
                     <input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
-                        required validateEqual="password" #confirmPassword="ngModel">
-                    <div *ngIf="pwConfirm.valid || (confirmPassword.pristine && !f.submitted)" class="ui-message ui-messages-error ui-corner-all">
+                        required>
+                    <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
                         Not matched password
                     </div>
                 </span>
             </div>
+
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
+                    <div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
+                        Invalid Name
+                    </div>
+                </span>
+            </div>
+
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
+                    <div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
+                        Invalid phone number
+                    </div>
+                </span>
+            </div>
+
+            <div class="ui-g-12">
+                <span class="md-inputfield">
+                    <input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
+                    <div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
+                        Invalid company name
+                    </div>
+                </span>
+            </div>
+
             <div class="ui-g-12">
                 <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                     <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
diff --git a/src/packages/member/component/signup/signup.component.ts b/src/packages/member/component/signup/signup.component.ts
index d5c82b1..05b90b0 100644
--- a/src/packages/member/component/signup/signup.component.ts
+++ b/src/packages/member/component/signup/signup.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
-import { Member } from '@loafer/core/reflect';
+import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
+import { Member } from '../../model';
 
 @Component({
   selector: 'of-member-signup',
@@ -11,15 +11,12 @@ import { Member } from '@loafer/core/reflect';
 export class SignupComponent implements OnInit {
 
   signupForm: FormGroup;
-  formErrors = {
-    'email': '',
-    'password': '',
-    'pwConfirm': '',
-    'name': '',
-    'phone': '',
-    'company': ''
-  };
-  member: Member;
+  email: AbstractControl;
+  password: AbstractControl;
+  pwConfirm: AbstractControl;
+  name: AbstractControl;
+  phone: AbstractControl;
+  company: AbstractControl;
 
   constructor(
     private router: Router,
@@ -45,7 +42,9 @@ export class SignupComponent implements OnInit {
       ]
       ],
       'pwConfirm': ['', [
-        Validators.required,
+        Validators.compose([
+          Validators.required, this.pwMatchValidator
+        ])
       ]
       ],
       'name': ['', [
@@ -60,17 +59,35 @@ export class SignupComponent implements OnInit {
         Validators.required
       ]
       ],
-    }, this.pwdMatchValidator);
+    });
+    this.email = this.signupForm.controls['email'];
+    this.password = this.signupForm.controls['password'];
+    this.pwConfirm = this.signupForm.controls['pwConfirm'];
+    this.name = this.signupForm.controls['name'];
+    this.phone = this.signupForm.controls['phone'];
+    this.company = this.signupForm.controls['company'];
   }
 
-  pwdMatchValidator(frm: FormGroup) {
-    return frm.get('password').value === frm.get('pwConfirm').value
-       ? null : {'mismatch': true};
- }
+  pwMatchValidator(control: FormControl): { [s: string]: boolean } {
+    let pw;
+    if (control.parent) {
+      pw = control.parent.controls['password'].value;
+    }
+    if (control.value !== pw) {
+      return { notMatched: true };
+    }
+  }
 
   signup() {
     const signinValue = Object.assign({}, this.signupForm.value);
-    console.log(signinValue);
+    const member: Member = {
+      email: signinValue.email,
+      password: signinValue.password,
+      name: signinValue.name,
+      phone: signinValue.phone,
+      companyName: signinValue.company,
+    };
+    console.log(member);
   }
 
 }