sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cookie creation and error handling

Browse source
This commit is contained in:
sprechtl 2022-09-25 22:08:38 +02:00
parent 985b94b109
commit 16af21123b
7 changed files with 149 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

55
frontend/svelte/package-lock.json generated
View file

@ -7,10 +7,14 @@
"": {
"name": "svelte_pages",
"version": "0.0.1",
"dependencies": {
"nookies": "^2.5.2"
},
"devDependencies": {
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/bootstrap": "^5.2.4",
"@zerodevx/svelte-toast": "^0.7.2",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.3.1",
@ -354,6 +358,12 @@
"nft": "out/cli.js"
}
},
"node_modules/@zerodevx/svelte-toast": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.7.2.tgz",
"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==",
"dev": true
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -1577,6 +1587,23 @@
"node-gyp-build-test": "build-test.js"
}
},
"node_modules/nookies": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/nookies/-/nookies-2.5.2.tgz",
"integrity": "sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==",
"dependencies": {
"cookie": "^0.4.1",
"set-cookie-parser": "^2.4.6"
}
},
"node_modules/nookies/node_modules/cookie": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/nopt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@ -1939,8 +1966,7 @@
"node_modules/set-cookie-parser": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
"dev": true
"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
},
"node_modules/signal-exit": {
"version": "3.0.7",
@ -2632,6 +2658,12 @@
"rollup-pluginutils": "^2.8.2"
}
},
"@zerodevx/svelte-toast": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.7.2.tgz",
"integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==",
"dev": true
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -3437,6 +3469,22 @@
"integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==",
"dev": true
},
"nookies": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/nookies/-/nookies-2.5.2.tgz",
"integrity": "sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==",
"requires": {
"cookie": "^0.4.1",
"set-cookie-parser": "^2.4.6"
},
"dependencies": {
"cookie": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
}
}
},
"nopt": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@ -3678,8 +3726,7 @@
"set-cookie-parser": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz",
"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==",
"dev": true
"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
},
"signal-exit": {
"version": "3.0.7",

6
frontend/svelte/package.json
View file

@ -13,11 +13,15 @@
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/bootstrap": "^5.2.4",
"@zerodevx/svelte-toast": "^0.7.2",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.6",
"tslib": "^2.3.1",
"typescript": "^4.7.4",
"vite": "^3.1.0"
},
"type": "module"
"type": "module",
"dependencies": {
"nookies": "^2.5.2"
}
}

3
frontend/svelte/src/models/PomeloUtils.ts Normal file
View file

@ -0,0 +1,3 @@
export function capitalizeFirstLetter(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1);
}

10
frontend/svelte/src/models/customToasts.ts Normal file
View file

@ -0,0 +1,10 @@
import {toast} from "@zerodevx/svelte-toast";
import {capitalizeFirstLetter} from "./PomeloUtils";
export const createErrorToast = (m: string) => {
toast.push("Error: " + capitalizeFirstLetter(m), {
theme: {
'--toastBackground': 'red'
}
})
}

22
frontend/svelte/src/models/user.ts Normal file
View file

@ -0,0 +1,22 @@
export class User {
id: number;
email: string;
username: string;
// Can be extended by these
// blocked: boolean;
// provider: string;
// confirmed: boolean;
// createdAt: Date;
// updatedAt: Date;
/**
* Creates the user.
* @param params Fetch data.
*/
constructor(params: any) {
this.id = params?.id;
this.email = params?.email;
this.username = params?.username;
}
}

39
frontend/svelte/src/routes/login/+page.svelte
View file

@ -1,11 +1,15 @@
<script lang="ts">
import {setCookie} from "nookies";
import type {Authentication} from "./models/authentication";
import { SvelteToast } from '@zerodevx/svelte-toast'
import {createErrorToast} from "../../models/customToasts";
let user: string;
let password: string;
let rememberMe: boolean = true;
async function handleSubmit() {
console.log(user, password)
const endpoint = "http://localhost:1337/api/auth/local";
const payload = {
identifier: user,
@ -21,19 +25,43 @@
body: JSON.stringify(payload)
})
const response = await login.json();
const response: Authentication = await login.json();
if (response.error != null){
if (response.error.details.errors){
for (const error of response.error.details.errors) {
createErrorToast(error.message);
}
} else{
createErrorToast(response.error.message);
}
}
if (rememberMe) {
setCookie(null, 'jwt', response.jwt, {
maxAge: 30 * 24 * 60 * 60,
path: '/'
})
// window.location = "/";
}
console.log(response);
}
</script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PomeloNote | Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<main class="form-signin w-100 m-auto">
<img class="mb-4" src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="72" height="57">
@ -50,13 +78,16 @@
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
<input type="checkbox" value="rememberMe" bind:checked={rememberMe}> Remember me
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" on:click={handleSubmit}>Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy;2022</p>
</main>
<SvelteToast></SvelteToast>
</body>
</html>
<style>

7
frontend/svelte/src/routes/login/models/authentication.ts Normal file
View file

@ -0,0 +1,7 @@
import type {User} from "../../../models/user";
export interface Authentication {
jwt: string;
user: User;
error: any;
}