add banners for invitation accept

resources/js/Components/Banner.vue

@@ -1,36 +1,38 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { ref } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 
+const ALLOWED_STYLES = ['success', 'danger', 'info', 'warning'] as const;
+type BannerStyle = (typeof ALLOWED_STYLES)[number];
+
 const page = usePage<{
-    jetstream: {
-        flash: {
-            banner: string;
-            bannerStyle: string;
-        };
+    flash: {
+        bannerText?: string;
+        bannerStyle?: string;
     };
 }>();
 
-const show = ref(true);
-const style = ref('success');
-const message = ref('');
+const rawStyle = page.props.flash?.bannerStyle;
+const message = page.props.flash?.bannerText ?? '';
+const style: BannerStyle = (ALLOWED_STYLES as readonly string[]).includes(rawStyle ?? '')
+    ? (rawStyle as BannerStyle)
+    : 'success';
 
-watchEffect(async () => {
-    style.value = page.props.jetstream.flash?.bannerStyle || 'success';
-    message.value = page.props.jetstream.flash?.banner || '';
-    show.value = true;
-});
+const show = ref(true);
 </script>
 
 <template>
     <div>
-        <div v-if="show && message" class="bg-secondary border-b border-border-secondary">
+        <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">
                 <div class="flex items-center justify-between flex-wrap">
                     <div class="w-0 flex-1 flex items-center min-w-0">
                         <span class="flex">
                             <svg
-                                v-if="style == 'success'"
+                                v-if="style === 'success'"
                                 class="h-6 w-6 text-text-secondary"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -44,7 +46,7 @@ watchEffect(async () => {
                             </svg>
 
                             <svg
-                                v-if="style == 'danger'"
+                                v-if="style === 'danger'"
                                 class="h-5 w-5 text-text-primary"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -56,6 +58,20 @@ watchEffect(async () => {
                                     stroke-linejoin="round"
                                     d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                             </svg>
+
+                            <svg
+                                v-if="style === 'info'"
+                                class="h-6 w-6 text-text-secondary"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor">
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                            </svg>
                         </span>
 
                         <p class="ms-3 font-medium text-sm text-text-primary truncate">

resources/js/Pages/Auth/Login.vue

@@ -2,6 +2,7 @@
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import AuthenticationCard from '@/Components/AuthenticationCard.vue';
 import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+import Banner from '@/Components/Banner.vue';
 import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import TextInput from '@/packages/ui/src/Input/TextInput.vue';
@@ -36,6 +37,8 @@ const page = usePage<{
 <template>
     <Head title="Log in" />
 
+    <Banner />
+
     <AuthenticationCard>
         <template #logo>
             <AuthenticationCardLogo />

resources/js/Pages/Auth/Register.vue

@@ -2,6 +2,7 @@
 import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
 import AuthenticationCard from '@/Components/AuthenticationCard.vue';
 import AuthenticationCardLogo from '@/Components/AuthenticationCardLogo.vue';
+import Banner from '@/Components/Banner.vue';
 import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
 import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
@@ -41,6 +42,8 @@ const page = usePage<{
 <template>
     <Head title="Register" />
 
+    <Banner />
+
     <AuthenticationCard>
         <template #logo>
             <AuthenticationCardLogo />