signup component & page commit

src/app/packages/member/component/signup/signup.component.html

@@ -1,9 +1,7 @@
 <mat-card>
-  <mat-card-title>Signup
+  <mat-card-title align="center">Signup</mat-card-title>
-    <a class="redirect" [routerLink]="['/auth/sigup']">Register an account</a>
-  </mat-card-title>
   <mat-card-content>
-    <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="signupForm" (ngSubmit)="login()">
+    <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="signupForm" (ngSubmit)="signup()">
       <mat-form-field class="full-width">
         <input type="email" id="email" class="input" placeholder="Please enter your email"
                formControlName="email" required matInput>
@@ -18,6 +16,36 @@
       <div *ngIf="formErrors.password" class="help is-danger">
         {{ formErrors.password }}
       </div>
+      <mat-form-field class="full-width">
+        <input type="password" id="pwConfirm" class="input" placeholder="please enter confirm password"
+               formControlName="pwConfirm" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.pwConfirm" class="help is-danger">
+        {{ formErrors.pwConfirm }}
+      </div>
+      <mat-form-field class="full-width">
+        <input type="text" id="name" class="input" placeholder="please  enter your name"
+               formControlName="name" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.name" class="help is-danger">
+        {{ formErrors.name }}
+      </div>
+      <mat-form-field class="full-width">
+        <input type="text" id="phone" class="input" placeholder="please  enter your phone"
+               formControlName="phone" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.phone" class="help is-danger">
+        {{ formErrors.phone }}
+      </div>
+
+      <mat-form-field class="full-width">
+        <input type="text" id="company" class="input" placeholder="please  enter your company name"
+               formControlName="company" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.company" class="help is-danger">
+        {{ formErrors.company }}
+      </div>
+
       <button mat-raised-button color="primary" type="submit" [disabled]="!signupForm.valid" (click)="signup()">Signup</button>
     </form>
   </mat-card-content>

src/app/packages/member/component/signup/signup.component.scss

@@ -0,0 +1,37 @@
+$gray-lighter: #eceeef !default;
+$image_path: "/assets/images/" !default;
+
+$prefix: 'signup';
+
+.#{$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;
+}

src/app/packages/member/component/signup/signup.component.ts

@@ -41,6 +41,24 @@ export class SignupComponent implements OnInit {
         Validators.maxLength(25)
       ]
       ],
+      'pwConfirm': ['', [
+        Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
+        Validators.minLength(6),
+        Validators.maxLength(25)
+      ]
+      ],
+      'name': ['', [
+        Validators.required
+      ]
+      ],
+      'phone': ['', [
+        Validators.required
+      ]
+      ],
+      'company': ['', [
+        Validators.required
+      ]
+      ],
     });
 
   }