<div class="page-header d-flex">
  <h1>{{ "singleSignOn" | i18n }}</h1>
</div>

<ng-container *ngIf="loading">
  <i
    class="bwi bwi-spinner bwi-spin text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>

<form
  #form
  (ngSubmit)="submit()"
  [formGroup]="ssoConfigForm"
  [appApiAction]="formPromise"
  *ngIf="!loading"
>
  <p>
    {{ "ssoPolicyHelpStart" | i18n }}
    <a routerLink="../policies">{{ "ssoPolicyHelpLink" | i18n }}</a>
    {{ "ssoPolicyHelpEnd" | i18n }}
    <br />
    {{ "ssoPolicyHelpKeyConnector" | i18n }}
  </p>

  <!-- Root form -->
  <ng-container>
    <app-input-checkbox
      controlId="enabled"
      [formControl]="enabled"
      [label]="'allowSso' | i18n"
      [helperText]="'allowSsoDesc' | i18n"
    ></app-input-checkbox>

    <div class="form-group">
      <label>{{ "memberDecryptionOption" | i18n }}</label>
      <div class="form-check form-check-block">
        <input
          class="form-check-input"
          type="radio"
          id="memberDecryptionPass"
          [value]="false"
          formControlName="keyConnectorEnabled"
        />
        <label class="form-check-label" for="memberDecryptionPass">
          {{ "masterPass" | i18n }}
          <small>{{ "memberDecryptionPassDesc" | i18n }}</small>
        </label>
      </div>
      <div class="form-check mt-2 form-check-block">
        <input
          class="form-check-input"
          type="radio"
          id="memberDecryptionKey"
          [value]="true"
          formControlName="keyConnectorEnabled"
          [attr.disabled]="!organization.useKeyConnector || null"
        />
        <label class="form-check-label" for="memberDecryptionKey">
          {{ "keyConnector" | i18n }}
          <a
            target="_blank"
            rel="noopener"
            appA11yTitle="{{ 'learnMore' | i18n }}"
            href="https://bitwarden.com/help/about-key-connector/"
          >
            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
          </a>
          <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
        </label>
      </div>
    </div>

    <!-- Key Connector -->
    <ng-container *ngIf="ssoConfigForm.get('keyConnectorEnabled').value">
      <app-callout type="warning" [useAlertRole]="true">
        {{ "keyConnectorWarning" | i18n }}
      </app-callout>

      <div class="form-group">
        <label for="keyConnectorUrl">
          {{ "keyConnectorUrl" | i18n }}
          <small class="text-muted form-text d-inline">({{ "required" | i18n }})</small>
        </label>
        <div class="input-group">
          <input
            class="form-control"
            formControlName="keyConnectorUrl"
            id="keyConnectorUrl"
            aria-describedby="keyConnectorUrlDesc"
            (change)="haveTestedKeyConnector = false"
            appInputStripSpaces
            appA11yInvalid
          />
          <div class="input-group-append">
            <button
              type="button"
              class="btn btn-outline-secondary"
              (click)="validateKeyConnectorUrl()"
              [disabled]="!enableTestKeyConnector"
            >
              <i
                class="bwi bwi-spinner bwi-spin"
                title="{{ 'loading' | i18n }}"
                aria-hidden="true"
                *ngIf="keyConnectorUrl.pending"
              ></i>
              <span *ngIf="!keyConnectorUrl.pending">
                {{ "keyConnectorTest" | i18n }}
              </span>
            </button>
          </div>
        </div>
        <div *ngIf="haveTestedKeyConnector" id="keyConnectorUrlDesc" aria-live="polite">
          <small
            class="error-inline"
            *ngIf="keyConnectorUrl.hasError('invalidUrl'); else keyConnectorSuccess"
          >
            <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
            <span class="sr-only">{{ "error" | i18n }}:</span>
            {{ "keyConnectorTestFail" | i18n }}
          </small>
          <ng-template #keyConnectorSuccess>
            <small class="text-success">
              <i class="bwi bwi-check-circle" aria-hidden="true"></i>
              {{ "keyConnectorTestSuccess" | i18n }}
            </small>
          </ng-template>
        </div>
      </div>
    </ng-container>

    <app-select
      controlId="type"
      [label]="'type' | i18n"
      [selectOptions]="ssoTypeOptions"
      formControlName="configType"
    >
    </app-select>
  </ng-container>

  <!-- OIDC -->
  <div
    *ngIf="ssoConfigForm.get('configType').value === ssoType.OpenIdConnect"
    [formGroup]="openIdForm"
  >
    <div class="config-section">
      <h2 class="secondary-header">{{ "openIdConnectConfig" | i18n }}</h2>

      <app-input-text-readonly
        [label]="'callbackPath' | i18n"
        [controlValue]="callbackPath"
      ></app-input-text-readonly>

      <app-input-text-readonly
        [label]="'signedOutCallbackPath' | i18n"
        [controlValue]="signedOutCallbackPath"
      ></app-input-text-readonly>

      <app-input-text
        [label]="'authority' | i18n"
        controlId="authority"
        [stripSpaces]="true"
        formControlName="authority"
      ></app-input-text>

      <app-input-text
        [label]="'clientId' | i18n"
        controlId="clientId"
        [stripSpaces]="true"
        formControlName="clientId"
      ></app-input-text>

      <app-input-text
        [label]="'clientSecret' | i18n"
        controlId="clientSecret"
        [stripSpaces]="true"
        formControlName="clientSecret"
      ></app-input-text>

      <app-input-text
        [label]="'metadataAddress' | i18n"
        controlId="metadataAddress"
        [stripSpaces]="true"
        [helperText]="'openIdAuthorityRequired' | i18n"
        formControlName="metadataAddress"
      ></app-input-text>

      <app-select
        controlId="redirectBehavior"
        [label]="'oidcRedirectBehavior' | i18n"
        [selectOptions]="connectRedirectOptions"
        formControlName="redirectBehavior"
      >
      </app-select>

      <app-input-checkbox
        controlId="getClaimsFromUserInfoEndpoint"
        formControlName="getClaimsFromUserInfoEndpoint"
        [label]="'getClaimsFromUserInfoEndpoint' | i18n"
      ></app-input-checkbox>

      <!-- Optional customizations -->
      <div
        class="section-header d-flex flex-row align-items-center mt-3 mb-3"
        (click)="toggleOpenIdCustomizations()"
      >
        <h3 class="mb-0 mr-2" id="customizations-header">
          {{ "openIdOptionalCustomizations" | i18n }}
        </h3>
        <button
          class="mb-1 btn btn-link"
          type="button"
          appStopClick
          role="button"
          aria-controls="customizations"
          [attr.aria-expanded]="showOpenIdCustomizations"
          aria-labelledby="customizations-header"
        >
          <i
            class="bwi"
            aria-hidden="true"
            [ngClass]="{
              'bwi-angle-down': !showOpenIdCustomizations,
              'bwi-chevron-up': showOpenIdCustomizations
            }"
          ></i>
        </button>
      </div>
      <div id="customizations" [hidden]="!showOpenIdCustomizations">
        <app-input-text
          [label]="'additionalScopes' | i18n"
          controlId="additionalScopes"
          [helperText]="'separateMultipleWithComma' | i18n"
          formControlName="additionalScopes"
        ></app-input-text>

        <app-input-text
          [label]="'additionalUserIdClaimTypes' | i18n"
          controlId="additionalUserIdClaimTypes"
          [helperText]="'separateMultipleWithComma' | i18n"
          formControlName="additionalUserIdClaimTypes"
        ></app-input-text>

        <app-input-text
          [label]="'additionalEmailClaimTypes' | i18n"
          controlId="additionalEmailClaimTypes"
          [helperText]="'separateMultipleWithComma' | i18n"
          formControlName="additionalEmailClaimTypes"
        ></app-input-text>

        <app-input-text
          [label]="'additionalNameClaimTypes' | i18n"
          controlId="additionalNameClaimTypes"
          [helperText]="'separateMultipleWithComma' | i18n"
          formControlName="additionalNameClaimTypes"
        ></app-input-text>

        <app-input-text
          [label]="'acrValues' | i18n"
          controlId="acrValues"
          helperText="acr_values"
          formControlName="acrValues"
        ></app-input-text>

        <app-input-text
          [label]="'expectedReturnAcrValue' | i18n"
          controlId="expectedReturnAcrValue"
          helperText="acr_validation"
          formControlName="expectedReturnAcrValue"
        ></app-input-text>
      </div>
    </div>
  </div>

  <!-- SAML2 SP -->
  <div *ngIf="ssoConfigForm.get('configType').value === ssoType.Saml2" [formGroup]="samlForm">
    <!-- SAML2 SP -->
    <div class="config-section">
      <h2 class="secondary-header">{{ "samlSpConfig" | i18n }}</h2>

      <app-input-text-readonly
        [label]="'spEntityId' | i18n"
        [controlValue]="spEntityId"
      ></app-input-text-readonly>

      <app-input-text-readonly
        [label]="'spMetadataUrl' | i18n"
        [controlValue]="spMetadataUrl"
        [showLaunch]="true"
      ></app-input-text-readonly>

      <app-input-text-readonly
        [label]="'spAcsUrl' | i18n"
        [controlValue]="spAcsUrl"
      ></app-input-text-readonly>

      <app-select
        controlId="spNameIdFormat"
        [label]="'spNameIdFormat' | i18n"
        [selectOptions]="saml2NameIdFormatOptions"
        formControlName="spNameIdFormat"
      >
      </app-select>

      <app-select
        controlId="spOutboundSigningAlgorithm"
        [label]="'spOutboundSigningAlgorithm' | i18n"
        [selectOptions]="samlSigningAlgorithmOptions"
        formControlName="spOutboundSigningAlgorithm"
      >
      </app-select>

      <app-select
        controlId="spSigningBehavior"
        [label]="'spSigningBehavior' | i18n"
        [selectOptions]="saml2SigningBehaviourOptions"
        formControlName="spSigningBehavior"
      >
      </app-select>

      <app-select
        controlId="spMinIncomingSigningAlgorithm"
        [label]="'spMinIncomingSigningAlgorithm' | i18n"
        [selectOptions]="samlSigningAlgorithmOptions"
        formControlName="spMinIncomingSigningAlgorithm"
      >
      </app-select>

      <app-input-checkbox
        controlId="spWantAssertionsSigned"
        formControlName="spWantAssertionsSigned"
        [label]="'spWantAssertionsSigned' | i18n"
      ></app-input-checkbox>

      <app-input-checkbox
        controlId="spValidateCertificates"
        formControlName="spValidateCertificates"
        [label]="'spValidateCertificates' | i18n"
      ></app-input-checkbox>
    </div>

    <!-- SAML2 IDP -->
    <div class="config-section">
      <h2 class="secondary-header">{{ "samlIdpConfig" | i18n }}</h2>

      <app-input-text
        [label]="'idpEntityId' | i18n"
        controlId="idpEntityId"
        formControlName="idpEntityId"
      ></app-input-text>

      <app-select
        controlId="idpBindingType"
        [label]="'idpBindingType' | i18n"
        [selectOptions]="saml2BindingTypeOptions"
        formControlName="idpBindingType"
      >
      </app-select>

      <app-input-text
        [label]="'idpSingleSignOnServiceUrl' | i18n"
        controlId="idpSingleSignOnServiceUrl"
        [helperText]="'idpSingleSignOnServiceUrlRequired' | i18n"
        [stripSpaces]="true"
        formControlName="idpSingleSignOnServiceUrl"
      ></app-input-text>

      <app-input-text
        [label]="'idpSingleLogoutServiceUrl' | i18n"
        controlId="idpSingleLogoutServiceUrl"
        [stripSpaces]="true"
        formControlName="idpSingleLogoutServiceUrl"
      ></app-input-text>

      <div class="form-group">
        <label for="idpX509PublicCert">
          {{ "idpX509PublicCert" | i18n }}
          <small class="text-muted form-text d-inline">({{ "required" | i18n }})</small>
        </label>
        <textarea
          formControlName="idpX509PublicCert"
          class="form-control form-control-sm text-monospace"
          rows="6"
          id="idpX509PublicCert"
          appA11yInvalid
          aria-describedby="idpX509PublicCertDesc"
        ></textarea>
        <small
          id="idpX509PublicCertDesc"
          class="error-inline"
          role="alert"
          *ngIf="samlForm.get('idpX509PublicCert').hasError('required')"
        >
          <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
          <span class="sr-only">{{ "error" | i18n }}:</span>
          {{ "fieldRequiredError" | i18n: ("idpX509PublicCert" | i18n) }}
        </small>
      </div>

      <app-select
        controlId="idpOutboundSigningAlgorithm"
        [label]="'idpOutboundSigningAlgorithm' | i18n"
        [selectOptions]="samlSigningAlgorithmOptions"
        formControlName="idpOutboundSigningAlgorithm"
      >
      </app-select>

      <!--TODO: Uncomment once Unsolicited IdP Response is supported-->
      <!-- <app-input-checkbox
        controlId="idpAllowUnsolicitedAuthnResponse"
        formControlName="idpAllowUnsolicitedAuthnResponse"
        [label]="'idpAllowUnsolicitedAuthnResponse' | i18n"
      ></app-input-checkbox> -->

      <app-input-checkbox
        controlId="idpAllowOutboundLogoutRequests"
        formControlName="idpAllowOutboundLogoutRequests"
        [label]="'idpAllowOutboundLogoutRequests' | i18n"
      ></app-input-checkbox>

      <app-input-checkbox
        controlId="idpWantAuthnRequestsSigned"
        formControlName="idpWantAuthnRequestsSigned"
        [label]="'idpSignAuthenticationRequests' | i18n"
      ></app-input-checkbox>
    </div>
  </div>

  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span>{{ "save" | i18n }}</span>
  </button>
  <div
    id="errorSummary"
    class="error-summary text-danger"
    *ngIf="this.getErrorCount(ssoConfigForm) as errorCount"
  >
    <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
    <span class="sr-only">{{ "error" | i18n }}:</span>
    {{
      (errorCount === 1 ? "formErrorSummarySingle" : "formErrorSummaryPlural") | i18n: errorCount
    }}
  </div>
</form>
