login and register designed

This commit is contained in:
Alexander Bocken 2023-07-21 12:25:06 +02:00
parent 3bcf6707a3
commit 0506ab9018
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
8 changed files with 157 additions and 117 deletions

View File

@ -1,5 +1,41 @@
<h1>Log In</h1>
<style>
form{
background-color: var(--nord5);
display: flex;
flex-direction: column;
max-width: 600px;
gap: 0.5em;
margin-inline: auto;
justify-content: center;
align-items: center;
padding-block: 2rem;
margin-block: 2rem;
}
label{
font-size: 1.2em;
}
input{
display: block;
font-size: 1.2rem;
}
button{
background-color: var(--red);
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1.3em;
border-radius: 1000px;
margin-top: 1em;
}
@media screen and (max-width: 600px){
form{
margin-top: 0;
}
}
</style>
<form action="?/login" method=POST>
<h1>Log In</h1>
<label>
Username
<input type="text" name="username">

View File

@ -0,0 +1 @@
{"terminal": "nvimterm"}

View File

@ -10,20 +10,12 @@ export const load: PageServerLoad = async ({ locals }) => {
export const actions: Actions = {
register: async (event) => {
const data = await event.request.formData();
const acccess_options = ["rezepte", "abrechnung", "flims"]
let enabled_access = []
acccess_options.forEach((option) => {
if(data.get(option) == 'on'){
enabled_access.push(option)
}
})
const res = await event.fetch('/api/register',
{method: 'POST',
body: JSON.stringify({
username: data.get('username'),
password: data.get('password'),
access: enabled_access,
})
}
)

View File

@ -1,24 +1,42 @@
<script>
import { setCookie } from 'svelte-cookie';
export async function createJWT() {
const res = await fetch('/api/login',
{method: 'POST',
body: JSON.stringify({
username: "testuser2",
password: "password",
})
}
)
const jwt = await res.json()
setCookie('UserSession', jwt, {expires: 7})
}
</script>
<style>
form{
background-color: var(--nord5);
display: flex;
flex-direction: column;
max-width: 600px;
gap: 0.5em;
margin-inline: auto;
justify-content: center;
align-items: center;
padding-block: 2rem;
margin-block: 2rem;
}
label{
font-size: 1.2em;
}
input{
display: block;
font-size: 1.2rem;
}
button{
background-color: var(--red);
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1.3em;
border-radius: 1000px;
margin-top: 1em;
}
@media screen and (max-width: 600px){
form{
margin-top: 0;
}
}
</style>
<h1>Register</h1>
<form action="?/register" method=POST>
<h1>Register</h1>
<label>
Username
<input type="text" name="username">
@ -27,18 +45,5 @@
Passwort
<input name="password" type="password">
</label>
<label>
Rezepte
<input type="checkbox" name="rezepte">
</label>
<label>
Abrechnungen
<input type="checkbox" name="abrechnung">
</label>
<label>
Flims
<input type="checkbox" name="flims">
</label>
<button type="submit">Register</button>
</form>

View File

@ -0,0 +1,45 @@
import { redirect } from "@sveltejs/kit"
import type { Actions, PageServerLoad } from "./$types"
import { error } from "@sveltejs/kit"
export const load: PageServerLoad = async ({ locals }) => {
return {
user: locals.user,
}
}
export const actions: Actions = {
change_password: async (event) => {
const data = await event.fetch.request.formData()
},
login: async (event) => {
const data = await event.request.formData()
const res = await event.fetch('/api/login',
{method: 'POST',
body: JSON.stringify({
username: data.get('username'),
password: data.get('password'),
})
}
)
const jwt = await res.json()
if(res.ok){
event.cookies.set("UserSession", jwt, {
path: "/",
httpOnly: true,
sameSite: "strict",
secure: process.env.NODE_ENV === "production",
maxAge: 60 * 60 * 24 * 7, // 1 week
})
throw redirect(303, "/")
}
else{
throw error(401, jwt.message)
}
},
logout: async () => {
throw redirect(303, "/logout")
},
}

View File

@ -0,0 +1,38 @@
<script>
export let data
const admin = data.user?.access.includes('admin') ?? false
</script>
<style>
form label,
form label input
{
display: block;
}
</style>
<section>
<h2>Change Profile pictures</h2>
</section>
<section>
<h2>Change password</h2>
<form>
<label>
Altes Passwort:
<input type="password" >
</label>
<label>
Neues Passwort:
<input type="password" >
</label>
<label>
Neues Passwort wiederholen:
<input type="password" >
</label>
</form>
</section>
{#if admin}
<section>
<h2>Change user permissions</h2>
</section>
{/if}

View File

@ -0,0 +1 @@
{"terminal": "nvimterm"}

View File

@ -1,78 +0,0 @@
<script>
import Header from '$lib/components/Header.svelte'
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { get } from 'svelte/store';
import { setCookie } from 'svelte-cookie';
export async function createJWT() {
const res = await fetch('/api/login',
{method: 'POST',
body: JSON.stringify({
username: "testuser2",
password: "password",
})
}
)
const jwt = await res.json()
setCookie('UserSession', jwt, {expires: 7})
}
export async function registerUserTest(){
const res = await fetch('/api/register',
{method: 'POST',
body: JSON.stringify({
username: "testuser2",
password: "password",
access: ["rezepte", "abrechnung", "flims" ]
})
}
)
console.log("res:", res);
const j = await res.json()
console.log("response:", j)
}
export async function readJWTSS(){
const res = await fetch('/api/verify',
{method: 'GET',
credentials: 'include',
}
)
const item = await res.json()
console.log(res)
console.log(item)
}
</script>
<style>
</style>
<Header>
<ul class=site_header slot=links>
<li><a href="/rezepte">Rezepte</a></li>
<li><a href="/bilder">Bilder</a></li>
<li><a href="/git">Git</a></li>
<li><a href="/transmission">Transmission</a></li>
</ul>
<section>
<h2><a href="/rezepte">Rezepte</a></h2>
</section>
<section>
<h2><a href="/bilder">Bilder</a></h2>
</section>
<section>
<h2><a href="/git">Git</a></h2>
</section>
<section>
<h2><a href="/transmission">Transmission Web Viewer</a></h2>
</section>
<button on:click={registerUserTest}>Test User Registration</button>
<button on:click={createJWT}>Log In</button>
<button on:click={readJWTSS}>Test reading cookie</button>
</Header>