import { html, repeat, when } from '@microsoft/fast-element';
import { sync } from '@genesislcap/foundation-utils';
import { organisationField, passwordField, showPasswordsCheckbox, usernameField, submitButton, } from '../base';
const regularLogin = html `
  ${when((login) => !login.ssoToggled, html `
      ${organisationField()} ${usernameField()} ${passwordField()}
      <span class="case-warning">*Fields are case-sensitive</span>
      ${showPasswordsCheckbox()}
      <div class="form-buttons">
        ${(x) => submitButton('Login', 'submit-login', x.submitDisabled)}
        <div class="links">
          <div class="password-links">
            ${when((x) => !x.config.omitRoutes.includes('forgot-password'), html `
                <a
                  class="link-url"
                  @click=${(x) => x.onNavigate(`forgot-password`)}
                  data-test-id="forgot-password"
                >
                  Forgot Password?
                </a>
              `)}
            ${when((x) => !x.config.omitRoutes.includes('reset-password'), html `
                <a
                  class="link-url"
                  @click=${(x) => x.onNavigate(`reset-password`)}
                  data-test-id="reset-password"
                >
                  Change Password
                </a>
              `)}
          </div>
          <div class="account-links">
            ${when((x) => !x.config.omitRoutes.includes('request-account'), html `
                <a
                  class="link-url"
                  @click=${(x) => x.onNavigate(`request-account`)}
                  data-test-id="request-account"
                >
                  Request Account
                </a>
              `)}
          </div>
        </div>
      </div>
      ${when((x) => x.config.versionInformation, html `
          <div>
            <span class="version" data-test-id="version">
              ${(x) => x.config.versionInformation}
            </span>
          </div>
        `)}
    `)}
`;
const ssoLogin = html `
  ${when((login) => login.ssoToggled, html `
      <div class="sso">
        <span class="form-title">Providers</span>
        <zero-select
          name="sso"
          data-test-id="sso"
          :value=${sync((x) => x.selectedIDP)}
          ?disabled=${(x) => !x.idps.length}
        >
          ${repeat((x) => x.idps, html `
              <zero-option value="${({ id }) => id}">${({ id }) => id}</zero-option>
            `)}
        </zero-select>
        <zero-button
          type="button"
          class="action-btn"
          appearance="primary-gradient"
          @click="${(x) => x.onClickSSO()}"
          data-test-id="sso-login"
          ?disabled=${(x) => !x.selectedIDP}
        >
          SSO Login
        </zero-button>
      </div>
    `)}
`;
const httpModeEnabledText = html `
  <pre data-test-id="connect-http-mode">Http Polling Mode Enabled.</pre>
`;
const httpMode = html `
  ${(x) => (x.connect.httpMode() ? httpModeEnabledText : null)}
`;
const connectionIndicator = html `
  <zero-connection-indicator show-label="true" />
`;
const connectionIndicatorWrapper = html `
  ${(x) => (x.connect.httpMode() ? null : connectionIndicator)}
`;
export const LoginFormTemplate = html `
  <login-background>
    <div class="container">
      ${when((x) => !x.config.autoConnect, html `
          <zero-card class="card-pd card-mg">
            <form
              id="connect-form"
              method="post"
              autocomplete="on"
              @submit=${(x) => x.onHostSubmit()}
              ?disabled=${(x) => x.submitConnectDisabled}
              data-test-id="connect-form"
            >
              <zero-text-field
                class="no-top-margin"
                type="text"
                name="host"
                :value=${sync((x) => x.host)}
                ?disabled=${(x) => x.connect.isConnected}
                data-test-id="connect-host"
                required
              >
                <span class="form-title">Host</span>
              </zero-text-field>

              ${httpMode}

              <div class="form-buttons">
                ${(x) => submitButton(x.connectActionText, 'submit-connect', x.submitConnectDisabled)}
              </div>
            </form>
          </zero-card>
        `)}

      <zero-card class="card-pd">
        <div class="column-content">
          <login-logo></login-logo>
          <div class="heading2">Login</div>
        </div>
        <form
          id="login-form"
          method="post"
          autocomplete="on"
          @submit=${(x) => x.onLoginSubmit()}
          ?disabled=${(x) => x.submitDisabled}
          data-test-id="login-form"
        >
          ${regularLogin} ${ssoLogin}
          ${when((x) => x.config.sso, html `
              <zero-checkbox
                ?checked="${sync((x) => x.ssoToggled, 'boolean')}"
                name="sso-toggle"
                data-test-id="sso-toggle"
              >
                ${(x) => (x.ssoToggled ? 'SSO Enabled' + x.selectedIDPName : 'Enable SSO?')}
              </zero-checkbox>
            `)}
          <login-message
            message="${(x) => x.message}"
            non-error="${(x) => !x.hasErrors}"
          ></login-message>
          ${when((x) => x.config.showConnectionIndicator, html `
              ${connectionIndicatorWrapper}
            `)}
        </form>
      </zero-card>
    </div>
  </login-background>
`;
//# sourceMappingURL=login-form.template.js.map