added signup page

src/routes/signup/+page.svelte

@@ -0,0 +1,126 @@
+<script>
+    import { navigate } from 'svelte-routing';
+    import { setSessionKey } from '../../utils/session.js';
+    let email = '';
+    let password = '';
+    let errorMessage = '';
+
+    const handleLogin = async () => {
+      try {
+        const response = await fetch('https://accounts.jonasjones.dev/login', {
+          method: 'POST',
+          body: JSON.stringify({ email, password }),
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        });
+        const data = await response.json();
+        if (data.sessionKey) {
+          // Set session key as a cookie
+          setSessionKey(data.sessionKey);
+          // Get the return URL from query parameters
+          const returnUrl = new URLSearchParams(window.location.search).get('returnUrl') || '/';
+          navigate(returnUrl);  // Redirect back to the requested path
+        } else {
+          errorMessage = 'Invalid login credentials';
+        }
+      } catch (error) {
+        errorMessage = 'Error logging in. Please try again later.';
+      }
+    };
+  </script>
+
+  <div class="login-container">
+    <div class="login-prompt">
+      <h1>Login</h1>
+
+      {#if errorMessage}
+        <p style="color: red;">{errorMessage}</p>
+      {/if}
+
+      <form on:submit|preventDefault={handleLogin}>
+        <label for="username">Username:</label>
+        <input id="username" bind:value={email} required />
+
+        <label for="password">Password:</label>
+        <input type="password" id="password" bind:value={password} required />
+
+        <p>Have no account? <a href="/register">Register!</a></p>
+
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  </div>
+
+  <style>
+    .login-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      position: fixed;
+      top: 50px;
+      left: 0;
+      align-items: center;
+      height: 100vh;
+      width: 100vw;
+    }
+
+    .login-prompt {
+      background-color: black;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      width: 300px;
+    }
+
+    h1 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      font-size: 14px;
+      margin-bottom: 5px;
+    }
+
+    input {
+      padding: 10px;
+      font-size: 14px;
+      margin-bottom: 15px;
+      border: 1px solid #222222;
+      border-radius: 4px;
+      background-color: rgb(44, 44, 44);
+      color: white;
+    }
+
+    input:focus {
+      border-color: #036300;
+      outline: none;
+    }
+
+    button {
+      background-color: #036300;
+      color: white;
+      padding: 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: background-color 0.3s ease;
+    }
+
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    p {
+      text-align: center;
+      font-size: 14px;
+      margin-top: -10px;
+    }
+  </style>