@xenterprises/nuxt-x-auth-better 0.2.4 → 0.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/app.config.ts +3 -2
- package/app/assets/css/nuxt-x-auth.css +87 -0
- package/app/layouts/auth.vue +10 -4
- package/nuxt.config.ts +12 -9
- package/package.json +1 -1
package/app/app.config.ts
CHANGED
|
@@ -37,9 +37,10 @@ export default defineAppConfig({
|
|
|
37
37
|
tagline: "",
|
|
38
38
|
layout: "centered" as "centered" | "split",
|
|
39
39
|
background: {
|
|
40
|
-
|
|
40
|
+
enabled: true,
|
|
41
41
|
imageUrl: "",
|
|
42
|
-
overlayOpacity:
|
|
42
|
+
overlayOpacity: 55,
|
|
43
|
+
blur: true,
|
|
43
44
|
},
|
|
44
45
|
card: {
|
|
45
46
|
glass: false,
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "@nuxt/ui";
|
|
3
|
+
|
|
4
|
+
:focus-visible {
|
|
5
|
+
outline: 2px solid rgb(var(--color-primary-500));
|
|
6
|
+
outline-offset: 2px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@keyframes skeleton-pulse {
|
|
10
|
+
0%, 100% {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
50% {
|
|
14
|
+
opacity: 0.5;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.skeleton {
|
|
19
|
+
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
20
|
+
background: rgb(var(--color-neutral-200));
|
|
21
|
+
border-radius: 0.375rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dark .skeleton {
|
|
25
|
+
background: rgb(var(--color-neutral-800));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@keyframes shake {
|
|
29
|
+
0%, 100% { transform: translateX(0); }
|
|
30
|
+
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
|
31
|
+
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.auth-error {
|
|
35
|
+
animation: shake 0.5s ease-in-out;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes checkmark {
|
|
39
|
+
0% {
|
|
40
|
+
stroke-dashoffset: 100;
|
|
41
|
+
}
|
|
42
|
+
100% {
|
|
43
|
+
stroke-dashoffset: 0;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.auth-success-check {
|
|
48
|
+
stroke-dasharray: 100;
|
|
49
|
+
stroke-dashoffset: 100;
|
|
50
|
+
animation: checkmark 0.5s ease-out forwards;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.page-enter-active,
|
|
54
|
+
.page-leave-active {
|
|
55
|
+
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.page-enter-from {
|
|
59
|
+
opacity: 0;
|
|
60
|
+
transform: translateY(10px);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.page-leave-to {
|
|
64
|
+
opacity: 0;
|
|
65
|
+
transform: translateY(-10px);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@media (prefers-reduced-motion: reduce) {
|
|
69
|
+
*,
|
|
70
|
+
*::before,
|
|
71
|
+
*::after {
|
|
72
|
+
animation-duration: 0.01ms !important;
|
|
73
|
+
animation-iteration-count: 1 !important;
|
|
74
|
+
transition-duration: 0.01ms !important;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media print {
|
|
79
|
+
.auth-layout {
|
|
80
|
+
background: white !important;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.auth-bg,
|
|
84
|
+
.auth-hero {
|
|
85
|
+
display: none !important;
|
|
86
|
+
}
|
|
87
|
+
}
|
package/app/layouts/auth.vue
CHANGED
|
@@ -139,10 +139,16 @@ const logoUrl = computed(() => config.xAuth?.ui?.logoUrl || '')
|
|
|
139
139
|
const brandName = computed(() => config.xAuth?.ui?.brandName || '')
|
|
140
140
|
const loading = computed(() => isLoading.value)
|
|
141
141
|
|
|
142
|
-
// Background Config
|
|
143
|
-
const bgConfig = computed(() =>
|
|
144
|
-
|
|
145
|
-
|
|
142
|
+
// Background Config - with robust defaults that survive config overrides
|
|
143
|
+
const bgConfig = computed(() => ({
|
|
144
|
+
enabled: config.xAuth?.ui?.background?.enabled ?? true,
|
|
145
|
+
imageUrl: config.xAuth?.ui?.background?.imageUrl ?? '',
|
|
146
|
+
overlayOpacity: config.xAuth?.ui?.background?.overlayOpacity ?? 55,
|
|
147
|
+
blur: config.xAuth?.ui?.background?.blur ?? true,
|
|
148
|
+
}))
|
|
149
|
+
|
|
150
|
+
const isBgEnabled = computed(() => bgConfig.value.enabled)
|
|
151
|
+
const overlayBlur = computed(() => bgConfig.value.blur)
|
|
146
152
|
|
|
147
153
|
const footerTextColorClass = computed(() => {
|
|
148
154
|
if (backgroundImageUrl.value && isImageLoaded.value) {
|
package/nuxt.config.ts
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
|
+
import { fileURLToPath } from "url";
|
|
2
|
+
import { dirname, resolve } from 'path';
|
|
3
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
4
|
+
const __dirname = dirname(__filename);
|
|
5
|
+
|
|
1
6
|
export default defineNuxtConfig({
|
|
2
|
-
compatibilityDate: '2024-11-01',
|
|
3
|
-
ssr: false,
|
|
4
|
-
devtools: { enabled: false },
|
|
5
7
|
|
|
6
8
|
modules: ["@nuxt/ui"],
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
10
|
+
css: [resolve(__dirname, 'app/assets/css/nuxt-x-auth.css')],
|
|
11
|
+
// ui: {
|
|
12
|
+
// colors: {
|
|
13
|
+
// primary: "blue",
|
|
14
|
+
// neutral: "cool",
|
|
15
|
+
// },
|
|
16
|
+
// },
|
|
14
17
|
|
|
15
18
|
runtimeConfig: {
|
|
16
19
|
public: {
|