Commit 5ac79534 authored by David Burke's avatar David Burke

Merge branch '200-fix-checkmark-box-to-be-able-to-tab-in-login-page' into 'dev'

Resolve "Fix checkmark box to be able to tab in login page"

Closes #200

See merge request !174
parents 237bb321 e11adb07
Pipeline #39359240 passed with stages
in 6 minutes and 5 seconds
......@@ -3,19 +3,30 @@
<div class="account-column__right-heading">
<h1 class="heading-medium">Log&nbsp;In</h1>
<div class="account-column__link">
<a class="text-link text-link--caret text-link--large" id="btn-signup" href="javascript:void(0)" (click)="toggleDisplay()" tabindex="1">Not&nbsp;registered? Sign&nbsp;up</a>
<a
class="text-link text-link--caret text-link--large"
id="btn-signup"
href="javascript:void(0)"
(click)="toggleDisplay()"
tabindex="1"
>Not&nbsp;registered? Sign&nbsp;up</a
>
</div>
</div>
<form novalidate [ngrxFormState]="form" (submit)="onSubmit()" class="auth-form__form">
<app-non-field-messages *ngIf="errorMessage" [messages]="[errorMessage]"></app-non-field-messages>
<form
novalidate
[ngrxFormState]="form"
(submit)="onSubmit()"
class="auth-form__form"
>
<app-non-field-messages
*ngIf="errorMessage"
[messages]="[errorMessage]"
></app-non-field-messages>
<div class="form-field form-field--large">
<app-form-label
[for]="form.controls.email.id"
[isLarge]="true"
>
<app-form-label [for]="form.controls.email.id" [isLarge]="true">
Email
</app-form-label>
<input
......@@ -23,45 +34,40 @@
autofocus
[ngrxFormControlState]="form.controls.email"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._email && form.isSubmitted }"
[ngClass]="{
'form-field__input--invalid': form.errors._email && form.isSubmitted
}"
tabindex="2"
>
/>
</div>
<ul *ngIf="form.isInvalid && form.isSubmitted"
class="form-field__error-list">
<ul
*ngIf="form.isInvalid && form.isSubmitted"
class="form-field__error-list"
>
<li *ngIf="form.errors._email" class="form-field__error">
Enter your account's email address.
</li>
</ul>
<div class="form-field form-field--large">
<div class="form-field__wrapper-for-link">
<app-form-label
[for]="form.controls.password.id"
[isLarge]="true"
>
Password
</app-form-label>
<aside-link
tabindex="8"
[link]="['/reset-password']"
>
<span class="u-visible--all-but-small">Forgot? </span>Recover&nbsp;your&nbsp;account
</aside-link>
</div>
<app-form-label [for]="form.controls.password.id" [isLarge]="true">
Password
</app-form-label>
<input
type="password"
[ngrxFormControlState]="form.controls.password"
class="form-field__input"
[ngClass]="{'form-field__input--invalid' : form.errors._password && form.isSubmitted }"
[ngClass]="{
'form-field__input--invalid':
form.errors._password && form.isSubmitted
}"
tabindex="3"
>
/>
</div>
<ul *ngIf="form.isSubmitted"
class="form-field__error-list">
<ul *ngIf="form.isSubmitted" class="form-field__error-list">
<li *ngIf="form.errors._password" class="form-field__error">
Enter your account's password.
</li>
......@@ -71,7 +77,7 @@
<app-checkbox
title="Stay logged in on this device"
[control]="form.controls.rememberMe"
tabindex="4"
tabNumber="4"
></app-checkbox>
</div>
......@@ -88,7 +94,8 @@
class="button button--large button--green"
[disabled]="hasLoginStarted"
type="submit"
tabindex="7">
tabindex="7"
>
Log in
</button>
......@@ -99,7 +106,6 @@
completedText="Logged In"
></progress-indicator>
</div>
</form>
</div>
</app-marketing-frame>
<label
class="form-field__checkbox"
[class.form-field__checkbox--inline]="inline">
<input
[class.form-field__checkbox--inline]="inline"
>
<input
tabindex="{{tabNumber}}"
type="checkbox"
[ngrxFormControlState]="control"
class="form-field__checkbox__input"
......@@ -15,4 +17,4 @@
{{ subtext }}
</div>
</div>
</label>
\ No newline at end of file
</label>
......@@ -18,6 +18,11 @@ export class CheckboxComponent {
*/
@Input() subtext: string;
/**
* Tab index number. Optional.
*/
@Input() tabNumber: number;
/**
* If true, then the label element is intended to be an inline DOM element
* instead of a block. Not the common use case so false by default.
......
......@@ -5,6 +5,7 @@ import { action } from "@storybook/addon-actions";
import { boolean, select, withKnobs } from "@storybook/addon-knobs";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BackupCodeComponent } from "../app/account/backup-code/backup-code.component";
import { ResetPasswordComponent } from "../app/account/reset-password/reset-password.component";
......@@ -24,6 +25,7 @@ import { ManageBackupCodeComponent } from "../app/account/manage-backup-code/man
import { BackupCodePdfService } from "../app/account/backup-code-pdf.service";
import { SetPasswordComponent } from "../app/account/reset-password/set-password/set-password.component";
import { ResetPasswordVerifyComponent } from "../app/account/reset-password/reset-password-verify/reset-password-verify.component";
import { ServerSelectComponent } from "../app/account/shared/server-select.component";
storiesOf("Account", module)
.addDecorator(withKnobs)
......@@ -36,9 +38,14 @@ storiesOf("Account", module)
SharedModule,
RouterTestingModule,
ProgressIndicatorModule,
BrowserAnimationsModule,
StoreModule.forRoot({})
],
declarations: [MarketingFrameComponent, PasswordInputComponent]
declarations: [
MarketingFrameComponent,
PasswordInputComponent,
ServerSelectComponent
]
})
)
.add("Backup Code", () => ({
......
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