changed the mechanism for auth on the index page (requires install of newer clerk components)

This commit is contained in:
zach
2026-03-05 15:24:08 -05:00
parent 091aa72f23
commit dedd7f8d87
4 changed files with 194 additions and 61 deletions

View File

@@ -4,9 +4,7 @@ import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
import { Waitlist as WaitlistAstro } from '@clerk/astro/components';
import { SignIn as SignInAstro } from '@clerk/astro/components';
import { Sign } from 'node:crypto';
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
---
<Layout>
<NavBar slot="navbar">
@@ -15,7 +13,7 @@ import { Sign } from 'node:crypto';
<div class="row mb-4" slot="page">
<h1>Rigid's App Thing</h1>
<h5 class="text-secondary">(working title)</h5>
<div class="col-12 col-md-7 mb-2">
<div class="col-12 col-md-6 mb-2">
<h4 class="mt-3">Welcome!</h4>
<p class="mt-2">
You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.</p>
@@ -23,10 +21,35 @@ import { Sign } from 'node:crypto';
<p class="my-2">
After the closed beta is complete, the app will move into a more open beta. Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
</p>
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
<Show when="signed-in">
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
</Show>
</div>
<div class="col-12 col-md-4 offset-md-1">
<div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
<div>
<Show when="signed-out">
<!-- Using Bootstrap btn classes -->
<SignInButton asChild mode="modal">
<button class="btn btn-success">
Sign In
</button>
</SignInButton>
<SignUpButton asChild mode="modal">
<button class="btn btn-dark">
Request Access
</button>
</SignUpButton>
</Show>
</div>
<div>
<Show when="signed-in">
<SignOutButton asChild mode="modal">
<button class="btn btn-danger">
Sign Out
</button>
</SignOutButton>
</Show>
</div>
</div>
</div>
<Footer slot="footer" />