login_buttons_dropdown.html

<!--           -->
<!-- LOGGED IN -->
<!--           -->
<template name="_loginButtonsLoggedInDropdown">
  <div class="login-link-and-dropdown-list">
    <a class="login-link-text" id="login-name-link">
      {{displayName}} ▾
    </a>

    {{#if dropdownVisible}}
      <div id="login-dropdown-list" class="accounts-dialog">
        <a class="login-close-text">Close</a>
        <div class="login-close-text-clear"></div>

        {{#if inMessageOnlyFlow}}
          {{> _loginButtonsMessages}}
        {{else}}
          {{#if inChangePasswordFlow}}
            {{> _loginButtonsChangePassword}}
          {{else}}
            {{> _loginButtonsLoggedInDropdownActions}}
          {{/if}}
        {{/if}}
      </div>
    {{/if}}
  </div>
</template>

<template name="_loginButtonsLoggedInDropdownActions">
  {{#if allowChangingPassword}}
    <div class="login-button" id="login-buttons-open-change-password">
      Change password
    </div>
  {{/if}}

  <div class="login-button" id="login-buttons-logout">
    Sign out
  </div>

  {{> _loginButtonsMessages}}
</template>

<!--            -->
<!-- LOGGED OUT -->
<!--            -->
<template name="_loginButtonsLoggedOutDropdown">
  <div class="login-link-and-dropdown-list {{additionalClasses}}">
    {{#if dropdownVisible}}
      {{! This text is covered by the dropdown, but duplicating it here
          makes the position of "Close" match the position of this text. }}
      <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
      <div id="login-dropdown-list" class="accounts-dialog">
        <a class="login-close-text">Close</a>
        {{#if loggingIn}}
          {{> _loginButtonsLoggingIn}}
        {{/if}}
        <div class="login-close-text-clear"></div>
        {{> _loginButtonsLoggedOutAllServices}}
      </div>
    {{else}}
      {{#if loggingIn}}
        {{! Not normally visible, but if the user closes the dropdown during login.}}
        {{> _loginButtonsLoggingIn}}
      {{else}}
        <a class="login-link-text" id="login-sign-in-link">Sign in ▾</a>
      {{/if}}
    {{/if}}
  </div>
</template>

<template name="_loginButtonsLoggedOutAllServices">
  {{#each services}}
    {{#if isInternalService}}
      {{#if isPasswordService}}
        {{#if hasOtherServices}} {{! the password service will always come last, but before passwordless }}
          {{> _loginButtonsLoggedOutPasswordServiceSeparator}}
        {{/if}}
        {{> _loginButtonsLoggedOutPasswordService}}
      {{/if}}
      {{#if isPasswordlessService}}
        {{#if hasPasswordService}}
          <br />
        {{/if}}
        {{#if displaySeparatorForPasswordless}} {{! the passwordless service will always come last }}
          {{> _loginButtonsLoggedOutPasswordServiceSeparator}}
        {{/if}}
        {{> _loginButtonsLoggedOutPasswordlessService}}
      {{/if}}
    {{else}}
      {{> _loginButtonsLoggedOutSingleLoginButton}}
    {{/if}}
  {{/each}}
  {{#unless hasInternalService}}
    {{> _loginButtonsMessages}}
  {{/unless}}
</template>

<template name="_loginButtonsLoggedOutPasswordlessService">
  <form class="login-form login-passwordless-form">
    {{#each fields}}
      {{> _loginButtonsFormField}}
    {{/each}}

    {{> _loginButtonsMessages}}

    <button
      class="login-button login-button-form-submit"
      id="login-buttons-passwordless"
    >
      {{#if inPasswordlessConfirmation}}
        Submit
      {{else}}
        {{#if inSignupFlow}}
          Create account
        {{else}}
          Get login code
        {{/if}}
      {{/if}}
    </button>
    {{#if inLoginFlow}}
      {{#if showCreateAccountLink}}
        <div class="additional-link-container">
          <a id="signup-link" class="additional-link">Create account</a>
        </div>
      {{/if}}

      {{#if inPasswordlessConfirmation}}
        <div class="additional-link-container">
          <a id="resend-passwordless-code" class="additional-link">Re-send code</a>
        </div>
      {{/if}}
    {{/if}}
    {{#if inSignupFlow}}
      {{> _loginButtonsBackToLoginLink}}
    {{/if}}
  </form>
</template>

<template name="_loginButtonsLoggedOutPasswordServiceSeparator">
  <div class="or">
    <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="or-text">or</span>
    <span class="hline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </div>
</template>

<template name="_loginButtonsLoggedOutPasswordService">
  {{#if inForgotPasswordFlow}}
    {{> _forgotPasswordForm}}
  {{else}}
    <form class="login-form login-password-form">
      {{#each fields}}
        {{> _loginButtonsFormField}}
      {{/each}}

      {{> _loginButtonsMessages}}

      <button
        class="login-button login-button-form-submit"
        id="login-buttons-password"
      >
        {{#if inSignupFlow}}
          Create account
        {{else}}
          Sign in
        {{/if}}
      </button>

      {{#if inLoginFlow}}
        {{#if showCreateAccountLink}}
          <div class="additional-link-container">
            <a id="signup-link" class="additional-link">Create account</a>
          </div>
        {{/if}}

        {{#if showForgotPasswordLink}}
          <div class="additional-link-container">
            <a id="forgot-password-link" class="additional-link">Forgot password</a>
          </div>
        {{/if}}
      {{/if}}

      {{#if inSignupFlow}}
        {{> _loginButtonsBackToLoginLink}}
      {{/if}}
    </form>
  {{/if}}
</template>

<template name="_forgotPasswordForm">
  <form class="login-form">
    <div id="forgot-password-email-label-and-input"> {{! XXX we should probably use loginButtonsFormField }}
      <label id="forgot-password-email-label" for="forgot-password-email">Email</label>
      <input id="forgot-password-email" type="email" autocomplete="email"/>
    </div>

    {{> _loginButtonsMessages}}

    <div class="login-button login-button-form-submit" id="login-buttons-forgot-password">
      Reset password
    </div>

    {{> _loginButtonsBackToLoginLink}}
  </form>
</template>

<template name="_loginButtonsBackToLoginLink">
  <div class="additional-link-container">
    <a id="back-to-login-link" class="additional-link">Sign in</a>
  </div>
</template>

<template name="_loginButtonsFormField">
  {{#if visible}}
    <div id="login-{{fieldName}}-label-and-input" style="{{fieldStyle}}">
      <label id="login-{{fieldName}}-label" for="login-{{fieldName}}">
        {{fieldLabel}}
      </label>
      <input
        id="login-{{fieldName}}"
        type="{{inputType}}"
        value="{{fieldValue}}"
        autocomplete="{{autocomplete}}"
      />
    </div>
  {{/if}}
</template>

<template name="_loginButtonsChangePassword">
  <form class="login-form">

    {{#each fields}}
      {{> _loginButtonsFormField}}
    {{/each}}

    {{> _loginButtonsMessages}}

    <div class="login-button login-button-form-submit" id="login-buttons-do-change-password">
      Change password
    </div>
  </form>
</template>