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; OpenAPI.BASE = config.baseurl;
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import "toastify-js/src/toastify.css"; import "toastify-js/src/toastify.css";
import { init } from "svelte/internal";
let usersUsername; let usersUsername;
let usersPassword = ""; let usersPassword = "";
let last_loginclick_processed = true; let last_loginclick_processed = true;
@ -62,41 +63,45 @@
}).showToast(); }).showToast();
} }
}; };
function handleKeydown(e) {
if (e.keyCode === 13) {
login();
}
}
</script> </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"> <div class="max-w-md w-full py-12 px-6">
<img <img
style="height:10rem;" style="height:10rem;"
class="mx-auto" class="mx-auto"
src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png" src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
alt="" /> alt="" />
<p class="mt-6 text-lg text-center font-bold"> <p class="mt-6 text-lg text-center font-bold">{$_('application_name')}</p>
{$_('application_name')} <p class="mt-6 text-sm text-center">{$_('log_in_to_your_account')}</p>
</p>
<p class="mt-6 text-sm text-center">
{$_('log_in_to_your_account')}
</p>
<div> <div>
<div class="rounded-md shadow-sm"> <div class="rounded-md shadow-sm">
<div> <div>
<!-- svelte-ignore a11y-autofocus -->
<input <input
autofocus
aria-label={$_('email_address_or_username')} aria-label={$_('email_address_or_username')}
name="email" type="text"
type="email"
required="" 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" 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')} placeholder={$_('email_address_or_username')}
bind:value={usersUsername} /> bind:value={usersUsername} />
</div> </div>
<div class="-mt-px relative"> <div class="-mt-px relative">
<input <input
aria-label={$_('password')} aria-label={$_('password')}
name="password"
type="password" type="password"
required="" required=""
bind:value={usersPassword} 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" 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')} /> placeholder={$_('password')} />
</div> </div>
</div> </div>