Add login page with admin user

src/components/Header.astro

@@ -84,7 +84,10 @@ const { title } = Astro.props
 
 <script type="module" is:inline>
     function showAdminLink() {
-        if (document.cookie.includes('loggedIn=true')) {
+        if (
+            document.cookie.includes('loggedIn=true') &&
+            document.cookie.includes('isAdmin=true')
+        ) {
             document.getElementById('admin-link').style.display = 'list-item'
         }
     }

src/pages/admin.astro

@@ -165,10 +165,9 @@ orders.forEach((order) => {
             'customer-name customer-name' 1fr
             'order-products order-products' 1fr
             'transaction-status transaction-status' 1fr / 1fr 1fr;
-        height: clamp(var(--card-size-narrow), 200px, var(--card-size-wide));
         overflow: auto;
         padding: 0 var(--spacing-small);
-        width: clamp(250px, 30%, var(--card-size-wide));
+        width: clamp(250px, 30%, var(--card-size));
     }
 
     .product-details {

src/pages/authentication.astro

@@ -1,20 +1,112 @@
 ---
+import '../styles/global.css'
+
 import Main from '../layouts/Main.astro'
-const test = Astro.cookies.set('loggedIn', 'true')
 ---
 
 <Main title="Authentication">
-    <h1>Authentication</h1>
-    <p>Authentication page content goes here.</p>
-    <p>This is a placeholder for the authentication page.</p>
-    <p>More details about authentication will be added later.</p>
+    <div class="authentication-container">
+        <section>
+            <h2>Login</h2>
+            <form action="#" id="login-form">
+                <input type="email" name="email" placeholder="Email" />
+                <input type="password" name="password" placeholder="Password" />
+                <span>
+                    <input type="checkbox" name="admin" id="admin" />
+                    <label for="admin">Log in as an admin?</label>
+                </span>
+                <button type="submit">Login</button>
+            </form>
+        </section>
+    </div>
 </Main>
 
-<script>
+<style>
+    button[type='submit'] {
+        margin-top: var(--spacing-medium);
+        padding: var(--spacing-small);
+    }
+
+    button[type='submit'],
+    input {
+        font-size: large;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small);
+    }
+
+    input {
+        padding: calc(2 * var(--spacing-small));
+        border-radius: var(--border-radius-small);
+        border: none;
+    }
+
+    section {
+        background-color: light-dark(rgb(0 0 0 / 0.2), rgb(255 255 255 / 0.1));
+        border-radius: var(--border-radius-large);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium);
+        padding: var(--spacing-medium);
+        width: clamp(350px, 50%, 500px);
+    }
+
+    .authentication-container {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: inherit;
+    }
+
+    /* Pseudo-classes */
+
+    input:user-valid {
+        background-color: var(--color-success);
+        border-color: var(--color-success);
+    }
+
+    input:user-invalid {
+        background-color: var(--color-error);
+        border-color: var(--color-error);
+    }
+</style>
+
+<script type="module" is:inline>
     if (document.cookie.includes('loggedIn=true')) {
         console.log('User is logged in, redirecting to dashboard...')
         window.location.href = 'profile.html'
     } else {
         console.log('User is not logged in')
     }
+
+    document
+        .getElementById('login-form')
+        .addEventListener('submit', function (event) {
+            event.preventDefault()
+
+            const email = this.email.value
+            const password = this.password.value
+            const isAdmin = this.admin.checked
+
+            if (email && password) {
+                console.log('User logged in successfully')
+                document.cookie = 'loggedIn=true; path=/'
+
+                if (isAdmin) {
+                    console.log('User is an admin')
+                    document.cookie = 'isAdmin=true; path=/'
+                } else {
+                    console.log('User is not an admin')
+                    document.cookie = 'isAdmin=false; path=/'
+                }
+
+                window.location.reload()
+            } else {
+                console.log('Invalid login credentials')
+            }
+        })
 </script>

src/pages/cart.astro

@@ -1,5 +1,5 @@
 ---
-import Main from '../layouts/Main.astro'
+import Main from '../layouts/Main.astro';
 ---
 
 <Main title="Your Cart">

src/pages/contact.astro

@@ -1,11 +1,13 @@
 ---
 import Main from '../layouts/Main.astro'
+
+import { SITE_NAME } from '../config.js'
 ---
 
 <Main title="Contact Us">
     <h1>Contact Us</h1>
     <p>If you have any questions, feel free to reach out!</p>
-    <form action="#" method="POST">
+    <form action="#">
         <input type="text" id="name" name="name" placeholder="Name" required />
 
         <input

src/pages/index.astro

@@ -32,7 +32,7 @@ import { SITE_NAME } from '../config.js'
     #search-product {
         display: flex;
         justify-content: center;
-        width: var(--card-size-wide);
+        width: var(--card-size);
     }
 
     #product-list {
@@ -54,7 +54,10 @@ import { SITE_NAME } from '../config.js'
 
 <script type="module" is:inline>
     function showAddProduct() {
-        if (document.cookie.includes('loggedIn=true')) {
+        if (
+            document.cookie.includes('loggedIn=true') &&
+            document.cookie.includes('isAdmin=true')
+        ) {
             document.getElementById('admin-add-product').style.display = 'flex'
         }
     }

src/pages/profile.astro

@@ -1,11 +1,40 @@
 ---
-import Main from '../layouts/Main.astro';
+import Main from '../layouts/Main.astro'
 ---
 
 <Main title="Your Profile">
     <h1>Your Profile</h1>
     <p>Welcome to your profile page!</p>
     <p>Here you can manage your account.</p>
-    <p>If you have any questions, feel free to reach out to our support team.</p>
+    <p>
+        If you have any questions, feel free to reach out to our support team.
+    </p>
     <p>Thank you for being a part of our community!</p>
+
+    <button id="logout">Logout</button>
 </Main>
+
+<style>
+    button {
+        background-color: #007bff;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        padding: var(--spacing-small);
+    }
+
+    button:hover {
+        background-color: #0056b3;
+    }
+</style>
+
+<script type="module" is:inline>
+    document.getElementById('logout').addEventListener('click', function () {
+        document.cookie =
+            'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
+        document.cookie =
+            'isAdmin=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
+
+        window.location.href = 'authentication.html'
+    })
+</script>

src/styles/global.css

@@ -1,6 +1,10 @@
 :root {
     color-scheme: light dark;
 
+    /* Color palette for the UI */
+    --color-success: green;
+    --color-error: red;
+
     /*
     Define spacing sizes for margins, paddings, and gaps.
     Use these to ensure consistent spacing throughout the UI.