scaffolding for a login page

Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
Sam Therapy 2023-01-31 20:53:51 +01:00 committed by Gitea
parent e2ff380184
commit eae82fb235
9 changed files with 112 additions and 1 deletions

30
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,30 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Frontend",
"request": "launch",
"runtimeArgs": ["-F", "frontend", "dev"],
"runtimeExecutable": "pnpm",
"skipFiles": ["<node_internals>/**"],
"type": "node"
},
{
"name": "Backend",
"type": "go",
"request": "launch",
"mode": "auto",
"program": "${cwd}/cmd/pomme"
}
],
"compounds": [
{
"name": "Frontend & Backend",
"configurations": ["Frontend", "Backend"],
"stopAll": true
}
]
}

View file

@ -3,7 +3,7 @@
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"dev": "VITE_BASE_URL=http://localhost:3008 vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
@ -27,6 +27,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.0",
"svelte-use-form": "^2.5.0",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0",

View file

@ -14,6 +14,7 @@ specifiers:
prettier-plugin-svelte: ^2.8.1
svelte: ^3.54.0
svelte-check: ^3.0.0
svelte-use-form: ^2.5.0
tslib: ^2.4.1
typescript: ^4.9.3
vite: ^4.0.0
@ -33,6 +34,7 @@ devDependencies:
prettier-plugin-svelte: 2.9.0_ajxj753sv7dbwexjherrch25ta
svelte: 3.55.0
svelte-check: 3.0.1_svelte@3.55.0
svelte-use-form: 2.5.0
tslib: 2.4.1
typescript: 4.9.4
vite: 4.0.3
@ -1892,6 +1894,12 @@ packages:
typescript: 4.9.4
dev: true
/svelte-use-form/2.5.0:
resolution: {integrity: sha512-03elCJk7S1I6rouh/2PdHdlVN8JAthhnkxb/xNHrv4U5s4hp8k2AjTPSzZi7KlThRlZOwgWfCqKm+CR+8JQHlQ==}
dependencies:
svelte: 3.55.0
dev: true
/svelte/3.55.0:
resolution: {integrity: sha512-uGu2FVMlOuey4JoKHKrpZFkoYyj0VLjJdz47zX5+gVK5odxHM40RVhar9/iK2YFRVxvfg9FkhfVlR0sjeIrOiA==}
engines: {node: '>= 8'}

View file

@ -7,3 +7,7 @@ declare namespace App {
// interface PageData {}
// interface Platform {}
}
interface ImportMetaEnv {
VITE_BASE_URL: string;
}

View file

@ -0,0 +1,49 @@
<script lang="ts">
import { useForm, validators, HintGroup, Hint, required } from 'svelte-use-form';
const form = useForm();
$: submit = async (event: Event) => {
// @ts-ignore
const formData = new URLSearchParams(new FormData(event.target as HTMLFormElement));
self
.fetch(`/api/${api_endpoint}`, {
method: 'post',
body: formData
})
.then((response) => response.json())
.catch((err) => {
console.error(err)
});
};
export let api_endpoint: string, description: string;
</script>
<form use:form on:submit|preventDefault={submit}>
<h1>{description}</h1>
<a href="/">Home</a>
<br /> <br />
<input type="username" name="username" use:validators={[required]} />
<HintGroup for="username">
<Hint on="required">Username is mandatory!</Hint>
</HintGroup>
<input type="password" name="password" use:validators={[required]} />
<HintGroup for="password">
<Hint on="required">Password is mandatory!</Hint>
</HintGroup>
<button disabled={!$form.valid}>Login</button>
</form>
<style>
:global(.touched:invalid) {
border-color: red;
outline-color: red;
}
</style>

View file

@ -1,2 +1,5 @@
<h1>Welcome to pomme!</h1>
<p>There will be something here one day :)</p>
<a href="/login">Login</a>
<a href="/register">Register</a>

View file

@ -0,0 +1,5 @@
<script lang="ts">
import LoginForm from "$lib/LoginForm.svelte";
</script>
<LoginForm api_endpoint="login" description="Login"/>

View file

@ -0,0 +1,5 @@
<script lang="ts">
import LoginForm from "$lib/LoginForm.svelte";
</script>
<LoginForm api_endpoint="create" description="Register an Account"/>

View file

@ -5,6 +5,12 @@ const config = {
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
server: {
proxy: {
'/api': 'http://localhost:3008',
'/swagger': 'http://localhost:3008'
}
}
};