pages.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 components for the FirebaseUI widget.

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


/**
 * Renders a sign-in page.
 */
{template .signIn}
  {@param? email: string} /** The email address to prefill. */
  {@param? displayCancelButton: bool} /** Whether to display the cancel button. */
  {@param? displayFullTosPpMessage: bool} /** Whether to display the full message of ToS and PP. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-sign-in">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of the email/password sign-in page."}Sign in with email{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <div class="firebaseui-relative-wrapper">
          {call firebaseui.auth.soy2.element.email data="all" /}
        </div>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {if $displayCancelButton}
            {call firebaseui.auth.soy2.element.cancelButton /}
          {/if}
          {call firebaseui.auth.soy2.element.submitButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {if $displayFullTosPpMessage}
          {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
        {else}
          {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
        {/if}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a sign-in page for password account.
 */
{template .passwordSignIn}
  {@param? email: string} /** The email address to prefill. */
  {@param? displayFullTosPpMessage: bool} /** Whether to display the full message of ToS and PP. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-password-sign-in">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        {call firebaseui.auth.soy2.element.email data="all" /}
        {call firebaseui.auth.soy2.element.password /}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-links">
          {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
        </div>
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.signInButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {if $displayFullTosPpMessage}
          {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
        {else}
          {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
        {/if}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a sign-up page for password account.
 */
{template .passwordSignUp}
  {@param? email: string} /** The email address to prefill. */
  {@param? requireDisplayName: bool} /** Whether to show the display name. */
  {@param? name: string} /** The name to prefill. */
  {@param? allowCancel: bool} /** Whether to show the cancel link. */
  {@param? displayFullTosPpMessage: bool} /** Whether to display the full message of ToS and PP. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-password-sign-up">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a sign-up page."}Create account{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        {call firebaseui.auth.soy2.element.email data="all" /}
        {if $requireDisplayName}
          {call firebaseui.auth.soy2.element.name data="all" /}
        {/if}
        {call firebaseui.auth.soy2.element.newPassword /}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {if $allowCancel}
            {call firebaseui.auth.soy2.element.cancelButton /}
          {/if}
          {call firebaseui.auth.soy2.element.saveButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {if $displayFullTosPpMessage}
          {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
        {else}
          {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
        {/if}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a password recovery page.
 */
{template .passwordRecovery}
  {@param? email: string} /** The email address to prefill. */
  {@param? allowCancel: bool} /** Whether to show the cancel link. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-password-recovery">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a password recovery page."}Recover password{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="Information on how the user resets their password."}
            Get instructions sent to this email that explain how to reset your password
          {/msg}
        </p>
        {call firebaseui.auth.soy2.element.email data="all" /}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {if $allowCancel}
            {call firebaseui.auth.soy2.element.cancelButton /}
          {/if}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="The button that sends a password recovery email."}
                Send
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a notice page to indicate the password recovery email has been sent.
 */
{template .passwordRecoveryEmailSent}
  {@param email: string} /** The email address to which the password reset email has been sent. */
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-password-recovery-email-sent">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a notice page when the password recovery email has been sent."}
          Check your email
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page when the password recovery email has been sent."}
          Follow the instructions sent to <strong>{$email}</strong> to recover your password
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="Label of a button that finishes the password recovery flow."}
                Done
              {/msg}
            {/param}
          {/call}
        </div>
      {/if}
    </div>
    <div class="firebaseui-card-footer">
      {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
    </div>
  </div>
{/template}


/**
 * Renders a callback page which simply shows an activity loading indicator when calling the remote
 * API so that the user won't be confused by the blank page.
 */
{template .callback}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-callback">
    <div class="firebaseui-callback-indicator-container">
      {call firebaseui.auth.soy2.element.busyIndicator /}
    </div>
  </div>
{/template}


/**
 * Renders a page which simply shows a spinner.
 */
{template .spinner}
  <div class="firebaseui-container firebaseui-id-page-spinner">
    {call firebaseui.auth.soy2.element.busyIndicator}
      {param useSpinner: true /}
    {/call}
  </div>
{/template}


/**
 * Renders a blank callback page which simply shows an activity loading indicator when calling a
 * remote API so that the user won't be confused by the blank page.
 */
{template .blank}
  <div class="firebaseui-container firebaseui-id-page-blank firebaseui-use-spinner">
  </div>
{/template}


/**
 * Renders an email link sign-in sent page.
 */
{template .emailLinkSignInSent}
  /** The user's email. */
  {@param email:string}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-email-link-sign-in-sent">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a email link sign-in sent page."}Sign-in email sent{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <div class="firebaseui-email-sent"></div>
        <p class="firebaseui-text">
          {msg desc="Message that a link was sent to user's email to complete sign-in."}
            A sign-in email with additional instructions was sent to <strong>{$email}</strong>.
            Check your email to complete sign-in.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-links">
          {call firebaseui.auth.soy2.element.troubleGettingEmailButton /}
        </div>
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton}
            {param label kind="text"}
              {msg desc="Label for the button to go back to the previous page."}
                Back
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an email not received troubleshooting page.
 */
{template .emailNotReceived}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-email-not-received">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header for email not received troubleshooting page."}
            Trouble getting email?
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="Introduction to common fixes when a user fails to receive an email."}
            Try these common fixes:
          {/msg}
          <ul>
            <li>
              {msg desc="Some common reason why an email was not received."}
                Check if the email was marked as spam or filtered.
              {/msg}
            </li>
            <li>
              {msg desc="Some common reason why an email was not received."}
                Check your internet connection.
              {/msg}
            </li>
            <li>
              {msg desc="Some common reason why an email was not received."}
                Check that you did not misspell your email.
              {/msg}
            </li>
            <li>
              {msg desc="Some common reason why an email was not received."}
                Check that your inbox space is not running out or other inbox settings related
                issues.
              {/msg}
            </li>
          </ul>
        </p>
        <p class="firebaseui-text">
          {msg desc="Message that a user can resend an email but that the new email will expire any
              sign-in codes sent in the previous email."}
            If the steps above didn't work, you can resend the email. Note that this will
            deactivate the link in the older email.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-links">
          {call firebaseui.auth.soy2.element.resendEmailLinkButton /}
        </div>
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton}
            {param label kind="text"}
              {msg desc="Label for the button to go back to the previous page."}
                Back
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an email link sign-in confirmation page. User would need to confirm their email before
 * completing sign-in.
 */
{template .emailLinkSignInConfirmation}
  /** The user's email. */
  {@param? email:string}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-email-link-sign-in-confirmation">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a email link sign-in confirmation page."}Confirm email{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="Header of a page displayed when the user is required to provide their email
              before completing sign-in."}
            Confirm your email to complete sign in
          {/msg}
        </p>
        <div class="firebaseui-relative-wrapper">
          {call firebaseui.auth.soy2.element.email data="all" /}
        </div>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton /}
          {call firebaseui.auth.soy2.element.submitButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a notice page that the flow was opened on a different device.
 */
{template .differentDeviceError}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-different-device-error">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a notice page when a user tries to complete sign-in on a device or
            browser different from the one they started the sign-in flow with."}
          New device or browser detected
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Header of a page displayed when the user opens the sign-in email link on a
            different device or browser. The user is expected to open the email link on the same
            device they started the flow with."}
          Try opening the link using the same device or browser where you started the sign-in
          process.
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      <div class="firebaseui-form-actions">
        {call firebaseui.auth.soy2.element.cancelButton}
          {param label kind="text"}
            {msg desc="Label for the button to go back to the previous page."}
              Dismiss
            {/msg}
          {/param}
        {/call}
      </div>
    </div>
  </div>
{/template}


/**
 * Renders a notice page when the email link anonymous upgrade flow is finished with a different
 * anonymous user being found.
 */
{template .anonymousUserMismatch}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-anonymous-user-mismatch">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a notice page when a user session is expired or cleared."}
          Session ended
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Message that explains to the user that their sign-in session was cleared or
            expired. This may happen when an anonymous user tries to upgrade to an email user but
            on sign-in completion, the underlying anonymous user is discovered to no longer be
            available."}
          The session associated with this sign-in request has either expired or was cleared.
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      <div class="firebaseui-form-actions">
        {call firebaseui.auth.soy2.element.cancelButton}
          {param label kind="text"}
            {msg desc="Label for the button to go back to the previous page."}
              Dismiss
            {/msg}
          {/param}
        {/call}
      </div>
    </div>
  </div>
{/template}


/**
 * Renders an account linking page for a password account.
 */
{template .passwordLinking}
  /** The user's email. */
  {@param email:string}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-password-linking">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <h2 class="firebaseui-subtitle">
          {msg desc="Header of a page displayed when the user has signed in before with an email and
              password account."}
            You already have an account
          {/msg}
        </h2>
        <p class="firebaseui-text">
          {msg desc="Message that reminds the user the previous and current sign-in status."}
            You’ve already used <strong>{$email}</strong> to sign in. Enter your password for that
            account.
          {/msg}
        </p>
        {call firebaseui.auth.soy2.element.password /}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-links">
          {call firebaseui.auth.soy2.element.passwordRecoveryButton /}
        </div>
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.signInButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an account linking page for an email link account.
 */
{template .emailLinkSignInLinking}
  {@param email: string}
  {@param? providerConfig: [providerId:string|null, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {let $idpDisplayName kind="text"}{call firebaseui.auth.soy2.element.idpName data="all" /}{/let}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-email-link-sign-in-linking">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <h2 class="firebaseui-subtitle">
          {msg desc="Header of a page displayed when the user has signed in before with the provided
              email."}
            You already have an account
          {/msg}
        </h2>
        <p class="firebaseui-text firebaseui-text-justify">
          {msg desc="Message that reminds the user that they previously used a different method of
              sign-in for the current email. The user is expected to sign in with their existing
              sign-in provider and then connect the new provider to the same account. For example,
              a user could have signed in with email link but is now trying to sign in with
              Facebook."}
            You’ve already used <strong>{$email}</strong>. You can connect your{sp}
            <strong>{$idpDisplayName}</strong> account with <strong>{$email}</strong> by signing in
            with email link below.
          {/msg}
        <p class="firebaseui-text firebaseui-text-justify">
          {msg desc="Message that notifies the user that in order to connect their current sign-in
              provider (Facebook, Twitter, etc) with their email account, they need to open a link
              that was emailed to them on the same current device or browser."}
            For this flow to successfully connect your {$idpDisplayName} account with this email,
            you have to open the link on the same device or browser.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.signInButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an account linking page for an email link account.
 */
{template .emailLinkSignInLinkingDifferentDevice}
  {@param? providerConfig: [providerId:string|null, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {let $idpDisplayName kind="text"}{call firebaseui.auth.soy2.element.idpName data="all" /}{/let}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-email-link-sign-in-linking-different-device">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text firebaseui-text-justify">
          {msg desc="Message that explains to the user that the email link they clicked to sign in
              with was opened on a different device where they are not signed in with an identity
              provider such as Facebook, Twitter, etc. This makes it not possible to connect that
              identity provider to the same email account unless the user opens the link on the same
              device where they started the sign-in flow with."}
            You originally intended to connect <strong>{$idpDisplayName}</strong> to your email
            account but have opened the link on a different device where you are not signed in.
          {/msg}
        </p>
        <p class="firebaseui-text firebaseui-text-justify">
          {msg desc="Message that gives the user two choices: connect an identity provider such as
              Facebook, Twitter, etc to their email account by opening a sign-in link on the same
              device they started the sign-in flow with or complete sign-in without connecting
              that provider."}
            If you still want to connect your <strong>{$idpDisplayName}</strong> account, open
            the link on the same device where you started sign-in. Otherwise, tap Continue to
            sign-in on this device.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an account linking page for a federated account.
 */
{template .federatedLinking}
  {@param email: string}
  {@param? providerConfig: [providerId:string|null, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]} /** The IdP provider config. */
  {let $idpDisplayName kind="text"}{call firebaseui.auth.soy2.element.idpName data="all" /}{/let}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-federated-linking">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <h2 class="firebaseui-subtitle">
          {msg desc="Header of a page displayed when the user has signed in before with the provided
              email."}
            You already have an account
          {/msg}
        </h2>
        <p class="firebaseui-text">
          {msg desc="Message that reminds the user the previous sign-in status."}
            You’ve already used <strong>{$email}</strong>. Sign in with {$idpDisplayName} to
            continue.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="Label of a button that signs in a user with a federated identity provider
                  (e.g. Sign in with Google, Sign in with Facebook)."}
                Sign in with {$idpDisplayName}
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an unauthorized user page.
 */
{template .unauthorizedUser}
  {@param? userIdentifier: string}
  {@param? adminEmail: string}
  {@param? displayHelpLink: bool}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-unauthorized-user">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a page notifying the user that they are not authorized
              to register an account for the current application."}
            Not Authorized
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {if $userIdentifier}
            {msg desc="Message notifying the user that they are not authorized to
                register an account for the current application."}
              <strong>{$userIdentifier}</strong> is not authorized to view the requested page.
            {/msg}
          {else}
            User is not authorized to view the requested page.
          {/if}
        </p>
        {if $adminEmail}
          <p class="firebaseui-text firebaseui-id-unauthorized-user-admin-email">
            {msg desc="Instructions on how to contact the site administrator for access."}
              Please contact <strong>{$adminEmail}</strong> for authorization.
            {/msg}
          </p>
        {/if}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-links">
          {if $displayHelpLink}
            <a class="firebaseui-link firebaseui-id-unauthorized-user-help-link"
                href="javascript:void(0)" target="_blank">
              {msg desc="Label for the help link"}Learn More{/msg}
            </a>
          {/if}
        </div>
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton}
            {param label kind="text"}
              {msg desc="Label for the button to go back to the previous page."}
                Back
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders an unsupported provider page.
 */
{template .unsupportedProvider}
  {@param email: string}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container
              firebaseui-id-page-unsupported-provider">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="Message that asks the user to recover the password."}
            To continue sign in with <strong>{$email}</strong> on this device, you have to recover
            the password.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton /}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="Label of a button that starts the password recovery flow."}
                Recover password
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a reset password page.
 */
{template .passwordReset}
  {@param email: string} /** The email address of the account to reset password. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-password-reset">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a page where the user can reset their password."}
            Reset your password
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        {msg desc="Tell the user the email of the account for which the password is being
            changed."}
          <p class="firebaseui-text">
            for <strong>{$email}</strong>
          </p>
        {/msg}
        {call firebaseui.auth.soy2.element.newPassword data="all"}
          {param label kind="text"}
            {msg desc="Label for the password input field in the Reset Password page."}
              New password
            {/msg}
          {/param}
        {/call}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.saveButton /}
        </div>
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a notice page for password reset success.
 */
{template .passwordResetSuccess}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-password-reset-success">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a successful password change notice page"}Password changed{/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page that password reset succeeded."}
          You can now sign in with your new password
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page for password reset failure.
 */
{template .passwordResetFailure}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-password-reset-failure">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a password reset failure notice page"}
          Try resetting your password again
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page that password reset failed."}
          Your request to reset your password has expired or the link has already been used
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page for email change revocation success.
 */
{template .emailChangeRevokeSuccess}
  {@param email: string} /** The old email address of the account to reactivate. */
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-email-change-revoke-success">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a page notifying that an email change request has been revoked"}
            Updated email address
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="Detailed info of a notice page that an email change request has been revoked."}
            Your sign-in email address has been changed back to <strong>{$email}</strong>.
          {/msg}
        </p>
        <p class="firebaseui-text">
          {msg desc="Message that explains to the user that they can reset their password if they
               suspect someone has accessed their account."}
            If you didn’t ask to change your sign-in email, it’s possible someone is trying to
            access your account and you should <a
                class="firebaseui-link firebaseui-id-reset-password-link"
                href="javascript:void(0)">
              change your password right away
            </a>.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        {if $allowContinue}
          <div class="firebaseui-form-actions">
            {call firebaseui.auth.soy2.element.continueButton /}
          </div>
        {/if}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a notice page for email change revocation failure.
 */
{template .emailChangeRevokeFailure}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-email-change-revoke-failure">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page notifying that an email change revocation request has failed"}
          Unable to update your email address
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      {msg desc="Detailed info of a notice page that email change revocation has failed."}
        <p class="firebaseui-text">
          There was a problem changing your sign-in email back.
        </p>
        <p class="firebaseui-text">
          If you try again and still can’t reset your email, try asking your administrator for help.
        </p>
      {/msg}
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page that confirms the user's email has been verified.
 */
{template .emailVerificationSuccess}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-email-verification-success">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page telling the user their email address has been verified."}
          Your email has been verified
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page that confirms user's email is verified"}
          You can now sign in with your new account
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page for email verification failure.
 */
{template .emailVerificationFailure}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-email-verification-failure">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page telling the user that email verification has failed."}
          Try verifying your email again
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page that email verification failed."}
          Your request to verify your email has expired or the link has already been used
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page that confirms the user's email has been verified and updated.
 */
{template .verifyAndChangeEmailSuccess}
  {@param email: string} /** The email address being verified and updated to. */
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-verify-and-change-email-success">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page telling the user their email address has been verified and
            updated."}
          Your email has been verified and changed
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a notice page that the email has been verified and updated."}
          You can now sign in with your new email <strong>{$email}</strong>.
        {/msg}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page for email verification and update failure.
 */
{template .verifyAndChangeEmailFailure}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-verify-and-change-email-failure">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page notifying that an email verification and
            update request has failed"}
          Try updating your email again
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      {msg desc="Detailed info of a notice page that an email verification and update request has
          failed."}
        <p class="firebaseui-text">
          Your request to verify and update your email has expired or the link has already been
          used.
        </p>
      {/msg}
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page for second factor addition revocation success.
 */
{template .revertSecondFactorAdditionSuccess}
  {@param factorId: string} /** The factor ID of the second factor being removed. */
  {@param? phoneNumber: string} /** The phone number of the phone second factor being removed. */
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-revert-second-factor-addition-success">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of a page notifying that a second factor addition request has been
              revoked"}
            Removed second factor
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {switch $factorId}
            {case 'phone'}
              {msg desc="Detailed info of a notice page that a phone second factor addition request
                  has been revoked."}
                The <strong>{$factorId} {$phoneNumber}</strong> was removed as a second
                authentication step.
              {/msg}
            {default}
              {msg desc="Detailed info of a notice page that a second factor addition request
                  has been revoked."}
                The device or app was removed as a second authentication step.
              {/msg}
          {/switch}
        </p>
        <p class="firebaseui-text">
          {msg desc="Message that explains to the user that they can reset their password if they
              suspect someone has accessed their account."}
            If you don't recognize this device, someone might be trying to access your account.
            Consider <a
                class="firebaseui-link firebaseui-id-reset-password-link"
                href="javascript:void(0)">
              changing your password right away
            </a>.
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        {if $allowContinue}
          <div class="firebaseui-form-actions">
            {call firebaseui.auth.soy2.element.continueButton /}
          </div>
        {/if}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders a notice page for second factor addition revocation failure.
 */
{template .revertSecondFactorAdditionFailure}
  {@param? allowContinue: bool} /** Whether to show the continue button. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-revert-second-factor-addition-failure">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a page notifying that the second factor addition revocation request
            has failed"}
          Couldn't remove your second factor
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      {msg desc="Detailed info of a notice page that the second factor addition revocation request
          has failed."}
        <p class="firebaseui-text">
          Something went wrong removing your second factor.
        </p>
        <p class="firebaseui-text">
          Try removing it again. If that doesn't work, contact support for assistance.
        </p>
      {/msg}
    </div>
    <div class="firebaseui-card-actions">
      {if $allowContinue}
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.continueButton /}
        </div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Renders a notice page that shows that an recoverable error was encountered.
 */
{template .recoverableError}
  {@param errorMessage: string} /** The detailed error message. */
  {@param? allowRetry: bool} /** Whether to show the retry button. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-recoverable-error">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a notice page"}Error encountered{/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {$errorMessage}
      </p>
    </div>
    <div class="firebaseui-card-actions">
      <div class="firebaseui-form-actions">
        {if $allowRetry}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="The retry button to recover from error."}
                Retry
              {/msg}
            {/param}
          {/call}
        {/if}
      </div>
    </div>
  </div>
{/template}


/**
 * Renders a notice page that shows that an unrecoverable error was encountered.
 */
{template .unrecoverableError}
  {@param errorMessage: string} /** The detailed error message. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-unrecoverable-error">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a notice page"}Error encountered{/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {$errorMessage}
      </p>
    </div>
  </div>
{/template}


/**
 * Renders the email mismatch page.
 */
{template .emailMismatch}
  {@param userEmail: string} /** The email returned by the identity provider. */
  {@param pendingEmail: string} /** The email formerly used. */
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-email-mismatch">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">{msg desc="Header of a sign-in page."}Sign in{/msg}</h1>
      </div>
      <div class="firebaseui-card-content">
        <h2 class="firebaseui-subtitle">
          {msg desc="Message that asks the user if he wishes to continue signing in with the
               provided email or sign out from the identity provider such as Google or Facebook
               and try to sign in again with a different email."}
            Continue with {$userEmail}?
          {/msg}
        </h2>
        <p class="firebaseui-text">
          {msg desc="Message that tells the user he originally wanted to sign in with a different
              email address."}
            You originally wanted to sign in with {$pendingEmail}
          {/msg}
        </p>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton /}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="The button that confirms that the user wishes to proceed with the current
                  email."}
                Continue
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
  </div>
{/template}


/**
 * Renders the list of supported sign-in providers.
 */
{template .providerSignIn}
  {@param providerConfigs: list<[providerId:string, providerName:string|null, fullLabel:string|null,
      buttonColor:string|null, iconUrl: string|null]>} /** List of supported IdP configs. */
  <div class="firebaseui-container firebaseui-page-provider-sign-in{sp}
      firebaseui-id-page-provider-sign-in firebaseui-use-spinner">
    <div class="firebaseui-card-content">
      <form onsubmit="return false;">
        <ul class="firebaseui-idp-list">
          {foreach $providerConfig in $providerConfigs}
            <li class="firebaseui-list-item">
              {call firebaseui.auth.soy2.element.idpButton}
                {param providerConfig: $providerConfig /}
              {/call}
            </li>
          {/foreach}
        </ul>
      </form>
    </div>
    <div class="firebaseui-card-footer firebaseui-provider-sign-in-footer">
      {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
    </div>
  </div>
{/template}


/**
 * Renders a phone sign-in start page.
 */
{template .phoneSignInStart}
  {@param? nationalNumber: string} /** The phone number to prefill. */
  {@param? enableVisibleRecaptcha: bool} /** Whether to enable the visible reCAPTCHA. */
  {@param? displayCancelButton: bool} /** Whether to display the cancel button. */
  {@param? displayFullTosPpMessage: bool} /** Whether to display the full message of ToS and PP. */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-phone-sign-in-start">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of the phone number sign-in page."}Enter your phone number{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <div class="firebaseui-relative-wrapper">
          {call firebaseui.auth.soy2.element.phoneNumber data="all" /}
          {if $enableVisibleRecaptcha}
            {call firebaseui.auth.soy2.element.recaptcha /}
          {/if}
        </div>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {if $displayCancelButton}
            {call firebaseui.auth.soy2.element.cancelButton /}
          {/if}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="The button that initiates the verification of the phone number provided
                  for an authentication flow by sending a verification code to that phone number."}
                Verify
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {if $displayFullTosPpMessage}
          {call firebaseui.auth.soy2.element.phoneTosPp data="all" /}
        {else}
          {call firebaseui.auth.soy2.element.phoneAuthSmsNotice /}
          {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
        {/if}
      </div>
    </form>
  </div>
{/template}

/**
 * Renders a phone sign-in finish page.
 */
{template .phoneSignInFinish}
  {@param? phoneNumber: string} /** The phone number to confirm */
  <div class="mdl-card mdl-shadow--2dp{sp}
      firebaseui-container firebaseui-id-page-phone-sign-in-finish">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of the phone number sign-in code verification page."}
            Verify your phone number{/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <p class="firebaseui-text">
          {msg desc="A link to edit the phone number that the verification code was sent to."}
            Enter the 6-digit code we sent to{sp}
            <a class="firebaseui-link firebaseui-change-phone-number-link{sp}
                      firebaseui-id-change-phone-number-link"
               href="javascript:void(0)">&lrm;{$phoneNumber}</a>
          {fallbackmsg desc="A link to edit the phone number that the verification code was sent
              to."}
            Enter the 6-digit code we sent to{sp}
            <a class="firebaseui-link firebaseui-change-phone-number-link{sp}
                      firebaseui-id-change-phone-number-link"
               href="javascript:void(0)">{$phoneNumber}</a>
          {/msg}
        </p>
        {call firebaseui.auth.soy2.element.phoneConfirmationCode /}
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.cancelButton /}
          {call firebaseui.auth.soy2.element.submitButton}
            {param label kind="text"}
              {msg desc="The button that completes verification of the phone number provided
                  for an authentication flow."}
                Continue
              {/msg}
            {/param}
          {/call}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.tosPpLink data="all" /}
      </div>
    </form>
    {call firebaseui.auth.soy2.element.resend /}
  </div>
{/template}


/**
 * Renders a sign out notice page.
 */
{template .signOut}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container firebaseui-id-page-sign-out">
    <div class="firebaseui-card-header">
      <h1 class="firebaseui-title">
        {msg desc="Header of a sign out notice page"}
          Sign Out
        {/msg}
      </h1>
    </div>
    <div class="firebaseui-card-content">
      <p class="firebaseui-text">
        {msg desc="Detailed info of a sign out notice page."}
          You are now successfully signed out.
        {/msg}
      </p>
    </div>
  </div>
{/template}


/**
 * Renders the list of tenants to select.
 */
{template .selectTenant}
  {@param tenantConfigs: list<[tenantId:string|null, fullLabel:string|null, displayName:string,
      buttonColor:string, iconUrl: string]>} /** List of tenant selection button configs. */
  <div class="firebaseui-container firebaseui-page-select-tenant firebaseui-id-page-select-tenant">
    <div class="firebaseui-card-content">
      <form onsubmit="return false;">
        <ul class="firebaseui-tenant-list">
          {foreach $tenantConfig in $tenantConfigs}
            <li class="firebaseui-list-item">
              {call firebaseui.auth.soy2.element.tenantSelectionButton}
                {param tenantConfig: $tenantConfig /}
              {/call}
            </li>
          {/foreach}
        </ul>
      </form>
    </div>
    <div class="firebaseui-card-footer firebaseui-provider-sign-in-footer">
      {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
    </div>
  </div>
{/template}


/**
 * Renders a provider match by email page.
 */
{template .providerMatchByEmail}
  <div class="mdl-card mdl-shadow--2dp firebaseui-container{sp}
              firebaseui-id-page-provider-match-by-email">
    <form onsubmit="return false;">
      <div class="firebaseui-card-header">
        <h1 class="firebaseui-title">
          {msg desc="Header of the page requesting a user's email to provide the best
              matching sign-in methods associated with this email."}
            Sign in
          {/msg}
        </h1>
      </div>
      <div class="firebaseui-card-content">
        <div class="firebaseui-relative-wrapper">
          {call firebaseui.auth.soy2.element.email /}
        </div>
      </div>
      <div class="firebaseui-card-actions">
        <div class="firebaseui-form-actions">
          {call firebaseui.auth.soy2.element.submitButton /}
        </div>
      </div>
      <div class="firebaseui-card-footer">
        {call firebaseui.auth.soy2.element.fullMessageTosPp data="all" /}
      </div>
    </form>
  </div>
{/template}