Password reset finish

ui/src/app/account/account.module.ts

@@ -8,7 +8,8 @@ import { PasswordResetInitComponent } from './password/password-reset-init.compo
 import { SettingsComponent } from './settings/settings.component'
 import { SharedModule } from '../shared/shared.module'
 import { PasswordComponent } from './password/password.component'
-import { PasswordStrengthComponent } from './password/password-strength.component'
+import { PasswordStrengthComponent } from './password/password-strength.component';
+import { PasswordResetFinishComponent } from './password/password-reset-finish.component'
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { PasswordStrengthComponent } from './password/password-strength.componen
     SettingsComponent,
     PasswordComponent,
     PasswordStrengthComponent,
+    PasswordResetFinishComponent,
   ],
   imports: [SharedModule, CommonModule, ReactiveFormsModule, RouterModule.forChild(routes)],
 })

ui/src/app/account/account.route.ts

@@ -4,6 +4,7 @@ import { PasswordResetInitComponent } from './password/password-reset-init.compo
 import { SettingsComponent } from './settings/settings.component'
 import { AuthGuard } from './auth.guard'
 import { PasswordComponent } from './password/password.component'
+import { PasswordResetFinishComponent } from './password/password-reset-finish.component'
 
 export const routes: Routes = [
   {
@@ -18,6 +19,14 @@ export const routes: Routes = [
       pageTitle: 'global.menu.account.password.string',
     },
   },
+  {
+    path: 'reset/finish',
+    component: PasswordResetFinishComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'global.menu.account.password.string'
+    }
+  },
   {
     path: 'settings',
     component: SettingsComponent,

ui/src/app/account/model/key-validation-result.ts

@@ -0,0 +1,14 @@
+export interface IKeyValidationResult {
+  expiredKey: boolean
+  invalidKey: boolean
+}
+
+export class KeyValidationResult implements IKeyValidationResult {
+  expiredKey: boolean
+  invalidKey: boolean
+
+  constructor(expiredKey: boolean, invalidKey: boolean) {
+    this.expiredKey = expiredKey
+    this.invalidKey = invalidKey
+  }
+}

ui/src/app/account/model/resend-activation-email-result.ts

@@ -0,0 +1,11 @@
+export interface IResendActivationEmailResult {
+  resent: boolean
+}
+
+export class ResendActivationEmailResult implements IResendActivationEmailResult {
+  resent: boolean
+
+  constructor(resent: boolean) {
+    this.resent = resent
+  }
+}

ui/src/app/account/password/password-reset-finish.component.html

@@ -0,0 +1,166 @@
+<div class="container">
+  <div class="row">
+    <div class="col-md-12">
+      <h1 i18n="@@reset.finish.title.string">Reset password</h1>
+
+      <div class="alert alert-danger" i18n="@@reset.finish.messages.keymissing.string" *ngIf="keyMissing">
+        <strong>The activation key is missing.</strong>
+      </div>
+
+      <div class="alert alert-danger" i18n="@@reset.finish.messages.keyinvalid.string" *ngIf="invalidKey">
+        <strong>This activation key is invalid.</strong>
+      </div>
+
+      <div class="alert alert-danger" i18n="@@reset.finish.messages.keyexpired.string" *ngIf="expiredKey">
+        <strong>This activation has expired.</strong>
+      </div>
+      <div *ngIf="expiredKey">
+        <p>
+          <span i18n="@@reset.finish.messages.keyexpired.paragraph1.string"
+            >ORCID Member Portal activation links are only valid for 24 hours. It looks like this link has
+            expired.</span
+          >
+        </p>
+        <p>
+          <span *ngIf="activationEmailResent" i18n="@@reset.finish.messages.keyexpired.paragraph2.string"
+            >To make sure you can activate your Member Portal account we have sent a new activation link to your
+            registered email address.</span
+          >
+        </p>
+        <p>
+          <span *ngIf="activationEmailResent" i18n="@@reset.finish.messages.keyexpired.paragraph3.string"
+            >If you are still having problems activating your account or have not received your new activation link
+            please contact our support team please contact us at membership&#64;orcid.org.</span
+          >
+        </p>
+      </div>
+
+      <div class="alert alert-warning" *ngIf="!success && !keyMissing && !expiredKey && !invalidKey">
+        <p i18n="@@reset.finish.messages.info.string">Choose a new password</p>
+      </div>
+
+      <div class="alert alert-danger" *ngIf="error">
+        <p i18n="@@reset.finish.messages.error.string">
+          Your password couldn't be reset. Remember a password request is only valid for 24 hours.
+        </p>
+      </div>
+
+      <p class="alert alert-success" *ngIf="success">
+        <span i18n="@@reset.finish.messages.success.string"
+          ><strong>Your password has been reset.</strong> Please
+        </span>
+        <a
+          class="alert-link"
+          tabindex="0"
+          (click)="navigateToLoginPage()"
+          (keydown.enter)="navigateToLoginPage()"
+          i18n="@@global.messages.info.authenticated.link.string"
+          >sign in</a
+        >.
+      </p>
+
+      <div class="alert alert-danger" *ngIf="doNotMatch" i18n="@@global.messages.error.dontmatch.string">
+        The password and its confirmation do not match!
+      </div>
+
+      <div *ngIf="!keyMissing && showPasswordForm">
+        <form *ngIf="!success" name="form" role="form" (ngSubmit)="finishReset()" [formGroup]="passwordForm">
+          <div class="form-group">
+            <label class="form-control-label" for="password" i18n="@@global.form.newpassword.label.string"
+              >New password</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="password"
+              name="password"
+              placeholder="New password"
+              i18n-placeholder="@@global.form.newpassword.placeholder.string"
+              formControlName="newPassword"
+            />
+            <div
+              *ngIf="
+                passwordForm.get('newPassword')?.['invalid'] &&
+                (passwordForm.get('newPassword')?.['dirty'] || passwordForm.get('newPassword')?.['touched'])
+              "
+            >
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('newPassword')?.errors)!['required']"
+                i18n="@@global.messages.validate.newpassword.required.string"
+              >
+                Your password is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('newPassword')?.errors)!['minlength']"
+                i18n="@@global.messages.validate.newpassword.minlength.string"
+              >
+                Your password is required to be at least 4 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('newPassword')?.errors)!['maxlength']"
+                i18n="@@global.messages.validate.newpassword.maxlength.string"
+              >
+                Your password cannot be longer than 50 characters.
+              </small>
+            </div>
+            <app-password-strength [passwordToCheck]="passwordForm.get('newPassword')?.value"></app-password-strength>
+          </div>
+
+          <div class="form-group">
+            <label class="form-control-label" for="confirmPassword" i18n="@@global.form.confirmpassword.label.string"
+              >New password confirmation</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="confirmPassword"
+              name="confirmPassword"
+              placeholder="Confirm the new password"
+              i18n-placeholder="@@global.form.confirmpassword.placeholder.string"
+              formControlName="confirmPassword"
+            />
+            <div
+              *ngIf="
+                passwordForm.get('confirmPassword')?.['invalid'] &&
+                (passwordForm.get('confirmPassword')?.['dirty'] || passwordForm.get('confirmPassword')?.['touched'])
+              "
+            >
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('confirmPassword')?.errors)!['required']"
+                i18n="@@global.messages.validate.confirmpassword.required.string"
+              >
+                Your password confirmation is required.
+              </small>
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('confirmPassword')?.errors)!['minlength']"
+                i18n="@@global.messages.validate.confirmpassword.minlength.string"
+              >
+                Your password confirmation is required to be at least 4 characters.
+              </small>
+              <small
+                class="form-text text-danger"
+                *ngIf="(passwordForm.get('confirmPassword')?.errors)!['maxlength']"
+                i18n="@@global.messages.validate.confirmpassword.maxlength.string"
+              >
+                Your password confirmation cannot be longer than 50 characters.
+              </small>
+            </div>
+          </div>
+          <button
+            type="submit"
+            [disabled]="passwordForm.invalid"
+            class="btn btn-primary"
+            i18n="@@reset.finish.form.button.string"
+          >
+            Reset Password
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

ui/src/app/account/password/password-reset-finish.component.spec.ts

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordResetFinishComponent } from './password-reset-finish.component';
+import { AppModule } from 'src/app/app.module';
+import { PasswordService } from '../service/password.service';
+import { of, throwError } from 'rxjs';
+
+describe('PasswordResetFinishComponent', () => {
+  let component: PasswordResetFinishComponent;
+  let fixture: ComponentFixture<PasswordResetFinishComponent>;
+  let service: PasswordService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppModule],
+      declarations: [PasswordResetFinishComponent]
+    });
+    fixture = TestBed.createComponent(PasswordResetFinishComponent);
+    service = fixture.debugElement.injector.get(PasswordService)
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('password should save successfully', () => {
+    spyOn(service, 'savePassword').and.returnValue(of(true))
+    component.finishReset();
+    expect(component.success).toEqual('OK')
+  });
+
+  it('password save should fail', () => {
+    spyOn(service, 'savePassword').and.returnValue(throwError(() => new Error('error')))
+    component.finishReset();
+    expect(component.error).toEqual('ERROR')
+    expect(component.success).toBeFalsy();
+  });
+});

ui/src/app/account/password/password-reset-finish.component.ts

@@ -0,0 +1,82 @@
+import { PasswordService } from '../service/password.service'
+import { Component, OnInit, AfterViewInit, Renderer2, ElementRef } from '@angular/core'
+import { FormBuilder, FormGroup, Validators } from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+
+
+@Component({
+  selector: 'app-password-reset-finish',
+  templateUrl: './password-reset-finish.component.html',
+})
+export class PasswordResetFinishComponent implements OnInit, AfterViewInit {
+  doNotMatch: string | undefined
+  error: string | undefined
+  success: string | undefined
+  key: string | undefined
+  invalidKey = false
+  keyMissing = false
+  expiredKey = false
+  activationEmailResent = false
+  showPasswordForm = false
+
+  passwordForm = this.fb.group({
+    newPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]],
+  })
+
+  constructor(
+    private passwordService: PasswordService,
+    private route: ActivatedRoute,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private fb: FormBuilder,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.subscribe((params) => {
+      this.key = params['key']
+    })
+    this.keyMissing = !this.key
+    this.passwordService.validateKey({ key: this.key }).subscribe((res) => {
+      this.expiredKey = res.expiredKey
+      this.invalidKey = res.invalidKey
+      this.showPasswordForm = !this.invalidKey && !this.expiredKey
+      if (this.expiredKey) {
+        this.passwordService.resendActivationEmail({ key: this.key }).subscribe((result) => {
+          this.activationEmailResent = result.resent
+        })
+      }
+    })
+  }
+
+  ngAfterViewInit() {
+    if (this.elementRef.nativeElement.querySelector('#password') != null) {
+      this.renderer.selectRootElement('#password').scrollIntoView()
+    }
+  }
+
+  finishReset() {
+    this.doNotMatch = undefined
+    this.error = undefined
+    const password = this.passwordForm.get(['newPassword'])?.value
+    const confirmPassword = this.passwordForm.get(['confirmPassword'])?.value
+    if (password !== confirmPassword) {
+      this.doNotMatch = 'ERROR'
+    } else {
+      this.passwordService.savePassword(this.key!, password).subscribe({
+        next: () => {
+          this.success = 'OK'
+        },
+        error: () => {
+          this.success = undefined
+          this.error = 'ERROR'
+        }
+    })
+    }
+  }
+
+  navigateToLoginPage() {
+    this.router.navigate(['/login'])
+  }
+}

ui/src/app/account/password/password-strength.component.html

@@ -1,10 +1,10 @@
 <div id="strength">
-    <small jhiTranslate="global.messages.validate.newpassword.strength.string">Password strength:</small>
-    <ul id="strengthBar">
-      <li class="point"></li>
-      <li class="point"></li>
-      <li class="point"></li>
-      <li class="point"></li>
-      <li class="point"></li>
-    </ul>
-</div>
+  <small i18n="@@global.messages.validate.newpassword.strength.string">Password strength:</small>
+  <ul id="strengthBar">
+    <li class="point"></li>
+    <li class="point"></li>
+    <li class="point"></li>
+    <li class="point"></li>
+    <li class="point"></li>
+  </ul>
+</div>

ui/src/app/account/password/password-strength.component.scss

@@ -12,7 +12,7 @@ ul#strength {
     border-radius: 2px;
     display: inline-block;
     height: 5px;
-    margin-right: 1px;
+    margin-right: 5px;
     width: 20px;
     &:last-child {
       margin: 0 !important;