<!DOCTYPE html>

<!--
#
# proxied-auth-sign-in.htm
#
# Copyright (C) 2022 by Posit Software, PBC
#
# This program is licensed to you under the terms of version 3 of the
# GNU Affero General Public License. This program is distributed WITHOUT
# ANY EXPRESS OR IMPLIED WARRANTY, INCLUDING THOSE OF NON-INFRINGEMENT,
# MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Please refer to the
# AGPL (http://www.gnu.org/licenses/agpl-3.0.txt) for more details.
#
-->

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Posit Workbench Sign In</title>
    <link rel="shortcut icon" href="images/favicon-posit.ico" />

    <link rel="stylesheet" href="rstudio.css" type="text/css" />
    <link rel="stylesheet" href="signin.css" type="text/css" />

    <style>
      #errorpanel {
        display: #errorDisplay#;
      }

      #returnlink {
        display: #errorDisplay#;
      }
    </style>

    <script type="text/javascript" src="js/signin.js"></script>
  </head>

  <body>
    <header role="banner" id="banner">
      <div id="logo">#!logoHtml#</div>
      <div id="licensed-to">
        <span id="license-prefix">#licensePrefix#</span>
        <span id="licensee">#licensee#</span>
      </div>
    </header>
    <main role="main">
      <div id="errorpanel">
        <p role="alert">Error: #errorMessage#</p>
      </div>

      <form
        name="login_form"
        action="#action#"
        method="POST"
        enctype="application/x-www-form-urlencoded"
      >
        <div id="border" role="presentation" align="center">
          <div role="group" aria-labelledby="caption_header">
            <h1 class="caption">Sign in as #username#</h1>
            <p>
              <span id="countdown" role="timer"></span>
              <input
                type="hidden"
                name="#csrf_token_meta#"
                value="#csrf_token#"
              />
              <input type="hidden" name="appUri" value="#appUri#" />
            </p>
            <p>
              <a id="returnlink" href="#signInUrl#">Return to sign in page</a>
            </p>
          </div>
        </div>
      </form>
      <div class="signin-spinner-holder">
        <div
          aria-live="polite"
          class="visuallyhidden"
          id="progress-message"
        ></div>
        <div
          role="progressbar"
          aria-labelledby="progress-message"
          id="spinner"
          class="signin-hidden signin-spinner"
        >
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div id="login-html">#!loginPageHtml#</div>
    </main>

    <script>
      var delay = #redirectDelay#;
      var seconds = delay + 1;
      var error = "#errorMessage#";

      function countdown() {
         if (error !== '') {
            return;
         }
         var countdown = document.getElementById("countdown");
         if (--seconds <= 0) {
            countdown.innerHTML = "Redirecting...";
            document.getElementById('spinner').classList.remove('signin-hidden');
            document.getElementById('progress-message').innerText = "Signing in";
            document.forms["login_form"].submit();
         } else {
            if (delay > 0) {
               countdown.innerHTML = "Redirecting in " + seconds + " seconds...";
            }
            window.setTimeout("countdown()", 1000);
         }
      }

      countdown();
    </script>
  </body>
</html>
