feat: add login page

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",

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

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>

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(),

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
 ---

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>}

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>

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">

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;
+            }
+        }
+    }
+}

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,11 +374,22 @@ 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;
+    }
 }
 
 //