login and register designed
This commit is contained in:
parent
3bcf6707a3
commit
0506ab9018
GPG Key ID:
1D237BE83F9B05E8
@ -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">
|
||||
|
||||
1
src/routes/(main)/login/.jukit/.jukit_info.json
Normal file
1
src/routes/(main)/login/.jukit/.jukit_info.json
Normal file
@ -0,0 +1 @@
|
||||
{"terminal": "nvimterm"}
|
||||
@ -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,
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
45
src/routes/(main)/settings/+page.server.ts
Normal file
45
src/routes/(main)/settings/+page.server.ts
Normal 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")
|
||||
},
|
||||
}
|
||||
38
src/routes/(main)/settings/+page.svelte
Normal file
38
src/routes/(main)/settings/+page.svelte
Normal 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}
|
||||
1
src/routes/(main)/settings/.jukit/.jukit_info.json
Normal file
1
src/routes/(main)/settings/.jukit/.jukit_info.json
Normal file
@ -0,0 +1 @@
|
||||
{"terminal": "nvimterm"}
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user