---
title: "Login"
type: "login"
---
<article x-data="{
	email: '',
	password: '',
	error: '',
	pending: false,
	async submitLogin(event) {
		event.preventDefault();
		if (!this.email || !this.password) {
			this.error = 'Bitte E-Mail und Passwort angeben.';
			return;
		}
		const data = new FormData();
		data.append('identity', this.email);
		data.append('password', this.password);
		this.pending = true;
		const response = await fetch(
			'/api/collections/users/auth-with-password',
			{ method: 'POST', body: data }
		);
		const result = await response.json();
		this.pending = false;
		if (!result.token) {
			this.error = 'Login fehlgeschlagen';
			return;
		}
		this.error = '';
		localStorage.setItem('alphabreedtoken', result.token);
		localStorage.setItem('alphabreedid', result.record.id);
		const params = new URLSearchParams(window.location.search);
		window.location = params.has('back') ? params.get('back') : '/';
	}
}">
	<p style="color:red; text-align:center;" x-show="error" x-text="error"></p>
	<form @submit="submitLogin">
		<label for="email">E-Mail</label>
		<input type="email" id="email" autocomplete="email" x-model="email">
		<label for="password">Passwort</label>
		<input type="password" id="password" x-model="password">
		<button type="submit" :aria-busy="pending ? 'true' : 'false'">Login</button>
	</form>
</article>