Add registration page

src/app.html

@@ -4,6 +4,8 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+		<link rel="stylesheet" href="./css/main.css" />
+		<link rel="stylesheet" href="./css/form.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

src/routes/login/+page.svelte

@@ -67,6 +67,10 @@
         localStorage.removeItem('auth');
     }
 
+    function navigateToRegister() {
+        window.location.href = "/register";
+    }
+
 </script>
 
 <svelte:head>
@@ -84,7 +88,7 @@
                     <input type="text" name="username" placeholder="username" class="input-field"/>
                     <input type="password" name="password" placeholder="password" class="input-field"/>
                     <button type="submit" class="login-button">Login</button>
-                    <button type="button" class="register-button">Register</button>
+                    <button type="button" class="register-button" on:click={navigateToRegister}>Register</button>
                 </form>
             </div>
         {:else}
@@ -92,65 +96,4 @@
             <button class="logout-button" on:click={logout}>Logout</button>
         {/if}
     {/if}
-</div>
-
-<style>
-    .text-column {
-        text-align: center; /* Center align text */
-    }
-
-    .card {
-        background-color: #ffffff; /* White background for the card */
-        border-radius: 12px; /* Rounded corners */
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-        padding: 20px; /* Padding inside the card */
-        width: 300px; /* Fixed width for the card */
-        transition: transform 0.3s; /* Transition for hover effect */
-    }
-
-    .card:hover {
-        transform: translateY(-5px); /* Slight lift effect on hover */
-    }
-
-    .input-field {
-        width: 90%; /* Full width for inputs */
-        padding: 12px; /* Padding for input fields */
-        margin: 10px 0; /* Margin between input fields */
-        border: 1px solid #ccc; /* Light border */
-        border-radius: 6px; /* Rounded corners for input fields */
-        font-size: 16px; /* Font size for input text */
-        outline: none; /* Remove outline on focus */
-        transition: border-color 0.3s; /* Transition for border color */
-    }
-
-    .input-field:focus {
-        border-color: #007bff; /* Change border color on focus */
-    }
-
-    button {
-        width: 100%; /* Full width for the button */
-        margin: 5px 0;
-        padding: 12px; /* Padding for the button */
-        background-color: #007bff; /* Button color */
-        color: white; /* White text color */
-        border: none; /* No border */
-        border-radius: 6px; /* Rounded corners for button */
-        font-size: 16px; /* Font size for button text */
-        cursor: pointer; /* Change cursor to pointer */
-        transition: background-color 0.3s; /* Transition for button color */
-    }
-
-    .login-button {
-        background-color: #007bff; /* Button color */
-        color: white; /* White text color */
-    }
-
-    .register-button {
-        background-color: #20bf6b; /* Button color */
-        color: white; /* White text color */
-    }
-
-    .login-button:hover {
-        background-color: #0056b3; /* Darker button color on hover */
-    }
-</style>
+</div>

src/routes/register/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

src/routes/register/+page.svelte

@@ -0,0 +1,78 @@
+<script>
+    import {auth} from "../store.js";
+
+    let isAuthenticated = false;
+    let user = null;
+
+    $: auth.subscribe(value => {
+        isAuthenticated = !!value;
+        if (value) {
+            user = value;
+        }
+    });
+
+    async function submit(event) {
+        event.preventDefault();
+
+        const formData = new FormData(event.target);
+        const username = formData.get("username");
+        const password = formData.get("password");
+        const passwordConfirm = formData.get("passwordConfirm");
+
+        if (!username || !password) {
+            alert("Please enter both username and password.");
+            return;
+        }
+
+        if (password !== passwordConfirm) {
+            alert("Passwords don't match");
+            return;
+        }
+
+        const data = {
+            username: username,
+            password: password
+        };
+
+        try {
+            const response = await fetch(import.meta.env.VITE_AUTH_HOST + '/api/register', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                auth.set(result);
+                localStorage.setItem('auth', JSON.stringify(result));
+                window.location.href = "/login";
+            } else {
+                const error = await response.json();
+                console.error('Registration failed:', error);
+                alert('Registration failed: ' + error.message);
+            }
+        } catch (err) {
+            console.error('Error during registration:', err);
+            alert('An error occurred. Please try again.');
+        }
+    }
+
+</script>
+
+<svelte:head>
+    <title>Register</title>
+    <meta name="description" content="Registration page"/>
+</svelte:head>
+
+<div class="text-column">
+    <div class="card">
+        <form on:submit={submit}>
+            <input type="text" name="username" placeholder="username" class="input-field"/>
+            <input type="password" name="password" placeholder="password" class="input-field"/>
+            <input type="password" name="passwordConfirm" placeholder="repeat password" class="input-field"/>
+            <button type="submit" class="register-button">Register</button>
+        </form>
+    </div>
+</div>

static/css/form.css

@@ -0,0 +1,58 @@
+.text-column {
+    text-align: center; /* Center align text */
+}
+
+.card {
+    background-color: #ffffff; /* White background for the card */
+    border-radius: 12px; /* Rounded corners */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+    padding: 20px; /* Padding inside the card */
+    width: 300px; /* Fixed width for the card */
+    transition: transform 0.3s; /* Transition for hover effect */
+}
+
+.card:hover {
+    transform: translateY(-5px); /* Slight lift effect on hover */
+}
+
+.input-field {
+    width: 90%; /* Full width for inputs */
+    padding: 12px; /* Padding for input fields */
+    margin: 10px 0; /* Margin between input fields */
+    border: 1px solid #ccc; /* Light border */
+    border-radius: 6px; /* Rounded corners for input fields */
+    font-size: 16px; /* Font size for input text */
+    outline: none; /* Remove outline on focus */
+    transition: border-color 0.3s; /* Transition for border color */
+}
+
+.input-field:focus {
+    border-color: #007bff; /* Change border color on focus */
+}
+
+button {
+    width: 100%; /* Full width for the button */
+    margin: 5px 0;
+    padding: 12px; /* Padding for the button */
+    background-color: #007bff; /* Button color */
+    color: white; /* White text color */
+    border: none; /* No border */
+    border-radius: 6px; /* Rounded corners for button */
+    font-size: 16px; /* Font size for button text */
+    cursor: pointer; /* Change cursor to pointer */
+    transition: background-color 0.3s; /* Transition for button color */
+}
+
+.login-button {
+    background-color: #007bff; /* Button color */
+    color: white; /* White text color */
+}
+
+.register-button {
+    background-color: #20bf6b; /* Button color */
+    color: white; /* White text color */
+}
+
+.login-button:hover {
+    background-color: #0056b3; /* Darker button color on hover */
+}