ui: Login page done

ui/src/lib/api/user.ts

@@ -1,5 +1,5 @@
 import { handleApiResponse } from '$lib/errors';
-import type { SignUpForm } from '$lib/model/user';
+import type { SignUpForm, LoginForm } from '$lib/model/user';
 
 export async function registerUser(form: SignUpForm): Promise<any> {
     const res = await fetch('api/users', {
@@ -9,3 +9,12 @@ export async function registerUser(form: SignUpForm): Promise<any> {
     });
     return await handleApiResponse(res);
 }
+
+export async function authUser(form: LoginForm): Promise<any> {
+    const res = await fetch('api/auth', {
+        method: 'POST',
+        headers: {'Accept': 'application/json'},
+        body: JSON.stringify(form),
+    });
+    return await handleApiResponse(res);
+}

ui/src/lib/components/LoginForm.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+ import { goto } from '$app/navigation';
+
+ import {
+     Button,
+     FormGroup,
+     Input,
+     Label,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { t } from '$lib/translations';
+ import { authUser } from '$lib/api/user';
+ import type { LoginForm } from '$lib/model/user';
+ import { toasts } from '$lib/stores/toasts';
+ import { refreshUserSession } from '$lib/stores/usersession';
+
+ let loginForm: LoginForm = {
+     email: "",
+     password: "",
+ };
+ let emailState: boolean|undefined;
+ let passwordState: boolean|undefined;
+ let formSent = false;
+
+ let formElm: HTMLFormElement;
+
+ function testLogin() {
+     const valid = formElm.checkValidity()
+
+     if (valid) {
+         formSent = true;
+         emailState = undefined;
+         passwordState = undefined;
+
+         authUser(loginForm)
+         .then(
+             () => {
+                 formSent = false;
+                 emailState = true;
+                 passwordState = true;
+                 refreshUserSession();
+                 goto('/');
+             },
+             (error) => {
+                 formSent = false;
+                 emailState = false;
+                 passwordState = false;
+                 toasts.addErrorToast({
+                     title: $t('errors.login'),
+                     message: error,
+                     timeout: 20000,
+                 })
+             }
+         )
+     }
+ }
+</script>
+
+<form
+    class="container my-1"
+    bind:this={formElm}
+    on:submit|preventDefault={testLogin}
+>
+    <FormGroup>
+        <Label for="email-input">{$t('email.address')}</Label>
+        <Input
+            aria-describedby="emailHelpBlock"
+            autocomplete="username"
+            autofocus
+            id="email-input"
+            placeholder="pMockapetris@usc.edu"
+            required
+            type="email"
+            invalid={emailState !== undefined && !emailState}
+            valid={emailState}
+            bind:value={loginForm.email}
+            on:change={() => emailState = loginForm.email.indexOf('@') > 0}
+        />
+    </FormGroup>
+    <FormGroup>
+        <Label for="password-input">{$t('common.password')}</Label>
+        <Input
+            autocomplete="current-password"
+            id="password-input"
+            placeholder="xXxXxXxXxX"
+            required
+            type="password"
+            invalid={passwordState !== undefined && !passwordState}
+            valid={passwordState}
+            bind:value={loginForm.password}
+        />
+    </FormGroup>
+    <div class="d-flex justify-content-around">
+        <Button
+            type="submit"
+            color="primary"
+            disabled={formSent}
+        >
+            {#if formSent}
+                <Spinner
+                    label="Spinning"
+                    size="sm"
+                />
+            {/if}
+            {$t('common.go')}
+        </Button>
+        <Button
+            href="/forgotten-password"
+            outline
+            color="dark"
+        >
+            {$t('password.forgotten')}
+        </Button>
+    </div>
+</form>

ui/src/lib/errors.ts

@@ -1,9 +1,12 @@
+import { refreshUserSession } from '$lib/stores/usersession';
+
 export async function handleApiResponse(res: Response): Promise<any> {
     const data = await res.json();
 
     if (res.status == 200) {
         return data;
     } else if (res.status == 401) {
+        refreshUserSession();
         throw new Error(data.errmsg);
     } else if (data.errmsg) {
         throw new Error(data.errmsg);

ui/src/lib/model/user.ts

@@ -1,16 +1,31 @@
 import type UserSettings from './usersettings';
 
-export interface User {
-  id: string;
-  email: string;
-  CreatedAt: Date;
-  LastSeen: Date;
-  settings: UserSettings;
-}
-
 export interface SignUpForm {
     email: string;
     password: string;
     wantReceiveUpdate: boolean;
     lang: string;
 }
+
+export interface LoginForm {
+    email: string;
+    password: string;
+}
+
+export class User {
+    id: string;
+    email: string;
+    CreatedAt: Date;
+    LastSeen: Date;
+    settings: UserSettings;
+
+    constructor({id, email, CreatedAt, LastSeen, settings}: User) {
+        this.id = id;
+        this.email = email;
+        this.CreatedAt = CreatedAt;
+        this.LastSeen = LastSeen;
+        this.settings = settings;
+    }
+}
+
+export default User;

ui/src/lib/stores/usersession.ts

@@ -1,5 +1,5 @@
 import { writable, type Writable } from 'svelte/store';
-import type { User } from '$lib/model/user';
+import { User } from '$lib/model/user';
 
 export const userSession: Writable<null | User> = writable(null);
 
@@ -7,7 +7,7 @@ export async function refreshUserSession() {
     const res = await fetch('/api/auth', {headers: {'Accept': 'application/json'}})
     if (res.status == 200) {
         const user = new User(await res.json());
-        userSession.update(user);
+        userSession.set(user);
         return user
     } else {
         userSession.set(null);

ui/src/routes/login/+page.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+ import {
+     Card,
+     CardBody,
+     CardHeader,
+     Container,
+     Col,
+     Row,
+ } from 'sveltestrap';
+
+ import { t } from '$lib/translations';
+ import LoginForm from '$lib/components/LoginForm.svelte';
+</script>
+
+<Container class="my-3">
+    <Row>
+        <Col sm="4" class="d-none d-sm-flex flex-column justify-content-center">
+          <div>
+              {$t('account.ask-have')}
+              <a href="/join" class="fw-bold">
+                  {$t('account.join')}
+              </a>
+          </div>
+        </Col>
+        <Col sm="8">
+            <Card>
+                <CardHeader>
+                    <h6 class="card-title my-1 fw-bold">
+                        {$t('account.signup.join-call')}
+                    </h6>
+                </CardHeader>
+                <CardBody>
+                    <LoginForm />
+                </CardBody>
+            </Card>
+        </Col>
+    </Row>
+</Container>