move banners on login and register cards into the cards

This commit is contained in:
Gregor Vostrak
2026-05-29 15:33:35 +02:00
committed by Constantin Graf
parent 24c19e7e7c
commit 56ea0ed90e
4 changed files with 28 additions and 9 deletions

View File

@@ -5,6 +5,15 @@ import { usePage } from '@inertiajs/vue3';
const ALLOWED_STYLES = ['success', 'danger', 'info', 'warning'] as const;
type BannerStyle = (typeof ALLOWED_STYLES)[number];
withDefaults(
defineProps<{
// Render as a self-contained rounded alert that sits inside a card
// (e.g. the auth card on login/register) instead of a full-width page banner.
card?: boolean;
}>(),
{ card: false }
);
const page = usePage<{
flash: {
bannerText?: string;
@@ -26,10 +35,16 @@ const show = ref(true);
<div
v-if="show && message"
data-testid="banner"
class="bg-secondary border-b border-border-secondary">
<div class="mx-auto py-1 px-3 sm:px-6 lg:px-8">
:class="
card
? 'bg-secondary border border-border-secondary rounded-lg mb-4'
: 'bg-secondary border-b border-border-secondary'
">
<div :class="card ? 'py-2 px-3' : 'mx-auto py-1 px-3 sm:px-6 lg:px-8'">
<div class="flex items-center justify-between flex-wrap">
<div class="w-0 flex-1 flex items-center min-w-0">
<div
class="w-0 flex-1 flex min-w-0"
:class="card ? 'items-start' : 'items-center'">
<span class="flex">
<svg
v-if="style === 'success'"
@@ -74,7 +89,9 @@ const show = ref(true);
</svg>
</span>
<p class="ms-3 font-medium text-sm text-text-primary truncate">
<p
class="ms-3 font-medium text-sm text-text-primary"
:class="{ truncate: !card }">
{{ message }}
</p>
</div>

View File

@@ -37,8 +37,6 @@ const page = usePage<{
<template>
<Head title="Log in" />
<Banner />
<AuthenticationCard>
<template #logo>
<AuthenticationCardLogo />
@@ -52,6 +50,8 @@ const page = usePage<{
</Link>
</template>
<Banner card />
<div v-if="status" class="mb-4 font-medium text-sm text-green-400">
{{ status }}
</div>

View File

@@ -42,8 +42,6 @@ const page = usePage<{
<template>
<Head title="Register" />
<Banner />
<AuthenticationCard>
<template #logo>
<AuthenticationCardLogo />
@@ -58,6 +56,8 @@ const page = usePage<{
</Link>
</template>
<Banner card />
<div
v-if="page.props.flash?.message"
class="bg-red-400 text-black text-center w-full px-3 py-1 mb-4 rounded-lg">

View File

@@ -283,7 +283,9 @@ const page = usePage<{
@click="clickResend">
Resend verification email
</Button>
<p v-else class="ms-3 font-medium text-green-400">Verification email sent.</p>
<p v-else class="ms-3 font-medium text-green-400">
Verification email sent.
</p>
<Button
variant="ghost"
size="sm"