mirror of
https://git.freecumextremist.com/grumbulon/pomme.git
synced 2024-11-22 11:43:47 +00:00
scaffolding for a login page
Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
parent
e2ff380184
commit
eae82fb235
9 changed files with 112 additions and 1 deletions
30
.vscode/launch.json
vendored
Normal file
30
.vscode/launch.json
vendored
Normal 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
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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'}
|
||||
|
|
4
frontend/src/app.d.ts
vendored
4
frontend/src/app.d.ts
vendored
|
@ -7,3 +7,7 @@ declare namespace App {
|
|||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
VITE_BASE_URL: string;
|
||||
}
|
||||
|
|
49
frontend/src/lib/LoginForm.svelte
Normal file
49
frontend/src/lib/LoginForm.svelte
Normal 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>
|
|
@ -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>
|
5
frontend/src/routes/login/+page.svelte
Normal file
5
frontend/src/routes/login/+page.svelte
Normal file
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
import LoginForm from "$lib/LoginForm.svelte";
|
||||
</script>
|
||||
|
||||
<LoginForm api_endpoint="login" description="Login"/>
|
5
frontend/src/routes/register/+page.svelte
Normal file
5
frontend/src/routes/register/+page.svelte
Normal file
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
import LoginForm from "$lib/LoginForm.svelte";
|
||||
</script>
|
||||
|
||||
<LoginForm api_endpoint="create" description="Register an Account"/>
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue