<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="change-password first-login">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="change-password__head">
<img src="/dist/images/contrasenha.svg" alt="Cambio de contraseña">
<h2 class="
title-l
">
Cambia tu contraseña
</h2>
<div class="
bodycopy-m
">
Sabemos que estás impaciente por conseguir tu hipoteca, pero, por seguridad, necesitamos que cambies tu contraseña.
</div>
</div>
</div>
</div>
<div class="row wrap">
<div class="col-xs-12 col-ms-8 col-ms-mr-ml col-sm-5 col-lg-5 col col-sm-offset-right-1">
<div class="change-password__list">
<div class="list">
<ul>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy">¿Sabías que una de las contraseñas más comunes es 12345678? y caracteres especiales.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy">Elige una contraseña difícil de adivinar y no la guardes en ningún navegador.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy">Recuerda que las contraseñas más seguras son las que combinan mayúsculas, minúsculas, números y caracteres especiales.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-8 col-ms-mr-ml col-sm-5 col-lg-5 col col-sm-offset-1">
<div class="change-password__form">
<form>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<ul class="form-list">
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Nueva contraseña</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_passnew
" id="passNew" type="text" name="" title="passnew" autocomplete="" placeholder="Introduce nueva contraseña" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Repite nueva contraseña</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_passnew2
" id="passNew2" type="text" name="" title="passnew2" autocomplete="" placeholder="Repite la nueva contraseña" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="levels">
<div class="levels__wrap"><label class="label-m" for="">Nivel de seguridad:</label>
<label class="label-m" for=""></label>
</div>
<ul>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Actualizar contraseña
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="change-password{{#if first-login}} first-login{{/if}}" {{#if id}} id="{{id}}" {{/if}}>
{{#if head}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="change-password__head">
<img src="{{img}}" alt="{{img-alt}}">
{{> @title-l head }}
{{> @bodycopy-m head-subtitle }}
</div>
</div>
</div>
{{/if}}
<div class="row wrap">
<div class="col-xs-12 col-ms-8 col-ms-mr-ml col-sm-5 col-lg-5 col{{#if first-login}} col-sm-offset-right-1{{else}}{{/if}}">
<div class="change-password__list">
{{> @list list }}
</div>
</div>
<div class="col-xs-12 col-ms-8 col-ms-mr-ml col-sm-5 col-lg-5 col{{#if first-login}} col-sm-offset-1{{else}} col-sm-offset-1{{/if}}">
<div class="change-password__form">
<form>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @form-list form-list }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{render "@levels" }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @form-btn submit-btn }}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Actualizar contraseña"
}
},
"list": {
"listitem": [
{
"name": "bullet-list",
"text": "¿Sabías que una de las contraseñas más comunes es 12345678? y caracteres especiales."
},
{
"name": "bullet-list",
"text": "Elige una contraseña difícil de adivinar y no la guardes en ningún navegador."
},
{
"name": "bullet-list",
"text": "Recuerda que las contraseñas más seguras son las que combinan mayúsculas, minúsculas, números y caracteres especiales."
}
]
},
"form-list": {
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nueva contraseña"
}
},
"input": {
"distinguisher": "passnew",
"id": "passNew",
"type": "text",
"title": "passnew",
"placeholder": "Introduce nueva contraseña"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Repite nueva contraseña"
}
},
"input": {
"distinguisher": "passnew2",
"id": "passNew2",
"type": "text",
"title": "passnew2",
"placeholder": "Repite la nueva contraseña"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"first-login": true,
"img": "/dist/images/contrasenha.svg",
"img-alt": "Cambio de contraseña",
"head": {
"text": "Cambia tu contraseña"
},
"head-subtitle": {
"text": "Sabemos que estás impaciente por conseguir tu hipoteca, pero, por seguridad, necesitamos que cambies tu contraseña."
}
}
.change-password{
&__head{
text-align: center;margin-bottom: 40px;
.bodycopy-m, title-l{
margin-top: 16px;
}
}
.wrap{
@media (--viewport-ms-max) {
flex-direction: column-reverse;
}
}
.list{
@media (--viewport-sm-min) {
margin-top: 22px;
}
@media (--viewport-ms-max) {
margin-top: 64px;
}
}
&.first-login{
.wrap{
flex-direction: row-reverse;
@media (--viewport-ms-max) {
flex-direction: column-reverse;
}
}
.list{
padding: 40px;
margin-top: 40px;
background-color: var(--color-background-accent);
@media (--viewport-ms-max) {
margin-top: 64px;
}
}
}
}
No notes defined.