<fieldset class="p-24">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 m-b-xs-8">
<div
class="h4 text-normal text-right text-left-xs"
translate
>
Basic
</div>
</div>
@if (templateModel) {
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-9">
<div class="row">
@if (shouldShow('keyCloakAddress')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="keyCloakAddress"
translate
>
Keycloak address
</label>
<input
class="form-control"
id="keyCloakAddress"
name="keyCloakAddress"
type="url"
required
[(ngModel)]="templateModel.keyCloakAddress"
[placeholder]="
'e.g. {{ example }}' | translate: { example: 'https://example.de' }
"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('aadAddress')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="aadAddress"
translate
>
Azure AD address
</label>
<input
class="form-control"
id="aadAddress"
name="aadAddress"
type="url"
required
[(ngModel)]="templateModel.aadAddress"
[placeholder]="
'e.g. {{ example }}'
| translate: { example: 'https://login.microsoftonline.de' }
"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('tenant')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="tenant"
translate
>
Tenant
</label>
<input
class="form-control"
id="tenant"
name="tenant"
required
[(ngModel)]="templateModel.tenant"
[placeholder]="
'e.g. {{ example }}' | translate: { example: 'c8y.onmicrosoft.de' }
"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('applicationId')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="applicationId"
translate
>
Application ID
</label>
<input
class="form-control"
id="applicationId"
name="applicationId"
required
[(ngModel)]="templateModel.applicationId"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('realmName')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="realmName"
translate
>
Realm name
</label>
<input
class="form-control"
id="realmName"
name="realmName"
required
[(ngModel)]="templateModel.realmName"
/>
</c8y-form-group>
</div>
}
</div>
@if (shouldShow('redirectToPlatform')) {
<div class="row">
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="redirectToPlatform"
>
{{ 'Redirect URL' | translate }}
@if (
!flowControlledByUI &&
redirectToPlatformWarningParams &&
templateModel.redirectToPlatform !==
redirectToPlatformWarningParams.defaultRedirectUrl
) {
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
[popover]="helpContent"
placement="bottom"
triggers="focus"
type="button"
[adaptivePosition]="false"
></button>
}
<ng-template #helpContent>
<span
ngNonBindable
translate
[translateParams]="redirectToPlatformWarningParams"
>
For correct application behavior you can use only "{{ host }}" or "{{
defaultRedirectUrl
}}", the latter one is recommended.
</span>
</ng-template>
</label>
<input
class="form-control"
id="redirectToPlatform"
name="redirectToPlatform"
type="url"
[required]="!flowControlledByUI"
[disabled]="flowControlledByUI"
[(ngModel)]="templateModel.redirectToPlatform"
[placeholder]="
'e.g. {{ example }}'
| translate
: {
example:
redirectToPlatformWarningParams?.defaultRedirectUrl ||
'https://tenant.domain.com'
}
"
/>
</c8y-form-group>
</div>
<div class="col-sm-6">
<div class="form-group">
<label
class="c8y-switch m-t-24"
title="{{
'Redirect to the user interface application`SSO authentication`' | translate
}}"
for="flowControlledByUI"
>
<input
id="flowControlledByUI"
name="flowControlledByUI"
type="checkbox"
[(ngModel)]="flowControlledByUI"
(change)="
templateModel.redirectToPlatform = flowControlledByUI
? ''
: redirectToPlatform
"
/>
<span></span>
<span class="control-label">{{
'Redirect to the user interface application`SSO authentication`' | translate
}}</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{ REDIRECT_TO_THE_USER_INTERFACE_APPLICATION_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
</div>
</div>
<div class="col-sm-12">
@if (flowControlledByUI && redirectToPlatform !== '') {
<div>
<div
class="alert alert-warning max-width-100 m-b-32"
ngNonBindable
translate
[translateParams]="{
redirectURI: '<tenant_domain>/apps/*'
}"
>
Make sure that "Valid Redirect URIs" in the authorization server is set to "{{
redirectURI
}}" or to the full URIs of the used applications if the authorization server
does not support patterns.
</div>
</div>
}
@if (!flowControlledByUI && redirectToPlatform === '') {
<div>
<div
class="alert alert-warning max-width-100 m-b-32"
ngNonBindable
translate
[translateParams]="{
redirectURI: '<tenant_domain>/tenant/oauth'
}"
>
Make sure that "Valid Redirect URIs" in the authorization server is set to "{{
redirectURI
}}".
</div>
</div>
}
</div>
</div>
}
<div class="row">
@if (shouldShow('clientSecret')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="clientSecret"
translate
>
Client secret
</label>
<input
class="form-control"
id="clientSecret"
name="clientSecret"
required
[(ngModel)]="templateModel.clientSecret"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('clientId')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="clientId"
translate
>
Client ID
</label>
<input
class="form-control"
id="clientId"
name="clientId"
required
[(ngModel)]="templateModel.clientId"
[placeholder]="
'e.g. {{ example }}' | translate: { example: '254234981c-78a8-4588…' }
"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('issuer')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="issuer"
translate
>
Token issuer
</label>
<input
class="form-control"
id="issuer"
name="issuer"
required
[(ngModel)]="templateModel.issuer"
[placeholder]="
'e.g. {{ example }}'
| translate: { example: 'https://login.microsoftonline.de/237652-3727' }
"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('scopeId')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="scopeId"
translate
>
Scope ID
</label>
<input
class="form-control"
id="scopeId"
name="scopeId"
[(ngModel)]="templateModel.scopeId"
[placeholder]="'e.g. {{ example }}' | translate: { example: '237652-3727' }"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('buttonName')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="buttonName"
translate
>
Button name
</label>
<input
class="form-control"
id="buttonName"
name="buttonName"
required
[(ngModel)]="templateModel.buttonName"
[placeholder]="'e.g. Log in with Azure AD' | translate"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('providerName')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="providerName"
translate
>
Provider name
</label>
<input
class="form-control"
id="providerName"
name="providerName"
required
[(ngModel)]="templateModel.providerName"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'Azure AD' }"
/>
</c8y-form-group>
</div>
}
@if (shouldShow('audience')) {
<div class="col-sm-6">
<c8y-form-group>
<label
class="control-label"
for="audience"
translate
>
Audience
</label>
<input
class="form-control"
id="audience"
name="audience"
required
[(ngModel)]="templateModel.audience"
[placeholder]="
'e.g. {{ example }}' | translate: { example: 'https://test.example.com' }
"
/>
</c8y-form-group>
</div>
}
</div>
@if (shouldShow('mtlsCertificatePem')) {
<div class="row">
<div class="col-sm-12">
<label
class="c8y-switch m-b-16"
title="{{ 'Enable mTLS authentication' | translate }}"
for="mtlsEnabled"
>
<input
id="mtlsEnabled"
name="mtlsEnabled"
type="checkbox"
[(ngModel)]="mtlsEnabled"
(change)="onMtlsEnabledChange()"
/>
<span></span>
<span class="control-label">{{ 'Enable mTLS authentication' | translate }}</span>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{ MTLS_ENABLED_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
</div>
<div
class="col-sm-12"
[class.hidden]="!mtlsEnabled"
>
<div class="row">
<div class="col-sm-6">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Certificate (PEM)' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ MTLS_CERTIFICATE_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</legend>
<c8y-form-group>
<textarea
class="form-control m-b-8 text-monospace"
[class.hidden]="!templateModel.mtlsCertificatePem"
aria-label="{{ 'Currently saved certificate' | translate }}"
id="mtlsCertificatePem"
name="mtlsCertificatePem"
rows="4"
readonly
[(ngModel)]="templateModel.mtlsCertificatePem"
[required]="mtlsEnabled"
></textarea>
@let mtlsAddCertificateLabel = 'Drop file here' | translate;
@let mtlsReplaceCertificateLabel =
'Drop a new certificate to replace' | translate;
<c8y-drop-area
class="drop-area-sm"
[title]="'Drop the certificate in PEM format.' | translate"
name="mtlsCertificateFile"
[(ngModel)]="mtlsCertificateFile"
[message]="
templateModel.mtlsCertificatePem
? mtlsReplaceCertificateLabel
: mtlsAddCertificateLabel
"
data-cy="c8y-sso-mtls--certificate-drop-area"
(dropped)="uploadMtlsCertificate($event)"
[maxAllowedFiles]="1"
[maxFileSizeInMegaBytes]="1"
[accept]="'.pem'"
></c8y-drop-area>
</c8y-form-group>
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="c8y-fieldset">
<legend>
{{ 'Private key (PEM)' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ MTLS_PRIVATE_KEY_TOOLTIP | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</legend>
<c8y-form-group>
<textarea
class="form-control m-b-8 text-monospace"
[class.hidden]="!templateModel.mtlsPrivateKeyPem"
aria-label="{{ 'Currently saved private key' | translate }}"
id="mtlsPrivateKeyPem"
name="mtlsPrivateKeyPem"
rows="{{ templateModel.mtlsPrivateKeyPem ? '3' : '4' }}"
readonly
[(ngModel)]="templateModel.mtlsPrivateKeyPem"
[required]="mtlsEnabled"
></textarea>
@let mtlsAddPrivateKeyLabel = 'Drop file here' | translate;
@let mtlsReplacePrivateKeyLabel =
'Drop a new private key to replace' | translate;
<c8y-drop-area
class="drop-area-sm"
[title]="'Drop the private key in PEM format.' | translate"
name="mtlsPrivateKeyFile"
[(ngModel)]="mtlsPrivateKeyFile"
[message]="
templateModel.mtlsPrivateKeyPem
? mtlsReplacePrivateKeyLabel
: mtlsAddPrivateKeyLabel
"
data-cy="c8y-sso-mtls--private-key-drop-area"
(dropped)="uploadMtlsPrivateKey($event)"
[maxAllowedFiles]="1"
[maxFileSizeInMegaBytes]="1"
[accept]="'.pem,.key'"
></c8y-drop-area>
@if (templateModel.mtlsPrivateKeyPem) {
<small class="text-muted d-flex a-i-center gap-4 m-t-4">
<i
class="text-info"
c8yIcon="info-circle"
aria-hidden="true"
></i>
@if (isMtlsPrivateKeyEncrypted) {
<span translate>
The private key is encrypted for security reasons.
</span>
} @else {
<span translate>
The private key will be encrypted on the server after saving.
</span>
}
</small>
}
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
}
@if (shouldShow('visibleOnLoginPage')) {
<div class="row">
<div class="col-sm-6">
<label
class="c8y-switch"
title="{{ 'Visible on login page' | translate }}"
for="visibleOnLoginPage"
>
<input
id="visibleOnLoginPage"
name="visibleOnLoginPage"
type="checkbox"
[(ngModel)]="templateModel.visibleOnLoginPage"
/>
<span></span>
<span class="control-label">{{ 'Visible on login page' | translate }}</span>
</label>
</div>
</div>
}
</div>
}
</div>
</fieldset>