altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
165 lines (94 loc) • 6.48 kB
HTML
<!-- START: 03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker -->
<div class="modal-content">
<div class="modal-header a-modal-header">
<div class="a-iconText a-iconText-background a-iconText-large">
<div class="a-iconText-icon">
<i class="ai a-icon" aria-hidden="true"></i>
</div>
<h1 class="a-iconText-text mb-0">
<span class="a-iconText-text-large">Endre og fjerne bruker</span>
</h1>
</div>
</div>
<div class="modal-body a-modal-body">
<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="first-name-id">Fornavn</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" value="Dag" name="input-field" data-val="true" id="first-name-id">
</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="surname-id">Etternavn</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="text" value="Dale" name="input-field" data-val="true" id="surname-id">
</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="email-id">E-post</label>
<div class="a-form-group-items input-group ">
<input class="form-control
" type="email" value="dag.dale@patentstyret.no" 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-08-radioknapp-hjelpetekst -->
<fieldset class="form-group ">
<legend class="a-legend">Hvilke rettigheter skal brukeren ha?
<span class="a-titleExtra"><a href="javascript:void(0)" tabindex="0" class="a-linkArea a-helpIconButton a-helpIconButton--blue a-js-togglePopoverIcons" role="button" data-toggle="popover" data-animation="false" data-target="#myPopup" data-placement="bottom" data-trigger="click" data-popover-content="popoverWithIconToggle" data-original-title=""><i class="ai ai-circle-plus a-js-popoverIconInitial " aria-hidden="true"></i><i class="ai ai-circle-minus a-js-popoverIconExpanded " aria-hidden="true" style="display: none;"></i><span class="sr-only">Vis mer info</span>
</a>
<div id="popoverWithIconToggle" style="display: none">Hjelptekst</div>
</span>
</legend>
<div class="custom-control custom-radio a-custom-radio ">
<input type="radio" id="radio-choice1" name="customRadio" value="radio-choice1" class="custom-control-input" checked>
<label class="custom-control-label a-radioButtons-title" for="radio-choice1">Lesetilgang
</label>
</div>
<div class="custom-control custom-radio a-custom-radio ">
<input type="radio" id="radio-choice2" name="customRadio" value="radio-choice2" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio-choice2">Lese- og skrivetilgang
</label>
</div>
<div class="custom-control custom-radio a-custom-radio ">
<input type="radio" id="radio-choice3" name="customRadio" value="radio-choice3" class="custom-control-input">
<label class="custom-control-label a-radioButtons-title" for="radio-choice3">Administrator, lese- og skrivetilgang
</label>
</div>
</fieldset>
<!-- END: 00-atomer-01-forms-08-radioknapp-hjelpetekst -->
</div>
<div class="col-lg-4">
<!-- START: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
<button type="button" class="a-btn a-btn-icon a-btn-link p-0 ml-lg-auto " data-toggle="altinn-modal" data-action="next" data-url="../../patterns/03-maler-altinnett-innlogging-kvittering-bruker-fjernet/03-maler-altinnett-innlogging-kvittering-bruker-fjernet.markup-only.html"
data-target="#modal" aria-controls="modal" data-is-success="true">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit a-danger ai-left " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span class="a-btn-icon-text border-0 p-0 a-fontSizeS">
Fjern bruker
</span>
</button>
<!-- END: 00-atomer-03-knapper-25-knapp-ikon-tekst -->
</div>
</div>
<div>
<button class="a-btn " data-enable-dirty-popover="true" data-toggle="altinn-modal" data-action="close" data-url="../../patterns/03-maler-altinnett-innlogging-modal-alle-i-din-organisasjon/03-maler-altinnett-innlogging-modal-alle-i-din-organisasjon.markup-only.html"
data-target="#modal" data-is-success="true">
Lagre endring
</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>
</div>
</div>
<!-- END: 03-maler-altinnett-innlogging-skjema-endre-og-fjerne-bruker -->