68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { Head, usePage } from "@inertiajs/vue3";
|
|
import { computed, watch } from "vue";
|
|
import AppLogo from "@/components/AppLogo.vue";
|
|
import LocaleDropdown from "@/components/LocaleDropdown.vue";
|
|
import Message from "@/components/ui/Message.vue";
|
|
import ToastHost from "@/components/ui/ToastHost.vue";
|
|
import { useToast } from "@/composables/useToast";
|
|
import type { SharedProps } from "@/types";
|
|
|
|
defineProps<{ title?: string }>();
|
|
|
|
const page = usePage<SharedProps>();
|
|
const toast = useToast();
|
|
|
|
/**
|
|
* The auth controllers report flow failures with withErrors(string), which
|
|
* Laravel files under the numeric key 0 rather than a field name. Those are
|
|
* not tied to an input, so they belong in a banner; field errors keep being
|
|
* rendered inline by the individual pages.
|
|
*/
|
|
const banner = computed<string | undefined>(() => {
|
|
const errors = page.props.errors as Record<string, string> | undefined;
|
|
|
|
return errors?.general ?? errors?.[0];
|
|
});
|
|
|
|
watch(
|
|
() => page.props.flash,
|
|
(flash) => {
|
|
for (const message of [flash?.success ?? []].flat().filter(Boolean)) {
|
|
toast.add({
|
|
severity: "success",
|
|
summary: String(message),
|
|
life: 5000,
|
|
});
|
|
}
|
|
|
|
for (const message of [flash?.error ?? []].flat().filter(Boolean)) {
|
|
toast.add({
|
|
severity: "error",
|
|
summary: String(message),
|
|
life: 8000,
|
|
});
|
|
}
|
|
},
|
|
{ immediate: true, deep: true },
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="title" />
|
|
|
|
<div class="bg-body min-h-screen">
|
|
<div class="flex justify-center items-center h-screen">
|
|
<div class="mx-auto my-auto w-full max-w-md px-4 pb-16">
|
|
<Message v-if="banner" severity="error" class="mb-4">
|
|
{{ banner }}
|
|
</Message>
|
|
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ToastHost />
|
|
</template>
|