adata-ui 2.0.15 → 2.0.17
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/components/forms/login/ALogin.vue +132 -142
- package/components/forms/registration/ARegistration.vue +81 -71
- package/components/navigation/header/AHeader.vue +25 -13
- package/components/navigation/header/ProductMenu.vue +6 -4
- package/composables/modalsState.ts +3 -0
- package/composables/useHeaderNavigationLinks.ts +55 -52
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ import Resend from '#adata-ui/components/modals/Resend.vue'
|
|
|
6
6
|
import TwoFactor from '#adata-ui/components/modals/two-factor/two-factor.vue'
|
|
7
7
|
|
|
8
8
|
const appConfig = useAppConfig()
|
|
9
|
+
const authApiURL = appConfig.commonAuth.authApiURL
|
|
9
10
|
const landingUrl = appConfig.myLayer.landingUrl
|
|
10
11
|
const [isResendModal, toggleResendModal] = useToggle()
|
|
11
12
|
const isConfirmationEmailModal = ref(false)
|
|
@@ -18,6 +19,8 @@ const { t, locale } = useI18n()
|
|
|
18
19
|
const route = useRoute()
|
|
19
20
|
const submitted = ref(false)
|
|
20
21
|
const accessToken = ref(null)
|
|
22
|
+
const loginModal = useLoginModal()
|
|
23
|
+
const registrationModal = useRegistrationModal()
|
|
21
24
|
|
|
22
25
|
export interface ILoginForm {
|
|
23
26
|
username: string
|
|
@@ -64,8 +67,9 @@ async function submit() {
|
|
|
64
67
|
submitted.value = true
|
|
65
68
|
if (!validation.value) {
|
|
66
69
|
loading.value = true
|
|
67
|
-
const login = await fetch(
|
|
70
|
+
const login = await fetch(`${authApiURL}/login`, {
|
|
68
71
|
method: "POST",
|
|
72
|
+
credentials: 'include',
|
|
69
73
|
headers: {
|
|
70
74
|
"Content-Type": "application/json",
|
|
71
75
|
lang: locale.value,
|
|
@@ -91,7 +95,7 @@ async function submit() {
|
|
|
91
95
|
isTwoFactorOpen.value = true
|
|
92
96
|
}
|
|
93
97
|
else if (data.email_is_verified) {
|
|
94
|
-
const response = await fetch(
|
|
98
|
+
const response = await fetch(`${authApiURL}/access/cookie`,{
|
|
95
99
|
method: "GET",
|
|
96
100
|
credentials: 'include',
|
|
97
101
|
headers: {
|
|
@@ -106,16 +110,8 @@ async function submit() {
|
|
|
106
110
|
document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
|
|
107
111
|
}
|
|
108
112
|
$toast.success(t('login.successfully'))
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
external: true,
|
|
112
|
-
})
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
await navigateTo(landingUrl, {
|
|
116
|
-
external: true,
|
|
117
|
-
})
|
|
118
|
-
}
|
|
113
|
+
loginModal.value = false
|
|
114
|
+
window.location.reload()
|
|
119
115
|
}
|
|
120
116
|
else {
|
|
121
117
|
isConfirmationEmailModal.value = true
|
|
@@ -138,12 +134,8 @@ async function onResend() {
|
|
|
138
134
|
}
|
|
139
135
|
|
|
140
136
|
function onRegister() {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
navigateTo(localePath(`/register`))
|
|
146
|
-
}
|
|
137
|
+
loginModal.value = false
|
|
138
|
+
registrationModal.value = true
|
|
147
139
|
}
|
|
148
140
|
|
|
149
141
|
function toTariffs() {
|
|
@@ -160,8 +152,9 @@ function confirmationEmailResend() {
|
|
|
160
152
|
}
|
|
161
153
|
async function handleConfirmOtp(otpCode: string) {
|
|
162
154
|
isLoadingOtp.value = true
|
|
163
|
-
const login = await fetch(
|
|
155
|
+
const login = await fetch(`${authApiURL}/login`, {
|
|
164
156
|
method: "POST",
|
|
157
|
+
credentials: 'include',
|
|
165
158
|
headers: {
|
|
166
159
|
"Content-Type": "application/json",
|
|
167
160
|
lang: locale.value,
|
|
@@ -182,7 +175,7 @@ async function handleConfirmOtp(otpCode: string) {
|
|
|
182
175
|
}
|
|
183
176
|
else {
|
|
184
177
|
|
|
185
|
-
const response = await fetch(
|
|
178
|
+
const response = await fetch(`${authApiURL}/access/cookie`,{
|
|
186
179
|
method: "GET",
|
|
187
180
|
credentials: 'include',
|
|
188
181
|
headers: {
|
|
@@ -197,16 +190,7 @@ async function handleConfirmOtp(otpCode: string) {
|
|
|
197
190
|
document.cookie = `accessToken=${access_token}; max-age=${expire_in}; domain=.${hostname[1]}.${hostname[0]}; path=/`
|
|
198
191
|
}
|
|
199
192
|
$toast.success(t('login.successfully'))
|
|
200
|
-
|
|
201
|
-
await navigateTo(route.query.url as string, {
|
|
202
|
-
external: true,
|
|
203
|
-
})
|
|
204
|
-
}
|
|
205
|
-
else {
|
|
206
|
-
await navigateTo(landingUrl, {
|
|
207
|
-
external: true,
|
|
208
|
-
})
|
|
209
|
-
}
|
|
193
|
+
loginModal.value = false
|
|
210
194
|
|
|
211
195
|
isTwoFactorOpen.value = false
|
|
212
196
|
}
|
|
@@ -229,126 +213,132 @@ onBeforeUnmount(() => {
|
|
|
229
213
|
</script>
|
|
230
214
|
|
|
231
215
|
<template>
|
|
232
|
-
<
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
216
|
+
<a-modal
|
|
217
|
+
v-model="loginModal"
|
|
218
|
+
>
|
|
219
|
+
<div class="flex flex-col gap-5 rounded-lg bg-white dark:bg-gray-900">
|
|
220
|
+
<h1 class="heading-02 text-center">
|
|
221
|
+
{{ $t('login.form.title') }}
|
|
222
|
+
</h1>
|
|
223
|
+
<p class="body-400 text-center">
|
|
224
|
+
{{ $t('login.form.subtitle') }}
|
|
225
|
+
</p>
|
|
226
|
+
<div class="flex flex-col gap-4">
|
|
227
|
+
<a-input-standard
|
|
228
|
+
v-model="form.username"
|
|
229
|
+
type="email"
|
|
230
|
+
:label="$t('login.form.labels.email')"
|
|
231
|
+
:error="getError('username')"
|
|
232
|
+
/>
|
|
233
|
+
<a-input-password
|
|
234
|
+
v-model="form.password"
|
|
235
|
+
:label="$t('login.form.labels.password')"
|
|
236
|
+
:error="getError('password')"
|
|
237
|
+
/>
|
|
238
|
+
<div class="flex items-center justify-between">
|
|
239
|
+
<div class="body-400 flex gap-2 ">
|
|
240
|
+
<a-checkbox
|
|
241
|
+
v-model="rememberMe"
|
|
242
|
+
name="remember_me"
|
|
243
|
+
/>
|
|
244
|
+
<label
|
|
245
|
+
for="remember_me"
|
|
246
|
+
class="cursor-pointer"
|
|
247
|
+
>{{ $t('login.form.remember_me') }}</label>
|
|
248
|
+
</div>
|
|
249
|
+
<nuxt-link-locale
|
|
250
|
+
class="link-s-400"
|
|
251
|
+
to="/password-recovery"
|
|
252
|
+
>
|
|
253
|
+
{{ $t('login.form.forget_password') }}
|
|
254
|
+
</nuxt-link-locale>
|
|
261
255
|
</div>
|
|
262
|
-
<nuxt-link-locale
|
|
263
|
-
class="link-s-400"
|
|
264
|
-
to="/password-recovery"
|
|
265
|
-
>
|
|
266
|
-
{{ $t('login.form.forget_password') }}
|
|
267
|
-
</nuxt-link-locale>
|
|
268
256
|
</div>
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
</
|
|
257
|
+
<div class="flex items-center gap-4">
|
|
258
|
+
<div class="bg-deepblue-500/30 h-px w-full" />
|
|
259
|
+
<div class="flex shrink-0 gap-4">
|
|
260
|
+
<span
|
|
261
|
+
class="cursor-pointer"
|
|
262
|
+
@click="authWithSocial('google')"
|
|
263
|
+
>
|
|
264
|
+
<a-icon-google />
|
|
265
|
+
</span>
|
|
266
|
+
<span
|
|
267
|
+
class="cursor-pointer"
|
|
268
|
+
@click="authWithSocial('yandex')"
|
|
269
|
+
>
|
|
270
|
+
<a-icon-yandex />
|
|
271
|
+
</span>
|
|
272
|
+
<span
|
|
273
|
+
class="cursor-pointer"
|
|
274
|
+
@click="authWithSocial('mailru')"
|
|
275
|
+
>
|
|
276
|
+
<a-icon-mailru />
|
|
277
|
+
</span>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="bg-deepblue-500/30 h-px w-full" />
|
|
291
280
|
</div>
|
|
292
|
-
<
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
{{ $t('login.form.first_time') }}
|
|
303
|
-
</p>
|
|
281
|
+
<a-button
|
|
282
|
+
:loading="loading"
|
|
283
|
+
type="submit"
|
|
284
|
+
@click="submit"
|
|
285
|
+
>
|
|
286
|
+
{{ $t('actions.login') }}
|
|
287
|
+
</a-button>
|
|
288
|
+
<p class="body-400 text-center">
|
|
289
|
+
{{ $t('login.form.first_time') }}
|
|
290
|
+
</p>
|
|
304
291
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
292
|
+
<a-button
|
|
293
|
+
type="button"
|
|
294
|
+
view="outline"
|
|
295
|
+
class="w-full"
|
|
296
|
+
@click="onRegister"
|
|
297
|
+
>
|
|
298
|
+
{{ $t('actions.register') }}
|
|
299
|
+
</a-button>
|
|
313
300
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
301
|
+
<a-button
|
|
302
|
+
type="button"
|
|
303
|
+
view="transparent"
|
|
304
|
+
class="w-full"
|
|
305
|
+
@click="toTariffs"
|
|
306
|
+
>
|
|
307
|
+
{{ $t('actions.toTariffs') }}
|
|
308
|
+
</a-button>
|
|
322
309
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
310
|
+
<a-alert
|
|
311
|
+
class="max-w-screen-sm !text-[10px]"
|
|
312
|
+
size="xs"
|
|
313
|
+
>
|
|
314
|
+
{{ $t('info.userAgreement') }}
|
|
315
|
+
</a-alert>
|
|
316
|
+
</div>
|
|
317
|
+
</a-modal>
|
|
329
318
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
/>
|
|
336
|
-
</a-modal>
|
|
337
|
-
<a-modal v-model="isConfirmationEmailModal">
|
|
338
|
-
<a-confirmation-email
|
|
339
|
-
v-if="isConfirmationEmailModal"
|
|
340
|
-
@close="isConfirmationEmailModal = false"
|
|
341
|
-
@resend="confirmationEmailResend"
|
|
342
|
-
/>
|
|
343
|
-
</a-modal>
|
|
344
|
-
<two-factor
|
|
345
|
-
v-model="isTwoFactorOpen"
|
|
346
|
-
v-model:error="showOtpError"
|
|
347
|
-
:loading="isLoadingOtp"
|
|
348
|
-
@confirm="handleConfirmOtp"
|
|
349
|
-
@close="isTwoFactorOpen = false"
|
|
319
|
+
<a-modal v-model="isResendModal">
|
|
320
|
+
<resend
|
|
321
|
+
v-if="isResendModal"
|
|
322
|
+
@close="isResendModal = false"
|
|
323
|
+
@resend="onResend"
|
|
350
324
|
/>
|
|
351
|
-
</
|
|
325
|
+
</a-modal>
|
|
326
|
+
|
|
327
|
+
<a-modal v-model="isConfirmationEmailModal">
|
|
328
|
+
<a-confirmation-email
|
|
329
|
+
v-if="isConfirmationEmailModal"
|
|
330
|
+
@close="isConfirmationEmailModal = false"
|
|
331
|
+
@resend="confirmationEmailResend"
|
|
332
|
+
/>
|
|
333
|
+
</a-modal>
|
|
334
|
+
|
|
335
|
+
<two-factor
|
|
336
|
+
v-model="isTwoFactorOpen"
|
|
337
|
+
v-model:error="showOtpError"
|
|
338
|
+
:loading="isLoadingOtp"
|
|
339
|
+
@confirm="handleConfirmOtp"
|
|
340
|
+
@close="isTwoFactorOpen = false"
|
|
341
|
+
/>
|
|
352
342
|
</template>
|
|
353
343
|
|
|
354
344
|
<style scoped>
|
|
@@ -12,8 +12,11 @@ const route = useRoute()
|
|
|
12
12
|
|
|
13
13
|
const localePath = useLocalePath()
|
|
14
14
|
const { t, locale} = useI18n()
|
|
15
|
-
const { myLayer }: any = useAppConfig()
|
|
15
|
+
const { myLayer, commonAuth }: any = useAppConfig()
|
|
16
|
+
const authApiURL = commonAuth.authApiURL
|
|
16
17
|
const redirectUrl = useCookie('redirect_url')
|
|
18
|
+
const registrationModal = useRegistrationModal()
|
|
19
|
+
const loginModal = useLoginModal()
|
|
17
20
|
|
|
18
21
|
export interface RegistrationForm {
|
|
19
22
|
email: string
|
|
@@ -72,8 +75,9 @@ async function onSubmit() {
|
|
|
72
75
|
|
|
73
76
|
try {
|
|
74
77
|
loading.value = true
|
|
75
|
-
const register = await fetch(
|
|
78
|
+
const register = await fetch(`${authApiURL}/register`, {
|
|
76
79
|
method: "POST",
|
|
80
|
+
credentials: "include",
|
|
77
81
|
headers: {
|
|
78
82
|
"Content-Type": "application/json",
|
|
79
83
|
lang: locale.value,
|
|
@@ -82,13 +86,13 @@ async function onSubmit() {
|
|
|
82
86
|
})
|
|
83
87
|
const { data, message, error } = await register.json().catch(() => ({}));
|
|
84
88
|
if (data) {
|
|
89
|
+
registrationModal.value = false
|
|
85
90
|
toggleAcceptModal()
|
|
86
91
|
$toast.success(message)
|
|
87
92
|
}
|
|
88
93
|
else if (error) {
|
|
89
94
|
$toast.error(error.data.message.email || error.data.message.password)
|
|
90
95
|
}
|
|
91
|
-
console.error(error.data)
|
|
92
96
|
loading.value = false
|
|
93
97
|
}
|
|
94
98
|
catch (e) {
|
|
@@ -101,8 +105,7 @@ if (route.query.url) {
|
|
|
101
105
|
}
|
|
102
106
|
|
|
103
107
|
function goBack() {
|
|
104
|
-
|
|
105
|
-
window.location.href = `${url.protocol}//${url.hostname}`
|
|
108
|
+
isAcceptModal.value = false
|
|
106
109
|
}
|
|
107
110
|
|
|
108
111
|
// onMounted(() => {
|
|
@@ -111,7 +114,7 @@ function goBack() {
|
|
|
111
114
|
|
|
112
115
|
async function onResend() {
|
|
113
116
|
|
|
114
|
-
const emailResend = await fetch(
|
|
117
|
+
const emailResend = await fetch(`${authApiURL}/email/resend`,{
|
|
115
118
|
method: "GET",
|
|
116
119
|
credentials: 'include',
|
|
117
120
|
headers: {
|
|
@@ -143,6 +146,11 @@ function handleEnter(event: KeyboardEvent) {
|
|
|
143
146
|
}
|
|
144
147
|
}
|
|
145
148
|
|
|
149
|
+
function onLogin() {
|
|
150
|
+
registrationModal.value = false
|
|
151
|
+
loginModal.value = true
|
|
152
|
+
}
|
|
153
|
+
|
|
146
154
|
onMounted(() => {
|
|
147
155
|
document.addEventListener('keyup', handleEnter)
|
|
148
156
|
})
|
|
@@ -153,73 +161,75 @@ onBeforeUnmount(() => {
|
|
|
153
161
|
</script>
|
|
154
162
|
|
|
155
163
|
<template>
|
|
156
|
-
<
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
<h2 class="text-center text-2xl font-bold">
|
|
162
|
-
{{ t('register.form.title') }}
|
|
163
|
-
</h2>
|
|
164
|
-
<p class="text-center text-sm">
|
|
165
|
-
{{ t('register.form.subtitle') }}
|
|
166
|
-
</p>
|
|
167
|
-
<a-input-standard
|
|
168
|
-
v-model="form.email"
|
|
169
|
-
:label="t('register.form.labels.email')"
|
|
170
|
-
:error="getError('email')"
|
|
171
|
-
type="email"
|
|
172
|
-
/>
|
|
173
|
-
|
|
174
|
-
<a-input-password
|
|
175
|
-
v-model="form.password"
|
|
176
|
-
:label="t('register.form.labels.password')"
|
|
177
|
-
:error="getError('password')"
|
|
178
|
-
/>
|
|
179
|
-
|
|
180
|
-
<a-input-password
|
|
181
|
-
v-model="form.password_confirmation"
|
|
182
|
-
:label="t('register.form.labels.password_confirmation')"
|
|
183
|
-
:error="getError('password_confirmation')"
|
|
184
|
-
/>
|
|
185
|
-
<a-alert color="blue">
|
|
186
|
-
{{ t('register.form.alert') }}
|
|
187
|
-
<template #icon>
|
|
188
|
-
<a-icon-info-circle />
|
|
189
|
-
</template>
|
|
190
|
-
</a-alert>
|
|
191
|
-
<a-checkbox
|
|
192
|
-
v-model="agreement"
|
|
193
|
-
side="right"
|
|
164
|
+
<a-modal v-model="registrationModal">
|
|
165
|
+
<form
|
|
166
|
+
class="flex flex-col items-stretch gap-5 rounded-lg bg-white dark:bg-gray-900"
|
|
167
|
+
novalidate
|
|
168
|
+
@submit.prevent="onSubmit"
|
|
194
169
|
>
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
170
|
+
<h2 class="text-center text-2xl font-bold">
|
|
171
|
+
{{ t('register.form.title') }}
|
|
172
|
+
</h2>
|
|
173
|
+
<p class="text-center text-sm">
|
|
174
|
+
{{ t('register.form.subtitle') }}
|
|
175
|
+
</p>
|
|
176
|
+
<a-input-standard
|
|
177
|
+
v-model="form.email"
|
|
178
|
+
:label="t('register.form.labels.email')"
|
|
179
|
+
:error="getError('email')"
|
|
180
|
+
type="email"
|
|
181
|
+
/>
|
|
182
|
+
|
|
183
|
+
<a-input-password
|
|
184
|
+
v-model="form.password"
|
|
185
|
+
:label="t('register.form.labels.password')"
|
|
186
|
+
:error="getError('password')"
|
|
187
|
+
/>
|
|
188
|
+
|
|
189
|
+
<a-input-password
|
|
190
|
+
v-model="form.password_confirmation"
|
|
191
|
+
:label="t('register.form.labels.password_confirmation')"
|
|
192
|
+
:error="getError('password_confirmation')"
|
|
193
|
+
/>
|
|
194
|
+
<a-alert color="blue">
|
|
195
|
+
{{ t('register.form.alert') }}
|
|
196
|
+
<template #icon>
|
|
197
|
+
<a-icon-info-circle />
|
|
203
198
|
</template>
|
|
204
|
-
</
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
199
|
+
</a-alert>
|
|
200
|
+
<a-checkbox
|
|
201
|
+
v-model="agreement"
|
|
202
|
+
side="right"
|
|
203
|
+
>
|
|
204
|
+
<i18n-t keypath="register.form.agreement.text">
|
|
205
|
+
<template #link>
|
|
206
|
+
<nuxt-link-locale
|
|
207
|
+
class="text-blue-700"
|
|
208
|
+
@click="getUrl"
|
|
209
|
+
>
|
|
210
|
+
{{ t('register.form.agreement.link') }}
|
|
211
|
+
</nuxt-link-locale>
|
|
212
|
+
</template>
|
|
213
|
+
</i18n-t>
|
|
214
|
+
</a-checkbox>
|
|
215
|
+
<a-button
|
|
216
|
+
:disabled="!agreement"
|
|
217
|
+
:loading="loading"
|
|
218
|
+
>
|
|
219
|
+
{{ t('register.form.continue') }}
|
|
220
|
+
</a-button>
|
|
221
|
+
<p class="text-center text-sm">
|
|
222
|
+
{{ t('register.form.haveAcc') }}
|
|
223
|
+
</p>
|
|
224
|
+
<a-button
|
|
225
|
+
type="button"
|
|
226
|
+
view="outline"
|
|
227
|
+
@click="onLogin"
|
|
228
|
+
>
|
|
229
|
+
{{ t('register.form.enter') }}
|
|
230
|
+
</a-button>
|
|
231
|
+
</form>
|
|
232
|
+
</a-modal>
|
|
223
233
|
<a-modal v-model="isAcceptModal">
|
|
224
234
|
<accept
|
|
225
235
|
v-if="isAcceptModal"
|
|
@@ -28,6 +28,7 @@ interface Props {
|
|
|
28
28
|
mobileHeaderType?: 'search' | 'default'
|
|
29
29
|
module?: ProjectKeys
|
|
30
30
|
oldVersion?: string
|
|
31
|
+
authMode?: 'local' | 'separate'
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -37,7 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
37
38
|
rate: 'Базовый',
|
|
38
39
|
showLogIn: true,
|
|
39
40
|
mobileHeaderType: 'default',
|
|
40
|
-
module: 'pk'
|
|
41
|
+
module: 'pk',
|
|
42
|
+
authMode: 'separate',
|
|
41
43
|
})
|
|
42
44
|
|
|
43
45
|
const emit = defineEmits(['logout', 'search', 'login'])
|
|
@@ -51,20 +53,27 @@ const { myLayer }: any = useAppConfig()
|
|
|
51
53
|
|
|
52
54
|
const langIsOn = appConfig.myLayer.langIsOn
|
|
53
55
|
const contacts = ref(useContacts())
|
|
56
|
+
const loginModal = useLoginModal()
|
|
57
|
+
|
|
54
58
|
const goAuth = () => {
|
|
55
|
-
if (
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
if (props.authMode === 'separate') {
|
|
60
|
+
if (window) {
|
|
61
|
+
emit('login')
|
|
62
|
+
let fullPath = encodeURIComponent(window.location.toString())
|
|
63
|
+
if (fullPath.includes('basic-info')) {
|
|
64
|
+
fullPath = fullPath.replace('%2Fcounterparty%2Fmain', '').replace('%2Fbasic-info', '')
|
|
65
|
+
}
|
|
61
66
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
navigateToLocalizedPage({
|
|
68
|
+
locale,
|
|
69
|
+
projectUrl: myLayer.loginUrl.slice(0, -1),
|
|
70
|
+
path: `/?url=${fullPath}`,
|
|
71
|
+
target: '_self'
|
|
72
|
+
})
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
loginModal.value = true
|
|
68
77
|
}
|
|
69
78
|
}
|
|
70
79
|
|
|
@@ -203,6 +212,9 @@ onBeforeMount(() => {
|
|
|
203
212
|
</div>
|
|
204
213
|
</header>
|
|
205
214
|
</div>
|
|
215
|
+
|
|
216
|
+
<a-login />
|
|
217
|
+
<a-registration />
|
|
206
218
|
</template>
|
|
207
219
|
|
|
208
220
|
<style scoped></style>
|
|
@@ -118,7 +118,7 @@ function isCurrentModule(currentModule: string) {
|
|
|
118
118
|
<div class="flex gap-[10px] divide-x divide-gray-500/50">
|
|
119
119
|
<div class="flex flex-col gap-5 w-[290px]">
|
|
120
120
|
<nav-list
|
|
121
|
-
v-for="module in filteredItems.slice(0,
|
|
121
|
+
v-for="module in filteredItems.slice(0,2)"
|
|
122
122
|
:id="module.key"
|
|
123
123
|
:key="module.key"
|
|
124
124
|
:current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
|
|
@@ -126,11 +126,12 @@ function isCurrentModule(currentModule: string) {
|
|
|
126
126
|
:nav-list="module.items"
|
|
127
127
|
:to="module.to"
|
|
128
128
|
:icon="module.icon"
|
|
129
|
+
:badge="module.is_new"
|
|
129
130
|
/>
|
|
130
131
|
</div>
|
|
131
132
|
<div class="flex flex-col gap-5 w-[290px] pl-[10px]">
|
|
132
133
|
<nav-list
|
|
133
|
-
v-for="module in filteredItems.slice(
|
|
134
|
+
v-for="module in filteredItems.slice(2,5)"
|
|
134
135
|
:id="module.key"
|
|
135
136
|
:key="module.key"
|
|
136
137
|
:current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
|
|
@@ -138,11 +139,12 @@ function isCurrentModule(currentModule: string) {
|
|
|
138
139
|
:nav-list="module.items"
|
|
139
140
|
:to="module.to"
|
|
140
141
|
:icon="module.icon"
|
|
142
|
+
:badge="module.is_new"
|
|
141
143
|
/>
|
|
142
144
|
</div>
|
|
143
145
|
<div class="flex flex-col gap-5 w-[330px] pl-[10px]">
|
|
144
146
|
<nav-list
|
|
145
|
-
v-for="module in filteredItems.slice(
|
|
147
|
+
v-for="module in filteredItems.slice(5,8)"
|
|
146
148
|
:id="module.key"
|
|
147
149
|
:key="module.key"
|
|
148
150
|
:current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
|
|
@@ -150,7 +152,7 @@ function isCurrentModule(currentModule: string) {
|
|
|
150
152
|
:nav-list="module.items"
|
|
151
153
|
:to="module.to"
|
|
152
154
|
:icon="module.icon"
|
|
153
|
-
badge
|
|
155
|
+
:badge="module.is_new"
|
|
154
156
|
/>
|
|
155
157
|
</div>
|
|
156
158
|
</div>
|
|
@@ -6,3 +6,6 @@ export const usePaymentMethodModal = () => useState<boolean>('payment-method-mod
|
|
|
6
6
|
export const useReplenishModal = () => useState<boolean>('replenish-modal', () => false)
|
|
7
7
|
export const useLowBalanceModal = () => useState<boolean>('low-balance-modal', () => false)
|
|
8
8
|
export const useNoAccessModal = () => useState<boolean>('no-access-modal', () => false)
|
|
9
|
+
|
|
10
|
+
export const useLoginModal = () => useState<boolean>('login-modal', () => false)
|
|
11
|
+
export const useRegistrationModal = () => useState<boolean>('registration-modal', () => false)
|
|
@@ -53,6 +53,7 @@ export const useHeaderNavigationLinks = () => {
|
|
|
53
53
|
return [
|
|
54
54
|
{
|
|
55
55
|
key: 'edo',
|
|
56
|
+
is_new: true,
|
|
56
57
|
name: t('header.products.edo.label'),
|
|
57
58
|
icon: AIconFiles,
|
|
58
59
|
items: [
|
|
@@ -64,19 +65,6 @@ export const useHeaderNavigationLinks = () => {
|
|
|
64
65
|
}
|
|
65
66
|
]
|
|
66
67
|
},
|
|
67
|
-
{
|
|
68
|
-
key: 'compliance',
|
|
69
|
-
name: t('header.products.compliance.label'),
|
|
70
|
-
icon: AIconId,
|
|
71
|
-
items: [
|
|
72
|
-
{
|
|
73
|
-
title: t('header.products.compliance.items.l.t'),
|
|
74
|
-
subtitle: t('header.products.compliance.items.l.st'),
|
|
75
|
-
icon: IconProfile,
|
|
76
|
-
to: buildLocalizedUrl(locale, `${myLayer.complianceUrl}/compliance`, '')
|
|
77
|
-
}
|
|
78
|
-
]
|
|
79
|
-
},
|
|
80
68
|
{
|
|
81
69
|
key: 'pk',
|
|
82
70
|
name: t('header.products.counterparties.label'),
|
|
@@ -130,24 +118,20 @@ export const useHeaderNavigationLinks = () => {
|
|
|
130
118
|
]
|
|
131
119
|
},
|
|
132
120
|
{
|
|
133
|
-
key: '
|
|
134
|
-
|
|
135
|
-
|
|
121
|
+
key: 'compliance',
|
|
122
|
+
is_new: true,
|
|
123
|
+
name: t('header.products.compliance.label'),
|
|
124
|
+
icon: AIconId,
|
|
136
125
|
items: [
|
|
137
126
|
{
|
|
138
|
-
title: t('header.products.
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
to: myLayer.
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
title: t('header.products.jobs.items.resume.title'),
|
|
145
|
-
subtitle: t('header.products.jobs.items.resume.subtitle'),
|
|
146
|
-
icon: IconDocument,
|
|
147
|
-
to: myLayer.workUrl + PAGES.work.summary
|
|
127
|
+
title: t('header.products.compliance.items.l.t'),
|
|
128
|
+
subtitle: t('header.products.compliance.items.l.st'),
|
|
129
|
+
icon: IconProfile,
|
|
130
|
+
to: buildLocalizedUrl(locale, `${myLayer.complianceUrl}/compliance`, '')
|
|
148
131
|
}
|
|
149
132
|
]
|
|
150
133
|
},
|
|
134
|
+
|
|
151
135
|
{
|
|
152
136
|
key: 'tenders',
|
|
153
137
|
name: t('header.products.tenders.label'),
|
|
@@ -174,31 +158,6 @@ export const useHeaderNavigationLinks = () => {
|
|
|
174
158
|
}
|
|
175
159
|
]
|
|
176
160
|
},
|
|
177
|
-
{
|
|
178
|
-
key: 'fines',
|
|
179
|
-
name: t('header.products.fines.label'),
|
|
180
|
-
icon: AIconCar,
|
|
181
|
-
items: [
|
|
182
|
-
{
|
|
183
|
-
title: t('header.products.fines.items.fines.title'),
|
|
184
|
-
subtitle: t('header.products.fines.items.fines.subtitle'),
|
|
185
|
-
icon: IconCheckCircle,
|
|
186
|
-
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.main)
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
title: t('header.products.fines.items.auto.title'),
|
|
190
|
-
subtitle: t('header.products.fines.items.auto.subtitle'),
|
|
191
|
-
icon: IconCar,
|
|
192
|
-
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.avto)
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
title: t('header.products.fines.items.wholesaleAuto.title'),
|
|
196
|
-
subtitle: t('header.products.fines.items.wholesaleAuto.subtitle'),
|
|
197
|
-
icon: IconTruck,
|
|
198
|
-
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.bulk)
|
|
199
|
-
}
|
|
200
|
-
]
|
|
201
|
-
},
|
|
202
161
|
{
|
|
203
162
|
key: 'analytics',
|
|
204
163
|
name: t('header.products.analytics.label'),
|
|
@@ -231,8 +190,34 @@ export const useHeaderNavigationLinks = () => {
|
|
|
231
190
|
}
|
|
232
191
|
]
|
|
233
192
|
},
|
|
193
|
+
{
|
|
194
|
+
key: 'fines',
|
|
195
|
+
name: t('header.products.fines.label'),
|
|
196
|
+
icon: AIconCar,
|
|
197
|
+
items: [
|
|
198
|
+
{
|
|
199
|
+
title: t('header.products.fines.items.fines.title'),
|
|
200
|
+
subtitle: t('header.products.fines.items.fines.subtitle'),
|
|
201
|
+
icon: IconCheckCircle,
|
|
202
|
+
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.main)
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
title: t('header.products.fines.items.auto.title'),
|
|
206
|
+
subtitle: t('header.products.fines.items.auto.subtitle'),
|
|
207
|
+
icon: IconCar,
|
|
208
|
+
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.avto)
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
title: t('header.products.fines.items.wholesaleAuto.title'),
|
|
212
|
+
subtitle: t('header.products.fines.items.wholesaleAuto.subtitle'),
|
|
213
|
+
icon: IconTruck,
|
|
214
|
+
to: buildLocalizedUrl(locale, myLayer.avtoUrl, PAGES.fines.bulk)
|
|
215
|
+
}
|
|
216
|
+
]
|
|
217
|
+
},
|
|
234
218
|
{
|
|
235
219
|
key: 'fea',
|
|
220
|
+
is_new: true,
|
|
236
221
|
name: t('header.products.fea.label'),
|
|
237
222
|
icon: AIconGlobe,
|
|
238
223
|
items: [
|
|
@@ -281,7 +266,25 @@ export const useHeaderNavigationLinks = () => {
|
|
|
281
266
|
},
|
|
282
267
|
]
|
|
283
268
|
},
|
|
284
|
-
|
|
269
|
+
{
|
|
270
|
+
key: 'work',
|
|
271
|
+
name: t('header.products.jobs.label'),
|
|
272
|
+
icon: AIconWorkBag,
|
|
273
|
+
items: [
|
|
274
|
+
{
|
|
275
|
+
title: t('header.products.jobs.items.vacancies.title'),
|
|
276
|
+
icon: IconWork,
|
|
277
|
+
subtitle: t('header.products.jobs.items.vacancies.subtitle'),
|
|
278
|
+
to: myLayer.workUrl + PAGES.work.vacancy
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
title: t('header.products.jobs.items.resume.title'),
|
|
282
|
+
subtitle: t('header.products.jobs.items.resume.subtitle'),
|
|
283
|
+
icon: IconDocument,
|
|
284
|
+
to: myLayer.workUrl + PAGES.work.summary
|
|
285
|
+
}
|
|
286
|
+
]
|
|
287
|
+
},
|
|
285
288
|
]
|
|
286
289
|
})
|
|
287
290
|
}
|