signup component & page commit

src/app/commons/layouts/sidebar/menu-element.ts

@@ -77,7 +77,7 @@ export const menus = [
     {
         'name': 'Setting',
         'icon': '',
-        'link': '',
+        'link': '/auth/signin',
         'open': true,
     },
 ];

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

@@ -18,7 +18,7 @@
           <div *ngIf="formErrors.password" class="help is-danger">
               {{ formErrors.password }}
           </div>
-          <button mat-raised-button color="primary" type="submit" [disabled]="!signinForm.valid" (click)="login()">log in</button>
+          <button mat-raised-button color="primary" type="submit" [disabled]="!signinForm.valid" (click)="signin()">log in</button>
       </form>
   </mat-card-content>
 </mat-card>

src/app/packages/member/component/signin/signin.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 {MemberService} from '../../services/member.service';
 
 @Component({
   selector: 'of-member-signin',
@@ -17,7 +18,8 @@ export class SigninComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private memberService: MemberService
   ) { }
 
   ngOnInit() {
@@ -40,4 +42,9 @@ export class SigninComponent implements OnInit {
     });
 
   }
+
+  login() {
+    console.log('signin component login fnc');
+    this.memberService.signin();
+  }
 }

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

@@ -1,3 +1,24 @@
-<p>
-  signup works!
-</p>
+<mat-card>
+  <mat-card-title>Signup
+    <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()">
+      <mat-form-field class="full-width">
+        <input type="email" id="email" class="input" placeholder="Please enter your email"
+               formControlName="email" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.email" class="help is-danger">
+        {{ formErrors.email }}
+      </div>
+      <mat-form-field class="full-width">
+        <input type="password" id="password" class="input" placeholder="please  enter your password"
+               formControlName="password" required matInput>
+      </mat-form-field>
+      <div *ngIf="formErrors.password" class="help is-danger">
+        {{ formErrors.password }}
+      </div>
+      <button mat-raised-button color="primary" type="submit" [disabled]="!signupForm.valid" (click)="signup()">Signup</button>
+    </form>
+  </mat-card-content>
+</mat-card>

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

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'of-member-signup',
@@ -7,9 +9,40 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SignupComponent implements OnInit {
 
-  constructor() { }
+  signupForm: FormGroup;
+  formErrors = {
+    'email': '',
+    'password': '',
+    'pwConfirm': '',
+    'name': '',
+    'phone': '',
+    'company': ''
+  };
+
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder
+  ) { }
 
   ngOnInit() {
+    this.initForm();
+  }
+
+  initForm() {
+    this.signupForm = this.formBuilder.group({
+      'email': ['', [
+        Validators.required,
+        Validators.email
+      ]
+      ],
+      'password': ['', [
+        Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
+        Validators.minLength(6),
+        Validators.maxLength(25)
+      ]
+      ],
+    });
+
   }
 
 }

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

@@ -1,11 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SignupComponent } from './signup.component';
-
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
     CommonModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MaterialModule,
   ],
   declarations: [
     SignupComponent,

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

@@ -0,0 +1,37 @@
+$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;
+}

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

@@ -1 +1,13 @@
-<of-member-signup></of-member-signup>
+<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" style="background-image:url('../../../../../assets/images/login11.jpg');
+  margin-top: 10px;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover; ">
+  <div fxLayout="column" >
+    <div class=" mat-elevation-z4">
+      <of-member-signup></of-member-signup>
+    </div>
+  </div>
+</div>
+

src/app/pages/auth/signup/signup-page.component.scss

@@ -0,0 +1,9 @@
+.signup-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.signup-full-width {
+  width: 100%;
+}

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

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Form, FormBuilder, FormGroup, FormGroupDirective, FormControl, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
 
 @Component({
   selector: 'of-pages-auth-signup',
@@ -7,9 +10,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SignupPageComponent implements OnInit {
 
-  constructor() { }
+  signUpForm: FormGroup;
+  returnURL: string;
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+  ) { }
 
   ngOnInit() {
+    this.returnURL = this.activatedRoute.snapshot.queryParams['returnURL'] || '/';
   }
 
+  initForm() {
+  }
 }

src/app/pages/auth/signup/signup-page.module.ts

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common';
 import { SignupPageRoutingModule } from './signup-page-routing.module';
 import { SignupPageComponent } from './signup-page.component';
 import { MemberModule } from 'app/packages/member/member.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
   imports: [
     CommonModule,
     SignupPageRoutingModule,
-    MemberModule
+    MemberModule,
+    FlexLayoutModule
   ],
   declarations: [
     SignupPageComponent,