Skip to content

Commit

Permalink
improve messaging around sign up process
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsubik
tsubik committed Jun 5, 2024
1 parent a48f688 commit 012fc32
Show file tree
Hide file tree
Showing 14 changed files with 251 additions and 208 deletions.
13 changes: 12 additions & 1 deletion components/form/Field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,17 @@ class Field extends React.Component {
)
}

renderLabel() {
const { properties } = this.props;
if (!properties.label) return null;

if (typeof properties.label === 'function') {
return properties.label();
}

return properties.label
}

render() {
const { properties, className } = this.props;
const { valid, error } = this.state;
Expand All @@ -94,7 +105,7 @@ class Field extends React.Component {
<div className={`c-field ${fieldClasses}`}>
{properties.label &&
<label htmlFor={`input-${properties.name}`} className="label">
{properties.label} {properties.required && <abbr title="required">*</abbr>}
{this.renderLabel()} {properties.required && <abbr title="required">*</abbr>}
</label>
}

Expand Down
309 changes: 144 additions & 165 deletions components/users/new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const UserNewForm = (props) => {
return props.saveUser({ body })
.then(() => {
logEvent('sign_up', { method: 'credentials' });
if (props.onSubmit) props.onSubmit();
if (props.onSubmit) props.onSubmit({ email: form.email });
})
}

Expand Down Expand Up @@ -74,189 +74,168 @@ const UserNewForm = (props) => {
<div className="c-section">
<div className="l-container">
<FormProvider onSubmit={handleSubmit} initialValues={formInitialState}>
{({ form, submitted }) => (<>
{!submitted && (
<Form>
<fieldset className="c-field-container">
{/* Permission request */}
<Field
validations={['required']}
className="-fluid"
options={[
{ label: intl.formatMessage({ id: 'operator' }), value: 'operator' },
{ label: intl.formatMessage({ id: 'government' }), value: 'government' }
]}
hint={intl.formatMessage({ id: 'signup.user.form.field.permissions_request.hint' })}
properties={{
name: 'permissions_request',
label: intl.formatMessage({ id: 'signup.user.form.field.permissions_request' }),
required: true,
}}
>
{RadioGroup}
</Field>

{/* Countries */}
<Field
validations={['required']}
className="-fluid"
options={HELPERS_REGISTER.mapToSelectOptions(countries.data)}
properties={{
name: 'country_id',
label: intl.formatMessage({ id: 'signup.user.form.field.country' }),
required: true,
instanceId: 'select.country_id',
placeholder: intl.formatMessage({ id: 'select.placeholder' })
}}
>
{Select}
</Field>

{/* Operators */}
{form.permissions_request === 'operator' && form.country_id && (
<Field
validations={['required']}
className="-fluid"
hint={registerNewProducerHint}
options={HELPERS_REGISTER.mapToSelectOptions(operators.data.filter(o => o.country && o.country.id === form.country_id))}
properties={{
name: 'operator_id',
label: intl.formatMessage({ id: 'signup.user.form.field.producer' }),
required: true,
instanceId: 'select.operator_id',
placeholder: intl.formatMessage({ id: 'select.placeholder' })
}}
>
{Select}
</Field>
)}

<Field
validations={['required']}
className="-fluid"
properties={{
name: 'name',
label: intl.formatMessage({ id: 'signup.user.form.field.name' }),
required: true
}}
>
{Input}
</Field>
{({ form }) => (<>
<Form>
<fieldset className="c-field-container">
{/* Permission request */}
<Field
validations={['required']}
className="-fluid"
options={[
{ label: intl.formatMessage({ id: 'operator' }), value: 'operator' },
{ label: intl.formatMessage({ id: 'government' }), value: 'government' }
]}
hint={intl.formatMessage({ id: 'signup.user.form.field.permissions_request.hint' })}
properties={{
name: 'permissions_request',
label: intl.formatMessage({ id: 'signup.user.form.field.permissions_request' }),
required: true,
}}
>
{RadioGroup}
</Field>

<Field
validations={['required', 'email']}
className="-fluid"
properties={{
name: 'email',
autoComplete: 'email',
label: intl.formatMessage({ id: 'signup.user.form.field.email' }),
required: true,
}}
>
{Input}
</Field>
{/* Countries */}
<Field
validations={['required']}
className="-fluid"
options={HELPERS_REGISTER.mapToSelectOptions(countries.data)}
properties={{
name: 'country_id',
label: intl.formatMessage({ id: 'signup.user.form.field.country' }),
required: true,
instanceId: 'select.country_id',
placeholder: intl.formatMessage({ id: 'select.placeholder' })
}}
>
{Select}
</Field>

{/* Operators */}
{form.permissions_request === 'operator' && form.country_id && (
<Field
validations={['required']}
className="-fluid"
options={LOCALES.map(l => ({ label: l.name, value: l.code }))}
hint={registerNewProducerHint}
options={HELPERS_REGISTER.mapToSelectOptions(operators.data.filter(o => o.country && o.country.id === form.country_id))}
properties={{
name: 'locale',
label: intl.formatMessage({ id: 'signup.user.form.field.preferred_language', defaultMessage: 'Preferred Language' }),
name: 'operator_id',
label: intl.formatMessage({ id: 'signup.user.form.field.producer' }),
required: true,
instanceId: 'select.locale',
instanceId: 'select.operator_id',
placeholder: intl.formatMessage({ id: 'select.placeholder' })
}}
>
{Select}
</Field>
)}

<Field
validations={['required']}
className="-fluid"
properties={{
name: 'password',
autoComplete: 'new-password',
label: intl.formatMessage({ id: 'signup.user.form.field.password' }),
type: 'password',
required: true
}}
>
{Input}
</Field>
<Field
validations={['required']}
className="-fluid"
properties={{
name: 'name',
label: intl.formatMessage({ id: 'signup.user.form.field.name' }),
required: true
}}
>
{Input}
</Field>

<Field
validations={[
'required',
{
type: 'isEqual',
condition: form.password,
message: intl.formatMessage({ id: 'The field should be equal to password' })
}
]}
className="-fluid"
properties={{
name: 'password_confirmation',
autoComplete: 'new-password',
label: intl.formatMessage({ id: 'signup.user.form.field.password_confirmation' }),
type: 'password',
required: true
}}
>
{Input}
</Field>
<Field
validations={['required', 'email']}
className="-fluid"
properties={{
name: 'email',
autoComplete: 'email',
label: intl.formatMessage({ id: 'signup.user.form.field.email' }),
required: true,
}}
>
{Input}
</Field>

<Field
className="-fluid"
validations={['required']}
properties={{
required: true,
name: 'agree',
label: intl.formatMessage({ id: 'signup.user.form.field.agree' })
}}
>
{Checkbox}
</Field>
</fieldset>
<Field
validations={['required']}
className="-fluid"
options={LOCALES.map(l => ({ label: l.name, value: l.code }))}
properties={{
name: 'locale',
label: intl.formatMessage({ id: 'signup.user.form.field.preferred_language', defaultMessage: 'Preferred Language' }),
required: true,
instanceId: 'select.locale',
placeholder: intl.formatMessage({ id: 'select.placeholder' })
}}
>
{Select}
</Field>

<ul className="c-field-buttons">
<li>
<SubmitButton>
{intl.formatMessage({ id: 'signup' })}
</SubmitButton>
</li>
</ul>
</Form>
)}
<Field
validations={['required']}
className="-fluid"
properties={{
name: 'password',
autoComplete: 'new-password',
label: intl.formatMessage({ id: 'signup.user.form.field.password' }),
type: 'password',
required: true
}}
>
{Input}
</Field>

{submitted && (
<div className="c-form">
<h2 className="c-title">
{intl.formatMessage({ id: 'thankyou' })}
</h2>
<Field
validations={[
'required',
{
type: 'isEqual',
condition: form.password,
message: intl.formatMessage({ id: 'The field should be equal to password' })
}
]}
className="-fluid"
properties={{
name: 'password_confirmation',
autoComplete: 'new-password',
label: intl.formatMessage({ id: 'signup.user.form.field.password_confirmation' }),
type: 'password',
required: true
}}
>
{Input}
</Field>

<p>
{intl.formatMessage({ id: 'wait-for-approval' })}
</p>
<Field
className="-fluid"
validations={['required']}
properties={{
required: true,
name: 'agree',
label:
<>
{intl.formatMessage({ id: 'signup.user.form.field.agree' })}
{' ('}
<Link href="/terms" passHref>
<a target="_blank" rel="noopener noreferrer">
{intl.formatMessage({ id: 'Read here' })}
</a>
</Link>
{')'}
</>
}}
>
{Checkbox}
</Field>
</fieldset>

<ul className="c-field-buttons">
<li>
<Link href="/operators">
<a className="card-link c-button -primary -fullwidth">
{intl.formatMessage({ id: 'operators' })}
</a>
</Link>
</li>
<li>
<Link href="/observations">
<a className="card-link c-button -primary -fullwidth">
{intl.formatMessage({ id: 'observations' })}
</a>
</Link>
</li>
</ul>
</div>
)}
<ul className="c-field-buttons">
<li>
<SubmitButton>
{intl.formatMessage({ id: 'signup' })}
</SubmitButton>
</li>
</ul>
</Form>
</>)}
</FormProvider>
</div>
Expand Down
9 changes: 9 additions & 0 deletions css/components/form/field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@
color: $color-text-1;
background: none;
font-weight: $font-weight-default;

a {
color: $color-text-1;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

abbr {
Expand Down
4 changes: 0 additions & 4 deletions css/components/page/_static-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
width: 100%;
height: 220px;

@include breakpoint(medium) {
height: 250px;
}

background-size: cover;
background-repeat: no-repeat;
background-position: center;
Expand Down
Loading

0 comments on commit 012fc32

Please sign in to comment.