show login errors

This commit is contained in:
Ilion Beyst 2022-04-09 10:50:17 +02:00
parent f59bf07d57
commit f21182ecdf
2 changed files with 51 additions and 25 deletions

View file

@ -1,3 +1,5 @@
import { currentUser } from "./stores/current_user";
export function set_session_token(token: string) { export function set_session_token(token: string) {
window.localStorage.setItem("session", token); window.localStorage.setItem("session", token);
} }
@ -5,3 +7,35 @@ export function set_session_token(token: string) {
export function get_session_token(): string | null { export function get_session_token(): string | null {
return window.localStorage.getItem("session"); return window.localStorage.getItem("session");
} }
export function clear_session_token() {
window.localStorage.removeItem("session");
}
export type Credentials = {
username: string;
password: string;
};
export async function login(credentials: Credentials) {
let response = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(credentials),
});
if (response.status == 403) {
throw new Error("invalid credentials");
}
if (!response.ok) {
throw new Error(response.statusText);
}
let token = response.headers.get("Token");
set_session_token(token);
const user = await response.json();
currentUser.set(user);
}

View file

@ -1,38 +1,24 @@
<script lang="ts"> <script lang="ts">
import { get_session_token, set_session_token } from "$lib/auth"; import * as auth from "$lib/auth";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { currentUser } from "$lib/stores/current_user";
let username: string | undefined; let username: string | undefined;
let password: string | undefined; let password: string | undefined;
async function login() { let error: string | undefined;
let response = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
password,
}),
});
if (!response.ok) {
throw Error(response.statusText);
}
let token = response.headers.get("Token");
set_session_token(token);
const user = await response.json();
currentUser.set(user);
async function submitLogin() {
try {
error = undefined;
await auth.login({ username, password });
goto("/"); goto("/");
} catch (e) {
error = e.message;
}
} }
function loggedIn(): boolean { function loggedIn(): boolean {
let session = get_session_token(); let session = auth.get_session_token();
return session !== null && session !== undefined; return session !== null && session !== undefined;
} }
</script> </script>
@ -40,7 +26,10 @@
<div class="page-card"> <div class="page-card">
<div class="page-card-content"> <div class="page-card-content">
<h1 class="page-card-header">Sign in</h1> <h1 class="page-card-header">Sign in</h1>
<form class="account-form" on:submit|preventDefault={login}> {#if error}
<div class="error-message">{error}</div>
{/if}
<form class="account-form" on:submit|preventDefault={submitLogin}>
<label for="username">Username</label> <label for="username">Username</label>
<input name="username" bind:value={username} /> <input name="username" bind:value={username} />
<label for="password">Password</label> <label for="password">Password</label>
@ -52,4 +41,7 @@
<style lang="scss"> <style lang="scss">
@import "src/styles/account_forms.scss"; @import "src/styles/account_forms.scss";
.error-message {
color: red;
}
</style> </style>