mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
6fdf10b2b1
Rewrites resources/scripts/layouts/AuthLayout.vue from scratch using only the @theme tokens defined in themes.css and registered via @theme inline in invoiceshelf.css. The new layout is a centered card on the existing bg-glass-gradient utility, using the same visual vocabulary as BaseCard (bg-surface, rounded-xl, border-line-default, shadow-sm) so the auth pages read as a smaller, simpler version of the admin's existing card pattern. Both light and dark mode work automatically because every color references a theme token rather than a hardcoded hex/rgb. Drops the previous attempt's hardcoded #0a0e1a / #fbbf24 / #f5efe5 palette, the imported Google Fonts (Fraunces / Manrope / JetBrains Mono — replaced with the project default Poppins via font-base), the local --ink / --brass / --cream CSS variables that ignored [data-theme=dark], and the :deep() overrides that forced BaseInput / BaseButton into a custom underline style. The form components now render in the auth card identically to how they render anywhere else in the admin — same components, same theme tokens, no overrides. Removes four legacy SVG decorations from the original two-panel design: LoginPlanetCrater, LoginBackground, LoginBackgroundOverlay, LoginBottomVector. The page now has no decorative imagery — the bg-glass-gradient utility carries the visual mood. Adds w-full justify-center to the four auth-form submit buttons (LoginView, ForgotPasswordView, ResetPasswordView, RegisterWithInvitationView) so they fill the auth card width with their labels centered. Done at the call site rather than via :deep() so BaseButton stays untouched and the rest of the admin keeps its inline button style. Route-aware heading/subheading copy is preserved for all four auth views, and the four window.* admin customization hooks (login_page_logo, login_page_heading, login_page_description, copyright_text) still work.
126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
<template>
|
|
<div class="bg-glass-gradient relative min-h-screen w-full overflow-hidden">
|
|
<NotificationRoot />
|
|
|
|
<main
|
|
class="
|
|
relative flex min-h-screen flex-col items-center justify-center
|
|
px-4 py-12 sm:px-6
|
|
"
|
|
>
|
|
<!-- Logo above the card -->
|
|
<div class="mb-8 flex justify-center">
|
|
<MainLogo
|
|
v-if="!loginPageLogo"
|
|
class="h-12 w-auto text-primary-500"
|
|
/>
|
|
<img
|
|
v-else
|
|
:src="loginPageLogo"
|
|
alt="InvoiceShelf"
|
|
class="h-12 w-auto"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Auth card — same visual language as BaseCard -->
|
|
<article
|
|
class="
|
|
w-full max-w-md
|
|
bg-surface
|
|
rounded-xl
|
|
border border-line-default
|
|
shadow-sm
|
|
backdrop-blur-sm
|
|
px-8 py-10 sm:px-10 sm:py-12
|
|
"
|
|
>
|
|
<header class="text-center mb-8">
|
|
<h1 class="text-2xl font-semibold text-heading">
|
|
{{ heading }}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-muted">
|
|
{{ subheading }}
|
|
</p>
|
|
</header>
|
|
|
|
<router-view />
|
|
</article>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-8 text-center text-xs text-subtle">
|
|
<span v-if="copyrightText">{{ copyrightText }}</span>
|
|
<span v-else>
|
|
Powered by
|
|
<a
|
|
href="https://invoiceshelf.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-primary-500 hover:text-primary-600 font-medium transition-colors"
|
|
>InvoiceShelf</a>
|
|
</span>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
|
|
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
|
|
|
|
declare global {
|
|
interface Window {
|
|
login_page_heading?: string
|
|
login_page_description?: string
|
|
copyright_text?: string
|
|
login_page_logo?: string
|
|
}
|
|
}
|
|
|
|
const route = useRoute()
|
|
|
|
interface RouteCopy {
|
|
heading: string
|
|
subheading: string
|
|
}
|
|
|
|
const COPY: Record<string, RouteCopy> = {
|
|
login: {
|
|
heading: 'Welcome back',
|
|
subheading: 'Sign in to continue to your account',
|
|
},
|
|
'forgot-password': {
|
|
heading: 'Forgot your password?',
|
|
subheading: 'Enter your email and we will send you a reset link',
|
|
},
|
|
'reset-password': {
|
|
heading: 'Set a new password',
|
|
subheading: 'Choose a strong password to secure your account',
|
|
},
|
|
'register-with-invitation': {
|
|
heading: 'Create your account',
|
|
subheading: 'Complete your registration to get started',
|
|
},
|
|
}
|
|
|
|
const heading = computed<string>(() => {
|
|
if (window.login_page_heading) return window.login_page_heading
|
|
const name = route.name?.toString() ?? 'login'
|
|
return COPY[name]?.heading ?? COPY.login.heading
|
|
})
|
|
|
|
const subheading = computed<string>(() => {
|
|
if (window.login_page_description) return window.login_page_description
|
|
const name = route.name?.toString() ?? 'login'
|
|
return COPY[name]?.subheading ?? COPY.login.subheading
|
|
})
|
|
|
|
const copyrightText = computed<string | null>(() => window.copyright_text ?? null)
|
|
|
|
const loginPageLogo = computed<string | false>(() => {
|
|
if (window.login_page_logo) return window.login_page_logo
|
|
return false
|
|
})
|
|
</script>
|