@designcrowd/fe-shared-lib 1.0.8 → 1.0.9-ast-modal
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/package.json +2 -1
- package/src/atoms/components/Modal/Modal.vue +13 -1
- package/src/experiences/components/AuthFlow/AuthLegal.vue +44 -4
- package/src/experiences/components/AuthFlow/ForgotPassword.vue +31 -19
- package/src/experiences/components/AuthFlow/ForgotPasswordModal.vue +6 -0
- package/src/experiences/components/AuthFlow/SignIn.vue +47 -24
- package/src/experiences/components/AuthFlow/SignUp.vue +47 -20
- package/src/experiences/components/AuthFlow/SocialSignIn.vue +14 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designcrowd/fe-shared-lib",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9-ast-modal",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "npm run storybook",
|
|
6
6
|
"build": "npm run build:css --production",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
+
"@nuxtjs/i18n": "^9.2.1",
|
|
20
21
|
"autoprefixer": "10.4.17",
|
|
21
22
|
"axios": "1.6.7",
|
|
22
23
|
"core-js": "3.35.1",
|
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
<div
|
|
3
3
|
v-show="visible"
|
|
4
4
|
:aria-hidden="visible ? 'false' : 'true'"
|
|
5
|
-
class="tw-bg-black tw-
|
|
5
|
+
class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
|
|
6
6
|
:class="{
|
|
7
7
|
'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
|
|
8
8
|
'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
|
|
9
|
+
'tw-bg-opacity-75': !darkOverlay,
|
|
9
10
|
}"
|
|
10
11
|
@mousedown.self="close"
|
|
11
12
|
>
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
'tw-rounded-md': fullScreenBreakpoint !== 'sm',
|
|
24
25
|
'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
|
|
25
26
|
'modal-image': isImageMode,
|
|
27
|
+
'tw-bg-transparent': transparentModal,
|
|
26
28
|
},
|
|
27
29
|
classes,
|
|
28
30
|
]"
|
|
@@ -144,6 +146,16 @@ export default {
|
|
|
144
146
|
required: false,
|
|
145
147
|
default: false,
|
|
146
148
|
},
|
|
149
|
+
darkOverlay: {
|
|
150
|
+
type: Boolean,
|
|
151
|
+
required: false,
|
|
152
|
+
default: false,
|
|
153
|
+
},
|
|
154
|
+
transparentModal: {
|
|
155
|
+
type: Boolean,
|
|
156
|
+
required: false,
|
|
157
|
+
default: false,
|
|
158
|
+
},
|
|
147
159
|
},
|
|
148
160
|
computed: {
|
|
149
161
|
isImageMode() {
|
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<div v-if="showKeypathTermsAndConditions" class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
|
|
3
|
+
<i18n-t :keypath="termsAndConditionsContentKeyPath">
|
|
4
|
+
<template #termsOfUseLabel>
|
|
5
|
+
<a
|
|
6
|
+
:href="termsAndConditionsLink"
|
|
7
|
+
target="_blank"
|
|
8
|
+
class="tw-text-info-500"
|
|
9
|
+
:class="{ 'hover:tw-underline': isDesignCom }"
|
|
10
|
+
>
|
|
11
|
+
{{ termsOfUseLabel }}
|
|
12
|
+
</a>
|
|
13
|
+
</template>
|
|
14
|
+
<template #privacyPolicyLabel>
|
|
15
|
+
<a
|
|
16
|
+
:href="privacyPolicyLink"
|
|
17
|
+
target="_blank"
|
|
18
|
+
class="tw-text-info-500"
|
|
19
|
+
:class="{ 'hover:tw-underline': isDesignCom }"
|
|
20
|
+
>
|
|
21
|
+
{{ privacyPolicyLabel }}
|
|
22
|
+
</a>
|
|
23
|
+
</template>
|
|
24
|
+
</i18n-t>
|
|
25
|
+
</div>
|
|
26
|
+
<p v-else class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
|
|
3
27
|
<span v-if="isPartnerTheme">
|
|
4
28
|
{{ legal.BY_PROCEEDING_TEXT[theme] }}
|
|
5
29
|
<a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
|
|
@@ -19,9 +43,7 @@
|
|
|
19
43
|
<a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
|
|
20
44
|
>Privacy Policy</a
|
|
21
45
|
>
|
|
22
|
-
<span>
|
|
23
|
-
and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span
|
|
24
|
-
>
|
|
46
|
+
<span> and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span>
|
|
25
47
|
</p>
|
|
26
48
|
</template>
|
|
27
49
|
|
|
@@ -44,10 +66,25 @@ export default {
|
|
|
44
66
|
type: Boolean,
|
|
45
67
|
default: false,
|
|
46
68
|
},
|
|
69
|
+
termsAndConditions: {
|
|
70
|
+
type: Object,
|
|
71
|
+
required: false,
|
|
72
|
+
default: undefined,
|
|
73
|
+
},
|
|
74
|
+
termsAndConditionsContentKeyPath: {
|
|
75
|
+
type: String,
|
|
76
|
+
required: false,
|
|
77
|
+
default: undefined,
|
|
78
|
+
},
|
|
47
79
|
},
|
|
48
80
|
data() {
|
|
49
81
|
return {
|
|
50
82
|
legal: LEGAL,
|
|
83
|
+
termsAndConditionsLabel:
|
|
84
|
+
this.termsAndConditions?.label ??
|
|
85
|
+
'By proceeding you accept our {termsOfUseLabel} and {privacyPolicyLabel} and agree to receive future updates from',
|
|
86
|
+
termsOfUseLabel: this.termsAndConditions?.termsOfUseLabel ?? 'Terms of Use',
|
|
87
|
+
privacyPolicyLabel: this.termsAndConditions?.privacyPolicyLabel ?? 'Privacy Policy',
|
|
51
88
|
};
|
|
52
89
|
},
|
|
53
90
|
computed: {
|
|
@@ -63,6 +100,9 @@ export default {
|
|
|
63
100
|
}
|
|
64
101
|
return this.privacyPolicyUrl;
|
|
65
102
|
},
|
|
103
|
+
showKeypathTermsAndConditions() {
|
|
104
|
+
return !this.isPartnerTheme && !!this.termsAndConditionsContentKeyPath && !!this.termsAndConditions
|
|
105
|
+
},
|
|
66
106
|
},
|
|
67
107
|
};
|
|
68
108
|
</script>
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
<Button
|
|
6
6
|
variant="secondary"
|
|
7
7
|
size="small"
|
|
8
|
-
label="
|
|
8
|
+
:label="resendPasswordEmailLabel"
|
|
9
9
|
class="tw-hidden sm:tw-inline tw-absolute tw-right-2 md:tw-right-6 tw-top-1/2 tw-transform tw--translate-y-1/2"
|
|
10
10
|
@on-click="submitForgotPasswordForm"
|
|
11
11
|
/>
|
|
12
12
|
<Button
|
|
13
13
|
variant="secondary"
|
|
14
14
|
size="medium"
|
|
15
|
-
label="
|
|
15
|
+
:label="resendPasswordEmailLabel"
|
|
16
16
|
:full-width="true"
|
|
17
17
|
class="sm:tw-hidden tw-mt-2"
|
|
18
18
|
@on-click="submitForgotPasswordForm"
|
|
@@ -32,19 +32,19 @@
|
|
|
32
32
|
}"
|
|
33
33
|
>
|
|
34
34
|
<div class="tw-w-full tw-p-4 md:tw-p-8">
|
|
35
|
-
<h2 v-if="
|
|
35
|
+
<h2 v-if="showTitle" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-10">
|
|
36
36
|
{{ title }}
|
|
37
37
|
</h2>
|
|
38
|
-
<p class="tw-mb-8 tw-text-grayscale-600">{{
|
|
38
|
+
<p class="tw-mb-8 tw-text-grayscale-600">{{ modalDescription }}</p>
|
|
39
39
|
<form id="forgotPassword" ref="forgotPasswordForm" method="post" @submit="validate">
|
|
40
40
|
<input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
|
|
41
|
-
<label for="email" class="tw-sr-only">
|
|
41
|
+
<label for="email" class="tw-sr-only"> {{ emailLabel }} </label>
|
|
42
42
|
<input
|
|
43
43
|
v-model="aEmail"
|
|
44
44
|
name="email"
|
|
45
45
|
:class="{ 'tw-border-error-500': !!emailError }"
|
|
46
46
|
type="email"
|
|
47
|
-
placeholder="
|
|
47
|
+
:placeholder="emailAddressPlaceholderLabel"
|
|
48
48
|
class="email-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
49
49
|
/>
|
|
50
50
|
<p v-if="!!emailError" class="tw-text-error-500 tw-text-sm tw-text-left">
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
<SubmissionButton
|
|
54
54
|
variant="primary"
|
|
55
55
|
size="medium"
|
|
56
|
-
label="
|
|
56
|
+
:label="resetPasswordLabel"
|
|
57
57
|
label-size="larger"
|
|
58
58
|
:is-loading="isLoading"
|
|
59
59
|
:disabled="isLoading"
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
<p
|
|
65
65
|
class="tw-w-full tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-text-center tw-pt-6 tw-pb-8 tw-text-grayscale-600"
|
|
66
66
|
>
|
|
67
|
-
|
|
68
|
-
<button class="tw-text-info-500 tw-cursor-pointer" @click="goBackToLoginClick()">
|
|
67
|
+
{{ rememberedPasswordLabel }}
|
|
68
|
+
<button class="tw-text-info-500 tw-cursor-pointer" @click="goBackToLoginClick()">{{ goBackToLoginLabel }}</button>
|
|
69
69
|
</p>
|
|
70
70
|
</div>
|
|
71
71
|
</div>
|
|
@@ -81,16 +81,6 @@ export default {
|
|
|
81
81
|
SubmissionButton,
|
|
82
82
|
},
|
|
83
83
|
props: {
|
|
84
|
-
title: {
|
|
85
|
-
type: String,
|
|
86
|
-
required: false,
|
|
87
|
-
default: undefined,
|
|
88
|
-
},
|
|
89
|
-
description: {
|
|
90
|
-
type: String,
|
|
91
|
-
required: false,
|
|
92
|
-
default: 'Enter your email below. We will then send a reset-password link to your email address.',
|
|
93
|
-
},
|
|
94
84
|
email: {
|
|
95
85
|
type: String,
|
|
96
86
|
required: false,
|
|
@@ -124,12 +114,30 @@ export default {
|
|
|
124
114
|
required: false,
|
|
125
115
|
default: undefined,
|
|
126
116
|
},
|
|
117
|
+
hideTitle: {
|
|
118
|
+
type: Boolean,
|
|
119
|
+
required: false,
|
|
120
|
+
default: false,
|
|
121
|
+
},
|
|
122
|
+
forgotPasswordContent: {
|
|
123
|
+
type: Object,
|
|
124
|
+
required: false,
|
|
125
|
+
default: () => {},
|
|
126
|
+
},
|
|
127
127
|
},
|
|
128
128
|
data() {
|
|
129
129
|
return {
|
|
130
130
|
isLoading: false,
|
|
131
131
|
aEmail: this.email,
|
|
132
132
|
emailError: undefined,
|
|
133
|
+
resendPasswordEmailLabel: this.forgotPasswordContent?.resendPasswordEmailLabel ?? 'RESEND EMAIL',
|
|
134
|
+
resetPasswordLabel: this.forgotPasswordContent?.resetPasswordLabel ?? 'RESET PASSWORD',
|
|
135
|
+
rememberedPasswordLabel: this.forgotPasswordContent?.rememberedPasswordLabel ?? 'It\'s ok, I remembered my password',
|
|
136
|
+
goBackToLoginLabel: this.forgotPasswordContent?.goBackToLoginLabel ?? 'Go back to login',
|
|
137
|
+
emailAddressPlaceholderLabel: this.forgotPasswordContent?.emailAddressPlaceholderLabel ?? 'Email address',
|
|
138
|
+
emailLabel: this.forgotPasswordContent?.emailLabel ?? 'Email',
|
|
139
|
+
modalDescription: this.forgotPasswordContent?.description ?? 'Enter your email below. We will then send a reset-password link to your email address.',
|
|
140
|
+
title: this.forgotPasswordContent?.title ?? 'Forgot your password?',
|
|
133
141
|
};
|
|
134
142
|
},
|
|
135
143
|
computed: {
|
|
@@ -143,6 +151,10 @@ export default {
|
|
|
143
151
|
isModalMode() {
|
|
144
152
|
return this.onGoBackToSignIn !== undefined;
|
|
145
153
|
},
|
|
154
|
+
showTitle()
|
|
155
|
+
{
|
|
156
|
+
return this.title && !this.hideTitle;
|
|
157
|
+
},
|
|
146
158
|
},
|
|
147
159
|
watch: {
|
|
148
160
|
email(newValue) {
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
:form-background-class="formBackgroundClass"
|
|
11
11
|
:anti-forgery-token="antiForgeryToken"
|
|
12
12
|
:hello-bar="helloBar"
|
|
13
|
+
:forgot-password-content="forgotPasswordContent"
|
|
13
14
|
/>
|
|
14
15
|
</template>
|
|
15
16
|
</AuthModal>
|
|
@@ -57,6 +58,11 @@ export default {
|
|
|
57
58
|
required: false,
|
|
58
59
|
default: undefined,
|
|
59
60
|
},
|
|
61
|
+
forgotPasswordContent: {
|
|
62
|
+
type: Object,
|
|
63
|
+
required: false,
|
|
64
|
+
default: () => {},
|
|
65
|
+
},
|
|
60
66
|
},
|
|
61
67
|
};
|
|
62
68
|
</script>
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
</p>
|
|
58
58
|
<div class="tw-flex tw-flex-col">
|
|
59
59
|
<div>
|
|
60
|
-
<form id="signin" method="post" @submit="validate">
|
|
60
|
+
<form id="signin" action="/identity/account/signin" method="post" @submit="validate">
|
|
61
61
|
<input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
|
|
62
|
-
<label for="userName" class="tw-sr-only">
|
|
62
|
+
<label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
|
|
63
63
|
<input
|
|
64
64
|
v-model="aUserName"
|
|
65
65
|
name="userName"
|
|
@@ -68,14 +68,14 @@
|
|
|
68
68
|
aria-required="true"
|
|
69
69
|
:aria-invalid="!!userNameError"
|
|
70
70
|
autocomplete="email"
|
|
71
|
-
placeholder="
|
|
71
|
+
:placeholder="emailPlaceholderLabel"
|
|
72
72
|
class="email-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
73
73
|
:class="{ 'tw-border-error-500': !!userNameError }"
|
|
74
74
|
/>
|
|
75
75
|
<p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
|
|
76
76
|
{{ userNameError }}
|
|
77
77
|
</p>
|
|
78
|
-
<label v-if="capturePassword" for="password" class="tw-sr-only">
|
|
78
|
+
<label v-if="capturePassword" for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
|
|
79
79
|
<input
|
|
80
80
|
v-if="capturePassword"
|
|
81
81
|
v-model="password"
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
aria-required="true"
|
|
86
86
|
:aria-invalid="!!passwordError"
|
|
87
87
|
autocomplete="current-password"
|
|
88
|
-
placeholder="
|
|
88
|
+
:placeholder="passwordPlaceholderLabel"
|
|
89
89
|
class="password-input tw-h-12 tw-mb-4 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
90
90
|
:class="{ 'tw-border-error-500': !!passwordError }"
|
|
91
91
|
/>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
</p>
|
|
95
95
|
<p v-if="capturePassword" class="tw-w-full tw-text-left tw-mb-4">
|
|
96
96
|
<a class="tw-text-info-500 tw-cursor-pointer hover:tw-underline" @click="forgotPasswordClick()">
|
|
97
|
-
|
|
97
|
+
{{ forgotPasswordLabel }}
|
|
98
98
|
</a>
|
|
99
99
|
</p>
|
|
100
100
|
<SubmissionButton
|
|
@@ -114,6 +114,8 @@
|
|
|
114
114
|
:theme="theme"
|
|
115
115
|
:available-themes="availableThemes"
|
|
116
116
|
:is-design-com="isDesignCom"
|
|
117
|
+
:terms-and-conditions="termsAndConditions"
|
|
118
|
+
:terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
|
|
117
119
|
/>
|
|
118
120
|
</div>
|
|
119
121
|
|
|
@@ -122,7 +124,7 @@
|
|
|
122
124
|
<div
|
|
123
125
|
class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"
|
|
124
126
|
></div>
|
|
125
|
-
<span class="tw-px-4">
|
|
127
|
+
<span class="tw-px-4"> {{ orLabel }} </span>
|
|
126
128
|
<div
|
|
127
129
|
class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"
|
|
128
130
|
></div>
|
|
@@ -138,6 +140,8 @@
|
|
|
138
140
|
:disabled="isLoading"
|
|
139
141
|
:facebook-loading="facebookLoading"
|
|
140
142
|
:google-loading="googleLoading"
|
|
143
|
+
:login-with-google-label="loginWithGoogleLabel"
|
|
144
|
+
:login-with-facebook-label="loginWithFacebookLabel"
|
|
141
145
|
/>
|
|
142
146
|
</div>
|
|
143
147
|
</div>
|
|
@@ -148,7 +152,9 @@
|
|
|
148
152
|
>
|
|
149
153
|
<p>
|
|
150
154
|
{{ getSignUpText }}
|
|
151
|
-
<a :href="
|
|
155
|
+
<a :href="signUpUrl" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }">{{
|
|
156
|
+
signUpLabel
|
|
157
|
+
}}</a>
|
|
152
158
|
</p>
|
|
153
159
|
</div>
|
|
154
160
|
</div>
|
|
@@ -156,8 +162,8 @@
|
|
|
156
162
|
</div>
|
|
157
163
|
</template>
|
|
158
164
|
<script>
|
|
159
|
-
import HelloBar from '
|
|
160
|
-
import Button from '
|
|
165
|
+
import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
|
|
166
|
+
import Button from '../../../atoms/components/Button/Button.vue';
|
|
161
167
|
import SubmissionButton from './SubmissionButton.vue';
|
|
162
168
|
import AuthLegal from './AuthLegal.vue';
|
|
163
169
|
import themeMixin from '../../mixins/themeMixin';
|
|
@@ -290,6 +296,21 @@ export default {
|
|
|
290
296
|
required: false,
|
|
291
297
|
default: undefined,
|
|
292
298
|
},
|
|
299
|
+
termsAndConditions: {
|
|
300
|
+
type: Object,
|
|
301
|
+
required: false,
|
|
302
|
+
default: undefined,
|
|
303
|
+
},
|
|
304
|
+
termsAndConditionsContentKeyPath: {
|
|
305
|
+
type: String,
|
|
306
|
+
required: false,
|
|
307
|
+
default: undefined,
|
|
308
|
+
},
|
|
309
|
+
signInContent: {
|
|
310
|
+
type: Object,
|
|
311
|
+
required: false,
|
|
312
|
+
default: () => {},
|
|
313
|
+
},
|
|
293
314
|
},
|
|
294
315
|
data() {
|
|
295
316
|
return {
|
|
@@ -297,6 +318,16 @@ export default {
|
|
|
297
318
|
password: undefined,
|
|
298
319
|
userNameError: undefined,
|
|
299
320
|
passwordError: undefined,
|
|
321
|
+
loginWithGoogleLabel: this.signInContent.loginWithGoogleLabel,
|
|
322
|
+
loginWithFacebookLabel: this.signInContent.loginWithFacebookLabel,
|
|
323
|
+
invalidUsernameErrorLabel: this.signInContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
|
|
324
|
+
missingPasswordErrorLabel: this.signInContent.missingPasswordErrorLabel ?? 'Please enter a password',
|
|
325
|
+
emailLabel: this.signInContent.emailLabel ?? 'Email',
|
|
326
|
+
emailPlaceholderLabel: this.signInContent.emailPlaceholderLabel ?? 'Email Address',
|
|
327
|
+
passwordPlaceholderLabel: this.signInContent.passwordPlaceholderLabel ?? 'Password',
|
|
328
|
+
forgotPasswordLabel: this.signInContent.forgotPasswordLabel ?? 'Forgot Password?',
|
|
329
|
+
orLabel: this.signInContent.orLabel ?? 'or',
|
|
330
|
+
signUpLabel: this.signInContent.signUpLabel ?? 'Sign Up',
|
|
300
331
|
};
|
|
301
332
|
},
|
|
302
333
|
computed: {
|
|
@@ -306,18 +337,6 @@ export default {
|
|
|
306
337
|
submissionButtonLabelLowercase() {
|
|
307
338
|
return this.submissionButtonLabel.toLowerCase();
|
|
308
339
|
},
|
|
309
|
-
getSignUpUrl() {
|
|
310
|
-
if (typeof window === 'undefined') {
|
|
311
|
-
return null;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
const url = new URL(`https://${window.location.host}${this.signUpUrl}`);
|
|
315
|
-
|
|
316
|
-
if (this.aUserName) {
|
|
317
|
-
url.searchParams.append('initialUserName', this.aUserName);
|
|
318
|
-
}
|
|
319
|
-
return url;
|
|
320
|
-
},
|
|
321
340
|
getForgotPasswordUrl() {
|
|
322
341
|
if (typeof window === 'undefined') {
|
|
323
342
|
return null;
|
|
@@ -331,6 +350,10 @@ export default {
|
|
|
331
350
|
return url;
|
|
332
351
|
},
|
|
333
352
|
getRedirectToRecommendedActionUrl() {
|
|
353
|
+
if (typeof window === 'undefined') {
|
|
354
|
+
return null;
|
|
355
|
+
}
|
|
356
|
+
|
|
334
357
|
const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
|
|
335
358
|
if (this.aUserName) {
|
|
336
359
|
url.searchParams.append('email', this.aUserName);
|
|
@@ -359,13 +382,13 @@ export default {
|
|
|
359
382
|
validate(e) {
|
|
360
383
|
this.clearErrorMessages();
|
|
361
384
|
if (!this.aUserName || !isValidEmail(this.aUserName)) {
|
|
362
|
-
this.userNameError =
|
|
385
|
+
this.userNameError = this.invalidUsernameErrorLabel;
|
|
363
386
|
e.preventDefault();
|
|
364
387
|
return false;
|
|
365
388
|
}
|
|
366
389
|
|
|
367
390
|
if (this.capturePassword && !this.password) {
|
|
368
|
-
this.passwordError =
|
|
391
|
+
this.passwordError = this.missingPasswordErrorLabel;
|
|
369
392
|
e.preventDefault();
|
|
370
393
|
return false;
|
|
371
394
|
}
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
<h2 v-if="title" class="tw-text-center tw-text-4xl tw-font-bold tw-mb-6">
|
|
33
33
|
{{ title }}
|
|
34
34
|
</h2>
|
|
35
|
-
<form id="signup" method="post" @submit="validate">
|
|
35
|
+
<form id="signup" action="/identity/account/signup" method="post" @submit="validate">
|
|
36
36
|
<input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
|
|
37
|
-
<label for="userName" class="tw-sr-only">
|
|
37
|
+
<label for="userName" class="tw-sr-only"> {{ emailLabel }} </label>
|
|
38
38
|
<input
|
|
39
39
|
v-model="aUserName"
|
|
40
40
|
name="userName"
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
aria-required="true"
|
|
43
43
|
:aria-invalid="!!userNameError"
|
|
44
44
|
autocomplete="”email”"
|
|
45
|
-
placeholder="
|
|
45
|
+
:placeholder="emailPlaceholderLabel"
|
|
46
46
|
class="email-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
47
47
|
:class="{ 'tw-border-error-500': !!userNameError }"
|
|
48
48
|
/>
|
|
49
49
|
<p v-if="!!userNameError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
|
|
50
50
|
{{ userNameError }}
|
|
51
51
|
</p>
|
|
52
|
-
<label for="password" class="tw-sr-only">
|
|
52
|
+
<label for="password" class="tw-sr-only"> {{ passwordPlaceholderLabel }} </label>
|
|
53
53
|
<input
|
|
54
54
|
v-model="password"
|
|
55
55
|
name="password"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
aria-required="true"
|
|
58
58
|
:aria-invalid="!!passwordError"
|
|
59
59
|
autocomplete="new-password"
|
|
60
|
-
placeholder="
|
|
60
|
+
:placeholder="passwordPlaceholderLabel"
|
|
61
61
|
class="password-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
|
|
62
62
|
:class="{ 'tw-border-error-500': !!passwordError }"
|
|
63
63
|
/>
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
<SubmissionButton
|
|
68
68
|
variant="primary"
|
|
69
69
|
size="medium"
|
|
70
|
-
label="
|
|
70
|
+
:label="submissionButtonLabel"
|
|
71
71
|
label-size="smaller"
|
|
72
72
|
:is-loading="isLoading"
|
|
73
73
|
:disabled="isLoading"
|
|
@@ -80,33 +80,37 @@
|
|
|
80
80
|
:theme="theme"
|
|
81
81
|
:available-themes="availableThemes"
|
|
82
82
|
:is-design-com="isDesignCom"
|
|
83
|
+
:terms-and-conditions="termsAndConditions"
|
|
84
|
+
:terms-and-conditions-content-key-path="termsAndConditionsContentKeyPath"
|
|
83
85
|
/>
|
|
84
86
|
<div v-if="!!loginWithFacebookUrl || !!loginWithGoogleUrl" class="tw-text-center tw-text-grayscale-600">
|
|
85
87
|
<div class="tw-w-full tw-inline-flex tw-items-center tw-mb-4">
|
|
86
88
|
<div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
|
|
87
|
-
<span class="tw-inline tw-px-4">
|
|
89
|
+
<span class="tw-inline tw-px-4">{{ orLabel }}</span>
|
|
88
90
|
<div class="tw-grow tw-h-0 tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-px-4"></div>
|
|
89
91
|
</div>
|
|
90
92
|
<SocialSignIn
|
|
91
93
|
:login-with-google-url="loginWithGoogleUrl"
|
|
92
94
|
:login-with-facebook-url="loginWithFacebookUrl"
|
|
93
95
|
:anti-forgery-token="antiForgeryToken"
|
|
96
|
+
:login-with-google-label="loginWithGoogleLabel"
|
|
97
|
+
:login-with-facebook-label="loginWithFacebookLabel"
|
|
94
98
|
/>
|
|
95
99
|
</div>
|
|
96
100
|
</div>
|
|
97
101
|
<p
|
|
98
102
|
class="tw-w-full tw-border-0 tw-border-t tw-border-solid tw-border-grayscale-400 tw-text-center tw-pt-6 tw-pb-8 tw-text-grayscale-600"
|
|
99
103
|
>
|
|
100
|
-
|
|
101
|
-
<a :href="
|
|
104
|
+
{{ alreadyHaveAnAccountLabel }}
|
|
105
|
+
<a :href="signInUrl" class="tw-text-info-500">{{ loginLabel }}</a>
|
|
102
106
|
</p>
|
|
103
107
|
</div>
|
|
104
108
|
</div>
|
|
105
109
|
</div>
|
|
106
110
|
</template>
|
|
107
111
|
<script>
|
|
108
|
-
import HelloBar from '
|
|
109
|
-
import Button from '
|
|
112
|
+
import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
|
|
113
|
+
import Button from '../../../atoms/components/Button/Button.vue';
|
|
110
114
|
|
|
111
115
|
import SocialSignIn from './SocialSignIn.vue';
|
|
112
116
|
import SubmissionButton from './SubmissionButton.vue';
|
|
@@ -177,6 +181,21 @@ export default {
|
|
|
177
181
|
type: Boolean,
|
|
178
182
|
default: false,
|
|
179
183
|
},
|
|
184
|
+
termsAndConditions: {
|
|
185
|
+
type: Object,
|
|
186
|
+
required: false,
|
|
187
|
+
default: undefined,
|
|
188
|
+
},
|
|
189
|
+
termsAndConditionsContentKeyPath: {
|
|
190
|
+
type: String,
|
|
191
|
+
required: false,
|
|
192
|
+
default: undefined,
|
|
193
|
+
},
|
|
194
|
+
signUpContent: {
|
|
195
|
+
type: Object,
|
|
196
|
+
required: false,
|
|
197
|
+
default: () => {},
|
|
198
|
+
},
|
|
180
199
|
},
|
|
181
200
|
data() {
|
|
182
201
|
return {
|
|
@@ -185,17 +204,25 @@ export default {
|
|
|
185
204
|
password: null,
|
|
186
205
|
passwordError: undefined,
|
|
187
206
|
userNameError: null,
|
|
207
|
+
invalidUsernameErrorLabel: this.signUpContent.invalidUsernameErrorLabel ?? 'Please enter a valid email address',
|
|
208
|
+
missingPasswordErrorLabel: this.signUpContent.missingPasswordErrorLabel ?? 'Please enter a password',
|
|
209
|
+
submissionButtonLabel: this.signUpContent.submissionButtonLabel ?? 'Sign Up',
|
|
210
|
+
loginWithGoogleLabel: this.signUpContent.loginWithGoogleLabel,
|
|
211
|
+
loginWithFacebookLabel: this.signUpContent.loginWithFacebookLabel,
|
|
212
|
+
emailLabel: this.signUpContent.emailLabel ?? 'Email',
|
|
213
|
+
emailPlaceholderLabel: this.signUpContent.emailPlaceholderLabel ?? 'Email',
|
|
214
|
+
passwordPlaceholderLabel: this.signUpContent.passwordPlaceholderLabel ?? 'Password',
|
|
215
|
+
alreadyHaveAnAccountLabel: this.signUpContent.alreadyHaveAnAccountLabel ?? 'Already have an account?',
|
|
216
|
+
orLabel: this.signUpContent.orLabel ?? 'or',
|
|
217
|
+
loginLabel: this.signUpContent.loginLabel ?? 'Login',
|
|
188
218
|
};
|
|
189
219
|
},
|
|
190
220
|
computed: {
|
|
191
|
-
getRedirectToSignInUrl() {
|
|
192
|
-
const url = new URL(`https://${window.location.host}${this.signInUrl}`);
|
|
193
|
-
if (this.aUserName) {
|
|
194
|
-
url.searchParams.append('initialUserName', this.aUserName);
|
|
195
|
-
}
|
|
196
|
-
return url;
|
|
197
|
-
},
|
|
198
221
|
getRedirectToRecommendedActionUrl() {
|
|
222
|
+
if (typeof window === 'undefined') {
|
|
223
|
+
return null;
|
|
224
|
+
}
|
|
225
|
+
|
|
199
226
|
const url = new URL(`https://${window.location.host}${this.recommendedActionLink}`);
|
|
200
227
|
if (this.aUserName) {
|
|
201
228
|
url.searchParams.append('email', this.aUserName);
|
|
@@ -216,10 +243,10 @@ export default {
|
|
|
216
243
|
this.passwordError = undefined;
|
|
217
244
|
|
|
218
245
|
if (!this.aUserName) {
|
|
219
|
-
this.userNameError =
|
|
246
|
+
this.userNameError = this.invalidUsernameErrorLabel;
|
|
220
247
|
}
|
|
221
248
|
if (!this.password) {
|
|
222
|
-
this.passwordError =
|
|
249
|
+
this.passwordError = this.missingPasswordErrorLabel;
|
|
223
250
|
}
|
|
224
251
|
|
|
225
252
|
e.preventDefault();
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
>
|
|
10
10
|
<input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
|
|
11
11
|
<SocialSignInButton
|
|
12
|
-
label="
|
|
12
|
+
:label="googleLoginLabel"
|
|
13
13
|
type="google"
|
|
14
14
|
:disabled="disabled"
|
|
15
15
|
:is-loading="googleLoading"
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
>
|
|
27
27
|
<input type="hidden" name="__RequestVerificationToken" :value="antiForgeryToken" />
|
|
28
28
|
<SocialSignInButton
|
|
29
|
-
label="
|
|
29
|
+
:label="facebookLoginLabel"
|
|
30
30
|
type="facebook"
|
|
31
31
|
:disabled="disabled"
|
|
32
32
|
:is-loading="facebookLoading"
|
|
@@ -88,12 +88,24 @@ export default {
|
|
|
88
88
|
required: false,
|
|
89
89
|
default: undefined,
|
|
90
90
|
},
|
|
91
|
+
loginWithGoogleLabel: {
|
|
92
|
+
type: String,
|
|
93
|
+
required: false,
|
|
94
|
+
default: undefined,
|
|
95
|
+
},
|
|
96
|
+
loginWithFacebookLabel: {
|
|
97
|
+
type: String,
|
|
98
|
+
required: false,
|
|
99
|
+
default: undefined,
|
|
100
|
+
},
|
|
91
101
|
},
|
|
92
102
|
data() {
|
|
93
103
|
return {
|
|
94
104
|
formFacebookUrl: this.loginWithFacebookUrl,
|
|
95
105
|
formGoogleUrl: this.loginWithGoogleUrl,
|
|
96
106
|
formAntiForgeryToken: this.antiForgeryToken,
|
|
107
|
+
googleLoginLabel: this.loginWithGoogleLabel ?? 'Continue with Google',
|
|
108
|
+
facebookLoginLabel: this.loginWithFacebookLabel ?? 'Continue with Facebook',
|
|
97
109
|
};
|
|
98
110
|
},
|
|
99
111
|
methods: {
|