forgot password

ng-seed/src/app/appoinment/business/dialog-box/dialog-box.component.ts

@@ -59,16 +59,19 @@ export class DialogBoxComponent implements OnInit {
     ),]),
     contactNo: new FormControl('', [Validators.required, Validators.maxLength(10)]),
     });
+    
     this.form.patchValue(this.local_data)
     }
+
     public myError = (controlName: string, errorName: string) =>{
       return this.form.controls[controlName].hasError(errorName);
-      }
+    }
-      submit(){
+
+    submit(){
         let tmp = this.form.value
         tmp.id = this.local_data.id
         this.dialogRef.close({event:this.action,data:tmp});
         console.log(this.form.value);
         console.log(this.action,this.local_data)
-      }
+    }
 }

ng-seed/src/app/session-services/session.service.ts

@@ -15,7 +15,12 @@ export class SessionService {
     console.log(params.email)
     return this._http.post<any>(this.apiUrl + "login",{'email':params.email,'password':params.password})
     // return this._http.post(this.apiUrl + 'login', {'email':params.email,'password':params.password})
-
+  }
-}
+  
+  getForgotToken(params): Observable<any> {
+    console.log(params.email)
+    return this._http.post<any>(this.apiUrl + "forget-password",params)
+    // return this._http.post(this.apiUrl + 'login', {'email':params.email,'password':params.password})
+  }
 
 }

ng-seed/src/app/session/forgot-password/forgot-password-component.html

@@ -7,12 +7,18 @@
                         <h2 class="base-border mat-text-warn mb-1">Forgot Password?</h2>
                         <i class="fa fa-lock fa-4x"></i>
                         <p>You can reset your password here.</p>
-                        <form #form="ngForm">
+                        <form [formGroup]="form" (ngSubmit)="submit()">
                             <div fxLayout="column" fxLayoutAlign="start stretch">
                                 <mat-form-field style="width: 100%">
-                                    <input matInput placeholder="Email" type="text" name="name" required>
+                                    <input matInput placeholder="Email" type="text" formControlName="email" required>
+                                    <mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
+                                        Please enter a valid email address
+                                     </mat-error>
+                                     <mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
+                                        Email is required
+                                     </mat-error>
                                 </mat-form-field>
-                                <button class="mat-blue" mat-raised-button>Submit</button>
+                                <button class="mat-blue" type="submit" mat-raised-button>Submit</button>
                             </div>
                         </form>
                     </div>

ng-seed/src/app/session/forgot-password/forgot-password.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit,ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import {Router} from "@angular/router";
+import { SessionService } from 'app/session-services/session.service';
 
 @Component({
    selector: 'ms-forgot-password',
@@ -11,10 +13,32 @@ export class ForgotPasswordComponent {
 	
 	email: string;
   password: string;
+  form: FormGroup;
+  forgotTokenEmail: any;
 
-  constructor(
+  constructor(private router: Router,public _ser:SessionService) { }
-    private router: Router
+
-  ) { }
+  ngOnInit() {
+    this.form = new FormGroup({    
+      email: new FormControl('',[Validators.required,Validators.email,Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$')]),
+    });
+  }
+
+  submit(){
+    console.log(this.form.value)   
+    const mailid = this.form['value'].email.split(/\s/).join('');    
+    let forgotMail = {'email':mailid}
+    console.log(forgotMail)
+    this._ser.getForgotToken(forgotMail).subscribe(res => {
+      console.log(res)
+      this.forgotTokenEmail = res
+      this.router.navigate(['authentication/reset-password'])
+    }, err => {
+     
+      //alert(err.message);
+    })
+    
+  }
 
   send() {
     this.router.navigate(['/']);

ng-seed/src/app/session/lockscreen/lockscreen-component.html

@@ -4,10 +4,10 @@
             <div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
                 <mat-card class="login-session">
                     <div class="text-center">
-                        <h2 class="base-border mat-text-warn mb-1">Session Expired</h2>
+                        <h2 class="base-border mat-text-warn mb-1">Reset Password</h2>
-                        <img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
+                        <!-- <img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
                         <h4><strong>Welcome back John</strong></h4>
-                        <p>Enter your password to continue</p>
+                        <p>Enter your password to continue</p> -->
                         <form #form="ngForm">
                             <div fxLayout="column" fxLayoutAlign="start stretch">
                                 <mat-form-field style="width: 100%" class="mb-1">

ng-seed/src/app/session/login/login-component.html

@@ -29,7 +29,7 @@
                                   </mat-form-field>
                                   <!-- <button class="mt-2 mb-1" [disabled]="!loginForm.valid" mat-raised-button color="primary" mat-button>Sign In</button> -->
                                   <button class="mt-2 mb-1"   mat-raised-button color="primary" mat-button>Sign In</button>
-                                <a class="mat-text-warn mb-0" (click)="openDialog()">Forgot password?</a>
+                                <a class="mat-text-warn mb-0" (click)="openForgot()">Forgot password?</a>
                                 <p class="mb-0">Don't have an account? <a [routerLink]="['/authentication/register']" class="mat-text-primary">Register Here</a></p>
                             </div>
                             <div>

ng-seed/src/app/session/login/login.component.ts

@@ -68,8 +68,9 @@ export class LoginComponent {
     });
   }
 
-  login() {
+  openForgot() {
-    // this.router.navigate(['/home']);
+    this.router.navigate(['/forgot-password']);
+    // this.router.navigate(['/home'])
   }
 	
 }

ng-seed/src/app/session/reset-password/reset-password.component.html

@@ -0,0 +1,32 @@
+<div class="relative">
+    <div class="form-bg">
+        <div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
+            <div fxLayout="column" fxFlex.xl="40" fxFlex.lg="40" fxFlex.md="50" fxFlex.sm="80" fxFlex.xs="90">
+                <mat-card class="login-session">
+                    <div class="text-center">
+                        <h2 class="base-border mat-text-warn mb-1">Reset Password</h2>
+                        <!-- <img src="assets/images/test4.jpg" class="rad-full forgot-img" alt="" width="100" height="100">
+                        <h4><strong>Welcome back John</strong></h4>
+                        <p>Enter your password to continue</p> -->
+                        <form [formGroup]="form" (ngSubmit)="submit()">
+                            <div fxLayout="column" fxLayoutAlign="start stretch">
+                                <mat-form-field style="width: 100%" class="mb-1">
+                                    <input matInput placeholder="New Password" type="password" formControlName="password" required>
+                                    <mat-error *ngIf="myError('password', 'required')">Name is required</mat-error>
+                                    <mat-error *ngIf="myError('password', 'maxlength')">Limit exceed</mat-error>
+                                </mat-form-field>
+                                <mat-form-field style="width: 100%" class="mb-1">
+                                    <input matInput placeholder="Confirm Password" type="password" formControlName="password2" required>
+                                    <mat-error *ngIf="myError('password2', 'required')">Name is required</mat-error>
+                                    <mat-error *ngIf="myError('password2', 'maxlength')">Limit exceed</mat-error>
+                                </mat-form-field>
+                                <button class="mat-blue" type="submit" mat-raised-button>Submit</button>
+                                <p class="mat-text-warn mb-0"><a href="#">Forgot password?</a></p>
+                            </div>
+                        </form>
+                    </div>
+                </mat-card>
+            </div>
+        </div>
+    </div>
+</div>

ng-seed/src/app/session/reset-password/reset-password.component.scss

@@ -0,0 +1,5 @@
+.silk-user-section{
+    .lockscreen-form{
+        background-color:#fff;
+    }
+    }

ng-seed/src/app/session/reset-password/reset-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetPasswordComponent } from './reset-password.component';
+
+describe('ResetPasswordComponent', () => {
+  let component: ResetPasswordComponent;
+  let fixture: ComponentFixture<ResetPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResetPasswordComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng-seed/src/app/session/reset-password/reset-password.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrls: ['./reset-password.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ResetPasswordComponent implements OnInit {
+  form: FormGroup;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.form = new FormGroup({    
+      password: new FormControl('',[Validators.required,Validators.maxLength(10)]),
+      password2: new FormControl('',[Validators.required,Validators.maxLength(10)]),
+    });
+  }
+   public myError = (controlName: string, errorName: string) =>{
+      return this.form.controls[controlName].hasError(errorName);
+    }
+
+  submit(){
+    console.log(this.form.value)  
+    return; 
+    // this._ser.getForgotToken(forgotMail).subscribe(res => {
+    //   console.log(res)
+    //   this.forgotTokenEmail = res     
+    // }, err => {
+     
+    //   //alert(err.message);
+    // })
+    
+  }
+
+}

ng-seed/src/app/session/session.module.ts

@@ -7,7 +7,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { LoginComponent } from './login/login.component';
@@ -18,6 +18,8 @@ import { LockScreenComponent } from './lockscreen/lockscreen.component';
 import { SessionRoutes } from './session.routing';
 import { OtpComponent } from './otp/otp.component';
 import { MatDialogModule } from '@angular/material/dialog';
+import { DemoMaterialModule } from 'app/shared/demo.module';
+import { ResetPasswordComponent } from './reset-password/reset-password.component';
 
 @NgModule({
   imports: [
@@ -34,8 +36,8 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatToolbarModule,
     FlexLayoutModule,
     MatDialogModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
-    
+    DemoMaterialModule
     
   ],
   declarations: [ 
@@ -44,6 +46,7 @@ import { MatDialogModule } from '@angular/material/dialog';
     ForgotPasswordComponent,
     LockScreenComponent,
     OtpComponent,
+    ResetPasswordComponent,
   ],
   exports:[
     OtpComponent,

ng-seed/src/app/session/session.routing.ts

@@ -5,6 +5,7 @@ import { RegisterComponent } from './register/register.component';
 import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
 import { LockScreenComponent } from './lockscreen/lockscreen.component';
 import { OtpComponent } from './otp/otp.component';
+import { ResetPasswordComponent } from './reset-password/reset-password.component';
 export const SessionRoutes: Routes = [{
   path: '',
   redirectTo: 'login',
@@ -26,6 +27,9 @@ export const SessionRoutes: Routes = [{
   }, {
     path: 'otp',
     component: OtpComponent
+  },{
+    path: 'reset-password',
+    component: ResetPasswordComponent
   }
 ]
 }];