altinn-designsystem/dist/patterns/03-maler-altinnett-innlogging-skjema-registrer-bruker-og-passord/03-maler-altinnett-innlogging-skjema-registrer-bruker-og-passord.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 03-maler-altinnett-innlogging-skjema-registrer-bruker-og-passord -->
<div class="modal-content">

  <div class="modal-body a-modal-body">

    <div class="mb-4">
      <h1 class="a-fontBold a-fontSizeXL mt-1">Registrer bruker og passord</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">Din e-post</label>

          <div class="a-form-group-items input-group   ">


            <input class="form-control  
         " type="email" value="knut@patentstyret.no" name="input-field" data-val="true" id="email-id" data-val-regex="Feil epost verdier" data-val-regex-pattern="((&#39;[^&#39;]+&#39;)|(([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+(.([a-zA-Z0-9!#$%&amp;&#39;*+-&#x3D;?^_&#x60;{|}~])+)*))@((((([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-2">

          <label class="a-form-label  " for="mobile-id">Ditt mobilnummer</label>

          <div class="a-form-group-items input-group   ">

            <input class="form-control a-input-countryCode a-js-countryCode" id="text-input-countrycode" required placeholder="+47" type="tel" data-val-length-max="6" maxlength="6" data-val-length-min="2" />

            <input class="form-control a-input-phonenumber an-input-phonenumber 
         " type="tel" placeholder="mobilnummer" name="input-field" data-val="true" id="mobile-id" required data-val-regex="Telefonnummer må bestå av 8 siffer" data-val-regex-pattern="&quot;[0-9]{8}&quot;">




          </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 -->

        <!-- 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-5">

          <label class="a-form-label  " for="password-id">Velg passord <p class='mb-0'>Må være minimum 8 tegn og inkludere stor bokstav og tall</p></label>

          <div class="a-form-group-items input-group   ">


            <input class="form-control form-control-noAddon 
          a-hasButton " type="password" placeholder="Passord" 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 class="an-passwordStrengthMeter mt-2">
              <meter id="meter-password-id" min="0" max="10" low="4" high="8" optimum="10" value="7">medium</meter>
              <label for="meter-password-id">medium</label>
            </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-registrer-bruker-og-passord/03-maler-altinnett-innlogging-modal-registrer-bruker-og-passord.markup-only.html"
        data-target="#modal" data-is-success="true">
                Registrer og 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-registrer-bruker-og-passord -->