@adminforth/email-invite 1.2.5 → 1.3.0
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 +4 -2
- package/custom/AuthCard.vue +37 -0
- package/custom/PasswordField.vue +55 -0
- package/custom/SetPassword.vue +99 -134
- package/dist/custom/AuthCard.vue +37 -0
- package/dist/custom/PasswordField.vue +55 -0
- package/dist/custom/SetPassword.vue +99 -134
- package/package.json +1 -1
package/build.log
CHANGED
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
sending incremental file list
|
|
6
6
|
custom/
|
|
7
|
+
custom/AuthCard.vue
|
|
8
|
+
custom/PasswordField.vue
|
|
7
9
|
custom/SetPassword.vue
|
|
8
10
|
custom/tsconfig.json
|
|
9
11
|
|
|
10
|
-
sent
|
|
11
|
-
total size is
|
|
12
|
+
sent 13,299 bytes received 96 bytes 26,790.00 bytes/sec
|
|
13
|
+
total size is 12,950 speedup is 0.97
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="af-auth-card relative flex flex-col w-full max-w-[460px] overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
|
|
3
|
+
<div class="af-auth-card-header flex items-start gap-3.5 border-b border-lightDialogBreakLine px-6 py-5 dark:border-darkDialogBreakLine">
|
|
4
|
+
<div class="af-auth-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
|
|
5
|
+
<slot name="icon" />
|
|
6
|
+
</div>
|
|
7
|
+
<div class="af-auth-card-title-wrap flex-1 min-w-0">
|
|
8
|
+
<slot name="title">
|
|
9
|
+
<p class="af-auth-card-title text-[17px] leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
|
|
10
|
+
<p class="af-auth-card-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
|
|
11
|
+
</slot>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="af-auth-card-body flex flex-col gap-4 px-6 pt-5 pb-6">
|
|
16
|
+
<slot />
|
|
17
|
+
<p v-if="error" role="alert" class="af-auth-card-error -mt-1.5 flex items-center gap-1.5 text-[13px] text-red-600 dark:text-red-400">
|
|
18
|
+
<IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
|
|
19
|
+
{{ error }}
|
|
20
|
+
</p>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div v-if="$slots.footer" class="af-auth-card-footer flex flex-wrap items-center justify-end gap-x-3 gap-y-2 border-t border-lightDialogBreakLine bg-gray-50 py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-gray-800/50">
|
|
24
|
+
<slot name="footer" />
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script setup lang="ts">
|
|
30
|
+
import { IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
|
|
31
|
+
|
|
32
|
+
defineProps<{
|
|
33
|
+
title: string;
|
|
34
|
+
subtitle: string;
|
|
35
|
+
error?: string | null;
|
|
36
|
+
}>();
|
|
37
|
+
</script>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="af-password-field">
|
|
3
|
+
<label :for="id" class="mb-2 block text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ label }}</label>
|
|
4
|
+
<div class="relative">
|
|
5
|
+
<input
|
|
6
|
+
ref="input"
|
|
7
|
+
v-model="model"
|
|
8
|
+
:id="id"
|
|
9
|
+
:name="id"
|
|
10
|
+
:type="unmasked ? 'text' : 'password'"
|
|
11
|
+
:placeholder="placeholder"
|
|
12
|
+
autocomplete="new-password"
|
|
13
|
+
required
|
|
14
|
+
class="h-11 w-full rounded-[10px] border-[1.5px] bg-gray-50 pl-3.5 pr-12 text-[15px] text-gray-900 placeholder-gray-400 outline-none focus:ring-4 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
|
|
15
|
+
:class="invalid
|
|
16
|
+
? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
|
|
17
|
+
: 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25'"
|
|
18
|
+
/>
|
|
19
|
+
<button
|
|
20
|
+
type="button"
|
|
21
|
+
:aria-label="unmasked ? $t('Hide password') : $t('Show password')"
|
|
22
|
+
class="absolute right-1 top-1 inline-flex w-9 h-9 items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
|
23
|
+
@click="emit('toggle')"
|
|
24
|
+
>
|
|
25
|
+
<IconEyeOutline v-if="!unmasked" class="w-5 h-5" />
|
|
26
|
+
<IconEyeSlashOutline v-else class="w-5 h-5" />
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { ref } from 'vue';
|
|
34
|
+
import { IconEyeOutline, IconEyeSlashOutline } from '@iconify-prerendered/vue-flowbite';
|
|
35
|
+
|
|
36
|
+
const model = defineModel<string>({ required: true });
|
|
37
|
+
|
|
38
|
+
defineProps<{
|
|
39
|
+
id: string;
|
|
40
|
+
label: string;
|
|
41
|
+
placeholder: string;
|
|
42
|
+
unmasked: boolean;
|
|
43
|
+
invalid?: boolean;
|
|
44
|
+
}>();
|
|
45
|
+
|
|
46
|
+
const emit = defineEmits<{
|
|
47
|
+
(e: 'toggle'): void;
|
|
48
|
+
}>();
|
|
49
|
+
|
|
50
|
+
const input = ref<HTMLInputElement | null>(null);
|
|
51
|
+
|
|
52
|
+
defineExpose({
|
|
53
|
+
focus: () => input.value!.focus(),
|
|
54
|
+
});
|
|
55
|
+
</script>
|
package/custom/SetPassword.vue
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
|
|
8
8
|
}: {}"
|
|
9
9
|
>
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
<img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
|
|
12
12
|
:src="loadFile(coreStore.config?.loginBackgroundImage)"
|
|
13
13
|
class="position-absolute top-0 left-0 h-screen object-cover w-0"
|
|
@@ -22,144 +22,98 @@
|
|
|
22
22
|
/>
|
|
23
23
|
|
|
24
24
|
<!-- Main modal -->
|
|
25
|
-
<div id="authentication-modal" tabindex="-1"
|
|
25
|
+
<div id="authentication-modal" tabindex="-1"
|
|
26
26
|
class="af-set-password-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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
101
|
-
</button>
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
<div v-if="validationError || error" class="af-alert-error 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">
|
|
105
|
-
<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">
|
|
106
|
-
<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"/>
|
|
107
|
-
</svg>
|
|
108
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
109
|
-
<div>
|
|
110
|
-
{{ validationError || error }}
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<Button
|
|
115
|
-
:disabled="inProgress || (validationRunning && validationError)"
|
|
116
|
-
@click="setPassword"
|
|
117
|
-
class="w-full">
|
|
118
|
-
<svg v-if="inProgress"
|
|
119
|
-
aria-hidden="true" class="w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
120
|
-
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
|
|
121
|
-
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
|
|
122
|
-
</svg>
|
|
123
|
-
{{$t('Set Password')}}
|
|
124
|
-
</Button>
|
|
125
|
-
</form>
|
|
126
|
-
|
|
127
|
-
<!-- Invalid token message -->
|
|
128
|
-
<div v-if="!tokenValid && !loading" 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">
|
|
129
|
-
<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">
|
|
130
|
-
<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"/>
|
|
131
|
-
</svg>
|
|
132
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
133
|
-
<div>
|
|
134
|
-
<p class="mb-2">{{$t('This invitation link is invalid or has expired.')}}</p>
|
|
135
|
-
<Link to="/login">{{$t('Go to Login')}}</Link>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<!-- Loading state -->
|
|
140
|
-
<div v-if="loading" class="flex items-center justify-center p-8">
|
|
141
|
-
<svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
142
|
-
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
|
|
143
|
-
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
|
|
144
|
-
</svg>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
28
|
+
<div class="relative flex w-full max-h-full justify-center p-4">
|
|
29
|
+
<AuthCard
|
|
30
|
+
class="af-login-popup"
|
|
31
|
+
:title="header.title"
|
|
32
|
+
:subtitle="header.subtitle"
|
|
33
|
+
:error="tokenValid && !passwordSet ? validationError || error : null"
|
|
34
|
+
>
|
|
35
|
+
<template #icon><IconUserAddOutline class="w-6 h-6" /></template>
|
|
36
|
+
|
|
37
|
+
<div v-if="loading" class="flex justify-center py-6">
|
|
38
|
+
<Spinner class="w-8 h-8" />
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<p v-else-if="!tokenValid" role="alert" class="af-alert-error flex items-start gap-2.5 rounded-[10px] border border-red-200 bg-red-50 px-3.5 py-3 text-[13px] leading-[19px] text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300">
|
|
42
|
+
<IconExclamationCircleOutline class="w-[18px] h-[18px] shrink-0" />
|
|
43
|
+
{{ $t('This invitation link is invalid or has expired. Ask your administrator to send a new one.') }}
|
|
44
|
+
</p>
|
|
45
|
+
|
|
46
|
+
<template v-else-if="passwordSet">
|
|
47
|
+
<p role="status" class="af-alert-success flex items-start gap-2.5 rounded-[10px] border border-green-200 bg-green-50 px-3.5 py-3 text-[13px] leading-[19px] text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
|
|
48
|
+
<IconCheckCircleOutline class="w-[18px] h-[18px] shrink-0" />
|
|
49
|
+
{{ isUserLoggedIn ? $t('Password set successfully to your new account.') : $t('Password set successfully! Log in with your email and the new password.') }}
|
|
50
|
+
</p>
|
|
51
|
+
<p v-if="isUserLoggedIn" class="text-sm text-gray-700 dark:text-gray-300">
|
|
52
|
+
{{ $t('You are still logged in to another account. Stay in it, or log out to log in to the new one.') }}
|
|
53
|
+
</p>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<template v-else>
|
|
57
|
+
<PasswordField
|
|
58
|
+
v-model="password"
|
|
59
|
+
id="password"
|
|
60
|
+
:label="$t('Password')"
|
|
61
|
+
:placeholder="$t('Enter your password')"
|
|
62
|
+
:unmasked="unmasked"
|
|
63
|
+
:invalid="Boolean(validationError)"
|
|
64
|
+
@toggle="unmasked = !unmasked"
|
|
65
|
+
@keydown.enter="passwordConfirmationInput!.focus()"
|
|
66
|
+
/>
|
|
67
|
+
<PasswordField
|
|
68
|
+
ref="passwordConfirmationInput"
|
|
69
|
+
v-model="passwordConfirmation"
|
|
70
|
+
id="password_confirmation"
|
|
71
|
+
:label="$t('Confirm password')"
|
|
72
|
+
:placeholder="$t('Confirm your password')"
|
|
73
|
+
:unmasked="unmasked"
|
|
74
|
+
:invalid="Boolean(validationError)"
|
|
75
|
+
@toggle="unmasked = !unmasked"
|
|
76
|
+
@keydown.enter="setPassword"
|
|
77
|
+
/>
|
|
78
|
+
</template>
|
|
79
|
+
|
|
80
|
+
<template v-if="!loading" #footer>
|
|
81
|
+
<LinkButton v-if="!tokenValid" to="/login" variant="secondary" class="whitespace-nowrap">{{ $t('Go to login') }}</LinkButton>
|
|
82
|
+
<template v-else-if="passwordSet && isUserLoggedIn">
|
|
83
|
+
<Button variant="secondary" class="whitespace-nowrap" @click="logoutUser">{{ $t('Log out') }}</Button>
|
|
84
|
+
<Button class="whitespace-nowrap" @click="stayLoggedIn">{{ $t('Stay logged in') }}</Button>
|
|
85
|
+
</template>
|
|
86
|
+
<LinkButton v-else-if="passwordSet" to="/login" class="whitespace-nowrap">{{ $t('Go to login') }}</LinkButton>
|
|
87
|
+
<Button
|
|
88
|
+
v-else
|
|
89
|
+
:loader="inProgress"
|
|
90
|
+
:disabled="inProgress || (validationRunning && validationError)"
|
|
91
|
+
class="whitespace-nowrap"
|
|
92
|
+
@click="setPassword"
|
|
93
|
+
>
|
|
94
|
+
{{ $t('Set password') }}
|
|
95
|
+
</Button>
|
|
96
|
+
</template>
|
|
97
|
+
</AuthCard>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
150
100
|
|
|
151
101
|
</div>
|
|
152
102
|
</template>
|
|
153
103
|
|
|
154
104
|
<script setup lang="ts">
|
|
155
105
|
import { onMounted, ref, computed, Ref } from 'vue';
|
|
106
|
+
import { useI18n } from 'vue-i18n';
|
|
156
107
|
import { useCoreStore } from '@/stores/core';
|
|
157
108
|
import { useUserStore } from '@/stores/user';
|
|
158
109
|
import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
159
110
|
import { useRoute, useRouter } from 'vue-router';
|
|
160
|
-
import {
|
|
161
|
-
import Button from '@/afcl
|
|
162
|
-
import
|
|
111
|
+
import { IconCheckCircleOutline, IconExclamationCircleOutline, IconUserAddOutline } from '@iconify-prerendered/vue-flowbite';
|
|
112
|
+
import { Button, LinkButton, Spinner } from '@/afcl';
|
|
113
|
+
import AuthCard from './AuthCard.vue';
|
|
114
|
+
import PasswordField from './PasswordField.vue';
|
|
115
|
+
|
|
116
|
+
const { t } = useI18n();
|
|
163
117
|
|
|
164
118
|
const inProgress = ref(false);
|
|
165
119
|
const loading = ref(true);
|
|
@@ -169,7 +123,7 @@ const passwordSet = ref(false);
|
|
|
169
123
|
const userStore = useUserStore();
|
|
170
124
|
const coreStore = useCoreStore();
|
|
171
125
|
|
|
172
|
-
const passwordConfirmationInput = ref(null);
|
|
126
|
+
const passwordConfirmationInput = ref<InstanceType<typeof PasswordField> | null>(null);
|
|
173
127
|
const password = ref("");
|
|
174
128
|
const passwordConfirmation = ref("");
|
|
175
129
|
const unmasked = ref(false);
|
|
@@ -180,7 +134,18 @@ const router = useRouter();
|
|
|
180
134
|
const validationRunning = ref(false);
|
|
181
135
|
const error = ref(null);
|
|
182
136
|
|
|
183
|
-
const isUserLoggedIn = localStorage.getItem('isAuthorized');
|
|
137
|
+
const isUserLoggedIn = localStorage.getItem('isAuthorized') === 'true';
|
|
138
|
+
|
|
139
|
+
const header = computed(() => {
|
|
140
|
+
const brand = coreStore.config?.brandName;
|
|
141
|
+
if (passwordSet.value) {
|
|
142
|
+
return {
|
|
143
|
+
title: t('Password set'),
|
|
144
|
+
subtitle: isUserLoggedIn ? t('Your new {brand} account is ready', { brand }) : t('Your {brand} account is ready', { brand }),
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
return { title: t('Set your password'), subtitle: t('Create a password for your {brand} account', { brand }) };
|
|
148
|
+
});
|
|
184
149
|
|
|
185
150
|
const backgroundPosition = computed(() => {
|
|
186
151
|
return coreStore.config?.loginBackgroundPosition || '1/2';
|
|
@@ -228,7 +193,7 @@ const validationError = computed(() => {
|
|
|
228
193
|
onMounted(async () => {
|
|
229
194
|
loading.value = true;
|
|
230
195
|
await coreStore.getPublicConfig();
|
|
231
|
-
|
|
196
|
+
|
|
232
197
|
// Check if token is present and valid
|
|
233
198
|
const token = route.query.token;
|
|
234
199
|
if (token) {
|
|
@@ -236,13 +201,13 @@ onMounted(async () => {
|
|
|
236
201
|
} else {
|
|
237
202
|
tokenValid.value = false;
|
|
238
203
|
}
|
|
239
|
-
|
|
204
|
+
|
|
240
205
|
loading.value = false;
|
|
241
206
|
});
|
|
242
207
|
|
|
243
208
|
async function setPassword() {
|
|
244
209
|
error.value = null;
|
|
245
|
-
|
|
210
|
+
|
|
246
211
|
if (checkPassword()) {
|
|
247
212
|
validationRunning.value = true;
|
|
248
213
|
return;
|
|
@@ -260,7 +225,7 @@ async function setPassword() {
|
|
|
260
225
|
}
|
|
261
226
|
});
|
|
262
227
|
inProgress.value = false;
|
|
263
|
-
|
|
228
|
+
|
|
264
229
|
if (resp.error) {
|
|
265
230
|
error.value = resp.error;
|
|
266
231
|
if (resp.error.includes('Invalid') || resp.error.includes('expired')) {
|
|
@@ -286,4 +251,4 @@ function stayLoggedIn() {
|
|
|
286
251
|
router.push({ name: 'home' });
|
|
287
252
|
}
|
|
288
253
|
}
|
|
289
|
-
</script>
|
|
254
|
+
</script>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="af-auth-card relative flex flex-col w-full max-w-[460px] overflow-hidden rounded-xl border border-lightDialogBreakLine bg-lightDialogBackgorund shadow-2xl dark:border-darkDialogBreakLine dark:bg-darkDialogBackgorund">
|
|
3
|
+
<div class="af-auth-card-header flex items-start gap-3.5 border-b border-lightDialogBreakLine px-6 py-5 dark:border-darkDialogBreakLine">
|
|
4
|
+
<div class="af-auth-card-icon flex w-10 h-10 shrink-0 items-center justify-center rounded-[10px] bg-lightPrimary/10 text-lightPrimary dark:bg-darkPrimary/20 dark:text-darkPrimary">
|
|
5
|
+
<slot name="icon" />
|
|
6
|
+
</div>
|
|
7
|
+
<div class="af-auth-card-title-wrap flex-1 min-w-0">
|
|
8
|
+
<slot name="title">
|
|
9
|
+
<p class="af-auth-card-title text-[17px] leading-6 font-semibold text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ title }}</p>
|
|
10
|
+
<p class="af-auth-card-subtitle mt-0.5 text-[13px] leading-[18px] text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
|
|
11
|
+
</slot>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div class="af-auth-card-body flex flex-col gap-4 px-6 pt-5 pb-6">
|
|
16
|
+
<slot />
|
|
17
|
+
<p v-if="error" role="alert" class="af-auth-card-error -mt-1.5 flex items-center gap-1.5 text-[13px] text-red-600 dark:text-red-400">
|
|
18
|
+
<IconExclamationCircleOutline class="w-4 h-4 shrink-0" />
|
|
19
|
+
{{ error }}
|
|
20
|
+
</p>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div v-if="$slots.footer" class="af-auth-card-footer flex flex-wrap items-center justify-end gap-x-3 gap-y-2 border-t border-lightDialogBreakLine bg-gray-50 py-3 pl-6 pr-5 dark:border-darkDialogBreakLine dark:bg-gray-800/50">
|
|
24
|
+
<slot name="footer" />
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script setup lang="ts">
|
|
30
|
+
import { IconExclamationCircleOutline } from '@iconify-prerendered/vue-flowbite';
|
|
31
|
+
|
|
32
|
+
defineProps<{
|
|
33
|
+
title: string;
|
|
34
|
+
subtitle: string;
|
|
35
|
+
error?: string | null;
|
|
36
|
+
}>();
|
|
37
|
+
</script>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="af-password-field">
|
|
3
|
+
<label :for="id" class="mb-2 block text-[13px] font-medium text-gray-700 dark:text-gray-300">{{ label }}</label>
|
|
4
|
+
<div class="relative">
|
|
5
|
+
<input
|
|
6
|
+
ref="input"
|
|
7
|
+
v-model="model"
|
|
8
|
+
:id="id"
|
|
9
|
+
:name="id"
|
|
10
|
+
:type="unmasked ? 'text' : 'password'"
|
|
11
|
+
:placeholder="placeholder"
|
|
12
|
+
autocomplete="new-password"
|
|
13
|
+
required
|
|
14
|
+
class="h-11 w-full rounded-[10px] border-[1.5px] bg-gray-50 pl-3.5 pr-12 text-[15px] text-gray-900 placeholder-gray-400 outline-none focus:ring-4 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
|
|
15
|
+
:class="invalid
|
|
16
|
+
? 'border-red-500 focus:border-red-500 focus:ring-red-500/25 dark:border-red-400 dark:focus:border-red-400'
|
|
17
|
+
: 'border-gray-300 focus:border-lightPrimary focus:ring-lightPrimary/25 dark:border-gray-600 dark:focus:border-darkPrimary dark:focus:ring-darkPrimary/25'"
|
|
18
|
+
/>
|
|
19
|
+
<button
|
|
20
|
+
type="button"
|
|
21
|
+
:aria-label="unmasked ? $t('Hide password') : $t('Show password')"
|
|
22
|
+
class="absolute right-1 top-1 inline-flex w-9 h-9 items-center justify-center rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
|
|
23
|
+
@click="emit('toggle')"
|
|
24
|
+
>
|
|
25
|
+
<IconEyeOutline v-if="!unmasked" class="w-5 h-5" />
|
|
26
|
+
<IconEyeSlashOutline v-else class="w-5 h-5" />
|
|
27
|
+
</button>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { ref } from 'vue';
|
|
34
|
+
import { IconEyeOutline, IconEyeSlashOutline } from '@iconify-prerendered/vue-flowbite';
|
|
35
|
+
|
|
36
|
+
const model = defineModel<string>({ required: true });
|
|
37
|
+
|
|
38
|
+
defineProps<{
|
|
39
|
+
id: string;
|
|
40
|
+
label: string;
|
|
41
|
+
placeholder: string;
|
|
42
|
+
unmasked: boolean;
|
|
43
|
+
invalid?: boolean;
|
|
44
|
+
}>();
|
|
45
|
+
|
|
46
|
+
const emit = defineEmits<{
|
|
47
|
+
(e: 'toggle'): void;
|
|
48
|
+
}>();
|
|
49
|
+
|
|
50
|
+
const input = ref<HTMLInputElement | null>(null);
|
|
51
|
+
|
|
52
|
+
defineExpose({
|
|
53
|
+
focus: () => input.value!.focus(),
|
|
54
|
+
});
|
|
55
|
+
</script>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
'background-blend-mode': coreStore.config?.removeBackgroundBlendMode ? 'normal' : 'darken'
|
|
8
8
|
}: {}"
|
|
9
9
|
>
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
<img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
|
|
12
12
|
:src="loadFile(coreStore.config?.loginBackgroundImage)"
|
|
13
13
|
class="position-absolute top-0 left-0 h-screen object-cover w-0"
|
|
@@ -22,144 +22,98 @@
|
|
|
22
22
|
/>
|
|
23
23
|
|
|
24
24
|
<!-- Main modal -->
|
|
25
|
-
<div id="authentication-modal" tabindex="-1"
|
|
25
|
+
<div id="authentication-modal" tabindex="-1"
|
|
26
26
|
class="af-set-password-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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
|
|
101
|
-
</button>
|
|
102
|
-
</div>
|
|
103
|
-
|
|
104
|
-
<div v-if="validationError || error" class="af-alert-error 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">
|
|
105
|
-
<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">
|
|
106
|
-
<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"/>
|
|
107
|
-
</svg>
|
|
108
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
109
|
-
<div>
|
|
110
|
-
{{ validationError || error }}
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<Button
|
|
115
|
-
:disabled="inProgress || (validationRunning && validationError)"
|
|
116
|
-
@click="setPassword"
|
|
117
|
-
class="w-full">
|
|
118
|
-
<svg v-if="inProgress"
|
|
119
|
-
aria-hidden="true" class="w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
120
|
-
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
|
|
121
|
-
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
|
|
122
|
-
</svg>
|
|
123
|
-
{{$t('Set Password')}}
|
|
124
|
-
</Button>
|
|
125
|
-
</form>
|
|
126
|
-
|
|
127
|
-
<!-- Invalid token message -->
|
|
128
|
-
<div v-if="!tokenValid && !loading" 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">
|
|
129
|
-
<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">
|
|
130
|
-
<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"/>
|
|
131
|
-
</svg>
|
|
132
|
-
<span class="sr-only">{{$t('Info')}}</span>
|
|
133
|
-
<div>
|
|
134
|
-
<p class="mb-2">{{$t('This invitation link is invalid or has expired.')}}</p>
|
|
135
|
-
<Link to="/login">{{$t('Go to Login')}}</Link>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<!-- Loading state -->
|
|
140
|
-
<div v-if="loading" class="flex items-center justify-center p-8">
|
|
141
|
-
<svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
142
|
-
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
|
|
143
|
-
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
|
|
144
|
-
</svg>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
28
|
+
<div class="relative flex w-full max-h-full justify-center p-4">
|
|
29
|
+
<AuthCard
|
|
30
|
+
class="af-login-popup"
|
|
31
|
+
:title="header.title"
|
|
32
|
+
:subtitle="header.subtitle"
|
|
33
|
+
:error="tokenValid && !passwordSet ? validationError || error : null"
|
|
34
|
+
>
|
|
35
|
+
<template #icon><IconUserAddOutline class="w-6 h-6" /></template>
|
|
36
|
+
|
|
37
|
+
<div v-if="loading" class="flex justify-center py-6">
|
|
38
|
+
<Spinner class="w-8 h-8" />
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<p v-else-if="!tokenValid" role="alert" class="af-alert-error flex items-start gap-2.5 rounded-[10px] border border-red-200 bg-red-50 px-3.5 py-3 text-[13px] leading-[19px] text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300">
|
|
42
|
+
<IconExclamationCircleOutline class="w-[18px] h-[18px] shrink-0" />
|
|
43
|
+
{{ $t('This invitation link is invalid or has expired. Ask your administrator to send a new one.') }}
|
|
44
|
+
</p>
|
|
45
|
+
|
|
46
|
+
<template v-else-if="passwordSet">
|
|
47
|
+
<p role="status" class="af-alert-success flex items-start gap-2.5 rounded-[10px] border border-green-200 bg-green-50 px-3.5 py-3 text-[13px] leading-[19px] text-green-800 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300">
|
|
48
|
+
<IconCheckCircleOutline class="w-[18px] h-[18px] shrink-0" />
|
|
49
|
+
{{ isUserLoggedIn ? $t('Password set successfully to your new account.') : $t('Password set successfully! Log in with your email and the new password.') }}
|
|
50
|
+
</p>
|
|
51
|
+
<p v-if="isUserLoggedIn" class="text-sm text-gray-700 dark:text-gray-300">
|
|
52
|
+
{{ $t('You are still logged in to another account. Stay in it, or log out to log in to the new one.') }}
|
|
53
|
+
</p>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<template v-else>
|
|
57
|
+
<PasswordField
|
|
58
|
+
v-model="password"
|
|
59
|
+
id="password"
|
|
60
|
+
:label="$t('Password')"
|
|
61
|
+
:placeholder="$t('Enter your password')"
|
|
62
|
+
:unmasked="unmasked"
|
|
63
|
+
:invalid="Boolean(validationError)"
|
|
64
|
+
@toggle="unmasked = !unmasked"
|
|
65
|
+
@keydown.enter="passwordConfirmationInput!.focus()"
|
|
66
|
+
/>
|
|
67
|
+
<PasswordField
|
|
68
|
+
ref="passwordConfirmationInput"
|
|
69
|
+
v-model="passwordConfirmation"
|
|
70
|
+
id="password_confirmation"
|
|
71
|
+
:label="$t('Confirm password')"
|
|
72
|
+
:placeholder="$t('Confirm your password')"
|
|
73
|
+
:unmasked="unmasked"
|
|
74
|
+
:invalid="Boolean(validationError)"
|
|
75
|
+
@toggle="unmasked = !unmasked"
|
|
76
|
+
@keydown.enter="setPassword"
|
|
77
|
+
/>
|
|
78
|
+
</template>
|
|
79
|
+
|
|
80
|
+
<template v-if="!loading" #footer>
|
|
81
|
+
<LinkButton v-if="!tokenValid" to="/login" variant="secondary" class="whitespace-nowrap">{{ $t('Go to login') }}</LinkButton>
|
|
82
|
+
<template v-else-if="passwordSet && isUserLoggedIn">
|
|
83
|
+
<Button variant="secondary" class="whitespace-nowrap" @click="logoutUser">{{ $t('Log out') }}</Button>
|
|
84
|
+
<Button class="whitespace-nowrap" @click="stayLoggedIn">{{ $t('Stay logged in') }}</Button>
|
|
85
|
+
</template>
|
|
86
|
+
<LinkButton v-else-if="passwordSet" to="/login" class="whitespace-nowrap">{{ $t('Go to login') }}</LinkButton>
|
|
87
|
+
<Button
|
|
88
|
+
v-else
|
|
89
|
+
:loader="inProgress"
|
|
90
|
+
:disabled="inProgress || (validationRunning && validationError)"
|
|
91
|
+
class="whitespace-nowrap"
|
|
92
|
+
@click="setPassword"
|
|
93
|
+
>
|
|
94
|
+
{{ $t('Set password') }}
|
|
95
|
+
</Button>
|
|
96
|
+
</template>
|
|
97
|
+
</AuthCard>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
150
100
|
|
|
151
101
|
</div>
|
|
152
102
|
</template>
|
|
153
103
|
|
|
154
104
|
<script setup lang="ts">
|
|
155
105
|
import { onMounted, ref, computed, Ref } from 'vue';
|
|
106
|
+
import { useI18n } from 'vue-i18n';
|
|
156
107
|
import { useCoreStore } from '@/stores/core';
|
|
157
108
|
import { useUserStore } from '@/stores/user';
|
|
158
109
|
import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
|
|
159
110
|
import { useRoute, useRouter } from 'vue-router';
|
|
160
|
-
import {
|
|
161
|
-
import Button from '@/afcl
|
|
162
|
-
import
|
|
111
|
+
import { IconCheckCircleOutline, IconExclamationCircleOutline, IconUserAddOutline } from '@iconify-prerendered/vue-flowbite';
|
|
112
|
+
import { Button, LinkButton, Spinner } from '@/afcl';
|
|
113
|
+
import AuthCard from './AuthCard.vue';
|
|
114
|
+
import PasswordField from './PasswordField.vue';
|
|
115
|
+
|
|
116
|
+
const { t } = useI18n();
|
|
163
117
|
|
|
164
118
|
const inProgress = ref(false);
|
|
165
119
|
const loading = ref(true);
|
|
@@ -169,7 +123,7 @@ const passwordSet = ref(false);
|
|
|
169
123
|
const userStore = useUserStore();
|
|
170
124
|
const coreStore = useCoreStore();
|
|
171
125
|
|
|
172
|
-
const passwordConfirmationInput = ref(null);
|
|
126
|
+
const passwordConfirmationInput = ref<InstanceType<typeof PasswordField> | null>(null);
|
|
173
127
|
const password = ref("");
|
|
174
128
|
const passwordConfirmation = ref("");
|
|
175
129
|
const unmasked = ref(false);
|
|
@@ -180,7 +134,18 @@ const router = useRouter();
|
|
|
180
134
|
const validationRunning = ref(false);
|
|
181
135
|
const error = ref(null);
|
|
182
136
|
|
|
183
|
-
const isUserLoggedIn = localStorage.getItem('isAuthorized');
|
|
137
|
+
const isUserLoggedIn = localStorage.getItem('isAuthorized') === 'true';
|
|
138
|
+
|
|
139
|
+
const header = computed(() => {
|
|
140
|
+
const brand = coreStore.config?.brandName;
|
|
141
|
+
if (passwordSet.value) {
|
|
142
|
+
return {
|
|
143
|
+
title: t('Password set'),
|
|
144
|
+
subtitle: isUserLoggedIn ? t('Your new {brand} account is ready', { brand }) : t('Your {brand} account is ready', { brand }),
|
|
145
|
+
};
|
|
146
|
+
}
|
|
147
|
+
return { title: t('Set your password'), subtitle: t('Create a password for your {brand} account', { brand }) };
|
|
148
|
+
});
|
|
184
149
|
|
|
185
150
|
const backgroundPosition = computed(() => {
|
|
186
151
|
return coreStore.config?.loginBackgroundPosition || '1/2';
|
|
@@ -228,7 +193,7 @@ const validationError = computed(() => {
|
|
|
228
193
|
onMounted(async () => {
|
|
229
194
|
loading.value = true;
|
|
230
195
|
await coreStore.getPublicConfig();
|
|
231
|
-
|
|
196
|
+
|
|
232
197
|
// Check if token is present and valid
|
|
233
198
|
const token = route.query.token;
|
|
234
199
|
if (token) {
|
|
@@ -236,13 +201,13 @@ onMounted(async () => {
|
|
|
236
201
|
} else {
|
|
237
202
|
tokenValid.value = false;
|
|
238
203
|
}
|
|
239
|
-
|
|
204
|
+
|
|
240
205
|
loading.value = false;
|
|
241
206
|
});
|
|
242
207
|
|
|
243
208
|
async function setPassword() {
|
|
244
209
|
error.value = null;
|
|
245
|
-
|
|
210
|
+
|
|
246
211
|
if (checkPassword()) {
|
|
247
212
|
validationRunning.value = true;
|
|
248
213
|
return;
|
|
@@ -260,7 +225,7 @@ async function setPassword() {
|
|
|
260
225
|
}
|
|
261
226
|
});
|
|
262
227
|
inProgress.value = false;
|
|
263
|
-
|
|
228
|
+
|
|
264
229
|
if (resp.error) {
|
|
265
230
|
error.value = resp.error;
|
|
266
231
|
if (resp.error.includes('Invalid') || resp.error.includes('expired')) {
|
|
@@ -286,4 +251,4 @@ function stayLoggedIn() {
|
|
|
286
251
|
router.push({ name: 'home' });
|
|
287
252
|
}
|
|
288
253
|
}
|
|
289
|
-
</script>
|
|
254
|
+
</script>
|