Working on frontend.

Register and login (50%) is working.
Need to patch cookies.

client/package.json

@@ -1,17 +1,17 @@
 {
-	"name": "client",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.27.4",
-		"svelte": "^4.0.5",
-		"vite": "^4.4.2"
-	},
-	"type": "module"
+  "name": "client",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.27.4",
+    "svelte": "^4.0.5",
+    "vite": "^4.4.2"
+  },
+  "type": "module"
 }

client/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<h1>Welcome to Local Bargains</h1>
+<a href="/auth/register"> Sign up </a>
+<a href="/auth/login"> Sign in </a>
+
+<slot />

client/src/routes/+page.server.js

@@ -0,0 +1,6 @@
+export function load({ cookies }) {
+  const accessToken = cookies.get('accessToken');
+  return {
+    accessToken
+  };
+}

client/src/routes/+page.svelte

@@ -1,2 +1,7 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+</script>
+
+<svelte:head>
+  <title>Local Bargains!</title>
+</svelte:head>
+<p>Hello</p>

client/src/routes/auth/login/+page.server.js

@@ -0,0 +1,41 @@
+import { fail, redirect } from '@sveltejs/kit';
+
+export const actions = {
+  form: async ({ request, url, cookies }) => {
+    const data = await request.formData();
+    const email = data.get('email').trim();
+    const password = data.get('password').trim();
+
+    if (!email || !password) {
+      return fail(400, {
+        email,
+        message: 'Missing username or password!'
+      });
+    }
+    const reqBody = new URLSearchParams();
+    reqBody.append("email", email);
+    reqBody.append("password", password);
+    const response = await fetch("http://localhost:3000/api/auth/login", {
+      method: "post",
+      mode: "no-cors",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: reqBody,
+    });
+    if (response.status === 418) {
+      return fail(400, {
+        email,
+        message: 'Bad email!'
+      });
+    } else if (response.status === 401) {
+      return fail(400, {
+        email,
+        message: 'Bad password!'
+      });
+    }
+    console.log(response);
+    console.log(cookies.getAll());
+    throw redirect(303, url.searchParams.get('redirectTo') || '/');
+  }
+}

client/src/routes/auth/login/+page.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { page } from "$app/stores";
+  export let form;
+  const redirectTo = $page.url.searchParams.get("redirectTo") || "/";
+</script>
+
+<svelte:head>
+  <title>Local Bargains! - Login</title>
+</svelte:head>
+
+<h1>Sign in!</h1>
+<form method="post">
+  <p>{form?.message || ""}</p>
+  <input
+    type="text"
+    name="email"
+    placeholder="Email"
+    value={form?.email ?? ""}
+  />
+  <input type="password" name="password" placeholder="Password" />
+  <button type="submit" formaction="?/form&redirectTo={redirectTo}">
+    Login
+  </button>
+</form>

client/src/routes/auth/register/+page.server.js

@@ -0,0 +1,42 @@
+import { fail, redirect } from '@sveltejs/kit';
+
+export const actions = {
+  form: async ({ request, url }) => {
+    const data = await request.formData();
+    const username = data.get('username').trim();
+    const email = data.get('email').trim();
+    const password = data.get('password').trim();
+
+    if (!email || !password || !username) {
+      return fail(400, {
+        email,
+        message: 'Missing username, email or password!'
+      });
+    }
+    const reqBody = new URLSearchParams();
+    reqBody.append("username", username);
+    reqBody.append("email", email);
+    reqBody.append("password", password);
+    const response = await fetch("http://localhost:3000/api/auth/register", {
+      method: "post",
+      mode: "no-cors",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: reqBody,
+    });
+    if (response.status === 418) {
+      return fail(400, {
+        email,
+        message: 'Bad email!'
+      });
+    } else if (response.status === 401) {
+      return fail(400, {
+        email,
+        message: 'Bad password!'
+      });
+    }
+
+    throw redirect(303, url.searchParams.get('redirectTo') || '/');
+  }
+}

client/src/routes/auth/register/+page.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { page } from "$app/stores";
+  export let form;
+  const redirectTo = $page.url.searchParams.get("redirectTo") || "/";
+</script>
+
+<svelte:head>
+  <title>Local Bargains! - Register</title>
+</svelte:head>
+
+<h1>Sign up!</h1>
+<form method="post">
+  <p>{form?.message || ""}</p>
+  <input
+    type="username"
+    name="username"
+    placeholder="Username"
+    value={form?.username ?? ""}
+  />
+  <input
+    type="text"
+    name="email"
+    placeholder="Email"
+    value={form?.email ?? ""}
+  />
+  <input type="password" name="password" placeholder="Password" />
+  <button type="submit" formaction="?/form&redirectTo={redirectTo}">
+    Register
+  </button>
+</form>

client/svelte.config.js

@@ -1,13 +1,16 @@
-import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from "@sveltejs/kit/vite";
+import adapter from "@sveltejs/adapter-auto";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+
+  preprocess: [vitePreprocess({})],
 };
 
 export default config;

server/controllers/AuthorizationController.js

@@ -16,16 +16,16 @@ exports.login = async (req, res) => {
 
   res.cookie('accessToken', accessToken, {
     httpOnly: true,
-    secure: true
+    secure: false
   });
 
   res.cookie('refreshToken', refreshToken, {
     maxAge: 3600000 * 24,
     httpOnly: true,
-    secure: true
+    secure: false
   });
-
-  res.send({ accessToken, refreshToken });
+  res.send("OK!");
+  //res.send({ accessToken, refreshToken });
 };
 
 exports.authenticate = async (req, res, next) => {

server/controllers/DatabaseController.js

@@ -2,6 +2,7 @@ const sequelize = require('../database/sequelize.js');
 const Users = require('../models/users.js');
 const UserRole = require('../models/user_roles.js');
 const Bargains = require('../models/bargains.js');
+const bcrypt = require('bcrypt');
 
 const paginate = (query, { page, pageSize }) => {
   const offset = page * pageSize;
@@ -56,3 +57,11 @@ exports.checkRole = async (req, res, next) => {
   next();
 }
 
+exports.addNewUser = async (req, res, next) => {
+  const username = req.body.username;
+  const email = req.body.email;
+  let password = req.body.password;
+  password = await bcrypt.hash(password, 10);
+  await Users.create({ username: username, password: password, email: email });
+  res.send("User has been created!");
+}

server/routes/index.js

@@ -27,4 +27,9 @@ router.post(
   errorHandler.catchAsync(AuthorizationController.refresh)
 );
 
+router.post(
+  "/api/auth/register",
+  errorHandler.catchAsync(DatabaseController.addNewUser)
+);
+
 module.exports = router;