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

Add consistent padding between form and browser frame

Browse Source
This commit is contained in:
uzairr
2021-01-12 15:30:40 +05:00
parent 2c8de0db7c
commit 8cc17dd05f
4 changed files with 107 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/logistration/RegistrationPage.jsx
View File

@@ -305,7 +305,13 @@ class RegistrationPage extends React.Component {
return (
<React.Fragment key={field.type}>
<input {...props} />
{ nodes }
<ValidationFormGroup
for={field.name}
key={field.name}
className="pt-10 mb-0"
>
{ nodes }
</ValidationFormGroup>
</React.Fragment>
);
}
@@ -319,7 +325,7 @@ class RegistrationPage extends React.Component {
key={field.name}
invalid={this.state.errors[stateVar] !== ''}
invalidMessage={field.errorMessages.required}
className="custom-control"
className="custom-control mb-0"
>
<Input {...props} />
{beforeLink}
@@ -342,8 +348,9 @@ class RegistrationPage extends React.Component {
key={field.name}
invalid={this.state.errors[stateVar] !== ''}
invalidMessage={field.errorMessages.required}
className="mb-0"
>
<label htmlFor={field.name} className="h6 pt-3">{field.label} (required)</label>
<label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
<Input {...props} />
</ValidationFormGroup>
);
@@ -357,7 +364,7 @@ class RegistrationPage extends React.Component {
addExtraOptionalFields() {
const fields = this.props.formData.fields.map((field) => {
let options = null;
let cssClass = null;
let cssClass = 'mb-0';
if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -376,11 +383,11 @@ class RegistrationPage extends React.Component {
props.options = options;
}
if (field.name === 'gender') {
cssClass = 'opt-inline-field';
cssClass += ' opt-inline-field';
}
if (field.name === 'year_of_birth') {
cssClass = 'opt-inline-field opt-year-field';
cssClass += ' opt-inline-field opt-year-field';
}
return (
@@ -389,7 +396,7 @@ class RegistrationPage extends React.Component {
key={field.name}
className={cssClass}
>
<label htmlFor={field.name} className="h6 pt-3">
<label htmlFor={field.name} className="h6 pt-10">
{field.label} {this.props.intl.formatMessage(messages['logistration.register.optional.label'])}
</label>
<Input {...props} />
@@ -484,8 +491,9 @@ class RegistrationPage extends React.Component {
for="name"
invalid={this.state.errors.name !== ''}
invalidMessage={this.state.errors.name}
className="mb-0"
>
<label htmlFor="name" className="h6 pt-3">
<label htmlFor="name" className="h6 pt-10">
{intl.formatMessage(messages['logistration.fullname.label'])}
</label>
<Input
@@ -503,8 +511,9 @@ class RegistrationPage extends React.Component {
for="username"
invalid={this.state.errors.username !== ''}
invalidMessage={this.state.errors.username}
className="mb-0"
>
<label htmlFor="username" className="h6 pt-3">
<label htmlFor="username" className="h6 pt-10">
{intl.formatMessage(messages['logistration.username.label'])}
</label>
<Input
@@ -522,8 +531,9 @@ class RegistrationPage extends React.Component {
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={this.state.errors.email}
className="mb-0"
>
<label htmlFor="email" className="h6 pt-3">
<label htmlFor="email" className="h6 pt-10">
{intl.formatMessage(messages['logistration.register.page.email.label'])}
</label>
<Input
@@ -542,8 +552,9 @@ class RegistrationPage extends React.Component {
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={this.state.errors.password}
className="mb-0"
>
<label htmlFor="password" className="h6 pt-3">
<label htmlFor="password" className="h6 pt-10">
{intl.formatMessage(messages['logistration.password.label'])}
</label>
<Input
@@ -561,7 +572,7 @@ class RegistrationPage extends React.Component {
{ this.addExtraRequiredFields() }
<ValidationFormGroup
for="optional"
className="custom-control"
className="custom-control pt-10 mb-0"
>
<Input
name="optional"
@@ -572,14 +583,14 @@ class RegistrationPage extends React.Component {
onChange={e => this.handleOnOptional(e)}
required
/>
<p role="presentation" id="additionalFields" onClick={e => this.handleOnOptional(e)}>
<p role="presentation" id="additionalFields" className="mb-0" onClick={e => this.handleOnOptional(e)}>
{intl.formatMessage(messages['logistration.support.education.research'])}
</p>
</ValidationFormGroup>
{ this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
<StatefulButton
type="button"
className="btn-primary"
className="btn-primary mt-10"
state={submitState}
labels={{
default: intl.formatMessage(messages['logistration.create.account.button']),

8
src/logistration/_style.scss
View File

@@ -236,10 +236,18 @@ $apple-focus-black: $apple-black;
height: 90%;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.pt-10 {
padding-top: 10px;
}
@media (min-width: 576px) {
.reset-password-container {
width: 420px;

16
src/logistration/tests/RegistrationPage.test.jsx
View File

@@ -158,6 +158,20 @@ describe('./RegistrationPage.js', () => {
options: [{ value: '', name: '--' }, { value: 'p', name: 'Doctorate' }],
required: false,
},
{
label: 'Year of birth.',
name: 'year_of_birth',
type: 'select',
options: [{ value: '', name: '--' }, { value: '2021', name: '2021' }],
required: false,
},
{
label: 'Gender.',
name: 'gender',
type: 'select',
options: [{ value: '', name: '--' }, { value: 'f', name: 'Female' }],
required: false,
},
],
},
},
@@ -169,6 +183,8 @@ describe('./RegistrationPage.js', () => {
registrationPage.update();
expect(registrationPage.find('textarea#goals').length).toEqual(1);
expect(registrationPage.find('select#level_of_education').length).toEqual(1);
expect(registrationPage.find('select#year_of_birth').length).toEqual(1);
expect(registrationPage.find('select#gender').length).toEqual(1);
});
it('should dispatch fetchRegistrationForm on ComponentDidMount', () => {

111
src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -35,10 +35,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
className="mb-4 form-group"
>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="name"
>
Full Name (required)
@@ -57,10 +57,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="username"
>
Public Username (required)
@@ -79,10 +79,10 @@ exports[`./RegistrationPage.js should display no password field when current pro
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="email"
>
Email (required)
@@ -101,7 +101,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
/>
</div>
<div
className="form-group custom-control"
className="form-group custom-control mb-0"
>
<input
aria-describedby=""
@@ -131,7 +131,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
</strong>
</div>
<div
className="form-group custom-control"
className="form-group custom-control pt-10 mb-0"
>
<input
aria-describedby=""
@@ -145,6 +145,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
value={false}
/>
<p
className="mb-0"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -155,7 +156,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -238,10 +239,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
className="mb-4 form-group"
>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="name"
>
Full Name (required)
@@ -260,10 +261,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="username"
>
Public Username (required)
@@ -282,10 +283,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="email"
>
Email (required)
@@ -304,10 +305,10 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="password"
>
Password (required)
@@ -326,7 +327,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
/>
</div>
<div
className="form-group custom-control"
className="form-group custom-control mb-0"
>
<input
aria-describedby=""
@@ -356,7 +357,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
</strong>
</div>
<div
className="form-group custom-control"
className="form-group custom-control pt-10 mb-0"
>
<input
aria-describedby=""
@@ -370,6 +371,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
value={false}
/>
<p
className="mb-0"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -380,7 +382,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -423,10 +425,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
className="mb-4 form-group"
>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="name"
>
Full Name (required)
@@ -445,10 +447,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="username"
>
Public Username (required)
@@ -467,10 +469,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="email"
>
Email (required)
@@ -489,10 +491,10 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="password"
>
Password (required)
@@ -511,7 +513,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
/>
</div>
<div
className="form-group custom-control"
className="form-group custom-control mb-0"
>
<input
aria-describedby=""
@@ -541,7 +543,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
</strong>
</div>
<div
className="form-group custom-control"
className="form-group custom-control pt-10 mb-0"
>
<input
aria-describedby=""
@@ -555,6 +557,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
value={false}
/>
<p
className="mb-0"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -565,7 +568,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -608,10 +611,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
className="mb-4 form-group"
>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="name"
>
Full Name (required)
@@ -630,10 +633,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="username"
>
Public Username (required)
@@ -652,10 +655,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="email"
>
Email (required)
@@ -674,10 +677,10 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="password"
>
Password (required)
@@ -696,7 +699,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
/>
</div>
<div
className="form-group custom-control"
className="form-group custom-control mb-0"
>
<input
aria-describedby=""
@@ -726,7 +729,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
</strong>
</div>
<div
className="form-group custom-control"
className="form-group custom-control pt-10 mb-0"
>
<input
aria-describedby=""
@@ -740,6 +743,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
value={false}
/>
<p
className="mb-0"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -750,7 +754,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary mt-10 disabled btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -828,10 +832,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
className="mb-4 form-group"
>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="name"
>
Full Name (required)
@@ -850,10 +854,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="username"
>
Public Username (required)
@@ -872,10 +876,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="email"
>
Email (required)
@@ -894,10 +898,10 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
/>
</div>
<div
className="form-group"
className="form-group mb-0"
>
<label
className="h6 pt-3"
className="h6 pt-10"
htmlFor="password"
>
Password (required)
@@ -916,7 +920,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
/>
</div>
<div
className="form-group custom-control"
className="form-group custom-control mb-0"
>
<input
aria-describedby=""
@@ -946,7 +950,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
</strong>
</div>
<div
className="form-group custom-control"
className="form-group custom-control pt-10 mb-0"
>
<input
aria-describedby=""
@@ -960,6 +964,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
value={false}
/>
<p
className="mb-0"
id="additionalFields"
onClick={[Function]}
role="presentation"
@@ -970,7 +975,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"