58 lines
1.5 KiB
HTML
58 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ScannerBot — Login</title>
|
|
</head>
|
|
<body>
|
|
<div x-data="loginApp()" x-init="init()">
|
|
<h1>ScannerBot</h1>
|
|
<form @submit.prevent="doLogin()">
|
|
<div>
|
|
<label>Username<br>
|
|
<input type="text" x-model="username" required autocomplete="username" />
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label>Password<br>
|
|
<input type="password" x-model="password" required autocomplete="current-password" />
|
|
</label>
|
|
</div>
|
|
<button type="submit" :disabled="loading">Login</button>
|
|
<p x-show="error" x-text="error" style="color:red"></p>
|
|
</form>
|
|
</div>
|
|
<script type="module">
|
|
import Alpine from 'alpinejs'
|
|
import { redirectIfAuthed } from '/src/auth.js'
|
|
import { login } from '/src/api.js'
|
|
|
|
redirectIfAuthed()
|
|
|
|
window.loginApp = () => ({
|
|
username: '',
|
|
password: '',
|
|
error: '',
|
|
loading: false,
|
|
init() {},
|
|
async doLogin() {
|
|
this.error = ''
|
|
this.loading = true
|
|
try {
|
|
await login(this.username, this.password)
|
|
window.location.href = '/'
|
|
} catch (e) {
|
|
this.error = e.message || 'Login failed'
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
})
|
|
|
|
window.Alpine = Alpine
|
|
Alpine.start()
|
|
</script>
|
|
</body>
|
|
</html>
|