lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Login component - enter key listener

Browse Source
This commit is contained in:
Philipp Dormann 2020-12-29 21:31:55 +01:00
parent 9633a09b73
commit 016f08b07c
1 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Login.svelte
View File

@ -7,6 +7,7 @@
OpenAPI.BASE = config.baseurl;
import Toastify from "toastify-js";
import "toastify-js/src/toastify.css";
import { init } from "svelte/internal";
let usersUsername;
let usersPassword = "";
let last_loginclick_processed = true;
@ -62,41 +63,45 @@
}).showToast();
}
};
function handleKeydown(e) {
if (e.keyCode === 13) {
login();
}
}
</script>
<div class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
<div
class="min-h-screen flex items-center justify-center bg-gray-100 text-gray-900">
<div class="max-w-md w-full py-12 px-6">
<img
style="height:10rem;"
class="mx-auto"
src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
alt="" />
<p class="mt-6 text-lg text-center font-bold">
{$_('application_name')}
</p>
<p class="mt-6 text-sm text-center">
{$_('log_in_to_your_account')}
</p>
<p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
<p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
<div>
<div class="rounded-md shadow-sm">
<div>
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
aria-label={$_('email_address_or_username')}
name="email"
type="email"
type="text"
required=""
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
on:keydown={handleKeydown}
placeholder={$_('email_address_or_username')}
bind:value={usersUsername} />
</div>
<div class="-mt-px relative">
<input
aria-label={$_('password')}
name="password"
type="password"
required=""
bind:value={usersPassword}
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
on:keydown={handleKeydown}
placeholder={$_('password')} />
</div>
</div>