<div class="p-24">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2">
<div
class="h4 text-normal text-right text-left-xs"
translate
>
Access mapping
</div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-9">
<fieldset class="c8y-fieldset p-24">
<legend>{{ 'Source of dynamic access mapping' | translate }}</legend>
<c8y-form-group>
<label
class="c8y-radio input-sm"
title="{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}"
>
<input
name="dynamicAccessMappingSource"
type="radio"
data-cy="dynamic-access-mapping-from-access-token"
[checked]="!mapFromIdToken"
(change)="setMapFromIdToken(false)"
/>
<span></span>
<span>{{ RETRIVE_FROM_ACCESS_TOKEN | translate }}</span>
</label>
<label
class="c8y-radio input-sm"
title="{{ RETRIVE_FROM_ID_TOKEN | translate }}"
>
<input
name="dynamicAccessMappingSource"
type="radio"
data-cy="dynamic-access-mapping-from-id-token"
[checked]="mapFromIdToken"
(change)="setMapFromIdToken(true)"
/>
<span></span>
<span>{{ RETRIVE_FROM_ID_TOKEN | translate }}</span>
</label>
</c8y-form-group>
</fieldset>
<fieldset class="c8y-fieldset p-24">
<legend>{{ 'Dynamic access mapping principle' | translate }}</legend>
<c8y-form-group>
<label
class="c8y-radio input-sm"
title="{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}"
>
<input
name="dynamicAccessMappingConfiguration"
type="radio"
data-cy="c8y-inventory-roles-mapping--on-user-creation"
[checked]="mapRolesOnlyForNewUser"
(change)="setDynamicMappingConfiguration(true)"
/>
<span></span>
<span>{{ USE_ACCESS_MAPPING_ON_USER_CREATION_OPTION | translate }}</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{ USE_ACCESS_MAPPING_ON_USER_CREATION_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
<label
class="c8y-radio input-sm"
title="{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}"
>
<input
name="dynamicAccessMappingConfiguration"
type="radio"
data-cy="c8y-inventory-roles-mapping--other-ones-will-be-unchanged"
[checked]="!mapRolesOnlyForNewUser && manageRolesOnlyFromAccessMapping"
(change)="setDynamicMappingConfiguration(false, true)"
/>
<span></span>
<span>
{{ UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_OPTION | translate }}
</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{
UPDATE_ROLES_LISTED_IN_ACCESS_MAPPING_ON_EACH_LOG_IN_TOOLTIP | translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
<label
class="c8y-radio input-sm"
title="{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}"
>
<input
name="dynamicAccessMappingConfiguration"
type="radio"
data-cy="c8y-inventory-roles-mapping--other-ones-will-be-cleared"
[checked]="!mapRolesOnlyForNewUser && !manageRolesOnlyFromAccessMapping"
(change)="setDynamicMappingConfiguration(false, false)"
/>
<span></span>
<span>
{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_OPTION | translate }}
</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{ CLEAR_AND_UPDATED_ROLES_ON_EACH_LOG_IN_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
</c8y-form-group>
</fieldset>
<fieldset class="c8y-fieldset p-16">
<legend>{{ 'Dynamic access mapping' | translate }}</legend>
<c8y-ui-empty-state
[icon]="'list'"
[title]="'No access mapping rules defined.' | translate"
[subtitle]="'Click below to add a new mapping.' | translate"
*ngIf="templateModel.onNewUser.dynamicMapping.mappings.length === 0"
[horizontal]="true"
></c8y-ui-empty-state>
<div
class="container-fluid"
*ngIf="templateModel.onNewUser.dynamicMapping.mappings.length > 0"
>
<c8y-paginated-list-group
#paginatedAccessMappings
[items]="templateModel.onNewUser.dynamicMapping.mappings"
>
<ng-template
let-accessMapping
let-index="index"
>
<c8y-sso-dynamic-access-mapping
[accessMapping]="accessMapping"
(onRemoveAccessMapping)="onRemove(accessMapping)"
[apps]="apps"
[groups]="groups"
[accessMappingIndex]="index"
></c8y-sso-dynamic-access-mapping>
</ng-template>
</c8y-paginated-list-group>
</div>
<div class="p-t-16">
<button
class="btn btn-default"
title="{{ 'Add access mapping' | translate }}"
id="add-access-mapping-button"
type="button"
(click)="addAccessMapping()"
>
<i
class="m-r-4"
c8yIcon="plus-circle"
></i>
{{ 'Add access mapping' | translate }}
</button>
</div>
</fieldset>
<fieldset class="c8y-fieldset p-16">
<legend>
{{ 'Inventory roles mapping' | translate }}
</legend>
<c8y-ui-empty-state
[icon]="'list'"
[title]="'No inventory roles mapping rules defined.' | translate"
[subtitle]="'Click below to add a new mapping.' | translate"
*ngIf="templateModel.onNewUser.dynamicMapping.inventoryMappings.length === 0"
[horizontal]="true"
></c8y-ui-empty-state>
<div
class="container-fluid"
*ngIf="templateModel.onNewUser.dynamicMapping.inventoryMappings.length > 0"
>
<c8y-paginated-list-group
#paginatedInventoryMappings
[items]="templateModel.onNewUser.dynamicMapping.inventoryMappings"
>
<ng-template
let-inventoryMapping
let-index="index"
>
<c8y-sso-inventory-roles-mapping
[inventoryRoles]="inventoryRoles"
[inventoryMapping]="inventoryMapping"
(onRemoveInventoryMapping)="onRemoveInventoryMapping(inventoryMapping)"
[inventoryMappingIndex]="index"
></c8y-sso-inventory-roles-mapping>
</ng-template>
</c8y-paginated-list-group>
</div>
<div class="p-t-16">
<button
class="btn btn-default"
title="{{ 'Add inventory roles mapping' | translate }}"
id="add-inventory-mapping-button"
type="button"
(click)="addInventoryMapping()"
>
<i
class="m-r-4"
c8yIcon="plus-circle"
></i>
{{ 'Add inventory roles mapping' | translate }}
</button>
</div>
</fieldset>
</div>
</div>
</div>