reset-password html component modify

src/app/packages/member/component/reset-password/reset-password.component.html

@@ -1,3 +1,15 @@
-<p>
+<mat-card>
-  reset-password works!
+  <mat-card-title> Reset Password </mat-card-title>
-</p>
+  <mat-card-content>
+    <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="resetPassword" (ngSubmit)="sendResetPassword()">
+      <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>
+      <button mat-raised-button color="accent" type="submit"  (click)="sendResetPassword()">Reset Password</button>
+    </form>
+  </mat-card-content>
+</mat-card>

src/app/packages/member/component/reset-password/reset-password.component.scss

@@ -0,0 +1,40 @@
+$gray-lighter: #eceeef !default;
+$image_path: "/assets/images/" !default;
+
+$prefix: 'reset-password';
+
+.#{$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 {
+
+}
+
+.button {
+  width:300px;
+}
+.redirect {
+  font-size: 14px;
+  margin-left: 10px;
+  color: #00AAAA;
+}

src/app/packages/member/component/reset-password/reset-password.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-reset-password',
@@ -7,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ResetPasswordComponent implements OnInit {
 
-  constructor() { }
+  resetPassword: FormGroup;
+  formErrors = {
+    'email': ''
+  };
+
+  constructor(
+    private router: Router,
+    private formBuilder: FormBuilder,) { }
 
   ngOnInit() {
+    this.resetPassword = this.formBuilder.group({
+      'email': ['', [
+        Validators.required,
+        Validators.email
+      ]
+      ]
+    });
   }
 
+  sendResetPassword() {
+
+  }
 }