feat: add dockerfiles, finish /login and start /profile

.env.sample

@@ -0,0 +1,11 @@
+DB_FILE_NAME=file:data.local/database.db
+BETTER_AUTH_SECRET=
+BETTER_AUTH_URL=http://localhost:3000
+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+OAUTH_AUTH_URL=https://iam.unipi.it/oauth2/authorize
+OAUTH_TOKEN_HOST=https://iam.unipi.it
+OAUTH_TOKEN_PATH=/oauth2/token
+OAUTH_REDIRECT_URL=https://phc.dm.unipi.it/api/auth/oauth2/callback/unipi
+OAUTH_USER_INFO_URL=https://iam.unipi.it/oauth2/userinfo
+OAUTH_SCOPES="openid profile email"

Dockerfile

@@ -0,0 +1,23 @@
+# https://dev.to/code42cate/how-to-dockerize-and-deploy-astro-6ll
+
+FROM node:alpine AS base
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+FROM base AS deps
+RUN npm install
+
+FROM deps AS build
+COPY . .
+RUN npm run build
+
+FROM base AS runtime
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=build /app/dist ./dist
+
+ENV HOST=0.0.0.0
+ENV PORT=3000
+EXPOSE 3000
+
+CMD node ./dist/server/entry.mjs

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  website:
+    build:
+      context: .
+    container_name: website
+    restart: unless-stopped
+    ports:
+      # https://gist.github.com/aziis98/88af12b32d9cf3eeae3929b93146fd27
+      # hash2addr "next.phc.dm.unipi.it"
+      - '127.44.207.62:1059'
+    volumes:
+      - /var/lib/website:/app/data.local

src/pages/auth/ateneo.astro

@@ -0,0 +1,8 @@
+<script>
+    import { authClient } from '@/client/auth-client' //import the auth client
+
+    await authClient.signIn.oauth2({
+        providerId: 'unipi',
+        callbackURL: '/profilo', // the path to redirect to after the user is authenticated
+    })
+</script>

src/pages/login.astro

@@ -1,5 +1,6 @@
 ---
 import PageLayout from '../layouts/PageLayout.astro'
+import '@/styles/pages/login.css'
 ---
 
 <PageLayout title="Login | PHC" pageTags="login">
@@ -7,25 +8,25 @@ import PageLayout from '../layouts/PageLayout.astro'
 
     <!-- form with username and password, and a button for oauth login -->
     <form action="/login" method="post">
-        <h3 class="center">Accedi con Poisson</h3>
+        <h3 class="center"><strike>Accedi con Poisson</strike> (Work in Progress)</h3>
-        <input type="text" id="username" placeholder="Username" name="username" required />
-        <input type="password" id="password" placeholder="Password" name="password" required />
 
-        <button class="primary center" type="submit">Login</button>
+        <div class="row">
+            <span class="material-symbols-outlined">person</span>
+            <input type="text" id="username" placeholder="Username" name="username" required disabled />
+        </div>
+        <div class="row">
+            <span class="material-symbols-outlined">key</span>
+            <input type="password" id="password" placeholder="Password" name="password" required disabled />
+        </div>
+
+        <button class="primary center" type="submit" disabled>Login</button>
 
         <hr />
 
         <h3 class="center">Accedi con Ateneo</h3>
-        <a href="/auth/ateneo" class="primary center" role="button">Login</a>
+        <a href="/auth/ateneo" class="primary center" role="button">
+            <span class="material-symbols-outlined">account_balance</span>
+            Login
+        </a>
     </form>
-    <!-- <span class="material-symbols-outlined">person</span> -->
-
-    <script>
-        import { authClient } from '@/client/auth-client' //import the auth client
-
-        await authClient.signIn.oauth2({
-            providerId: 'unipi',
-            callbackURL: '/profilo', // the path to redirect to after the user is authenticated
-        })
-    </script>
 </PageLayout>

src/pages/profilo.astro

@@ -1,12 +1,40 @@
 ---
-const session = () => {
+import PageLayout from '../layouts/PageLayout.astro'
-    if (Astro.locals.session) {
+import '@/styles/pages/login.css'
-        return Astro.locals.session
+
-    } else {
+if (!Astro.locals.user) {
-        // Redirect to login page if the user is not authenticated
+    return Astro.redirect('/login')
-        return Astro.redirect('/login')
-    }
 }
+
+const { name, email } = Astro.locals.user
 ---
 
-Ciao prova profilo {JSON.stringify(Astro.locals.user)}
+<PageLayout title="Profilo | PHC">
+    <div class="card large">
+        <div class="title">Profilo di {name}</div>
+        <div class="text">
+            <p>
+                <strong>Nome:</strong>
+                {name}
+                <br />
+                <strong>Email:</strong>
+                {email}
+                <br />
+            </p>
+            <p>
+                Benvenuto nel tuo profilo! Qui puoi visualizzare le tue informazioni personali e modificare le tue
+                impostazioni.
+            </p>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="title">Impostazioni</div>
+        <div class="text">
+            <p>
+                Al momento non sono disponibili impostazioni modificabili. Se hai bisogno di assistenza, contatta il
+                supporto tecnico.
+            </p>
+        </div>
+    </div>
+</PageLayout>

src/styles/_pages.css

@@ -1,27 +0,0 @@
-/* This file is here for historical reasons but is not used anymore */
-
-@layer page {
-    /* 
-    .login {
-        background: #ddfaff;
-
-        main {
-            justify-self: center;
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            max-width: 80ch;
-            padding: 3rem 0;
-
-            gap: 3rem;
-
-            h3 {
-                font-size: 28px;
-                font-weight: 600;
-            }
-        }
-    } 
-    */
-}

src/styles/controls.css

@@ -21,6 +21,8 @@ Controls - for things like buttons, input, select
 
         display: grid;
         place-content: center;
+        grid-auto-flow: column;
+        gap: 0.25rem;
 
         &:hover {
             transform: translate(-1px, -1px);
@@ -206,6 +208,23 @@ Controls - for things like buttons, input, select
                     background: #4ea2b1;
                 }
             }
+
+            &:disabled {
+                background: #aaa;
+                color: #666;
+                cursor: not-allowed;
+
+                &:active {
+                    transform: none;
+                    box-shadow: 4px 4px 0 0 #222;
+                }
+
+                &:hover {
+                    background: #aaa;
+                    transform: none;
+                    box-shadow: 4px 4px 0 0 #222;
+                }
+            }
         }
 
         hr {
@@ -217,6 +236,25 @@ Controls - for things like buttons, input, select
             margin-top: 1rem;
         }
 
+        > .row {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            align-items: center;
+            gap: 0.5rem;
+
+            span.material-symbols-outlined {
+                font-size: 1.5rem;
+                color: #222;
+            }
+
+            input[type='text'],
+            input[type='password'] {
+                width: 100%;
+                min-height: 2.5rem;
+                padding-left: 0.5rem;
+            }
+        }
+
         .right {
             justify-self: end;
         }
@@ -226,6 +264,12 @@ Controls - for things like buttons, input, select
         .center {
             justify-self: center;
         }
+
+        @media screen and (max-width: 1024px) {
+            min-width: 0;
+            padding: 1.5rem;
+            gap: 1.5rem;
+        }
     }
 
     details {

src/styles/pages/login.css

@@ -0,0 +1,17 @@
+@layer page {
+    main {
+        justify-self: center;
+
+        display: grid;
+        place-items: center;
+        place-content: center;
+
+        padding: 4.5rem 3rem;
+        gap: 4.5rem;
+
+        @media screen and (max-width: 1024px) {
+            padding: 3rem 1.5rem;
+            gap: 3rem;
+        }
+    }
+}