Merge branch 'master' of https://github.com/microting/eform-angular-frontend

Author: renemadsen

eFormAPI/eFormAPI/Controllers/AccountController.cs

@@ -144,7 +144,7 @@ public async Task<OperationResult> ForgotPassword(ForgotPasswordModel model)
                 }
                 var code = await UserManager.GeneratePasswordResetTokenAsync(user.Id);
                 var link = ConfigurationManager.AppSettings["app:siteLink"];
-                link = $"{link}/login/restore-password?userId={user.Id}&code={code}";
+                link = $"{link}/restore-password-confirmation?userId={user.Id}&code={code}";
                 await UserManager.SendEmailAsync(user.Id, "Reset Password",
                     "Please reset your password by clicking <a href=\"" + link + "\">here</a>");
                 return new OperationResult(true);

eform-client/src/app/common/services/base.service.ts

@@ -124,7 +124,7 @@ export class BaseService {
 
   private logOutWhenTokenFalse() {
     localStorage.clear();
-    this.router.navigate(['/auth/login']).then();
+    this.router.navigate(['/auth']).then();
   }
 
 

eform-client/src/app/modules/auth/auth.module.ts

@@ -10,7 +10,8 @@ import {
   LoginComponent,
   ResetAdminPasswordComponent,
   RestorePasswordComponent, SignOutComponent,
-  AuthComponent
+  AuthComponent,
+  RestorePasswordConfirmationComponent
 } from './components';
 
 @NgModule({
@@ -29,7 +30,8 @@ import {
     GoogleAuthenticatorComponent,
     ResetAdminPasswordComponent,
     SignOutComponent,
-    AuthComponent
+    AuthComponent,
+    RestorePasswordConfirmationComponent
   ]
 })
 export class AuthModule {

eform-client/src/app/modules/auth/auth.routing.ts

@@ -4,7 +4,7 @@ import {
   LoginComponent,
   RestorePasswordComponent,
   GoogleAuthenticatorComponent,
-  ResetAdminPasswordComponent, SignOutComponent, AuthComponent
+  ResetAdminPasswordComponent, SignOutComponent, AuthComponent, RestorePasswordConfirmationComponent
 } from './components';
 
 const routes: Routes = [
@@ -23,6 +23,10 @@ const routes: Routes = [
         path: 'restore-password',
         component: RestorePasswordComponent
       },
+      {
+        path: 'restore-password-confirmation',
+        component: RestorePasswordConfirmationComponent
+      },
       {
         path: 'reset-admin-password',
         component: ResetAdminPasswordComponent

eform-client/src/app/modules/auth/components/auth/restore-password-confirmation/restore-password-confirmation.component.html

@@ -0,0 +1,35 @@
+<div class="mb-2">
+    <div class="md-form">
+      <i class="material-icons prefix">
+        vpn_key
+      </i>
+      <input mdbInputDirective [mdbValidate]="false"
+             type="password" [(ngModel)]="submitRestoreModel.password"
+             id="newPassword" name="newPassword" class="form-control">
+      <label for="newPassword">{{'New Password' | translate}}</label>
+    </div>
+    <div class="md-form">
+      <i class="material-icons prefix">
+        vpn_key
+      </i>
+      <input mdbInputDirective [mdbValidate]="false"
+             type="password" id="newPasswordConfirmation"
+             [(ngModel)]="submitRestoreModel.confirmPassword"
+             name="newPasswordConfirmation" class="form-control">
+      <label for="newPasswordConfirmation">{{'Confirm Password' | translate}}</label>
+    </div>
+
+  <button mdbWavesEffect type="button" class="btn btn-success btn-lg btn-block"
+          [disabled]="!submitRestoreModel.password || !submitRestoreModel.confirmPassword"
+          (click)="submitRestoreConfirmationForm()">
+    {{'Update Password' | translate}}
+  </button>
+
+</div>
+<div class="d-flex flex-column">
+  <div class="p-0">
+    <a class="link-primary" [routerLink]="['/auth']">< {{'Back to login' | translate}}</a>
+  </div>
+</div>
+
+<eform-spinner [spinnerVisibility]="spinnerStatus"></eform-spinner>

eform-client/src/app/modules/auth/components/auth/restore-password-confirmation/restore-password-confirmation.component.ts

@@ -0,0 +1,39 @@
+import {Component, OnInit} from '@angular/core';
+import {AbstractControl, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ToastrService} from 'ngx-toastr';
+import {PasswordRestoreModel} from 'src/app/common/models/auth';
+import {AppSettingsService, AuthService} from 'src/app/common/services';
+
+@Component({
+  selector: 'app-restore-password-confirmation',
+  templateUrl: './restore-password-confirmation.component.html'
+})
+export class RestorePasswordConfirmationComponent implements OnInit{
+  submitRestoreModel: PasswordRestoreModel = new PasswordRestoreModel();
+  spinnerStatus = false;
+
+  constructor(private router: Router,
+              private authService: AuthService,
+              private settingsService: AppSettingsService,
+              private fb: FormBuilder,
+              private toastrService: ToastrService,
+              private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.submitRestoreModel.userId = params['userId'];
+      this.submitRestoreModel.code = params['code'];
+    });
+  }
+
+  submitRestoreConfirmationForm(): void {
+    this.authService.restorePassword(this.submitRestoreModel).subscribe((result) => {
+        if (result && result.success) {
+          this.router.navigate(['']);
+          this.toastrService.success('Password set successfully');
+        }
+      }
+    );
+  }
+}

eform-client/src/app/modules/auth/components/auth/restore-password/restore-password.component.html

@@ -4,7 +4,8 @@
       <i class="material-icons prefix">
         mail
       </i>
-      <input mdbInputDirective type="text" id="email" name="email" class="form-control">
+      <input mdbInputDirective [mdbValidate]="false"
+             formControlName="email" type="text" id="email" name="email" class="form-control">
       <label for="email">{{'Email' | translate}}</label>
     </div>
   </form>

eform-client/src/app/modules/auth/components/index.ts

@@ -1,4 +1,5 @@
 export * from './auth/restore-password/restore-password.component';
+export * from './auth/restore-password-confirmation/restore-password-confirmation.component';
 export * from './auth/login/login.component';
 export * from './google-authenticator/google-authenticator.component';
 export * from './auth/reset-admin-password/reset-admin-password.component';