Commit d53d7c55 authored by Brendan's avatar Brendan

#188 tune up account recovery page

parent a9fa3f07
Pipeline #38668139 (#1883) failed with stages
in 5 minutes and 41 seconds
......@@ -12,9 +12,7 @@
<div class="form-field form-field--large">
<div class="form-field__wrapper-for-link">
<label for="oldPassword" class="form-field__label">Current Password</label>
<a class="sign-out text-link text-link--caret form-field__label-link" href="javascript:void(0)" (click)="onForgotPassword.emit()">
<span class="u-visible--all-but-small">Forgot? </span>Log&nbsp;out&nbsp;to&nbsp;reset
</a>
<a class="sign-out text-link text-link--caret form-field__label-link" href="javascript:void(0)" (click)="onForgotPassword.emit()"><span class="u-visible--all-but-small">Forgot? </span>Log&nbsp;out&nbsp;to&nbsp;reset</a>
</div>
<input type="password" [ngrxFormControlState]="form.controls.oldPassword" class="form-field__input form-field__input--one-action"
[class.form-field__input--invalid]="form.errors._oldPassword && form.isSubmitted" name="oldPassword"
......
<div class="account l-container-narrow u-margin-tb-50">
<a class="text-link text-link--left-caret heading-back-link" [routerLink]="['/account/change-password']">Change Password</a>
<a class="text-link text-link--left-caret heading-back-link" [routerLink]="['/account']">Account Management</a>
<h2 class="heading-main heading-main--pad-bottom">Forgot Your Password?</h2>
<div class="register-step__feedback">
<p>If you forgot your password, you will need to recover your account.</p>
<p>Do you have your backup code? Your backup code is contained in a PDF that you printed or saved when you created your Passit account.</p>
<div class="text--large text--less-bottom-margin">
If you forgot your password, you will need to recover your account.
</div>
<div class="text--large">
Do you have your backup code? Your backup code is contained in a PDF that you printed or saved when you created your Passit account.
</div>
</div>
<div class="form-label form-label--large u-margin-t-30">I have my backup code</div>
<ul class="register-step__feedback">
<h3 class="heading-small">I have my backup code</h3>
<ul class="text--large text--less-bottom-margin">
<li><a class="text-link text-link--caret text-link--large" href="javascript:void(0)" (click)="onLogOut()">Log&nbsp;out</a></li>
<li>Click the “Recover your account” link on the login page</li>
<li>Click the “Recover your account” link on the login&nbsp;page</li>
<li>Follow the steps to change your password</li>
</ul>
<div class="form-label form-label--large u-margin-t-30">I don’t have my backup code</div>
<h3 class="heading-small">I don’t have my backup code</h3>
<div class="register-step__feedback">
<p>If you didn’t save your backup code, then you will need to transfer your passwords to a new account. Since we require your password to delete your account, you will not be able to do so. Therefore, you will need to use a different email address for your new account.</p>
<div class="text--large text--less-bottom-margin">
If you didn’t save your backup code, then you will need to transfer your passwords to a new account. Since we require your password to delete your account, you will not be able to do so. Therefore, you will need to use a different email address for your new account.
</div>
<ul class="register-step__feedback">
<li><a class="text-link text-link--caret text-link--large" href="javascript:void(0)" [routerLink]="['/export']">Export Your Passwords</a></li>
<ul class="text--large text--less-bottom-margin">
<li><a class="text-link text-link--caret text-link--large" href="javascript:void(0)" [routerLink]="['/export']">Export your passwords</a></li>
<li>Register a new account</li>
<li><a class="text-link text-link--caret text-link--large" href="javascript:void(0)" [routerLink]="['/import']">Import Your Passwords</a></li>
<li><a class="text-link text-link--caret text-link--large" href="javascript:void(0)" [routerLink]="['/import']">Import your passwords</a></li>
</ul>
\ No newline at end of file
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import { Store } from "@ngrx/store";
import { IState } from "../../../app.reducers";
import { LogoutAction } from "../.././account.actions";
@Component({
selector: 'forgot-learn-more',
templateUrl: './forgot-learn-more.component.html',
styleUrls: ['./forgot-learn-more.component.css', '../../account.component.scss', '../../../shared/form-label/form-label.styles.scss']
selector: "forgot-learn-more",
templateUrl: "./forgot-learn-more.component.html",
styleUrls: [
"./forgot-learn-more.component.css",
"../../account.component.scss",
]
})
export class ForgotLearnMoreComponent {
constructor(private store: Store<IState>) {}
onLogOut() {
if (window.confirm(
"You are about to log out. Do you have your backup code?"
)
if (
window.confirm("Please confirm that you have your backup code ready before logging out.")
) {
this.store.dispatch(new LogoutAction());
this.store.dispatch(new LogoutAction());
}
}
}
}
......@@ -6,7 +6,7 @@
<div class="register-step__feedback">
<span class="register-step__feedback__static-element">
Replace your old backup code with a new one.<br />Not sure what this is?
<a class="text-link text-link--caret text-link--large" id="btn-signin">Learn&nbsp;more</a>
<a [routerLink]=" ['/account/forgot-password'] " class="text-link text-link--caret text-link--large" id="btn-signin">Learn&nbsp;more</a>
</span>
</div>
......
......@@ -54,7 +54,7 @@ const appRoutes: Routes = [
}
},
{
path: "forgot-password",
path: "account/forgot-password",
component: ForgotLearnMoreComponent,
canActivate: [LoggedInGuard],
data: {
......
......@@ -35,6 +35,12 @@
}
}
.heading-small {
margin: 30px 0 20px;
font-size: 22px;
font-weight: 600;
}
.heading-back-link {
display: inline-block;
margin-bottom: 35px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment