Cookie creation and error handling

frontend/svelte/package-lock.json

@@ -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==",
+			"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
-			"dev": true
 		},
 		"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==",
+			"integrity": "sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ=="
-			"dev": true
 		},
 		"signal-exit": {
 			"version": "3.0.7",

frontend/svelte/package.json

@@ -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"
+	}
 }

frontend/svelte/src/models/PomeloUtils.ts

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

frontend/svelte/src/models/customToasts.ts

@@ -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'
+        }
+    })
+}

frontend/svelte/src/models/user.ts

@@ -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;
+    }
+}

frontend/svelte/src/routes/login/+page.svelte

@@ -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>

frontend/svelte/src/routes/login/models/authentication.ts

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