<!DOCTYPE html>

<!--
#
# encrypted-sign-in.htm
#
# Copyright (C) 2009-19 by RStudio, 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" />
<title>RStudio Sign In</title>
<link rel="shortcut icon" href="images/favicon.ico" />

<script>
function verifyMe()
{
   if(document.getElementById('username').value=='')
   {
      document.getElementById('username').focus();
      showError('You must enter a username');
      return false;
   }
   if(document.getElementById('password').value=='')
   {
      document.getElementById('password').focus();
      showError('You must enter a password');
      return false;
   }
   return true;
}
</script>

<link rel="stylesheet" href="rstudio.css" type="text/css"/>
<link rel="stylesheet" href="css/focus-visible.css" type="text/css"/>

<style type="text/css">

body, td {
   font-size: 12px;
}

#border {
   margin: 0 auto;
}

#caption {
  text-align: center;
  font-size: 14px;
  margin-right: 0;
  width: 100%;
}

input[type=text], input[type=password] {
  width: 262px;
  border: 1px solid #aaa;
  font-size: 14px;
  padding: 3px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#buttonpanel {
  text-align: center;
  margin-top: 12px;
}
#errorpanel {
  text-align: center;
  padding: 0 25% 0 25%;
  color: #e60000;
  display: #errorDisplay#;
  font-weight: bold;
}

button.fancy {
  background-color: #1e77bc;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  border: 0;
  color: white;
}
</style>

<script type="text/javascript" src="js/encrypt.min.js"></script>
<script type="text/javascript">

function speakError() {
   document.getElementById("live-error").innerText = document.getElementById("errortext").innerText;
}

function showError(errorMessage) {
   var errorDiv = document.getElementById('errorpanel');
   errorDiv.innerHTML = '';
   var errorp = document.createElement('p');
   errorp.id = "errortext";
   errorDiv.appendChild(errorp);
   if (typeof(errorp.innerText) == 'undefined')
      errorp.textContent = errorMessage;
   else
      errorp.innerText = errorMessage;
   errorDiv.style.display = 'block';
   speakError();
}

function prepare() {
   if (!verifyMe())
      return false;
   try {
      var payload = document.getElementById('username').value + "\n" +
                    document.getElementById('password').value;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "#'publicKeyUrl#", true);
      xhr.onreadystatechange = function() {
         try {
            if (xhr.readyState == 4) {
               if (xhr.status != 200) {
                  var errorMessage;
                  if (xhr.status == 0)
                     errorMessage = "Error: Could not reach server--check your internet connection";
                  else
                     errorMessage = "Error: " + xhr.statusText;
                  showError(errorMessage);
               }
               else {
                  var response = xhr.responseText;
                  var chunks = response.split(':', 2);
                  var exp = chunks[0];
                  var mod = chunks[1];
                  var encrypted = encrypt(payload, exp, mod);
                  document.getElementById('persist').value = document.getElementById('staySignedIn').checked ? "1" : "0";
                  document.getElementById('package').value = encrypted;
                  document.getElementById('clientPath').value = window.location.pathname;
                  document.realform.submit();
               }
            }
         } catch (exception) {
            showError("Error: " + exception);
         }
      };
      xhr.send(null);
   } catch (exception) {
      showError("Error: " + exception);
   }
}
function submitRealForm() {
   if (prepare())
      document.realform.submit();
}
</script>

</head>
<body>
<div id="skipnav"><a href="#username">Skip navigation</a></div>
<header role="banner" id="banner"><a href="http://www.rstudio.com"><img src="images/rstudio.png" width="78" height="27" alt="RStudio Logo (goes to external site)"/></a></header>
<main role="main">
<div id="errorpanel">
<p id="errortext">Error: #errorMessage#</p>
</div>
<div role="alert" aria-atomic="true" class="visuallyhidden" id="live-error"></div>

<form method="POST" #!formAction#>
<table role="presentation" id="border">
  <tr>
    <td>
      <h1 id="caption">Sign in to RStudio</h1>
      <div role="group" aria-labelledby="caption">
      <p>
         <label for="username">Username:</label><br />
         <input type='text' 
                name='username' 
                autocomplete='off'
                autocorrect='off'
                autocapitalize='off'
                spellcheck='false'
                value='' 
                id='username' 
                size='45'/><br />
      </p>
      <p>
         <label for="password">Password:</label><br />
         <input type='password' 
                name='password' 
                autocomplete='off'
                autocorrect='off'
                autocapitalize='off'
                spellcheck='false'
                value='' 
                id='password' 
                size='45'/><br />
      </p>
      <div style="display: #staySignedInDisplay#;">
         <p style="display: #authTimeoutMinutesDisplay#;">
            <span style="font-size:10px">You will automatically be signed out after #authTimeoutMinutes# minutes of inactivity.</span>
         </p>
         <input type="checkbox" name="staySignedIn" id="staySignedIn" value="1"/>
         <label for="staySignedIn">Stay signed in when browser closes</label>
      </div>
       <input type="hidden" name="appUri" value="#appUri#"/>
       <div id="buttonpanel"><button class="fancy" type="submit">Sign In</button></div>
      </div>
    </td>
  </tr>
</table>
</form>

<form action="#action#" name="realform" method="POST">
   <input type="hidden" name="persist" id="persist" value=""/>
   <input type="hidden" name="appUri" value="#appUri#"/>
   <input type="hidden" name="clientPath" id="clientPath" value=""/>
   <input id="package" type="hidden" name="v" value=""/>
</form>

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

<script type="text/javascript">
document.getElementById('username').focus();

var errorPanel = document.getElementById('errorpanel');
var displayProp = window.getComputedStyle(errorPanel, null).getPropertyValue("display");
if (displayProp !== "none")
{
   document.title = "Error: RStudio Sign In Failed";
   // If error message displayed, give time for screen reader to catch up then
   // copy error message to aria-live region to trigger announcement
   setTimeout(function () {
      speakError();
   }, 2000);
}
</script>
</main>
<script type="text/javascript" src="js/focus-visible.min.js"></script>
</body>
</html>
