feat: add login page

dev
Francesco Minnocci 8 months ago
parent cf9ac2994a
commit b4722ac030
No known key found for this signature in database
GPG Key ID: 76DA3AF9BAED1A32

@ -29,6 +29,7 @@
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^2.1.1", "@astrojs/mdx": "^2.1.1",
"@types/better-sqlite3": "^7.6.9", "@types/better-sqlite3": "^7.6.9",
"@types/katex": "^0.16.7",
"drizzle-kit": "^0.20.14", "drizzle-kit": "^0.20.14",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"remark-math": "^6.0.0", "remark-math": "^6.0.0",

@ -52,6 +52,9 @@ devDependencies:
'@types/better-sqlite3': '@types/better-sqlite3':
specifier: ^7.6.9 specifier: ^7.6.9
version: 7.6.9 version: 7.6.9
'@types/katex':
specifier: ^0.16.7
version: 0.16.7
drizzle-kit: drizzle-kit:
specifier: ^0.20.14 specifier: ^0.20.14
version: 0.20.14 version: 0.20.14

@ -3,10 +3,12 @@
<img src="/images/logo-circuit-board.svg" alt="phc logo" /> <img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a> </a>
<div class="links"> <div class="links">
<a role="button" href="/users">Utenti</a> <a role="button" href="/utenti">Utenti</a>
<a role="button" href="/news">Notizie</a> <a role="button" href="/appunti">Appunti</a>
<a role="button" href="/projects">Progetti</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 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> </div>
</header> </header>

@ -20,6 +20,7 @@ const postsCollection = defineCollection({
const guidesCollection = defineCollection({ const guidesCollection = defineCollection({
type: 'content', type: 'content',
schema: z.object({ schema: z.object({
id: z.string(),
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
series: z.string().optional(), series: z.string().optional(),

@ -1,7 +1,7 @@
--- ---
id: git-101-example
title: Git 101 (Esempio) title: Git 101 (Esempio)
description: Una guida introduttiva alle basi di Git (Esempio) description: Una guida introduttiva alle basi di Git (Esempio)
slug: git-101-example
author: Copilot author: Copilot
series: git series: git
--- ---

@ -6,7 +6,7 @@ import ArticleLayout from '../../layouts/ArticleLayout.astro'
export async function getStaticPaths() { export async function getStaticPaths() {
const blogEntries = await getCollection('guides') const blogEntries = await getCollection('guides')
return blogEntries.map(entry => ({ return blogEntries.map(entry => ({
params: { slug: entry.slug }, params: { id: entry.data.id },
props: { entry }, props: { entry },
})) }))
} }
@ -15,7 +15,7 @@ const { entry } = Astro.props
const { Content } = await entry.render() const { Content } = await entry.render()
--- ---
<ArticleLayout {...entry.data} pageName={['guide', entry.slug]}> <ArticleLayout {...entry.data} pageName={['guide', entry.data.id]}>
<div class="text-content"> <div class="text-content">
<h1>{entry.data.title}</h1> <h1>{entry.data.title}</h1>
{entry.data.series && <h2>{entry.data.series}</h2>} {entry.data.series && <h2>{entry.data.series}</h2>}

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

@ -2,7 +2,7 @@
import PageLayout from '../layouts/PageLayout.astro' import PageLayout from '../layouts/PageLayout.astro'
--- ---
<PageLayout pageName="users"> <PageLayout pageName="utenti">
<h1>Utenti</h1> <h1>Utenti</h1>
<div class="search"> <div class="search">

@ -51,7 +51,8 @@ button,
} }
} }
input[type='text'] { input[type='text'],
input[type='password'] {
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
@ -63,3 +64,26 @@ input[type='text'] {
background: #fdfdfd; 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;
}
}
}
}

@ -1,4 +1,3 @@
$black: #222; $black: #222;
$border-large: 4px solid $black; $border-large: 4px solid $black;
@ -118,6 +117,9 @@ body {
main { main {
width: 100%; width: 100%;
h1 {
font-size: 42px;
}
} }
footer { footer {
@ -360,7 +362,7 @@ body {
} }
} }
.users { .utenti {
main { main {
justify-self: center; justify-self: center;
@ -372,10 +374,21 @@ body {
padding: 5rem 0; padding: 5rem 0;
gap: 5rem; gap: 5rem;
}
}
h1 { .login {
font-size: 42px; main {
} justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
max-width: 80ch;
padding: 5rem 0;
gap: 5rem;
} }
} }

Loading…
Cancel
Save