<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="Neo Ighodaro">
        <title>Mazebase Game</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <style>
              :root {
                --input-padding-x: .75rem;
                --input-padding-y: .75rem;
              }
              html,
              body, body > div {
                height: 100%;
              }
              body > div {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                padding-top: 40px;
                padding-bottom: 40px;
                background-color: #f5f5f5;
              }
              .form-signin {
                width: 100%;
                max-width: 420px;
                padding: 15px;
                margin: auto;
              }
              .form-label-group {
                position: relative;
                margin-bottom: 1rem;
              }
              .form-label-group > input,
              .form-label-group > label {
                padding: var(--input-padding-y) var(--input-padding-x);
              }
              .form-label-group > label {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                margin-bottom: 0; /* Override default `<label>` margin */
                line-height: 1.5;
                color: #495057;
                cursor: text; /* Match the input under the label */
                border: 1px solid transparent;
                border-radius: .25rem;
                transition: all .1s ease-in-out;
              }
              .form-label-group input::-webkit-input-placeholder {
                color: transparent;
              }
              .form-label-group input:-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-moz-placeholder {
                color: transparent;
              }
              .form-label-group input::placeholder {
                color: transparent;
              }
              .form-label-group input:not(:placeholder-shown) {
                padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                padding-bottom: calc(var(--input-padding-y) / 3);
              }
              .form-label-group input:not(:placeholder-shown) ~ label {
                padding-top: calc(var(--input-padding-y) / 3);
                padding-bottom: calc(var(--input-padding-y) / 3);
                font-size: 12px;
                color: #777;
              }
              /* Fallback for Edge
              -------------------------------------------------- */
              @supports (-ms-ime-align: auto) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input::-ms-input-placeholder {
                  color: #777;
                }
              }
              /* Fallback for IE
              -------------------------------------------------- */
              @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input:-ms-input-placeholder {
                  color: #777;
                }
              }
        </style>
      </head>

      <body>
        <div id="app">
          <form class="form-signin">
            <div class="text-center mb-4">
              <!-- <img class="mb-4" src="https://thestore.gameops.com/v/vspfiles/photos/Tic-Tac-Go-14.gif" alt="" width="72" height="72"> -->
              <h1 class="h3 mb-3 font-weight-normal">Mazebase Game Task</h1>
              <p>You clicked here from the Mechanical Turk HIT. Exit out if this is not correct. Enter your MTurk ID below, which we will use to cross reference payments.</p>
            </div>
            <div class="form-label-group">
                <input type="name" id="inputUsername" ref="username" class="form-control" placeholder="Username" required="" autofocus="">
                  <label for="inputUsername">Enter Mechanical Turk ID</label>
            </div>
            <div class="form-label-group">
              <input type="email" id="inputEmail" ref="email" class="form-control" placeholder="Code" autofocus="" required>
                <label for="inputEmail">Entrance Code provided in mturk HIT</label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">Connect</button>
            <!-- <p class="mt-5 mb-3 text-muted text-center">© 2017-2018</p> -->
          </form>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

        <script>
        var app = new Vue({
          el: '#app',
          methods: {
            login: function () {

              let username = this.$refs.username.value
              //window.location.replace(`/instruction?username=${username}`);
              let email = this.$refs.email.value
              window.location.replace(`/instruction?username=${username}&code=${email}`);
            }
          }
        })
        </script>
    </body>

</html>
