<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Passerelle SSO Grand Lyon</title>

    <style>
      body {
          background: #ececec;
          font-family: sans-serif;
          text-align: center;
      }
      form {
          position: relative;
          width: 430px;
          height: 141px;
          margin: auto;
          padding: 1px;
          background: #423143;
          margin-top: 100px;
      }
      input[type=submit] {
          border: 0;
          background: #da0100;
          font-size: 22px;
          padding: 0;
          color: #fff;
          font-weight: bold;
          line-height: 1;
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 5px 10px;
          cursor: pointer;
      }
      form input[type=text],form input[type=password] {
          font-weight: 300;
          -webkit-font-smoothing: antialiased;
          box-shadow: 0.1px 0 2px #6c5B6d;
          width: 380px;
          height: 32px;
          margin: 15px 15px;
          border: 0;
          border-radius: 2px;
          outline: 0;
          display: block;
          font-size: 18px;
      }
      form input[type=password]{
          width: 380px;
          height: 32px;
          margin: -5px 15px;
      }

      input{padding-left: 16px;}

      .error {
          background: #f00;
          color: #fff;
          font-size: 32px;
          padding: 5px;
          text-align: center;
      }
      /* placeholder */
      : : -webkit-input-placeholder {
          -webkit-font-smoothing: antialiased;
          color: #999;
          font-size: 16px;
      }
      : -moz-input-placeholder {
          color: #999;
          font-size: 16px;
      }
    </style>
  </head>
  <body>

    <img src="https://www.laclasse.com/sso/images/grandlyon-logo.svg" alt="Logo MÃ©tropole de Lyon" />

    <% if error_message != "" %>
    <p class="error"><%=error_message %></p>
    <% end %>

    <form id="form" name="form" method="post" action="/auth/login" accept-charset="utf-8">
      <input type="text" name="login" placeholder="identifiant" required/>

      <input type="password" name="password" placeholder="mot de passe" required />

      <input name="nonce" type="hidden" value="<%= nonce %>"/>
      <input name="return_sso_url" type="hidden" value="<%= return_sso_url %>"/>

      <input type="submit" name="submit" value="se connecter"/>
    </form>

  </body>
</html>
