dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-08 01:00:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add password textfield

Browse source
This commit is contained in:
EETagent 2022-12-05 14:58:03 +01:00
parent f238679398
commit 5096f8ddca
2 changed files with 38 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/lib/components/textfield/PasswordField.svelte Normal file
View file

@ -0,0 +1,30 @@
<script lang="ts">
import Lock from '../icons/Lock.svelte';
import TextField from './TextField.svelte';
export let placeholder: string = '';
export let value: string = '';
export let error: string = '';
</script>
<TextField
bind:error
bind:value
on:click
on:keydown
on:keyup
{placeholder}
on:change
type="password"
icon
>
<div slot="icon" class="flex items-center justify-center">
<Lock />
</div>
</TextField>
<style>
div {
@apply text-sspsBlue;
}
</style>

21
frontend/src/routes/(admin)/admin/auth/login/+page.svelte
View file

@ -7,14 +7,16 @@
import Lock from '$lib/components/icons/Lock.svelte'; import Lock from '$lib/components/icons/Lock.svelte';
import { apiLogin } from '$lib/@api/admin'; import { apiLogin } from '$lib/@api/admin';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import Submit from '$lib/components/button/Submit.svelte';
import PasswordField from '$lib/components/textfield/PasswordField.svelte';
let adminIdValue = ''; let adminIdValue = '';
let adminPasswordValue = ''; let adminPasswordValue = '';
const login = async () => { const login = async () => {
try { try {
await apiLogin({adminId: Number(adminIdValue), password: adminPasswordValue}); await apiLogin({ adminId: Number(adminIdValue), password: adminPasswordValue });
goto("/admin/dashboard"); goto('/admin/dashboard');
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
@ -37,19 +39,12 @@
<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" /> <TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
</span> </span>
<span class="mt-8"> <span class="mt-8">
<TextField bind:value={adminPasswordValue} placeholder="Heslo" type="password" icon> <PasswordField bind:value={adminPasswordValue} placeholder="Heslo" />
<div slot="icon" class="flex items-center justify-center">
<Lock />
</div>
</TextField>
</span> </span>
</div> </div>
<input <div class="mt-8 w-3/5">
class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300" <Submit value="Odeslat" on:click={login} />
type="submit" </div>
value="Odeslat"
on:click={login}
/>
</div> </div>
</SplitLayout> </SplitLayout>