{{ define "page" }}
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/login.css">
<div id="box">
	<img id="logo" src="/images/v1/logo.svg">
	<input type="text" id="username" placeholder="Username">
	<input type="password" id="password" placeholder="Password">
	<button onclick="globalThis._login.authenticate()">Log in</button>
	<div id="error"></div>
</div>

<script type="module">
import { API } from 'api';

class Login {
	constructor() {
		this.errorDiv = document.getElementById('error')

		document.getElementById('username').focus()

		const username = document.getElementById('username')
		const password = document.getElementById('password')
		username.addEventListener('keydown', event=>this.keyHandler(event))
		password.addEventListener('keydown', event=>this.keyHandler(event))
	}
	authenticate() {
		this.errorDiv.innerText = ''

		const username = document.getElementById('username').value
		const password = document.getElementById('password').value
		API.authenticate(username, password)
		.then(ans=>{
			location.href = '/'
		})
		.catch(e=>{
			setTimeout(()=>this.errorDiv.innerText = e, 75)
		})
	}
	keyHandler(event) {
		if (event.key == 'Enter') {
			this.authenticate()
		}
	}
}

globalThis._login = new Login()
</script>
{{ end }}
