<html>
  <body bgcolor="#222426">
    <head>
      <title>Qmining | <%= domain %> - Login</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=0.6" />
      <style>
		body {
		  background-color: #222426;
		}
        <!--a {
          color: lightblue;
        }-->
        .logindiv {
          height: 100%;
		  float: left;
          left: 0;
          right: 0;          
          bottom: 0;
          margin: 0;
		  position: absolute;
          max-width: 100%;
          max-height: 100%;
          text-align: center;
        }
        .text {
		  font-family: 'Courier New', monospace;
		  text-shadow: 1px 1px 8px black;
          font-size: 20px;
          color: red;
          margin: 5px;
        }
        .title {
		font-family: 'Courier New', monospace;
		  padding-top: 17%;
          margin: 20px;
          font-size: 70px;
          font-weight: bold;
          color: white;
        }
        .inputContainer {
          max-width: 100%;
		  clear: both;
		  padding-bottom: 23px;
        }
        input[type=text], input[type=password], textarea {
          font-size: 16px;
          color: white;
          background-color: #181a1b;
          width: 360px;;
          padding: 12px 20px;
          margin: 8px 0;
          box-sizing: border-box;
          border: 2px solid white;
          text-align: center;
        }
        input[type=text]:focus, input[type=password]:focus, textarea:focus, input[type=text]:hover, input[type=password]:hover, textarea:hover {
          border: 2px solid #F2CB05;
        }
        button {
          background-color: #F2CB05;
          border: none;
          color: black;
          padding: 13px 30px;
          font-variant: small-caps;
		  font-weight: 500;
		  font-size: 15px;
          margin: 4px 2px;
          cursor: pointer;
		  text-shadow: 1px 1px 8px black;
		  transition: width 0.5s, height 0.5s, ease-in 0.5s;
        }
		button:active {
		  transform: translateY(2.5px); 
		}
		button:hover {
		  text-shadow: 2px 2px 8px black;
		  transition: width 0.5s, height 0.5s, ease-out 0.5s;
		  background-color: #a38c1a; 
		}
        .disabledButton {
          background-color: #a38c1a;
        }
      </style>
    </head>
    <div class='logindiv'>
		<div class='title'>
			<img src="/img/frylabs-logo_large_transparent.png" alt="FryLabs">
		</div>
		<div id='text' class='text'>
		</div>
		<div id='form'>
			<div class='inputContainer'>
				<input type='text' placeholder='Jelszó' onkeyup="PWKeyUp(this)" type='text' id='pw' name='pw' autocomplete="off" autofocus/>
				<input type='hidden' id='cid' name='pw' autocomplete="off"/>
			</div>
			<button id='sendButton' onclick="Login(this)">Belépés</button>
		</div>
	</div>
  </body>
  <script>
    function PWKeyUp (inputField) {
      if (event.keyCode === 13) {
        event.preventDefault();
        Login(document.getElementById('sendButton'))
      }
    }
    function HandleResp (resp) {
      const button = document.getElementById('sendButton')
      button.innerText = 'Login'
      const textNode = document.getElementById('text')
      if (resp.result === 'success') {
        location.reload()
        textNode.innerText = resp.msg
      } else {
        textNode.innerText = resp.msg
        button.disabled = false
        button.classList.remove('disabledButton')
      }
    }
    async function Login(button) {
      button.innerText = '...'
      button.classList.add('disabledButton')
      button.disabled = true
      // TODO: get url from controller
        const rawResponse = await fetch('<%= useHttp ? `http://${domain}/api/login` : `https://${domain}/api/login` %>', {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          pw: document.getElementById('pw').value.trim(),
          cid: document.getElementById('cid').value
        })
      })
      if (!rawResponse.ok) {
        document.getElementById('text').innerText = 'Internal server error'
        button.innerText = 'Login'
      }
      try {
        rawResponse.json()
          .then((resp) => {
            HandleResp(resp)
          })
      } catch (e) {
        document.getElementById('text').innerText = 'Invalid data recieved from server'
        button.innerText = 'Login'
        console.log(e)
      }
    }
  </script>
</html>
