oier/karkarcar-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: oier:c98a64d52392395a159d2f8c13e9c0537cd69b0d
Branches Tags
oier:main
...
compare: oier:9d5147c060e5f395db195cb44935ee3e7f1b6890
Branches Tags
oier:main

3 Commits
c98a64d523 ... 9d5147c060

Author SHA1 Message Date
Oier Bravo Urtasun
9d5147c060 Bigger buttons 2025-06-10 00:34:53 +02:00
Oier Bravo Urtasun
56f6a45ccc centered grid 2025-06-10 00:28:28 +02:00
Oier Bravo Urtasun
286ae5135d Component styles 2025-06-10 00:27:07 +02:00
4 changed files with 47 additions and 27 deletions
Expand all files Collapse all files

11
src/components/KarKarCarAuth.astro
View File

@@ -1,19 +1,14 @@
---
import type { KarKarCarSession } from "../api/index.ts"
import { getUser } from "../api/index"
import type FullAuthConfig from 'auth-astro'
import config from 'auth:config'
import authConfig from 'auth:config'
interface Props {
authConfig?: typeof config
}
const { authConfig = config } = Astro.props as Props
const { class: className, ...rest } = Astro.props;
let session = await getUser(Astro.request, authConfig)
---
<div>
<div class={className}>
<Fragment set:html={Astro.slots.render('default', [session])} />
</div>

22
src/components/UserInfo.astro Normal file
View File

@@ -0,0 +1,22 @@
---
import type { KarKarCarSession } from "../api/index.ts";
interface Props {
session: KarKarCarSession | null;
}
const { session } = Astro.props;
---
<div class="p-4 rounded-lg bg-gray-100 my-4">
{session ? (
<div class="text-gray-700">
<h2 class="m-0 mb-4 text-slate-800">{session.user?.name} | {session.user?.email}</h2>
<div class="bg-white p-4 rounded shadow-sm">
<p>Zure saldoa: {session.userData.amount}</p>
</div>
</div>
) : (
<p class="text-gray-600 italic">Sartu zure kontua</p>
)}
</div>

7
src/layouts/BaseLayout.astro
View File

@@ -20,7 +20,10 @@ import './src/styles/global.css'
<title>{title}</title>
</head>
<body>
<Image src={logo} alt="KarKarCar" />
<slot />
<div class="min-h-screen grid place-items-center">
<div class="grid gap-6 text-center">
<slot />
</div>
</div>
</body>
</html>

34
src/pages/index.astro
View File

@@ -5,29 +5,29 @@ import { SignIn, SignOut } from 'auth-astro/components';
import KarKarCarAuth from "../components/KarKarCarAuth.astro"
// 1. Import any dependencies (Full support for JavaScript/TypeScript)
import type { KarKarCarSession } from "../api/index.ts"
import { getUser, type KarKarCarSession } from "../api/index"
import UserInfo from "../components/UserInfo.astro"
import config from 'auth:config'
import { Image } from 'astro:assets';
import logo from '../images/logo-urdina.png';
const session = await getUser(Astro.request, config);
---
<Layout>
<div class="flex justify-center">
<Image src={logo} alt="KarKarCar" class="max-w-xs" />
</div>
<UserInfo session={session} />
<KarKarCarAuth>
{(session: KarKarCarSession) => (
<>
{session ?
<SignOut>Logout</SignOut>
:
<SignIn provider="keycloak">Login</SignIn>
}
<p>
{session ? `Logged in as ${session.user?.name}` : 'Not logged in'}
{session ? `Amount ${session.userData.amount}` : ''}
</p>
</>
<>
{session ?
<SignOut class="px-8 py-4 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 font-medium text-xl">Logout</SignOut>
:
<SignIn provider="keycloak" class="px-8 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium text-xl">Login</SignIn>
}
</>
)}
</KarKarCarAuth>
</Layout>