<div class="field-group">
<label for="password">Lösenord</label>
<input type="password" id="password" placeholder="" autocomplete="off" class="a-input has-icon ">
<button class="input-icon js-toggle-input-type">
<svg class="icon">
<use xlink:href="#icon-read"></use>
</svg>
<span class="u-visuallyhidden">Visa lösenordet</span>
</button>
</div>
<div class="field-group{{#if is_invalid}} is-invalid{{/if}}">
{{> @label labelClasses="" label="Lösenord" for="password" }}
<input type="{{type}}" id="{{id}}" {{#if is_invalid}}aria-invalid="true"{{/if}} {{#if value}}value="{{value}}"{{/if}} {{#if required}}required{{/if}} {{#if is_disabled}}disabled{{/if}} placeholder="{{placeholder}}" autocomplete="{{autocomplete}}" class="a-input{{#if has_icon}} has-icon{{/if}} {{#if modifier}} {{modifier}}{{/if}}" {{#if has_help}} aria-describedby="first-name-help"{{/if}} {{#if required}} aria-describedby="first-name-help"{{/if}}>
{{#if has_icon}}
<button class="input-icon js-toggle-input-type">
{{> @icon id="read"}}
<span class="u-visuallyhidden">Visa lösenordet</span>
</button>
{{/if}}
{{#if has_help}}
<div class="input-help" id="first-name-help">
Fyll i ditt tilltalsnamn
</div>
{{else if required}}
<div class="input-help" id="first-name-help">
Tillåtna tecken är [a-ö, A-Ö]
</div>
{{/if}}
</div>
{
"type": "password",
"id": "password",
"value": false,
"placeholder": "",
"autocomplete": "off",
"has_icon": true,
"required": false,
"disabled": false
}
@charset "UTF-8";
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
input[type='password'],
input[type='text'] {
+ button.#{var.$namespace}input-icon {
border: 0;
border-radius: 0;
background: transparent;
cursor: pointer;
&:hover,
&:focus {
box-shadow: none !important;
}
}
}
input[type='password'] {
+ button.#{var.$namespace}input-icon {
svg {
fill: colors.$color-granit;
}
}
}
input[type='text'] {
+ button.#{var.$namespace}input-icon {
svg {
fill: colors.$color-cyberspace;
}
}
}
const elements = document.querySelectorAll('.js-toggle-input-type');
if (elements) {
[].forEach.call(elements, (element) => {
element.addEventListener('click', () => {
const input = element.previousElementSibling;
input.type = (input.type === 'password') ? 'text' : 'password';
});
});
}
Toggle visibility for password text