mirror of
https://github.com/JonasunderscoreJones/dash.jonasjones.dev.git
synced 2025-10-22 23:49:20 +02:00
updated login code
This commit is contained in:
parent
a9772ccc5d
commit
06b524ae1c
1 changed files with 29 additions and 9 deletions
|
@ -1,9 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { navigate } from 'svelte-routing';
|
import { navigate } from 'svelte-routing';
|
||||||
import { setSessionKey } from '../../utils/session.js';
|
import { setSessionKey } from '../../utils/session.js';
|
||||||
|
import { page } from '$app/state';
|
||||||
let email = '';
|
let email = '';
|
||||||
let password = '';
|
let password = '';
|
||||||
let errorMessage = '';
|
let errorMessage = '';
|
||||||
|
let showPassword = false;
|
||||||
|
|
||||||
const handleLogin = async () => {
|
const handleLogin = async () => {
|
||||||
try {
|
try {
|
||||||
|
@ -30,7 +32,9 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>Login</h2>
|
<div class="login-container">
|
||||||
|
<div class="login-prompt">
|
||||||
|
<h1>Login</h1>
|
||||||
|
|
||||||
{#if errorMessage}
|
{#if errorMessage}
|
||||||
<p style="color: red;">{errorMessage}</p>
|
<p style="color: red;">{errorMessage}</p>
|
||||||
|
@ -41,10 +45,26 @@
|
||||||
<input id="email" bind:value={email} required />
|
<input id="email" bind:value={email} required />
|
||||||
|
|
||||||
<label for="password">Password:</label>
|
<label for="password">Password:</label>
|
||||||
<input type="password" id="password" bind:value={password} required />
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<input style="flex-grow: 1; margin-right: 10px;" type={showPassword ? 'text' : 'password'} id="password" bind:value={password} required />
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
on:click={() => showPassword = !showPassword}
|
||||||
|
style="border: none; cursor: pointer; margin-top: -14px;"
|
||||||
|
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
||||||
|
>
|
||||||
|
<i class={showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Have no account? <a href="/register{page.url.search}">Register!</a></p>
|
||||||
|
|
||||||
<button type="submit">Login</button>
|
<button type="submit">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.login-container {
|
.login-container {
|
||||||
|
@ -109,7 +129,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #0056b3;
|
background-color: var(--color-theme-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue