elements.soy

/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the
 * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
 * express or implied. See the License for the specific language governing permissions and
 * limitations under the License.
 */

// UI elements for the FirebaseUI widget.

{namespace firebaseui.auth.soy2.element autoescape="strict"}


/**
 * Renders an email input field.
 */
{template .email}
  {@param? email: string} /** The email address to prefill. */
  {@param? disabled: bool} /** Whether the email input is disabled or not. */
  {@param? changeEmail: bool} /** Whether to use change email label. */
  <div class="firebaseui-textfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-email-input">
      {if $changeEmail}
        {msg desc="Label of a change email address input field."}Enter new email address{/msg}
      {else}
        {msg desc="Label of an email address input field."}Email{/msg}
      {/if}
    </label>
    <input
        type="email"
        name="email"
        id="ui-sign-in-email-input"
        autocomplete="username"
        class="mdl-textfield__input firebaseui-input firebaseui-id-email"
        value="{$email ?: ''}"
        {if $disabled}disabled{/if}>
  </div>
  <div class="firebaseui-error-wrapper">
    <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
              firebaseui-id-email-error"></p>
  </div>
{/template}


/**
 * Renders a phone number input field.
 */
{template .phoneNumber}
  {@param? nationalNumber: string} /** The phone number to prefill. */

  <div class="firebaseui-phone-number">
    <button class="firebaseui-id-country-selector firebaseui-country-selector{sp}
                   mdl-button mdl-js-button">
      <span class="firebaseui-flag firebaseui-country-selector-flag{sp}
                   firebaseui-id-country-selector-flag"></span>
      <span class="firebaseui-id-country-selector-code">
      </span>
    </button>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label{sp}
                firebaseui-textfield firebaseui-phone-input-wrapper">
      <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-phone-number-input">
        {msg desc="Label of an phone number input field."}Phone number{/msg}
      </label>
      <input 
          type="tel" 
          name="phoneNumber"
          id="ui-sign-in-phone-number-input"
          class="mdl-textfield__input firebaseui-input firebaseui-id-phone-number"
          value="{$nationalNumber ?: ''}">
    </div>
  </div>
  <div class="firebaseui-error-wrapper">
    <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
              firebaseui-phone-number-error firebaseui-id-phone-number-error"></p>
  </div>
{/template}


/**
 * Renders a phone confirmation code input field.
 */
{template .phoneConfirmationCode}
  <div class="firebaseui-textfield mdl-textfield mdl-js-textfield{sp}
      mdl-textfield--floating-label">
    <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-phone-confirmation-code-input">
      {msg desc="Label of 6-digit SMS verification code."}6-digit code{/msg}
    </label>
    <input 
        type="number"
        name="phoneConfirmationCode"
        id="ui-sign-in-phone-confirmation-code-input"
        class="mdl-textfield__input firebaseui-input firebaseui-id-phone-confirmation-code">
  </div>
  <div class="firebaseui-error-wrapper">
    <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
              firebaseui-id-phone-confirmation-code-error"></p>
  </div>
{/template}


/**
 * Renders resend elements.
 */
{template .resend}
  <div class="firebaseui-resend-container">
    <span class="firebaseui-id-resend-countdown">
    </span>
    <a href="javascript:void(0)" class="firebaseui-id-resend-link firebaseui-hidden{sp}
                                        firebaseui-link">
      {msg desc="A link to trigger re-sending the phone confirmation code."}Resend{/msg}
    </a>
  </div>
{/template}


/**
 * Renders an identity provider button.
 */
{template .idpButton}
  {@param? providerConfig: [providerId:string, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  <button
      class="firebaseui-idp-button mdl-button mdl-js-button mdl-button--raised{sp}
             {call .idpClass_ data="all" /} firebaseui-id-idp-button"
      data-provider-id="{$providerConfig.providerId}"
      style="background-color:{call .idpColor_ data="all" /}">
    <span class="firebaseui-idp-icon-wrapper">
      <img
          class="firebaseui-idp-icon"
          alt=""
          src="{call .idpLogo_ data="all" /}">
    </span>
    {if $providerConfig.providerId == 'password'}
      <span class="firebaseui-idp-text firebaseui-idp-text-long">
        {if $providerConfig.fullLabel}
          {$providerConfig.fullLabel}
        {elseif $providerConfig.providerName}
          {msg desc="Labels for sign-in buttons, long version"}
            Sign in with{sp}
            {call .idpName data="all" /}
          {/msg}
        {else}
          {msg desc="Label for a button to sign in with an email account that requires a password.
              The long version"}
            Sign in with email
          {/msg}
        {/if}
      </span>
      <span class="firebaseui-idp-text firebaseui-idp-text-short">
        {if $providerConfig.providerName}
          {$providerConfig.providerName}
        {else}
          {msg desc="Label for a button to sign in with an email account that requires a password.
              The short version"}
            Email
          {/msg}
        {/if}
      </span>
    {elseif $providerConfig.providerId == 'phone'}
      <span class="firebaseui-idp-text firebaseui-idp-text-long">
        {if $providerConfig.fullLabel}
          {$providerConfig.fullLabel}
        {elseif $providerConfig.providerName}
          {msg desc="Labels for sign-in buttons, long version"}
            Sign in with{sp}
            {call .idpName data="all" /}
          {/msg}
        {else}
          {msg desc="Label for a button to sign in with phone number.
              The long version"}
            Sign in with phone
          {/msg}
        {/if}
      </span>
      <span class="firebaseui-idp-text firebaseui-idp-text-short">
        {if $providerConfig.providerName}
          {$providerConfig.providerName}
        {else}
          {msg desc="Label for a button to sign in with phone number.
              The short version"}
            Phone
          {/msg}
        {/if}
      </span>
    {elseif $providerConfig.providerId == 'anonymous'}
      <span class="firebaseui-idp-text firebaseui-idp-text-long">
        {if $providerConfig.fullLabel}
          {$providerConfig.fullLabel}
        {elseif $providerConfig.providerName}
          {msg desc="Labels for sign-in buttons, long version"}
            Sign in with{sp}
            {call .idpName data="all" /}
          {/msg}
        {else}
          {msg desc="Label for a button to continue as a guest user.
              The long version"}
            Continue as guest
          {/msg}
        {/if}
      </span>
      <span class="firebaseui-idp-text firebaseui-idp-text-short">
        {if $providerConfig.providerName}
          {$providerConfig.providerName}
        {else}
          {msg desc="Label for a button to continue as a guest user.
              The short version"}
            Guest
          {/msg}
        {/if}
      </span>
    {else}
      <span class="firebaseui-idp-text firebaseui-idp-text-long">
        {if $providerConfig.fullLabel}
          {$providerConfig.fullLabel}
        {else}
          {msg desc="Labels for sign-in buttons, long version"}
            Sign in with{sp}
            {call .idpName data="all" /}
          {/msg}
        {/if}
      </span>
      <span class="firebaseui-idp-text firebaseui-idp-text-short">
        {if $providerConfig.providerName}
          {$providerConfig.providerName}
        {else}
          {call .idpName data="all" /}
        {/if}
      </span>
    {/if}
  </button>
{/template}


/**
 * Renders a submit button.
 */
{template .submitButton}
  {@param? label: string} /** Label of the button, defaulting to "Next" if not specified. */
  <button type="submit" class="firebaseui-id-submit firebaseui-button{sp}
      mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    {if $label}
      {$label}
    {else}
      {msg desc="Label of the button that takes the user to the next step in the sign-in flow."}
        Next
      {/msg}
    {/if}
  </button>
{/template}


/**
 * Renders a Trouble getting email button.
 */
{template .troubleGettingEmailButton}
  <a class="firebaseui-link firebaseui-id-trouble-getting-email-link"
      href="javascript:void(0)">
    {msg desc="The label of the button that will redirect to the screen with instructions for
        troubleshooting issues related to not receiving an email message."}
      Trouble getting email?
    {/msg}
  </a>
{/template}


/**
 * Renders a resend email link button.
 */
{template .resendEmailLinkButton}
  <a class="firebaseui-link firebaseui-id-resend-email-link"
      href="javascript:void(0)">
    {msg desc="Label of the resend email link button"}Resend{/msg}
  </a>
{/template}


/**
 * Renders a sign-in button.
 */
{template .signInButton}
  {call .submitButton}
    {param label kind="text"}
      {msg desc="The submit button in the sign-in form."}
        Sign In
      {/msg}
    {/param}
  {/call}
{/template}


/**
 * Renders a save button.
 */
{template .saveButton}
  {call .submitButton}
    {param label kind="text"}
      {msg desc="The submit button for a form that changes the state of the user
          (e.g. creating an account, resetting the password, etc.)."}
        Save
      {/msg}
    {/param}
  {/call}
{/template}


/**
 * Renders a continue button.
 */
{template .continueButton}
  {call .submitButton}
    {param label kind="text"}
      {msg desc="The continue button for a form that redirects the application to another page."}
        Continue
      {/msg}
    {/param}
  {/call}
{/template}


/**
 * Renders two text input fields for setting first and last name.
 */
{template .name}
  {@param? name: string} /** The display name to prefill. */
  <div class="firebaseui-textfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-name-input">
      {msg desc="Label of a field for setting the user's name."}First &amp; last name{/msg}
    </label>
    <input
        type="text"
        name="name"
        id="ui-sign-in-name-input"
        autocomplete="name"
        class="mdl-textfield__input firebaseui-input firebaseui-id-name"
        value="{$name ?: ''}">
  </div>
  <div class="firebaseui-error-wrapper">
    <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
              firebaseui-id-name-error"></p>
  </div>
{/template}


/**
 * Renders a new password input field, where the user can show the password by clicking the toggle
 * button.
 */
{template .newPassword}
  {@param? label: string} /** The placeholder text in the field, defaulting to "Choose password". */
  <div class="firebaseui-new-password-component">
    <div class="firebaseui-textfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-new-password-input">
        {if $label}
          {$label}
        {else}
          {msg desc="Label of a field for setting new password."}Choose password{/msg}
        {/if}
      </label>
      <input
          type="password"
          name="newPassword"
          id="ui-sign-in-new-password-input"
          autocomplete="new-password"
          class="mdl-textfield__input firebaseui-input firebaseui-id-new-password">
    </div>
    <a href="javascript:void(0)" class="firebaseui-input-floating-button{sp}
        firebaseui-id-password-toggle firebaseui-input-toggle-on firebaseui-input-toggle-blur">
    </a>
    <div class="firebaseui-error-wrapper">
      <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
          firebaseui-id-new-password-error">
      </p>
    </div>
  </div>
{/template}


/**
 * Renders a password input field.
 */
{template .password}
  {@param? current: bool} /** Whether to show "Current password" or "Password" label. */
  <div class="firebaseui-textfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <label class="mdl-textfield__label firebaseui-label" for="ui-sign-in-password-input">
      {if $current}
        {msg desc="Label of a password field."}Current password{/msg}
      {else}
        {msg desc="Label of a password field."}Password{/msg}
      {/if}
    </label>
    <input
        type="password"
        name="password"
        id="ui-sign-in-password-input"
        autocomplete="current-password"
        class="mdl-textfield__input firebaseui-input firebaseui-id-password">
  </div>
  <div class="firebaseui-error-wrapper">
    <p class="firebaseui-error firebaseui-text-input-error firebaseui-hidden{sp}
              firebaseui-id-password-error">
    </p>
  </div>
{/template}


/**
 * Renders the password recovery button.
 */
{template .passwordRecoveryButton}
  <a class="firebaseui-link firebaseui-id-secondary-link" href="javascript:void(0)">
    {msg desc="Label of the password recovery link"}Trouble signing in?{/msg}
  </a>
{/template}


/**
 * Renders the cancel button.
 */
{template .cancelButton}
  {@param? label: string} /** Label of the button, defaulting to "Cancel" if not specified. */
  <button class="firebaseui-id-secondary-link firebaseui-button mdl-button mdl-js-button{sp}
                 mdl-button--primary">
    {if $label}
      {$label}
    {else}
      {msg desc="Link to cancel the current flow."}Cancel{/msg}
    {/if}
  </button>
{/template}


/**
 * Renders a notice to the user about SMS rates.
 */
{template .phoneAuthSmsNotice}
  <p class="firebaseui-tos firebaseui-phone-sms-notice">
    {msg desc="Notify the user that an SMS may be sent, which may cost the user money.
        Note that 'Verify' must match the the label of the 'Verify' button that initiates the
        phone number verification."}
      By tapping Verify, an SMS may be sent. Message &amp; data rates may apply.
    {/msg}
  </p>
{/template}


/**
 * Renders the links of Terms of Service and Privacy Policy.
 */
{template .tosPpLink}
  {if $ij.tosCallback and $ij.privacyPolicyCallback}
    <ul class="firebaseui-tos-list firebaseui-tos">
      <li class="firebaseui-inline-list-item">
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-tos-link" target="_blank">
          {msg desc="Label for the terms of service"}Terms of Service{/msg}
        </a>
      </li>
      <li class="firebaseui-inline-list-item">
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-pp-link" target="_blank">
          {msg desc="Label for the privacy policy"}Privacy Policy{/msg}
        </a>
      </li>
    </ul>
  {/if}
{/template}


/**
 * Renders Terms of Service and Privacy Policy agreement and a notice to the user about SMS rates
 * for phone authentication.
 */
{template .phoneTosPp}
  <p class="firebaseui-tos firebaseui-phone-tos">
    {if $ij.tosCallback and $ij.privacyPolicyCallback}
      {msg desc="The terms of service and privacy policy for a phone authentication flow. Note that
          'Verify' must match the the label of the 'Verify' button that completes the
          phone number verification flow."}
        By tapping Verify, you are indicating that you accept our{sp}
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-tos-link" target="_blank">
          Terms of Service
        </a> and{sp}
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-pp-link" target="_blank">
          Privacy Policy
        </a>
        . An SMS may be sent. Message &amp; data rates may apply.
      {/msg}
    {else}
      {msg desc="Notify the user that an SMS may be sent, which may cost the user money.
        Note that 'Verify' must match the the label of the 'Verify' button that initiates the
        phone number verification."}
        By tapping Verify, an SMS may be sent. Message &amp; data rates may apply.
      {/msg}
    {/if}
  </p>
{/template}


/**
 * Renders full Terms of Service and Privacy Policy agreement for the first page.
 */
{template .fullMessageTosPp}
  {if $ij.tosCallback and $ij.privacyPolicyCallback}
    <p class="firebaseui-tos firebaseui-tospp-full-message">
      {msg desc="The terms of service and privacy policy for the first page."}
        By continuing, you are indicating that you accept our{sp}
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-tos-link" target="_blank">
          Terms of Service
        </a> and{sp}
        <a href="javascript:void(0)" class="firebaseui-link firebaseui-pp-link" target="_blank">
          Privacy Policy
        </a>.
      {/msg}
    </p>
  {/if}
{/template}


/**
 * Renders an info bar with the given message.
 */
{template .infoBar}
  {@param message: string} /** The message to show. */
  <div class="firebaseui-info-bar firebaseui-id-info-bar">
    <p class="firebaseui-info-bar-message">
      {$message}&nbsp;&nbsp;
      <a href="javascript:void(0)"
         class="firebaseui-link firebaseui-id-dismiss-info-bar">
        {msg desc="label of a button which dismisses the notification message"}
          Dismiss
        {/msg}
      </a>
    </p>
  </div>
{/template}


/**
 * Renders a modal dialog.
 */
{template .dialog}
  {@param content: html}
  {@param? classes: string} /** Additional classes to apply to the dialog. */

  <dialog class="mdl-dialog firebaseui-dialog firebaseui-id-dialog
                 {if $classes}{sp}{$classes}{/if}">
    {$content}
  </dialog>
{/template}


/**
 * Renders a progress dialog with the given icon and message.
 */
{template .progressDialog}
  {@param iconClass: string}
  {@param message: string}

  {call .dialog}
    {param content kind="html"}
      <div class="firebaseui-dialog-icon-wrapper">
        <div class="{$iconClass} firebaseui-dialog-icon"></div>
      </div>
      <div class="firebaseui-progress-dialog-message">
        {$message}
      </div>
    {/param}
  {/call}
{/template}


/**
 * Renders a ListBox dialog.
 */
{template .listBoxDialog}
  {@param items: list<[id:string, iconClass:string, label:string]>}

  {call .dialog}
    {param classes kind="text"}firebaseui-list-box-dialog{/param}
    {param content kind="html"}
      <div class="firebaseui-list-box-actions">
        {foreach $item in $items}
          <button type="button" data-listboxid="{$item.id}"
                  class="mdl-button firebaseui-id-list-box-dialog-button{sp}
                         firebaseui-list-box-dialog-button">
            {if $item.iconClass}
              <div class="firebaseui-list-box-icon-wrapper">
                <div class="firebaseui-list-box-icon {$item.iconClass}"></div>
              </div>
            {/if}
            <div class="firebaseui-list-box-label-wrapper">
              {$item.label}
            </div>
          </button>
        {/foreach}
      </div>
    {/param}
  {/call}
{/template}


/**
 * Renders a busy indicator to display while server operations are ongoing.
 */
{template .busyIndicator}
  {@param? useSpinner: bool}
  {if $useSpinner}
    <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active{sp}
        firebaseui-busy-indicator firebaseui-id-busy-indicator"></div>
  {else}
    <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate{sp}
        firebaseui-busy-indicator firebaseui-id-busy-indicator"></div>
  {/if}
{/template}


/**
 * Renders a visible reCAPTCHA container.
 */
{template .recaptcha}
  <div class="firebaseui-recaptcha-wrapper">
    <div class="firebaseui-recaptcha-container"></div>
    <div class="firebaseui-error-wrapper firebaseui-recaptcha-error-wrapper">
      <p class="firebaseui-error firebaseui-hidden firebaseui-id-recaptcha-error"></p>
    </div>
  </div>
{/template}


/**
 * Determines the IdP display name.
 * The list should match the supported provider IDs in Firebase Auth.
 */
{template .idpName kind="text"}
  {@param? providerConfig: [providerId:string|null, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {if $providerConfig.providerName}
    {$providerConfig.providerName}
  {elseif $ij.defaultProviderNames[$providerConfig.providerId]}
    {$ij.defaultProviderNames[$providerConfig.providerId]}
  {elseif $providerConfig.providerId and strIndexOf($providerConfig.providerId, 'saml.') == 0}
    {strSub($providerConfig.providerId, 5)}
  {elseif $providerConfig.providerId and strIndexOf($providerConfig.providerId, 'oidc.') == 0}
    {strSub($providerConfig.providerId, 5)}
  {else}
    {$providerConfig.providerId}
  {/if}
{/template}


/**
 * Determines the IdP CSS class.
 * The list should match the supported provider IDs in Firebase Auth.
 */
{template .idpClass_ kind="text"}
  {@param? providerConfig: [providerId:string, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {switch $providerConfig.providerId}
    {case 'google.com'}
      firebaseui-idp-google
    {case 'github.com'}
      firebaseui-idp-github
    {case 'facebook.com'}
      firebaseui-idp-facebook
    {case 'twitter.com'}
      firebaseui-idp-twitter
    {case 'phone'}
      firebaseui-idp-phone
    {case 'anonymous'}
      firebaseui-idp-anonymous
    {case 'password'}
      firebaseui-idp-password
    {default}
      firebaseui-idp-generic
  {/switch}
{/template}


/**
 * Determines the IdP logo URL. The URL in the providerConfig has the highest priority. If not
 * provided, the default one per IdP will be used. If the provider ID is unknown, use the password
 * icon.
 */
{template .idpLogo_ kind="uri"}
  {@param? providerConfig: [providerId:string, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {if $providerConfig.iconUrl}
    {$providerConfig.iconUrl}
  {elseif $ij.defaultIconUrls[$providerConfig.providerId]}
    {$ij.defaultIconUrls[$providerConfig.providerId]}
  {elseif strIndexOf($providerConfig.providerId, 'saml.') == 0}
    {$ij.defaultIconUrls['saml']}
  {elseif strIndexOf($providerConfig.providerId, 'oidc.') == 0}
    {$ij.defaultIconUrls['oidc']}
  {else}
    {$ij.defaultIconUrls['password']}
  {/if}
{/template}


/**
 * Determines the IdP button color. The button color in the providerConfig has the highest priority.
 * If not provided, the default one per IdP will be used. If the provider ID is unknown, use the
 * password icon.
 */
{template .idpColor_ kind="text"}
  {@param? providerConfig: [providerId:string, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {if $providerConfig.buttonColor}
    {$providerConfig.buttonColor}
  {elseif $ij.defaultButtonColors[$providerConfig.providerId]}
    {$ij.defaultButtonColors[$providerConfig.providerId]}
  {elseif strIndexOf($providerConfig.providerId, 'saml.') == 0}
    {$ij.defaultButtonColors['saml']}
  {elseif strIndexOf($providerConfig.providerId, 'oidc.') == 0}
    {$ij.defaultButtonColors['oidc']}
  {else}
    {$ij.defaultButtonColors['password']}
  {/if}
{/template}


/**
 * Renders a tenant selection button.
 */
{template .tenantSelectionButton}
  {@param tenantConfig: [tenantId:string|null, fullLabel:string|null, displayName:string,
      buttonColor:string, iconUrl: string]} /** The tenant selection button config. */
  {let $tenantClass kind="text"}
    {if $tenantConfig.tenantId}
      {$tenantConfig.tenantId}
    {else}
      top-level-project
    {/if}
  {/let}
  <button
      class="firebaseui-tenant-button mdl-button mdl-js-button mdl-button--raised{sp}
             firebaseui-tenant-selection-{$tenantClass} firebaseui-id-tenant-selection-button"
      {if $tenantConfig.tenantId}data-tenant-id="{$tenantConfig.tenantId}"{/if}
      style="background-color:{$tenantConfig.buttonColor}">
    <span class="firebaseui-idp-icon-wrapper">
      <img
          class="firebaseui-idp-icon"
          alt=""
          src="{$tenantConfig.iconUrl}">
    </span>
    <span class="firebaseui-idp-text firebaseui-idp-text-long">
      {if $tenantConfig.fullLabel}
        {$tenantConfig.fullLabel}
      {else}
        {msg desc="Label for a button to sign in to a tenant. The long version"}
          Sign in to {$tenantConfig.displayName}
        {/msg}
      {/if}
    </span>
    <span class="firebaseui-idp-text firebaseui-idp-text-short">
      {msg desc="Label for a button to sign in to a tenant. The short version"}
        {$tenantConfig.displayName}
      {/msg}
    </span>
  </button>
{/template}