Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

VAN-385: add label for each input field (#156)

Browse Source
This commit is contained in:
Zainab Amir
2021-02-24 15:12:15 +05:00
committed by GitHub
parent 37dbf3b8af
commit f7d4150a62
9 changed files with 321 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/_style.scss
View File

@@ -14,6 +14,22 @@ $microsoft-focus-black: #000;
$apple-black: #000000;
$apple-focus-black: $apple-black;
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.focus-out {
position: absolute;
padding-left: 17px;
opacity: 0.75;
z-index: 1;
}
.alert-link {
font-weight: normal;
text-decoration: underline;
@@ -219,21 +235,21 @@ $apple-focus-black: $apple-black;
padding-left: 14px;
}
.opt-inline-field{
display: inline-block;
width: 50%;
.opt-inline-field {
display: inline-block;
width: 50%;
}
.opt-year-field{
padding-left: 15px;
.opt-year-field {
padding-left: 15px;
}
.invalid-feedback {
color: $red;
}
.full-vertical-height{
height: 100vh;
.full-vertical-height {
height: 100vh;
}
.help-links {
@@ -257,7 +273,7 @@ $apple-focus-black: $apple-black;
}
.mt-10 {
margin-top: 10px;
margin-top: 10px;
}
.pt-10 {
@@ -281,7 +297,7 @@ $apple-focus-black: $apple-black;
.section-heading-line {
position: relative;
text-align: center;
&:before,
&:after {
width: 10%;

25
src/common-components/AuthnValidationFormGroup.jsx
View File

@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from '@edx/frontend-platform/i18n';
import {
Form,
Input,
@@ -11,13 +10,11 @@ const AuthnCustomValidationFormGroup = (props) => {
const { onClick, onChange, onBlur } = props;
const [showHelpText, setShowHelpText] = useState(false);
const [showLabelText, setShowLabelText] = useState(false);
const [showPlaceholder, setShowPlaceHolder] = useState(true);
// handler code that need to be invoked via input
const onClickHandler = (e, clickCb) => {
setShowHelpText(true);
setShowLabelText(true);
setShowPlaceHolder(false);
if (clickCb) {
clickCb(e);
}
@@ -25,7 +22,6 @@ const AuthnCustomValidationFormGroup = (props) => {
const onBlurHandler = (e, blurCb) => {
setShowHelpText(false);
setShowLabelText(false);
setShowPlaceHolder(true);
if (blurCb) {
blurCb(e);
}
@@ -38,12 +34,18 @@ const AuthnCustomValidationFormGroup = (props) => {
const onOptionalHandler = (e, clickCb) => { clickCb(e); };
const showLabel = () => {
const fieldLabel = (!props.optionalFieldCheckbox && showLabelText) ? (
<Form.Label htmlFor={props.for} className="h6 pt-10">
{props.label}
</Form.Label>
) : <span />;
return fieldLabel;
let className;
if (props.optionalFieldCheckbox || (!showLabelText && (props.value !== '' || props.type === 'select'))) {
className = 'sr-only';
} else if (showLabelText) {
className = 'pt-10 h6';
} else {
className = 'pt-10 focus-out';
}
return (
<Form.Label htmlFor={props.for} className={className}>{props.label}</Form.Label>
);
};
const showOptional = () => {
const additionalField = props.optionalFieldCheckbox ? (
@@ -60,7 +62,6 @@ const AuthnCustomValidationFormGroup = (props) => {
type: props.type,
value: props.value,
};
inputProps.placeholder = showPlaceholder ? props.label : '';
inputProps.onChange = (e) => onChangeHandler(e, onChange);
inputProps.onClick = (e) => onClickHandler(e, onClick);
inputProps.onBlur = (e) => onBlurHandler(e, onBlur);
@@ -145,4 +146,4 @@ AuthnCustomValidationFormGroup.propTypes = {
})),
};
export default injectIntl(AuthnCustomValidationFormGroup);
export default AuthnCustomValidationFormGroup;

46
src/common-components/tests/AuthnValidationFormGroup.test.jsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import { mount } from 'enzyme';
import AuthnCustomValidationFormGroup from '../AuthnValidationFormGroup';
describe('AuthnCustomValidationFormGroup', () => {
let props = {
label: 'Email Label',
for: 'email',
name: 'email',
type: 'email',
value: '',
helpText: 'Email field help text',
};
it('should show label in place of placeholder when field is empty', () => {
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 focus-out form-label');
});
it('should show label on top of field when field is focused in', () => {
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
validationFormGroup.find('input').simulate('focus');
expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 h6 form-label');
});
it('should keep label hidden for checkbox field', () => {
props = {
...props,
type: 'checkbox',
optionalFieldCheckbox: true,
};
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
});
it('should keep label hidden when input field is not empty', () => {
props = {
...props,
value: 'test',
};
const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
});
});

24
src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
View File

@@ -23,7 +23,12 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
<div
className="form-group mb-0 w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -33,7 +38,6 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -138,7 +142,12 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
<div
className="form-group mb-0 w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -148,7 +157,6 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -238,7 +246,12 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
<div
className="form-group mb-0 w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -248,7 +261,6 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""

80
src/login/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -36,7 +36,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -46,7 +51,6 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -56,7 +60,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
@@ -66,7 +75,6 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password"
required={true}
type="password"
value=""
@@ -214,7 +222,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -224,7 +237,6 @@ exports[`LoginPage should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -234,7 +246,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
@@ -244,7 +261,6 @@ exports[`LoginPage should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password"
required={true}
type="password"
value=""
@@ -394,7 +410,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -404,7 +425,6 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -414,7 +434,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
@@ -424,7 +449,6 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password"
required={true}
type="password"
value=""
@@ -536,7 +560,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -546,7 +575,6 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -556,7 +584,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
@@ -566,7 +599,6 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password"
required={true}
type="password"
value=""
@@ -715,7 +747,12 @@ exports[`LoginPage should show error message 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
@@ -725,7 +762,6 @@ exports[`LoginPage should show error message 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email"
required={true}
type="email"
value=""
@@ -735,7 +771,12 @@ exports[`LoginPage should show error message 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
@@ -745,7 +786,6 @@ exports[`LoginPage should show error message 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password"
required={true}
type="password"
value=""

2
src/register/RegistrationPage.jsx
View File

@@ -530,7 +530,7 @@ class RegistrationPage extends React.Component {
</div>
{getConfig().REGISTRATION_OPTIONAL_FIELDS ? (
<AuthnValidationFormGroup
label=""
label={intl.formatMessage(messages['support.education.research'])}
for="optional"
name="optional"
type="checkbox"

4
src/register/tests/RegistrationPage.test.jsx
View File

@@ -285,7 +285,7 @@ describe('RegistrationPageTests', () => {
expect(registrationPage.find('#validation-errors').first().text()).toEqual(alertBanner);
});
it('should show error message on alert and below the fields incase of 409', () => {
it('should show error message on alert and below the fields in case of 409', () => {
const errors = {
email: 'It looks like test@gmail.com belongs to an existing account. Try again with a different email address.',
username: 'It looks like test belongs to an existing account. Try again with a different username.',
@@ -338,7 +338,7 @@ describe('RegistrationPageTests', () => {
expect(store.dispatch).toHaveBeenCalledWith(registerNewUser(formPayload));
});
it('should display validationAlertMessages incase of invalid form submission', () => {
it('should display validationAlertMessages in case of invalid form submission', () => {
const alertMessages = {
name: [{ user_message: 'Please enter your full name.' }],
username: [{ user_message: 'Please enter your public username.' }],

144
src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -35,7 +35,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="name"
>
Full name (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -45,7 +50,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Full name (required)"
required={true}
type="text"
value=""
@@ -55,7 +59,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="username"
>
Public username (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -65,7 +74,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Public username (required)"
required={true}
type="text"
value=""
@@ -75,7 +83,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -85,7 +98,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email (required)"
required={true}
type="text"
value=""
@@ -95,7 +107,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -105,7 +122,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password (required)"
required={true}
type="password"
value=""
@@ -115,7 +131,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="country"
>
Country or region of residence (required)
</label>
<select
aria-describedby=""
className="form-control"
@@ -125,7 +146,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Country or region of residence (required)"
required={true}
value=""
>
@@ -1440,7 +1460,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
<div
className="form-group custom-control pt-10 mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="optional"
>
Support education research by providing additional information. (Optional)
</label>
<input
aria-describedby=""
checked={false}
@@ -1451,7 +1476,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder=""
required={true}
type="checkbox"
value={false}
@@ -1560,7 +1584,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="name"
>
Full name (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -1570,7 +1599,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Full name (required)"
required={true}
type="text"
value=""
@@ -1580,7 +1608,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="username"
>
Public username (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -1590,7 +1623,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Public username (required)"
required={true}
type="text"
value=""
@@ -1600,7 +1632,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -1610,7 +1647,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email (required)"
required={true}
type="text"
value=""
@@ -1620,7 +1656,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -1630,7 +1671,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password (required)"
required={true}
type="password"
value=""
@@ -1640,7 +1680,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="country"
>
Country or region of residence (required)
</label>
<select
aria-describedby=""
className="form-control"
@@ -1650,7 +1695,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Country or region of residence (required)"
required={true}
value=""
>
@@ -2965,7 +3009,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
<div
className="form-group custom-control pt-10 mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="optional"
>
Support education research by providing additional information. (Optional)
</label>
<input
aria-describedby=""
checked={false}
@@ -2976,7 +3025,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder=""
required={true}
type="checkbox"
value={false}
@@ -3046,7 +3094,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="name"
>
Full name (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -3056,7 +3109,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Full name (required)"
required={true}
type="text"
value=""
@@ -3066,7 +3118,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="username"
>
Public username (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -3076,7 +3133,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Public username (required)"
required={true}
type="text"
value=""
@@ -3086,7 +3142,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -3096,7 +3157,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Email (required)"
required={true}
type="text"
value=""
@@ -3106,7 +3166,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
@@ -3116,7 +3181,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Password (required)"
required={true}
type="password"
value=""
@@ -3126,7 +3190,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="country"
>
Country or region of residence (required)
</label>
<select
aria-describedby=""
className="form-control"
@@ -3136,7 +3205,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Country or region of residence (required)"
required={true}
value=""
>
@@ -4451,7 +4519,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
<div
className="form-group custom-control pt-10 mb-0"
>
<span />
<label
className="sr-only form-label"
htmlFor="optional"
>
Support education research by providing additional information. (Optional)
</label>
<input
aria-describedby=""
checked={false}
@@ -4462,7 +4535,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder=""
required={true}
type="checkbox"
value={false}

64
src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
View File

@@ -24,7 +24,12 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
>
New password
</label>
<input
aria-describedby=""
className="form-control"
@@ -34,7 +39,6 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="New password"
required={true}
type="password"
value=""
@@ -44,7 +48,12 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
>
Confirm password
</label>
<input
aria-describedby=""
className="form-control"
@@ -54,7 +63,6 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Confirm password"
required={true}
type="password"
value=""
@@ -111,7 +119,12 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
>
New password
</label>
<input
aria-describedby=""
className="form-control"
@@ -121,7 +134,6 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="New password"
required={true}
type="password"
value=""
@@ -131,7 +143,12 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
>
Confirm password
</label>
<input
aria-describedby=""
className="form-control"
@@ -141,7 +158,6 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Confirm password"
required={true}
type="password"
value=""
@@ -219,7 +235,12 @@ exports[`ResetPasswordPage should match reset password default section snapshot
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
>
New password
</label>
<input
aria-describedby=""
className="form-control"
@@ -229,7 +250,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="New password"
required={true}
type="password"
value=""
@@ -239,7 +259,12 @@ exports[`ResetPasswordPage should match reset password default section snapshot
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
>
Confirm password
</label>
<input
aria-describedby=""
className="form-control"
@@ -249,7 +274,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Confirm password"
required={true}
type="password"
value=""
@@ -344,7 +368,12 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="reset-password-input"
>
New password
</label>
<input
aria-describedby=""
className="form-control"
@@ -354,7 +383,6 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="New password"
required={true}
type="password"
value=""
@@ -364,7 +392,12 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
<div
className="form-group w-100"
>
<span />
<label
className="pt-10 focus-out form-label"
htmlFor="confirm-password-input"
>
Confirm password
</label>
<input
aria-describedby=""
className="form-control"
@@ -374,7 +407,6 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
placeholder="Confirm password"
required={true}
type="password"
value=""