@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.
Files changed (4) hide show
  1. package/build.log +2 -2
  2. package/custom/SignupPage.vue +47 -38
  3. package/dist/custom/SignupPage.vue +47 -38
  4. 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,444 bytes received 77 bytes 29,042.00 bytes/sec
12
- total size is 14,155 speedup is 0.97
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
- <input type="email" name="email" id="email"
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
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
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
- <input
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
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
63
- :placeholder="$t('New password')" required
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
- <IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
72
- <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
73
- </button>
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
- <input
79
- ref="passwordConfirmationInput"
80
- autocomplete="new-password"
82
+ <Input
81
83
  :type="unmasked ? 'text' : 'password'"
82
- name="password_confirmation" id="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="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
86
- :placeholder="$t('Confirm new password')" required
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
- <IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
95
- <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
96
- </button>
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 paasord -->
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
- const email = emailInput.value!.value;
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) {
package/dist/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
- <input type="email" name="email" id="email"
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
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
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
- <input
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
- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
63
- :placeholder="$t('New password')" required
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
- <IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
72
- <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
73
- </button>
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
- <input
79
- ref="passwordConfirmationInput"
80
- autocomplete="new-password"
82
+ <Input
81
83
  :type="unmasked ? 'text' : 'password'"
82
- name="password_confirmation" id="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="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
86
- :placeholder="$t('Confirm new password')" required
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
- <IconEyeSolid class="w-6 h-6 text-gray-400" v-if="!unmasked" />
95
- <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
96
- </button>
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 paasord -->
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
- const email = emailInput.value!.value;
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) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adminforth/open-signup",
3
- "version": "1.1.5",
3
+ "version": "1.1.6",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "type": "module",