vault/ui/app/templates/components/auth-form.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}
<div class="auth-form" data-test-auth-form>
  {{#if this.hasMethodsWithPath}}
    <nav class="tabs is-marginless">
      <ul>
        {{#each this.methodsToShow as |method|}}
          {{#let (or method.path method.type) as |methodKey|}}
            <li
              class={{if
                (and this.selectedAuthIsPath (eq (or this.selectedAuthBackend.path this.selectedAuthBackend.type) methodKey))
                "is-active"
                ""
              }}
              data-test-auth-method={{method.id}}
            >
              <LinkTo
                @route="vault.cluster.auth"
                @model={{this.cluster.name}}
                @query={{hash with=methodKey}}
                data-test-auth-method-link={{method.type}}
              >
                {{or method.id (capitalize method.type)}}
              </LinkTo>
            </li>
          {{/let}}
        {{/each}}
        <li class={{unless this.selectedAuthIsPath "is-active" ""}} data-test-auth-method="other">
          <LinkTo
            @route="vault.cluster.auth"
            @model={{this.cluster.name}}
            @query={{hash with="token"}}
            data-test-auth-method-link="other"
          >
            Other
          </LinkTo>
        </li>
      </ul>
    </nav>
  {{/if}}
  <div class="box is-marginless is-shadowless">
    <MessageError @errorMessage={{if (and this.cluster.standby this.cspError) this.cspError this.error}} />
    {{#if this.selectedAuthBackend.path}}
      <div class="has-bottom-margin-s">
        <p class="is-label">{{this.selectedAuthBackend.path}}</p>
        <span class="description has-text-grey" data-test-description={{true}}>
          {{this.selectedAuthBackend.mountDescription}}
        </span>
      </div>
    {{/if}}
    {{#if (or (not this.hasMethodsWithPath) (not this.selectedAuthIsPath))}}
      <Select
        @label="Method"
        @name="auth-method"
        @options={{this.authMethods}}
        @valueAttribute={{"type"}}
        @labelAttribute={{"typeDisplay"}}
        @isFullwidth={{true}}
        @selectedValue={{this.selectedAuth}}
        @onChange={{action (mut this.selectedAuth)}}
      />
    {{/if}}
    {{#if (or (eq this.selectedAuthBackend.type "jwt") (eq this.selectedAuthBackend.type "oidc"))}}
      <AuthJwt
        @onError={{action "handleError"}}
        @onLoading={{action (mut this.isLoading)}}
        @namespace={{this.namespace}}
        @onNamespace={{action (mut this.namespace)}}
        @onSubmit={{action "doSubmit"}}
        @onRoleName={{action (mut this.roleName)}}
        @roleName={{this.roleName}}
        @selectedAuthType={{this.selectedAuthBackend.type}}
        @selectedAuthPath={{or this.customPath this.selectedAuthBackend.id}}
        @disabled={{or this.authIsRunning this.isLoading}}
      >
        <AuthFormOptions
          @customPath={{this.customPath}}
          @onPathChange={{action (mut this.customPath)}}
          @selectedAuthIsPath={{this.selectedAuthIsPath}}
        />
      </AuthJwt>
    {{else if (eq this.selectedAuthBackend.type "saml")}}
      <AuthSaml
        @onError={{action "handleError"}}
        @onLoading={{action (mut this.isLoading)}}
        @namespace={{this.namespace}}
        @onNamespace={{action (mut this.namespace)}}
        @onSubmit={{action "doSubmit"}}
        @onRoleName={{action (mut this.roleName)}}
        @roleName={{this.roleName}}
        @selectedAuthType={{this.selectedAuthBackend.type}}
        @selectedAuthPath={{or this.customPath this.selectedAuthBackend.id}}
        @disabled={{or this.authIsRunning this.isLoading}}
      >
        <AuthFormOptions
          @customPath={{this.customPath}}
          @onPathChange={{action (mut this.customPath)}}
          @selectedAuthIsPath={{this.selectedAuthIsPath}}
        />
      </AuthSaml>
    {{else}}
      <form id="auth-form" onsubmit={{action "doSubmit" null}}>
        {{#if (eq this.providerName "github")}}
          <div class="field">
            <label for="token" class="is-label">GitHub token</label>
            <div class="control">
              <Input
                @type="password"
                @value={{this.token}}
                name="token"
                id="token"
                class="input"
                data-test-token={{true}}
                autocomplete="off"
                spellcheck="false"
              />
            </div>
          </div>
        {{else if (eq this.providerName "token")}}
          <div class="field">
            <label for="token" class="is-label">Token</label>
            <div class="control">
              <Input
                @type="password"
                @value={{this.token}}
                name="token"
                class="input"
                autocomplete="off"
                spellcheck="false"
                data-test-token={{true}}
                id="token"
              />
            </div>
          </div>
        {{else}}
          <div class="field">
            <label for="username" class="is-label">Username</label>
            <div class="control">
              <Input
                @value={{this.username}}
                name="username"
                id="username"
                class="input"
                autocomplete="off"
                spellcheck="false"
                data-test-username
              />
            </div>
          </div>
          <div class="field">
            <label for="password" class="is-label">Password</label>
            <div class="control">
              <Input
                @value={{this.password}}
                name="password"
                id="password"
                @type="password"
                class="input"
                autocomplete="off"
                spellcheck="false"
                data-test-password
              />
            </div>
          </div>
        {{/if}}
        {{#if (not-eq this.selectedAuthBackend.type "token")}}
          <AuthFormOptions
            @customPath={{this.customPath}}
            @onPathChange={{action (mut this.customPath)}}
            @selectedAuthIsPath={{this.selectedAuthIsPath}}
          />
        {{/if}}
        <Hds::Button
          @text="Sign in"
          @icon={{if this.authIsRunning "loading"}}
          data-test-auth-submit={{true}}
          type="submit"
          disabled={{this.authIsRunning}}
          id="auth-submit"
        />
        {{#if (and this.delayIsIdle this.showLoading)}}
          <AlertInline
            class="has-top-padding-s"
            @type="info"
            @message="If login takes longer than usual, you may need to check your device for an MFA notification, or contact your administrator if login times out."
            data-test-auth-message="push"
          />
        {{/if}}
      </form>
    {{/if}}
  </div>
</div>