<div class="account-form">
<p class="account-form__info">
Creating an account has many benefits: check out faster, keep more than one address, track orders and more.
</p>
<form class="account-form__form">
<fieldset class="
fieldset account-form__fieldset
margin-bottom-xl
">
<legend class="
fieldset__legend
account-form__legend
">
Personal information
</legend>
<div class="input margin-bottom-sm">
<label class="
label
input__label
" for="firstname">
First name *
</label>
<input class="input__field " id="firstname" name="fisrtname" type="text" placeholder="" aria-required="true" autocomplete="name" required>
</div>
<div class="input margin-bottom-sm">
<label class="
label
input__label
" for="lastname">
Last name *
</label>
<input class="input__field " id="lastname" name="lastname" type="text" placeholder="" aria-required="true" autocomplete="family-name" required>
</div>
<div class="checkbox account-form__newsletter-checkbox">
<input type="checkbox" id="is_subscribed" name="is_subscribed" class="checkbox__field account-form__newsletter-checkbox-field">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="is_subscribed" class="checkbox__label account-form__newsletter-checkbox-label">
<span class="checkbox__text">
Sign Up for Newsletter
</span>
</label>
</div>
</fieldset>
<fieldset class="
fieldset account-form__fieldset
">
<legend class="account-form__legend">
Sign-In information
</legend>
<div class="input margin-bottom-sm">
<label class="
label
input__label
" for="registration-email">
Email *
</label>
<input class="input__field " id="registration-email" name="email" type="email" placeholder="" aria-required="true" autocomplete="email" required>
</div>
<div class="margin-bottom-sm">
<div class="input input--password margin-bottom-m">
<label class="
label
input__label
" for="registration-password">
Password *
</label>
<input class="input__field " id="registration-password" name="password" type="password" placeholder="" aria-required="true" autocomplete="off" required>
<button type="button" class="
button
button--icon
input__button-pass
" aria-label="Show/hide password">
<svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
<title>view password icon</title>
<use href="/images/icons-sprite.svg#visibility-off"></use>
</svg>
<svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
<title>hide password icon</title>
<use href="/images/icons-sprite.svg#visibility"></use>
</svg>
</button>
</div>
<script src="/components/raw/input/input-password.js"></script>
<div class="account-form__password-strength">
<div class="password-strength password-none">
<div class="password-strength__handle ">
Password Strength:
<span class="password-strength__indicator" aria-live="polite">
No Password
</span>
</div>
</div>
</div>
</div>
<div class="input input--password margin-bottom-sm">
<label class="
label
input__label
" for="registration-confirm-password">
Confirm password *
</label>
<input class="input__field " id="registration-confirm-password" name="password-confirmation" type="password" placeholder="" aria-required="true" autocomplete="off" required>
<button type="button" class="
button
button--icon
input__button-pass
" aria-label="Show/hide password">
<svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
<title>view password icon</title>
<use href="/images/icons-sprite.svg#visibility-off"></use>
</svg>
<svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
<title>hide password icon</title>
<use href="/images/icons-sprite.svg#visibility"></use>
</svg>
</button>
</div>
<script src="/components/raw/input/input-password.js"></script>
</fieldset>
<div class="account-form__actions">
<button class="button account-form__button">
Create an Account
</button>
</div>
<div class="account-form__validation-tips">
* Required Fields
</div>
</form>
</div>
<div class="account-form">
<p class="account-form__info">
{{{ signUpInfo }}}
</p>
<form class="account-form__form">
<fieldset
class="
fieldset account-form__fieldset
{{ personalSection.fieldset.class }}
"
{{ personalSection.fieldset.attributes }}
>
<legend
class="
fieldset__legend
account-form__legend
{{ personalSection.legend.class }}
"
{{ personalSection.legend.attributes }}
>
{{ personalSection.legend.text }}
</legend>
{{ render '@input' firstName }}
{{ render '@input' lastName }}
{{ render '@checkbox' newsletterCheckbox }}
</fieldset>
<fieldset
class="
fieldset account-form__fieldset
{{ signInSection.fieldset.class }}
"
{{ signInSection.fieldset.attributes }}
>
<legend
class="{{ signInSection.legend.class }}"
{{ signInSection.legend.attributes }}
>
{{ signInSection.legend.text }}
</legend>
{{ render '@input' email }}
<div class="{{ passwordWrapClass }}">
{{ render '@input--password' password merge=true }}
<div class="account-form__password-strength">
{{ render '@password-strength' passwordStrength.none }}
</div>
</div>
{{ render '@input--password' passwordConfirmation merge=true }}
</fieldset>
<div class="account-form__actions">
{{ render '@button' registrationButton }}
</div>
<div class="account-form__validation-tips">
{{{ validationTips }}}
</div>
</form>
</div>
{
"signInInfo": "If you have an account, sign in with your email address.",
"signInSection": {
"fieldset": {
"attributes": "",
"class": ""
},
"legend": {
"class": "account-form__legend",
"text": "Sign-In information"
}
},
"email": {
"attributes": "",
"class": "margin-bottom-sm",
"label": {
"attributes": "",
"text": "Email *",
"hidden": false
},
"field": {
"attributes": "aria-required=\"true\" autocomplete=\"email\" required",
"class": "",
"id": "registration-email",
"name": "email",
"placeholder": "",
"type": "email"
}
},
"passwordWrapClass": "margin-bottom-sm",
"password": {
"attributes": "",
"class": "margin-bottom-m",
"label": {
"attributes": "",
"text": "Password *",
"hidden": false
},
"field": {
"attributes": "aria-required=\"true\" autocomplete=\"off\" required",
"class": "",
"id": "registration-password",
"name": "password",
"placeholder": "",
"type": "password"
},
"script": true,
"passwordTrigger": true
},
"loginButton": {
"class": "account-form__button",
"tag": "button",
"text": "Sign in"
},
"forgotPassword": {
"text": "Forgot Your Password",
"class": "account-form__forgot-password"
},
"validationTips": "* Required Fields",
"signUpInfo": "Creating an account has many benefits: check out faster, keep more than one address, track orders and more.",
"personalSection": {
"fieldset": {
"attributes": "",
"class": "margin-bottom-xl"
},
"legend": {
"class": "",
"text": "Personal information"
}
},
"firstName": {
"attributes": "",
"class": "margin-bottom-sm",
"label": {
"attributes": "",
"text": "First name *",
"hidden": false
},
"field": {
"attributes": "aria-required=\"true\" autocomplete=\"name\" required",
"class": "",
"id": "firstname",
"name": "fisrtname",
"placeholder": "",
"type": "text"
}
},
"lastName": {
"attributes": "",
"class": "margin-bottom-sm",
"label": {
"attributes": "",
"text": "Last name *",
"hidden": false
},
"field": {
"attributes": "aria-required=\"true\" autocomplete=\"family-name\" required",
"class": "",
"id": "lastname",
"name": "lastname",
"placeholder": "",
"type": "text"
}
},
"newsletterCheckbox": {
"class": "account-form__newsletter-checkbox",
"id": "is_subscribed",
"name": "is_subscribed",
"label": {
"text": "Sign Up for Newsletter",
"class": "account-form__newsletter-checkbox-label"
},
"input": {
"class": "account-form__newsletter-checkbox-field"
},
"icon": {
"class": "account-form__newsletter-checkbox-icon"
}
},
"passwordConfirmation": {
"passwordTrigger": true,
"attributes": "",
"class": "margin-bottom-sm",
"label": {
"attributes": "",
"text": "Confirm password *",
"hidden": false
},
"field": {
"attributes": "aria-required=\"true\" autocomplete=\"off\" required",
"class": "",
"id": "registration-confirm-password",
"name": "password-confirmation",
"placeholder": "",
"type": "password"
}
},
"passwordStrength": {
"none": {
"text": "Password Strength:",
"noPassword": "No Password",
"class": "password-none"
},
"weak": {
"text": "",
"noPassword": "Weak",
"class": "password-weak"
},
"medium": {
"text": "",
"noPassword": "Medium",
"class": "password-medium"
},
"strong": {
"text": "",
"noPassword": "Strong",
"class": "password-strong"
},
"veryStrong": {
"text": "",
"noPassword": "Very strong",
"class": "password-very-strong"
}
},
"registrationButton": {
"class": "account-form__button",
"tag": "button",
"text": "Create an Account"
}
}
$account-form__padding : $spacer 0 0 !default;
$account-form__actions-margin : $spacer--medium 0 !default;
$account-form__actions-width : 100% !default;
$account-form__actions-width\@medium : auto !default;
$account-form__button-min-width : 208px !default;
$account-form__form-margin : 0 !default;
$account-form__fieldset-max-width\@medium : 432px !default;
$account-form__fieldset-width : 100% !default;
$account-form__fieldset-margin : 0 0 $spacer--semi-large !default;
$account-form__legend-font-family : $font-family-base !default;
$account-form__legend-font-size : $font-size-large !default;
$account-form__legend-font-weight : $font-weight-bold !default;
$account-form__legend-margin : 0 !default;
$account-form__legend-padding : 0 0 $spacer--medium 0 !default;
$account-form__legend-width : 100% !default;
$account-form__legend-text-transform : uppercase !default;
$account-form__forgot-password-margin : $spacer--medium 0 0 0 !default;
$account-form__forgot-password-color : $gray-darker !default;
$account-form__forgot-password-font-weight : $font-weight-bold !default;
$account-form__forgot-password-text-decoration : none !default;
$account-form__forgot-password-text-decoration-hover: underline !default;
$account-form__forgot-password-line-height : 48px !default;
$account-form__info-width : 656px !default;
$account-form__info-margin : $spacer--extra-large auto !default;
$account-form__info-font-size : $font-size-medium !default;
$account-form__validation-tips-margin : 0 0 $spacer--semi-medium !default;
$account-form__validation-tips-font-size : $font-size-medium !default;
@import 'account-form-variables';
.account-form {
padding: $account-form__padding;
&__info {
max-width: $account-form__info-width;
margin: $account-form__info-margin;
font-size: $account-form__info-font-size;
text-align: center;
}
&__form {
display: flex;
flex-direction: column;
align-items: center;
margin: $account-form__form-margin;
}
&__fieldset {
width: $account-form__fieldset-width;
margin: $account-form__fieldset-margin;
@include mq($screen-m) {
max-width: $account-form__fieldset-max-width\@medium;
}
}
&__legend {
margin: $account-form__legend-margin;
padding: $account-form__legend-padding;
width: $account-form__legend-width;
font-family: $account-form__legend-font-family;
font-size: $account-form__legend-font-size;
font-weight: $account-form__legend-font-weight;
text-transform: $account-form__legend-text-transform;
text-align: center;
&--hidden {
@include visually-hidden();
}
}
&__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: column;
width: $account-form__actions-width;
margin: $account-form__actions-margin;
@include mq($screen-m) {
width: $account-form__actions-width\@medium;
}
}
&__button {
width: 100%;
min-width: $account-form__button-min-width;
}
&__forgot-password,
&__link {
margin: $account-form__forgot-password-margin;
color: $account-form__forgot-password-color;
font-weight: $account-form__forgot-password-font-weight;
text-decoration: $account-form__forgot-password-text-decoration;
line-height: $account-form__forgot-password-line-height;
&.focus-visible,
&:hover {
text-decoration: $account-form__forgot-password-text-decoration-hover;
}
}
&__validation-tips {
margin: $account-form__validation-tips-margin;
font-size: $account-form__validation-tips-font-size;
}
}
No notes defined.