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.
107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<template>
|
|
<form id="loginForm" @submit.prevent="onSubmit">
|
|
<BaseInputGroup
|
|
:error="v$.email.$error && v$.email.$errors[0].$message"
|
|
:label="$t('login.enter_email')"
|
|
class="mb-4"
|
|
required
|
|
>
|
|
<BaseInput
|
|
v-model="formData.email"
|
|
:invalid="v$.email.$error"
|
|
focus
|
|
type="email"
|
|
name="email"
|
|
@input="v$.email.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseButton
|
|
:loading="isLoading"
|
|
:disabled="isLoading"
|
|
type="submit"
|
|
variant="primary"
|
|
class="w-full justify-center"
|
|
>
|
|
<div v-if="!isSent">
|
|
{{ $t('validation.send_reset_link') }}
|
|
</div>
|
|
<div v-else>
|
|
{{ $t('validation.not_yet') }}
|
|
</div>
|
|
</BaseButton>
|
|
|
|
<div class="mt-4 mb-4 text-sm">
|
|
<router-link
|
|
to="/login"
|
|
class="text-sm text-primary-400 hover:text-body"
|
|
>
|
|
{{ $t('general.back_to_login') }}
|
|
</router-link>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import { required, email, helpers } from '@vuelidate/validators'
|
|
import { useVuelidate } from '@vuelidate/core'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useAuthStore } from '../../../stores/auth.store'
|
|
import { useNotificationStore } from '../../../stores/notification.store'
|
|
import { handleApiError } from '../../../utils/error-handling'
|
|
|
|
interface ForgotPasswordForm {
|
|
email: string
|
|
}
|
|
|
|
const notificationStore = useNotificationStore()
|
|
const authStore = useAuthStore()
|
|
const { t } = useI18n()
|
|
|
|
const formData = reactive<ForgotPasswordForm>({
|
|
email: '',
|
|
})
|
|
|
|
const isSent = ref<boolean>(false)
|
|
const isLoading = ref<boolean>(false)
|
|
|
|
const rules = {
|
|
email: {
|
|
required: helpers.withMessage(t('validation.required'), required),
|
|
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
|
},
|
|
}
|
|
|
|
const v$ = useVuelidate(rules, formData)
|
|
|
|
async function onSubmit(): Promise<void> {
|
|
v$.value.$touch()
|
|
|
|
if (v$.value.$invalid) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
isLoading.value = true
|
|
|
|
await authStore.forgotPassword({ email: formData.email })
|
|
|
|
notificationStore.showNotification({
|
|
type: 'success',
|
|
message: 'Mail sent successfully',
|
|
})
|
|
|
|
isSent.value = true
|
|
} catch (err: unknown) {
|
|
const normalized = handleApiError(err)
|
|
notificationStore.showNotification({
|
|
type: 'error',
|
|
message: normalized.message,
|
|
})
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
</script>
|