@adminforth/open-signup 2.0.6 → 3.0.1
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/build.log +2 -2
- package/custom/SignupPage.vue +23 -60
- package/custom/SignupUnderLogin.vue +1 -1
- package/dist/custom/SignupPage.vue +23 -60
- package/dist/custom/SignupUnderLogin.vue +1 -1
- package/package.json +3 -3
package/build.log
CHANGED
|
@@ -8,5 +8,5 @@ custom/SignupPage.vue
|
|
|
8
8
|
custom/SignupUnderLogin.vue
|
|
9
9
|
custom/tsconfig.json
|
|
10
10
|
|
|
11
|
-
sent
|
|
12
|
-
total size is
|
|
11
|
+
sent 12,392 bytes received 77 bytes 24,938.00 bytes/sec
|
|
12
|
+
total size is 12,109 speedup is 0.97
|
package/custom/SignupPage.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-
|
|
2
|
+
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
|
|
3
3
|
:style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
|
|
4
4
|
'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
|
|
5
5
|
'background-size': 'cover',
|
|
@@ -26,19 +26,15 @@
|
|
|
26
26
|
class="af-signup-modal overflow-y-auto flex flex-grow
|
|
27
27
|
overflow-x-hidden z-50 min-w-[350px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
28
28
|
<div class="relative p-4 w-full max-h-full max-w-[400px]">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</h3>
|
|
36
|
-
</div>
|
|
37
|
-
<!-- Modal body -->
|
|
38
|
-
<div class="p-4 md:p-5">
|
|
29
|
+
<DialogPanel
|
|
30
|
+
class="af-login-popup max-w-none bg-lightLoginViewBackground dark:bg-darkLoginViewBackground"
|
|
31
|
+
:title="`${$t('Sign up into')} ${coreStore.config?.brandName}`"
|
|
32
|
+
:error="!requestSent ? validationError || error : null"
|
|
33
|
+
:classes="{ title: 'text-lightLoginViewTextColor dark:text-darkLoginViewTextColor' }"
|
|
34
|
+
>
|
|
39
35
|
<form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
|
|
40
36
|
<div v-if="!verifyToken" class="relative">
|
|
41
|
-
<label for="email" class="block mb-2 text-sm font-medium text-
|
|
37
|
+
<label for="email" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Your email address')}}</label>
|
|
42
38
|
<Input type="email" name="email" id="email"
|
|
43
39
|
tabindex="1"
|
|
44
40
|
autocomplete="username"
|
|
@@ -51,36 +47,27 @@
|
|
|
51
47
|
/>
|
|
52
48
|
</div>
|
|
53
49
|
<div v-if="isPasswordNeeded" class="relative">
|
|
54
|
-
<label for="password" class="block mb-2 text-sm font-medium text-
|
|
50
|
+
<label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Your password')}}</label>
|
|
55
51
|
<Input
|
|
56
52
|
tabindex="2"
|
|
57
53
|
autocomplete="new-password"
|
|
58
54
|
ref="passwordInput"
|
|
59
|
-
|
|
55
|
+
type="password"
|
|
56
|
+
passwordToggle
|
|
60
57
|
name="password" id="password"
|
|
61
58
|
v-model="password"
|
|
62
59
|
@keydown.enter="passwordConfirmationInput?.focus()"
|
|
63
60
|
:placeholder="$t('New password')"
|
|
64
61
|
class="w-full"
|
|
65
62
|
required
|
|
66
|
-
|
|
67
|
-
<template #rightIcon>
|
|
68
|
-
<button
|
|
69
|
-
type="button"
|
|
70
|
-
@click="unmasked = !unmasked"
|
|
71
|
-
class="text-gray-400 dark:text-gray-300"
|
|
72
|
-
>
|
|
73
|
-
<IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
|
|
74
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
75
|
-
</button>
|
|
76
|
-
</template>
|
|
77
|
-
</Input>
|
|
63
|
+
/>
|
|
78
64
|
</div>
|
|
79
65
|
|
|
80
66
|
<div v-if="isPasswordNeeded" class="relative">
|
|
81
|
-
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-
|
|
67
|
+
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Confirm your password')}}</label>
|
|
82
68
|
<Input
|
|
83
|
-
|
|
69
|
+
type="password"
|
|
70
|
+
passwordToggle
|
|
84
71
|
name="password_confirmation"
|
|
85
72
|
id="password_confirmation"
|
|
86
73
|
tabindex="3"
|
|
@@ -90,28 +77,7 @@
|
|
|
90
77
|
class="w-full"
|
|
91
78
|
:placeholder="$t('Confirm new password')"
|
|
92
79
|
required
|
|
93
|
-
|
|
94
|
-
<template #rightIcon>
|
|
95
|
-
<button
|
|
96
|
-
type="button"
|
|
97
|
-
@click="unmasked = !unmasked"
|
|
98
|
-
class="text-gray-400 dark:text-gray-300"
|
|
99
|
-
>
|
|
100
|
-
<IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
|
|
101
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
102
|
-
</button>
|
|
103
|
-
</template>
|
|
104
|
-
</Input>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div v-if="validationError || error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
|
108
|
-
<svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
109
|
-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
|
110
|
-
</svg>
|
|
111
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
112
|
-
<div>
|
|
113
|
-
{{ validationError || error }}
|
|
114
|
-
</div>
|
|
80
|
+
/>
|
|
115
81
|
</div>
|
|
116
82
|
|
|
117
83
|
<Button
|
|
@@ -125,14 +91,14 @@
|
|
|
125
91
|
</Button>
|
|
126
92
|
</form>
|
|
127
93
|
<!-- END of set new password -->
|
|
128
|
-
<div v-else class="flex items
|
|
94
|
+
<div v-else class="af-alert-success flex items-start gap-2.5 rounded-lg border border-lightSuccessBorder bg-lightSuccessSoft px-3.5 py-3 text-sm leading-5 text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess" role="status">
|
|
95
|
+
<IconMailCheck class="w-5 h-5 shrink-0" aria-hidden="true" />
|
|
129
96
|
{{$t('Please check your email at')}} {{ sentToEmail }} {{$t('to confirm your email address.')}}
|
|
130
97
|
</div>
|
|
131
|
-
<p class="
|
|
98
|
+
<p class="af-signup-login-link text-sm text-right -mt-1 text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
|
|
132
99
|
{{$t('Already have an account?')}} <Link :to="`/login${route.query.next ? `?next=${encodeURIComponent(route.query.next)}` : ''}`">{{ $t('login here') }}</Link>
|
|
133
100
|
</p>
|
|
134
|
-
|
|
135
|
-
</div>
|
|
101
|
+
</DialogPanel>
|
|
136
102
|
</div>
|
|
137
103
|
</div>
|
|
138
104
|
|
|
@@ -146,10 +112,8 @@ import { useCoreStore } from '@/stores/core';
|
|
|
146
112
|
import { useUserStore } from '@/stores/user';
|
|
147
113
|
import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
148
114
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
149
|
-
import {
|
|
150
|
-
import Button from '@/afcl
|
|
151
|
-
import Input from '@/afcl/Input.vue';
|
|
152
|
-
import Link from '@/afcl/Link.vue';
|
|
115
|
+
import { IconMailCheck } from '@iconify-prerendered/vue-lucide';
|
|
116
|
+
import { Button, DialogPanel, Input, Link } from '@/afcl';
|
|
153
117
|
import { useI18n } from 'vue-i18n';
|
|
154
118
|
import adminforth from '@/adminforth';
|
|
155
119
|
|
|
@@ -167,7 +131,6 @@ const passwordConfirmationInput: Ref<HTMLInputElement | null> = ref(null);
|
|
|
167
131
|
const email = ref("");
|
|
168
132
|
const password = ref("");
|
|
169
133
|
const passwordConfirmation = ref("");
|
|
170
|
-
const unmasked = ref(false);
|
|
171
134
|
const sentToEmail: Ref<string> = ref('');
|
|
172
135
|
|
|
173
136
|
const requestEmailConfirmation = computed(() => route.meta.requestEmailConfirmation);
|
|
@@ -266,7 +229,7 @@ onBeforeMount(() => {
|
|
|
266
229
|
|
|
267
230
|
onMounted(async () => {
|
|
268
231
|
emailInput.value?.focus();
|
|
269
|
-
await coreStore.
|
|
232
|
+
await coreStore.fetchConfig({ redirectToLoginIfNotLoggedIn: false });
|
|
270
233
|
|
|
271
234
|
await nextTick();
|
|
272
235
|
await router.isReady();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<p class="
|
|
2
|
+
<p class="af-signup-link text-sm text-left mt-3 text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
|
|
3
3
|
{{$t('Have no account?')}}
|
|
4
4
|
<Link :to="`/signup${route.query.next ? `?next=${encodeURIComponent(route.query.next)}` : ''}`">
|
|
5
5
|
{{$t('sign up now')}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-
|
|
2
|
+
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-lightHtml dark:bg-darkHtml w-screen h-screen"
|
|
3
3
|
:style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
|
|
4
4
|
'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
|
|
5
5
|
'background-size': 'cover',
|
|
@@ -26,19 +26,15 @@
|
|
|
26
26
|
class="af-signup-modal overflow-y-auto flex flex-grow
|
|
27
27
|
overflow-x-hidden z-50 min-w-[350px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
28
28
|
<div class="relative p-4 w-full max-h-full max-w-[400px]">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</h3>
|
|
36
|
-
</div>
|
|
37
|
-
<!-- Modal body -->
|
|
38
|
-
<div class="p-4 md:p-5">
|
|
29
|
+
<DialogPanel
|
|
30
|
+
class="af-login-popup max-w-none bg-lightLoginViewBackground dark:bg-darkLoginViewBackground"
|
|
31
|
+
:title="`${$t('Sign up into')} ${coreStore.config?.brandName}`"
|
|
32
|
+
:error="!requestSent ? validationError || error : null"
|
|
33
|
+
:classes="{ title: 'text-lightLoginViewTextColor dark:text-darkLoginViewTextColor' }"
|
|
34
|
+
>
|
|
39
35
|
<form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
|
|
40
36
|
<div v-if="!verifyToken" class="relative">
|
|
41
|
-
<label for="email" class="block mb-2 text-sm font-medium text-
|
|
37
|
+
<label for="email" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Your email address')}}</label>
|
|
42
38
|
<Input type="email" name="email" id="email"
|
|
43
39
|
tabindex="1"
|
|
44
40
|
autocomplete="username"
|
|
@@ -51,36 +47,27 @@
|
|
|
51
47
|
/>
|
|
52
48
|
</div>
|
|
53
49
|
<div v-if="isPasswordNeeded" class="relative">
|
|
54
|
-
<label for="password" class="block mb-2 text-sm font-medium text-
|
|
50
|
+
<label for="password" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Your password')}}</label>
|
|
55
51
|
<Input
|
|
56
52
|
tabindex="2"
|
|
57
53
|
autocomplete="new-password"
|
|
58
54
|
ref="passwordInput"
|
|
59
|
-
|
|
55
|
+
type="password"
|
|
56
|
+
passwordToggle
|
|
60
57
|
name="password" id="password"
|
|
61
58
|
v-model="password"
|
|
62
59
|
@keydown.enter="passwordConfirmationInput?.focus()"
|
|
63
60
|
:placeholder="$t('New password')"
|
|
64
61
|
class="w-full"
|
|
65
62
|
required
|
|
66
|
-
|
|
67
|
-
<template #rightIcon>
|
|
68
|
-
<button
|
|
69
|
-
type="button"
|
|
70
|
-
@click="unmasked = !unmasked"
|
|
71
|
-
class="text-gray-400 dark:text-gray-300"
|
|
72
|
-
>
|
|
73
|
-
<IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
|
|
74
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
75
|
-
</button>
|
|
76
|
-
</template>
|
|
77
|
-
</Input>
|
|
63
|
+
/>
|
|
78
64
|
</div>
|
|
79
65
|
|
|
80
66
|
<div v-if="isPasswordNeeded" class="relative">
|
|
81
|
-
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-
|
|
67
|
+
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-lightLoginViewTextColor dark:text-darkLoginViewTextColor">{{$t('Confirm your password')}}</label>
|
|
82
68
|
<Input
|
|
83
|
-
|
|
69
|
+
type="password"
|
|
70
|
+
passwordToggle
|
|
84
71
|
name="password_confirmation"
|
|
85
72
|
id="password_confirmation"
|
|
86
73
|
tabindex="3"
|
|
@@ -90,28 +77,7 @@
|
|
|
90
77
|
class="w-full"
|
|
91
78
|
:placeholder="$t('Confirm new password')"
|
|
92
79
|
required
|
|
93
|
-
|
|
94
|
-
<template #rightIcon>
|
|
95
|
-
<button
|
|
96
|
-
type="button"
|
|
97
|
-
@click="unmasked = !unmasked"
|
|
98
|
-
class="text-gray-400 dark:text-gray-300"
|
|
99
|
-
>
|
|
100
|
-
<IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
|
|
101
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
102
|
-
</button>
|
|
103
|
-
</template>
|
|
104
|
-
</Input>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div v-if="validationError || error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
|
108
|
-
<svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
109
|
-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
|
110
|
-
</svg>
|
|
111
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
112
|
-
<div>
|
|
113
|
-
{{ validationError || error }}
|
|
114
|
-
</div>
|
|
80
|
+
/>
|
|
115
81
|
</div>
|
|
116
82
|
|
|
117
83
|
<Button
|
|
@@ -125,14 +91,14 @@
|
|
|
125
91
|
</Button>
|
|
126
92
|
</form>
|
|
127
93
|
<!-- END of set new password -->
|
|
128
|
-
<div v-else class="flex items
|
|
94
|
+
<div v-else class="af-alert-success flex items-start gap-2.5 rounded-lg border border-lightSuccessBorder bg-lightSuccessSoft px-3.5 py-3 text-sm leading-5 text-lightSuccess dark:border-darkSuccessBorder dark:bg-darkSuccessSoft dark:text-darkSuccess" role="status">
|
|
95
|
+
<IconMailCheck class="w-5 h-5 shrink-0" aria-hidden="true" />
|
|
129
96
|
{{$t('Please check your email at')}} {{ sentToEmail }} {{$t('to confirm your email address.')}}
|
|
130
97
|
</div>
|
|
131
|
-
<p class="
|
|
98
|
+
<p class="af-signup-login-link text-sm text-right -mt-1 text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
|
|
132
99
|
{{$t('Already have an account?')}} <Link :to="`/login${route.query.next ? `?next=${encodeURIComponent(route.query.next)}` : ''}`">{{ $t('login here') }}</Link>
|
|
133
100
|
</p>
|
|
134
|
-
|
|
135
|
-
</div>
|
|
101
|
+
</DialogPanel>
|
|
136
102
|
</div>
|
|
137
103
|
</div>
|
|
138
104
|
|
|
@@ -146,10 +112,8 @@ import { useCoreStore } from '@/stores/core';
|
|
|
146
112
|
import { useUserStore } from '@/stores/user';
|
|
147
113
|
import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
148
114
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
149
|
-
import {
|
|
150
|
-
import Button from '@/afcl
|
|
151
|
-
import Input from '@/afcl/Input.vue';
|
|
152
|
-
import Link from '@/afcl/Link.vue';
|
|
115
|
+
import { IconMailCheck } from '@iconify-prerendered/vue-lucide';
|
|
116
|
+
import { Button, DialogPanel, Input, Link } from '@/afcl';
|
|
153
117
|
import { useI18n } from 'vue-i18n';
|
|
154
118
|
import adminforth from '@/adminforth';
|
|
155
119
|
|
|
@@ -167,7 +131,6 @@ const passwordConfirmationInput: Ref<HTMLInputElement | null> = ref(null);
|
|
|
167
131
|
const email = ref("");
|
|
168
132
|
const password = ref("");
|
|
169
133
|
const passwordConfirmation = ref("");
|
|
170
|
-
const unmasked = ref(false);
|
|
171
134
|
const sentToEmail: Ref<string> = ref('');
|
|
172
135
|
|
|
173
136
|
const requestEmailConfirmation = computed(() => route.meta.requestEmailConfirmation);
|
|
@@ -266,7 +229,7 @@ onBeforeMount(() => {
|
|
|
266
229
|
|
|
267
230
|
onMounted(async () => {
|
|
268
231
|
emailInput.value?.focus();
|
|
269
|
-
await coreStore.
|
|
232
|
+
await coreStore.fetchConfig({ redirectToLoginIfNotLoggedIn: false });
|
|
270
233
|
|
|
271
234
|
await nextTick();
|
|
272
235
|
await router.isReady();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<p class="
|
|
2
|
+
<p class="af-signup-link text-sm text-left mt-3 text-lightLoginViewSubTextColor dark:text-darkLoginViewSubTextColor">
|
|
3
3
|
{{$t('Have no account?')}}
|
|
4
4
|
<Link :to="`/signup${route.query.next ? `?next=${encodeURIComponent(route.query.next)}` : ''}`">
|
|
5
5
|
{{$t('sign up now')}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adminforth/open-signup",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"zod": "^4.3.6"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"adminforth": "^
|
|
30
|
+
"adminforth": "^4.6.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@types/node": "^22.10.7",
|
|
34
|
-
"adminforth": "^
|
|
34
|
+
"adminforth": "^4.7.3",
|
|
35
35
|
"semantic-release": "^24.2.1",
|
|
36
36
|
"semantic-release-slack-bot": "^4.0.2",
|
|
37
37
|
"typescript": "^5.7.3"
|