From b4722ac03010cc5b96883b5b2716f2d4f99568bc Mon Sep 17 00:00:00 2001
From: Francesco Minnocci <ad17fmin@uwcad.it>
Date: Mon, 11 Mar 2024 17:28:53 +0100
Subject: [PATCH] feat: add login page

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  3 +++
 src/components/Header.astro                   | 10 ++++---
 src/content/config.ts                         |  1 +
 src/content/guides/2024-02-29-git-101.md      |  2 +-
 .../guide/{[...slug].astro => [id].astro}     |  4 +--
 src/pages/login.astro                         | 21 +++++++++++++++
 src/pages/utenti.astro                        |  2 +-
 src/styles/controls.scss                      | 26 ++++++++++++++++++-
 src/styles/main.scss                          | 23 ++++++++++++----
 10 files changed, 79 insertions(+), 14 deletions(-)
 rename src/pages/guide/{[...slug].astro => [id].astro} (83%)
 create mode 100644 src/pages/login.astro

diff --git a/package.json b/package.json
index 431b788..730533d 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "devDependencies": {
         "@astrojs/mdx": "^2.1.1",
         "@types/better-sqlite3": "^7.6.9",
+        "@types/katex": "^0.16.7",
         "drizzle-kit": "^0.20.14",
         "npm-run-all": "^4.1.5",
         "remark-math": "^6.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b68a4c..7a88c8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,9 @@ devDependencies:
   '@types/better-sqlite3':
     specifier: ^7.6.9
     version: 7.6.9
+  '@types/katex':
+    specifier: ^0.16.7
+    version: 0.16.7
   drizzle-kit:
     specifier: ^0.20.14
     version: 0.20.14
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 837e9f8..eb3cac1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,10 +3,12 @@
         <img src="/images/logo-circuit-board.svg" alt="phc logo" />
     </a>
     <div class="links">
-        <a role="button" href="/users">Utenti</a>
-        <a role="button" href="/news">Notizie</a>
-        <a role="button" href="/projects">Progetti</a>
+        <a role="button" href="/utenti">Utenti</a>
+        <a role="button" href="/appunti">Appunti</a>
+        <a role="button" href="/notizie">Notizie</a>
+        <a role="button" href="/seminarietti">Seminarietti</a>
+        <a role="button" href="/guide">Guide</a>
         <a role="button" href="/about">About</a>
-        <a class="primary" role="button" href="/login">Accedi</a>
+        <a class="primary" role="button" href="/login">Login</a>
     </div>
 </header>
diff --git a/src/content/config.ts b/src/content/config.ts
index bd61ade..2de5874 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -20,6 +20,7 @@ const postsCollection = defineCollection({
 const guidesCollection = defineCollection({
     type: 'content',
     schema: z.object({
+        id: z.string(),
         title: z.string(),
         description: z.string(),
         series: z.string().optional(),
diff --git a/src/content/guides/2024-02-29-git-101.md b/src/content/guides/2024-02-29-git-101.md
index 48bcfc6..30c868b 100644
--- a/src/content/guides/2024-02-29-git-101.md
+++ b/src/content/guides/2024-02-29-git-101.md
@@ -1,7 +1,7 @@
 ---
+id: git-101-example
 title: Git 101 (Esempio)
 description: Una guida introduttiva alle basi di Git (Esempio)
-slug: git-101-example
 author: Copilot
 series: git
 ---
diff --git a/src/pages/guide/[...slug].astro b/src/pages/guide/[id].astro
similarity index 83%
rename from src/pages/guide/[...slug].astro
rename to src/pages/guide/[id].astro
index 9691ee6..9c1443e 100644
--- a/src/pages/guide/[...slug].astro
+++ b/src/pages/guide/[id].astro
@@ -6,7 +6,7 @@ import ArticleLayout from '../../layouts/ArticleLayout.astro'
 export async function getStaticPaths() {
     const blogEntries = await getCollection('guides')
     return blogEntries.map(entry => ({
-        params: { slug: entry.slug },
+        params: { id: entry.data.id },
         props: { entry },
     }))
 }
@@ -15,7 +15,7 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<ArticleLayout {...entry.data} pageName={['guide', entry.slug]}>
+<ArticleLayout {...entry.data} pageName={['guide', entry.data.id]}>
     <div class="text-content">
         <h1>{entry.data.title}</h1>
         {entry.data.series && <h2>{entry.data.series}</h2>}
diff --git a/src/pages/login.astro b/src/pages/login.astro
new file mode 100644
index 0000000..5df08d1
--- /dev/null
+++ b/src/pages/login.astro
@@ -0,0 +1,21 @@
+---
+import PageLayout from '../layouts/PageLayout.astro'
+---
+
+<PageLayout pageName="login">
+    <h1>Login</h1>
+
+    <!-- form with username and password, and a button for oauth login -->
+    <form action="/login" method="post">
+        <h3>Accedi con Poisson</h3>
+        <input type="text" id="username" placeholder="Username" name="username" required />
+        <input type="password" id="password" placeholder="Password" name="password" required />
+
+        <button class="primary" type="submit">Login</button>
+
+        <hr />
+        <h3>Accedi con Ateneo</h3>
+        <a href="/auth/ateneo" class="primary" role="button">Login</a>
+    </form>
+    <!-- <span class="material-symbols-outlined">person</span> -->
+</PageLayout>
diff --git a/src/pages/utenti.astro b/src/pages/utenti.astro
index e1699c4..e834211 100644
--- a/src/pages/utenti.astro
+++ b/src/pages/utenti.astro
@@ -2,7 +2,7 @@
 import PageLayout from '../layouts/PageLayout.astro'
 ---
 
-<PageLayout pageName="users">
+<PageLayout pageName="utenti">
     <h1>Utenti</h1>
 
     <div class="search">
diff --git a/src/styles/controls.scss b/src/styles/controls.scss
index ceed790..a2391b7 100644
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@@ -51,7 +51,8 @@ button,
     }
 }
 
-input[type='text'] {
+input[type='text'],
+input[type='password'] {
     width: 100%;
     height: 2.5rem;
 
@@ -63,3 +64,26 @@ input[type='text'] {
         background: #fdfdfd;
     }
 }
+
+form {
+    display: grid;
+    gap: 0.5rem;
+    padding: 1rem;
+
+    background: #38adc1;
+
+    @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+    button,
+    .button,
+    [role='button'] {
+        &.primary {
+            background: #1c7f90;
+            color: #f4fef7;
+
+            &:hover {
+                background: #4ea2b1;
+            }
+        }
+    }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 06acc8b..844553b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,4 +1,3 @@
-
 $black: #222;
 $border-large: 4px solid $black;
 
@@ -118,6 +117,9 @@ body {
 
     main {
         width: 100%;
+        h1 {
+            font-size: 42px;
+        }
     }
 
     footer {
@@ -360,7 +362,7 @@ body {
     }
 }
 
-.users {
+.utenti {
     main {
         justify-self: center;
 
@@ -372,10 +374,21 @@ body {
         padding: 5rem 0;
 
         gap: 5rem;
+    }
+}
 
-        h1 {
-            font-size: 42px;
-        }
+.login {
+    main {
+        justify-self: center;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        max-width: 80ch;
+        padding: 5rem 0;
+
+        gap: 5rem;
     }
 }