altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
102 lines (68 loc) • 4.7 kB
HTML
<!-- START: 03-maler-altinnett-innlogging-skjema-logg-inn -->
<div class="modal-content">
<div class="modal-body a-modal-body">
<div class="mb-4">
<h1 class="a-fontBold a-fontSizeXL mt-1">Logg inn</h1>
</div>
<div class="row mb-3">
<div class="col-12 col-lg-8">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group mb-2">
<label class="a-form-label " for="email-id">Brukernavn <a class="a-btn-link no-decoration float-right" href="#" data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-skjema-be-om-tilgang/03-maler-altinnett-innlogging-skjema-be-om-tilgang.markup-only.html" data-target="#modal">Be om tilgang <i class='ai ai-arrowright ai-nw'></i></a></label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="email" placeholder="e-post" name="input-field" data-val="true" id="email-id" data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group mb-0">
<label class="a-form-label " for="password-id">Passord <a class="a-btn-link no-decoration float-right" href="#">Glemt passord?</a></label>
<div class="a-form-group-items input-group ">
<input class="form-control form-control-noAddon
a-hasButton " type="password" name="input-field" data-val="true" id="password-id" onkeyup="setVisibility(this, 'btn-password-id')" autocomplete="off" data-val-regex="Passordet er ikke gyldig. Må bestå av minst 8 tegn og inneholde både bokstaver og tall. Bare bokstavene A-Z er tillatt."
data-val-regex-pattern="(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{7,50})$">
<div class="input-group-append">
<button class="btn btn-secondary d-none" type="button" id="btn-password-id" onclick="showPassword(this, 'password-id')">
<span class="show-password-text">
<i class='ai ai-read'><span class='sr-only'>Vis</span></i>
</span>
<span class="hide-password-text" style="display: none">
Skjul
</span>
</button>
</div>
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<div>
<button class="a-btn a-btn-success" data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="close" data-url="../../patterns/03-maler-altinnett-innlogging-modal-logg-inn/03-maler-altinnett-innlogging-modal-logg-inn.markup-only.html" data-target="#modal"
data-is-success="true">
Logg inn
</button>
<a class="ml-3" data-toggle="altinn-modal" data-action="close" data-target="#modal" href="#">Avbryt</a>
</div>
<div class="row mt-3">
<div class="col-12 col-lg-6 mb-2">
<h2 class="a-fontBold a-fontSizeXS mb-1">Innlogging gir tilgang til:</h2>
<ul class="no-decoration">
<li class="mb-1"><a href="#">Altinn Studio</a></li>
<li class="mb-1"><a href="#">Oversiktsside</a></li>
<li class="mb-1"><a href="#">SharePoint-løsninger</a></li>
<li class="mb-1"><a href="#">Selvbetjeningsportalen</a></li>
</ul>
</div>
<div class="col-12 col-lg-6 mb-2">
<h2 class="a-fontBold a-fontSizeXS mb-1">Innlogging gir ikke tilgang til:</h2>
<ul class="no-decoration">
<li class="mb-1"><a href="#">Altinn.no</a></li>
<li class="mb-1"><a href="#">TUL</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: 03-maler-altinnett-innlogging-skjema-logg-inn -->