Commit 55cb0105 authored by Brendan's avatar Brendan

forgot password storybook work

parent 840903db
Pipeline #33887463 passed with stage
in 9 minutes and 1 second
......@@ -12,29 +12,104 @@
</div>
<form [ngrxFormState]="form" (submit)="onSubmit()" class="auth-form__form">
<div *ngIf="!hasFinished">
<p>Start password recovery by entering your email. You’ll need your backup code.</p>
<label [for]="form.controls.email.id">
<div class="form-field form-field--large">
<label
[for]="form.controls.email.id"
class="register-step__heading"
[class.form-field__label]="!hasFinished"
[class.register-step__heading--completed]="hasFinished">
Email
<span
class="register-step__icon"
[class.register-step__icon--active]="hasFinished"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</label>
<input
type="email"
[ngrxFormControlState]="form.controls.email"
autofocus
class="form-field__input"
[class.form-field__input--invalid]="form.errors._email && form.isSubmitted"
[class.form-field__input--valid]="!form.errors._email"
/>
<div [class.register-step__verified-input]="hasFinished">
<input
type="email"
[ngrxFormControlState]="form.controls.email"
autofocus
class="form-field__input"
[disabled]="hasFinished"
[class.form-field__input--invalid]="form.errors._email && form.isSubmitted"
[class.form-field__input--valid]="!form.errors._email"
[class.register-step__verified-content]="hasFinished"
/>
</div>
<div
*ngIf="!hasFinished"
class="register-step__feedback">
<span class="register-step__feedback__static-element">
Have your backup code ready to go, then enter the email address you used to sign up for your Passit account.
</span>
</div>
<div *ngIf="!hasFinished" class="auth-form__actions">
<button
id="loginSubmit"
class="button button--primary button--large"
[disabled]="hasStarted"
type="submit">
Next
</button>
<progress-indicator
[inProgress]="hasStarted"
></progress-indicator>
</div>
</div>
<div *ngIf="hasFinished">
<p>
Great! An email was sent to {{ form.value.email }}. Check your inbox to continue. Make sure you have your backup code ready.
</p>
<div class="form-field form-field--large">
<div
class="register-step__heading"
[class.form-field__label]="hasFinished"
[class.register-step__heading--completed]="false"
[class.register-step__heading--inactive]="!hasFinished">
Confirm Email Address
<span
class="register-step__icon"
[class.register-step__icon--active]="false"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</div>
<a class="text-link text-link--caret text-link--large" (click)="reset.emit()">
Click here to start over
</a>
<div *ngIf="hasFinished">
<p>
Great! An email was sent to {{ form.value.email }}. Check your inbox to continue. Make sure you have your backup code ready.
</p>
<a class="text-link text-link--caret text-link--large" (click)="reset.emit()">
Click here to start over
</a>
</div>
</div>
<div class="form-field form-field--large">
<div
class="register-step__heading"
[class.form-field__label]="false"
[class.register-step__heading--completed]="false"
[class.register-step__heading--inactive]="true">
Enter Backup Code
<span
class="register-step__icon"
[class.register-step__icon--active]="false"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</div>
</div>
<div class="form-field form-field--large">
<div
class="register-step__heading"
[class.form-field__label]="false"
[class.register-step__heading--completed]="false"
[class.register-step__heading--inactive]="true">
Enter New Password
<span
class="register-step__icon"
[class.register-step__icon--active]="false"
[inlineSVG]="'../assets/svg/check.svg'"></span>
</div>
</div>
<div *ngIf="isExtension">
......@@ -65,21 +140,6 @@
</li>
</ul>
</div>
<div *ngIf="!hasFinished" class="auth-form__actions">
<button
id="loginSubmit"
class="button button--large button--green"
[disabled]="hasStarted"
type="submit">
Next
</button>
<progress-indicator
[inProgress]="hasStarted"
inProgressText="Working"
></progress-indicator>
</div>
</form>
</div>
</app-marketing-frame>
......@@ -47,6 +47,8 @@ storiesOf("Account", module)
component: ForgotPasswordComponent,
props: {
isExtension: boolean("isExtension", true),
hasStarted: boolean("hasStarted", false),
hasFinished: boolean("hasFinished", false),
form: fromForgotPassword.initialFormState
}
}))
......
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