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) {
window.localStorage.setItem("session", token);
}
@ -5,3 +7,35 @@ export function set_session_token(token: string) {
export function get_session_token(): string | null {
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">
import { get_session_token, set_session_token } from "$lib/auth";
import * as auth from "$lib/auth";
import { goto } from "$app/navigation";
import { currentUser } from "$lib/stores/current_user";
let username: string | undefined;
let password: string | undefined;
async function login() {
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);
let error: string | undefined;
async function submitLogin() {
try {
error = undefined;
await auth.login({ username, password });
goto("/");
} catch (e) {
error = e.message;
}
}
function loggedIn(): boolean {
let session = get_session_token();
let session = auth.get_session_token();
return session !== null && session !== undefined;
}
</script>
@ -40,7 +26,10 @@
<div class="page-card">
<div class="page-card-content">
<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>
<input name="username" bind:value={username} />
<label for="password">Password</label>
@ -52,4 +41,7 @@
<style lang="scss">
@import "src/styles/account_forms.scss";
.error-message {
color: red;
}
</style>