@adminforth/open-signup 1.1.5 → 1.1.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/build.log +2 -2
- package/custom/SignupPage.vue +47 -38
- package/dist/custom/SignupPage.vue +47 -38
- package/package.json +1 -1
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 14,
|
|
12
|
-
total size is
|
|
11
|
+
sent 14,168 bytes received 77 bytes 28,490.00 bytes/sec
|
|
12
|
+
total size is 13,879 speedup is 0.97
|
package/custom/SignupPage.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
|
|
2
|
+
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative 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',
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
<!-- Main modal -->
|
|
25
25
|
<div id="authentication-modal" tabindex="-1"
|
|
26
|
-
class="overflow-y-auto flex flex-grow
|
|
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
29
|
<!-- Modal content -->
|
|
@@ -39,61 +39,69 @@
|
|
|
39
39
|
<form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
|
|
40
40
|
<div v-if="!verifyToken" class="relative">
|
|
41
41
|
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Your email address')}}</label>
|
|
42
|
-
<
|
|
42
|
+
<Input type="email" name="email" id="email"
|
|
43
43
|
tabindex="1"
|
|
44
|
-
autocomplete="username"
|
|
44
|
+
autocomplete="username"
|
|
45
45
|
@keydown.enter="passwordInput?.focus()"
|
|
46
46
|
ref="emailInput"
|
|
47
|
-
|
|
47
|
+
v-model="email"
|
|
48
|
+
class="w-full"
|
|
48
49
|
placeholder="name@company.com"
|
|
49
50
|
required
|
|
50
51
|
/>
|
|
51
52
|
</div>
|
|
52
53
|
<div v-if="isPasswordNeeded" class="relative">
|
|
53
54
|
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Your password')}}</label>
|
|
54
|
-
<
|
|
55
|
+
<Input
|
|
55
56
|
tabindex="2"
|
|
56
57
|
autocomplete="new-password"
|
|
57
58
|
ref="passwordInput"
|
|
58
59
|
:type="unmasked ? 'text' : 'password'"
|
|
59
|
-
name="password" id="password"
|
|
60
|
+
name="password" id="password"
|
|
60
61
|
v-model="password"
|
|
61
62
|
@keydown.enter="passwordConfirmationInput?.focus()"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<button
|
|
67
|
-
type="button"
|
|
68
|
-
@click="unmasked = !unmasked"
|
|
69
|
-
class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
|
|
63
|
+
:placeholder="$t('New password')"
|
|
64
|
+
class="w-full"
|
|
65
|
+
required
|
|
70
66
|
>
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
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>
|
|
74
78
|
</div>
|
|
75
79
|
|
|
76
80
|
<div v-if="isPasswordNeeded" class="relative">
|
|
77
81
|
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Confirm your password')}}</label>
|
|
78
|
-
<
|
|
79
|
-
ref="passwordConfirmationInput"
|
|
80
|
-
autocomplete="new-password"
|
|
82
|
+
<Input
|
|
81
83
|
:type="unmasked ? 'text' : 'password'"
|
|
82
|
-
name="password_confirmation"
|
|
84
|
+
name="password_confirmation"
|
|
85
|
+
id="password_confirmation"
|
|
83
86
|
tabindex="3"
|
|
87
|
+
ref="passwordConfirmationInput"
|
|
88
|
+
autocomplete="new-password"
|
|
84
89
|
v-model="passwordConfirmation"
|
|
85
|
-
class="
|
|
86
|
-
:placeholder="$t('Confirm new password')"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<button
|
|
90
|
-
type="button"
|
|
91
|
-
@click="unmasked = !unmasked"
|
|
92
|
-
class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
|
|
90
|
+
class="w-full"
|
|
91
|
+
:placeholder="$t('Confirm new password')"
|
|
92
|
+
required
|
|
93
93
|
>
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
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>
|
|
97
105
|
</div>
|
|
98
106
|
|
|
99
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">
|
|
@@ -116,7 +124,7 @@
|
|
|
116
124
|
{{$t('Sign up')}}
|
|
117
125
|
</Button>
|
|
118
126
|
</form>
|
|
119
|
-
<!-- END of set new
|
|
127
|
+
<!-- END of set new password -->
|
|
120
128
|
<div v-else class="flex items center justify-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-green-800 dark:text-green-400" role="alert">
|
|
121
129
|
{{$t('Please check your email at')}} {{ sentToEmail }} {{$t('to confirm your email address.')}}
|
|
122
130
|
</div>
|
|
@@ -140,6 +148,7 @@ import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
|
140
148
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
141
149
|
import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
|
|
142
150
|
import Button from '@/afcl/Button.vue';
|
|
151
|
+
import Input from '@/afcl/Input.vue';
|
|
143
152
|
import Link from '@/afcl/Link.vue';
|
|
144
153
|
import { useI18n } from 'vue-i18n';
|
|
145
154
|
import adminforth from '@/adminforth';
|
|
@@ -155,6 +164,7 @@ const emailInput: Ref<HTMLInputElement | null> = ref(null);
|
|
|
155
164
|
const passwordInput: Ref<HTMLInputElement | null> = ref(null);
|
|
156
165
|
const passwordConfirmationInput: Ref<HTMLInputElement | null> = ref(null);
|
|
157
166
|
|
|
167
|
+
const email = ref("");
|
|
158
168
|
const password = ref("");
|
|
159
169
|
const passwordConfirmation = ref("");
|
|
160
170
|
const unmasked = ref(false);
|
|
@@ -274,8 +284,7 @@ onMounted(async () => {
|
|
|
274
284
|
|
|
275
285
|
async function doSignup() {
|
|
276
286
|
error.value = null;
|
|
277
|
-
|
|
278
|
-
if (!email) {
|
|
287
|
+
if (!email.value) {
|
|
279
288
|
error.value = t('Please enter your email');
|
|
280
289
|
return;
|
|
281
290
|
}
|
|
@@ -289,7 +298,7 @@ async function doSignup() {
|
|
|
289
298
|
path: `/plugin/${route.meta.pluginInstanceId}/signup`,
|
|
290
299
|
method: 'POST',
|
|
291
300
|
body: {
|
|
292
|
-
email,
|
|
301
|
+
email: email.value,
|
|
293
302
|
url: window.location.origin + window.location.pathname,
|
|
294
303
|
...(!requestEmailConfirmation.value ? {password: password.value} : {}),
|
|
295
304
|
}
|
|
@@ -300,7 +309,7 @@ async function doSignup() {
|
|
|
300
309
|
} else {
|
|
301
310
|
error.value = null;
|
|
302
311
|
requestSent.value = true;
|
|
303
|
-
sentToEmail.value = email;
|
|
312
|
+
sentToEmail.value = email.value;
|
|
304
313
|
if (resp.redirectTo && !requestEmailConfirmation.value) {
|
|
305
314
|
router.push(resp.redirectTo);
|
|
306
315
|
} else if (!requestEmailConfirmation.value) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
|
|
2
|
+
<div class="af-signup-page relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative 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',
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
<!-- Main modal -->
|
|
25
25
|
<div id="authentication-modal" tabindex="-1"
|
|
26
|
-
class="overflow-y-auto flex flex-grow
|
|
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
29
|
<!-- Modal content -->
|
|
@@ -39,61 +39,69 @@
|
|
|
39
39
|
<form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
|
|
40
40
|
<div v-if="!verifyToken" class="relative">
|
|
41
41
|
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Your email address')}}</label>
|
|
42
|
-
<
|
|
42
|
+
<Input type="email" name="email" id="email"
|
|
43
43
|
tabindex="1"
|
|
44
|
-
autocomplete="username"
|
|
44
|
+
autocomplete="username"
|
|
45
45
|
@keydown.enter="passwordInput?.focus()"
|
|
46
46
|
ref="emailInput"
|
|
47
|
-
|
|
47
|
+
v-model="email"
|
|
48
|
+
class="w-full"
|
|
48
49
|
placeholder="name@company.com"
|
|
49
50
|
required
|
|
50
51
|
/>
|
|
51
52
|
</div>
|
|
52
53
|
<div v-if="isPasswordNeeded" class="relative">
|
|
53
54
|
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Your password')}}</label>
|
|
54
|
-
<
|
|
55
|
+
<Input
|
|
55
56
|
tabindex="2"
|
|
56
57
|
autocomplete="new-password"
|
|
57
58
|
ref="passwordInput"
|
|
58
59
|
:type="unmasked ? 'text' : 'password'"
|
|
59
|
-
name="password" id="password"
|
|
60
|
+
name="password" id="password"
|
|
60
61
|
v-model="password"
|
|
61
62
|
@keydown.enter="passwordConfirmationInput?.focus()"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<button
|
|
67
|
-
type="button"
|
|
68
|
-
@click="unmasked = !unmasked"
|
|
69
|
-
class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
|
|
63
|
+
:placeholder="$t('New password')"
|
|
64
|
+
class="w-full"
|
|
65
|
+
required
|
|
70
66
|
>
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
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>
|
|
74
78
|
</div>
|
|
75
79
|
|
|
76
80
|
<div v-if="isPasswordNeeded" class="relative">
|
|
77
81
|
<label for="password_confirmation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{$t('Confirm your password')}}</label>
|
|
78
|
-
<
|
|
79
|
-
ref="passwordConfirmationInput"
|
|
80
|
-
autocomplete="new-password"
|
|
82
|
+
<Input
|
|
81
83
|
:type="unmasked ? 'text' : 'password'"
|
|
82
|
-
name="password_confirmation"
|
|
84
|
+
name="password_confirmation"
|
|
85
|
+
id="password_confirmation"
|
|
83
86
|
tabindex="3"
|
|
87
|
+
ref="passwordConfirmationInput"
|
|
88
|
+
autocomplete="new-password"
|
|
84
89
|
v-model="passwordConfirmation"
|
|
85
|
-
class="
|
|
86
|
-
:placeholder="$t('Confirm new password')"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<button
|
|
90
|
-
type="button"
|
|
91
|
-
@click="unmasked = !unmasked"
|
|
92
|
-
class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
|
|
90
|
+
class="w-full"
|
|
91
|
+
:placeholder="$t('Confirm new password')"
|
|
92
|
+
required
|
|
93
93
|
>
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
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>
|
|
97
105
|
</div>
|
|
98
106
|
|
|
99
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">
|
|
@@ -116,7 +124,7 @@
|
|
|
116
124
|
{{$t('Sign up')}}
|
|
117
125
|
</Button>
|
|
118
126
|
</form>
|
|
119
|
-
<!-- END of set new
|
|
127
|
+
<!-- END of set new password -->
|
|
120
128
|
<div v-else class="flex items center justify-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-green-800 dark:text-green-400" role="alert">
|
|
121
129
|
{{$t('Please check your email at')}} {{ sentToEmail }} {{$t('to confirm your email address.')}}
|
|
122
130
|
</div>
|
|
@@ -140,6 +148,7 @@ import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
|
140
148
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
141
149
|
import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
|
|
142
150
|
import Button from '@/afcl/Button.vue';
|
|
151
|
+
import Input from '@/afcl/Input.vue';
|
|
143
152
|
import Link from '@/afcl/Link.vue';
|
|
144
153
|
import { useI18n } from 'vue-i18n';
|
|
145
154
|
import adminforth from '@/adminforth';
|
|
@@ -155,6 +164,7 @@ const emailInput: Ref<HTMLInputElement | null> = ref(null);
|
|
|
155
164
|
const passwordInput: Ref<HTMLInputElement | null> = ref(null);
|
|
156
165
|
const passwordConfirmationInput: Ref<HTMLInputElement | null> = ref(null);
|
|
157
166
|
|
|
167
|
+
const email = ref("");
|
|
158
168
|
const password = ref("");
|
|
159
169
|
const passwordConfirmation = ref("");
|
|
160
170
|
const unmasked = ref(false);
|
|
@@ -274,8 +284,7 @@ onMounted(async () => {
|
|
|
274
284
|
|
|
275
285
|
async function doSignup() {
|
|
276
286
|
error.value = null;
|
|
277
|
-
|
|
278
|
-
if (!email) {
|
|
287
|
+
if (!email.value) {
|
|
279
288
|
error.value = t('Please enter your email');
|
|
280
289
|
return;
|
|
281
290
|
}
|
|
@@ -289,7 +298,7 @@ async function doSignup() {
|
|
|
289
298
|
path: `/plugin/${route.meta.pluginInstanceId}/signup`,
|
|
290
299
|
method: 'POST',
|
|
291
300
|
body: {
|
|
292
|
-
email,
|
|
301
|
+
email: email.value,
|
|
293
302
|
url: window.location.origin + window.location.pathname,
|
|
294
303
|
...(!requestEmailConfirmation.value ? {password: password.value} : {}),
|
|
295
304
|
}
|
|
@@ -300,7 +309,7 @@ async function doSignup() {
|
|
|
300
309
|
} else {
|
|
301
310
|
error.value = null;
|
|
302
311
|
requestSent.value = true;
|
|
303
|
-
sentToEmail.value = email;
|
|
312
|
+
sentToEmail.value = email.value;
|
|
304
313
|
if (resp.redirectTo && !requestEmailConfirmation.value) {
|
|
305
314
|
router.push(resp.redirectTo);
|
|
306
315
|
} else if (!requestEmailConfirmation.value) {
|