@everymatrix/user-login 1.15.0 → 1.16.1

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 (14) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/user-login.cjs.entry.js +30 -19
  3. package/dist/cjs/user-login.cjs.js +1 -1
  4. package/dist/collection/components/user-login/user-login.js +25 -18
  5. package/dist/collection/utils/locale.utils.js +10 -5
  6. package/dist/components/user-login.js +31 -20
  7. package/dist/esm/loader.js +1 -1
  8. package/dist/esm/user-login.entry.js +30 -19
  9. package/dist/esm/user-login.js +1 -1
  10. package/dist/types/components/user-login/user-login.d.ts +1 -2
  11. package/dist/user-login/p-59b01e2b.entry.js +1 -0
  12. package/dist/user-login/user-login.esm.js +1 -1
  13. package/package.json +1 -1
  14. package/dist/user-login/p-09aa993f.entry.js +0 -1
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy([["user-login.cjs",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"checkValid":[32]}]]]], options);
17
+ return index.bootstrapLazy([["user-login.cjs",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"hasError":[32]}]]]], options);
18
18
  });
19
19
  };
20
20
 
package/dist/cjs/user-login.cjs.entry.js CHANGED
@@ -12,35 +12,40 @@ const TRANSLATIONS = {
12
12
  forgotPassword: 'Forgot Password',
13
13
  userEmail: 'Username or Email',
14
14
  password: 'Password',
15
- login: 'Login'
15
+ login: 'Login',
16
+ genericError: 'An unexpected error has occured'
16
17
  },
17
18
  ro: {
18
19
  invalidField: 'This field is invalid',
19
20
  forgotPassword: 'Forgot Password',
20
21
  userEmail: 'Username or Email',
21
22
  password: 'Password',
22
- login: 'Login'
23
+ login: 'Login',
24
+ genericError: 'An unexpected error has occured'
23
25
  },
24
26
  fr: {
25
27
  invalidField: 'This field is invalid',
26
28
  forgotPassword: 'Forgot Password',
27
29
  userEmail: 'Username or Email',
28
30
  password: 'Password',
29
- login: 'Login'
31
+ login: 'Login',
32
+ genericError: 'An unexpected error has occured'
30
33
  },
31
34
  cs: {
32
35
  invalidField: 'Ovo polje je nevažeće.',
33
36
  forgotPassword: 'Zaboravio sam lozinku ',
34
37
  userEmail: 'Korisničko ime ili email',
35
38
  password: 'Lozinka',
36
- login: 'Prijava'
39
+ login: 'Prijava',
40
+ genericError: 'An unexpected error has occured'
37
41
  },
38
42
  de: {
39
43
  invalidField: 'This field is invalid',
40
44
  forgotPassword: 'Forgot Password',
41
45
  userEmail: 'Username or Email',
42
46
  password: 'Password',
43
- login: 'Login'
47
+ login: 'Login',
48
+ genericError: 'An unexpected error has occured'
44
49
  },
45
50
  };
46
51
  const getTranslations = (url) => {
@@ -110,7 +115,7 @@ const UserLogin = class {
110
115
  /**
111
116
  * Password regex
112
117
  */
113
- this.passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$';
118
+ this.passwordRegex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{8,20}$';
114
119
  /**
115
120
  * Password regex options
116
121
  */
@@ -128,7 +133,7 @@ const UserLogin = class {
128
133
  this.isPasswordVisible = false;
129
134
  this.limitStylingAppends = false;
130
135
  this.errorMessage = '';
131
- this.checkValid = true;
136
+ this.hasError = false;
132
137
  this.userLogin = async ({ username, password }) => {
133
138
  let headers = {
134
139
  'Content-Type': 'application/json'
@@ -149,11 +154,13 @@ const UserLogin = class {
149
154
  var _a;
150
155
  if (data.sessionId) {
151
156
  window.postMessage({ type: 'UserSessionID', session: data.sessionID, userid: data.universalID }, window.location.href);
152
- this.isFormValid(this.errorMessage = '');
157
+ this.hasError = false;
153
158
  }
154
159
  else {
160
+ // handles errors thrown by api
161
+ this.hasError = true;
155
162
  this.errorMessage = (_a = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message;
156
- this.isFormValid(this.errorMessage);
163
+ console.error(this.errorMessage);
157
164
  window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
158
165
  window.postMessage({ type: 'WidgetNotification', data: {
159
166
  type: 'error',
@@ -161,13 +168,17 @@ const UserLogin = class {
161
168
  } }, window.location.href);
162
169
  }
163
170
  }).catch((err) => {
164
- this.errorMessage = err;
165
- console.log('Error', err);
171
+ // handles unexpected errors
172
+ console.error(err);
173
+ this.hasError = true;
174
+ this.errorMessage = translate('genericError', this.lang);
175
+ window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
176
+ window.postMessage({ type: 'WidgetNotification', data: {
177
+ type: 'error',
178
+ message: this.errorMessage
179
+ } }, window.location.href);
166
180
  });
167
181
  };
168
- this.isFormValid = (error) => {
169
- this.checkValid = (error === '');
170
- };
171
182
  this.setClientStyling = () => {
172
183
  let sheet = document.createElement('style');
173
184
  sheet.innerHTML = this.clientStyling;
@@ -184,7 +195,7 @@ const UserLogin = class {
184
195
  });
185
196
  };
186
197
  this.handleInputChange = (event, location) => {
187
- this.checkValid = true;
198
+ this.hasError = false;
188
199
  const inputValue = event.target.value;
189
200
  if (location === 'user') {
190
201
  this.userNameEmail = inputValue;
@@ -233,11 +244,11 @@ const UserLogin = class {
233
244
  let visibilityIcon = index.h("span", { class: "InputIcon" }, this.isPasswordVisible &&
234
245
  index.h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, index.h("g", { transform: "translate(-110.856 -23.242)" }, index.h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), index.h("g", { transform: "translate(117.499 27.37)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), index.h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), index.h("g", { transform: "translate(110.856 24.899)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), index.h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), index.h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
235
246
  index.h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, index.h("g", { transform: "translate(-14.185 -27.832)" }, index.h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), index.h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
236
- let userIdentification = index.h("div", { class: "FormBox" }, index.h("div", { class: "FormValue" }, index.h("div", { class: (!this.isValidUserEmail || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, index.h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), index.h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || !this.checkValid ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
237
- index.h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), index.h("div", { class: (!this.isValidPassword || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, index.h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), index.h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || !this.checkValid ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
247
+ let userIdentification = index.h("div", { class: "FormBox" }, index.h("div", { class: "FormValue" }, index.h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, index.h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), index.h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
248
+ index.h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), index.h("div", { class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, index.h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), index.h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
238
249
  index.h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
239
- index.h("div", { class: "ForgotPassword" }, index.h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), index.h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.errorMessage &&
240
- index.h("p", { class: "CredentialsError" }, this.errorMessage)));
250
+ index.h("div", { class: "ForgotPassword" }, index.h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), index.h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.hasError &&
251
+ index.h("p", { class: "CredentialsError" }, this.errorMessage ? this.errorMessage : translate('genericError', this.lang))));
241
252
  return index.h("section", { ref: el => this.stylingContainer = el }, userIdentification);
242
253
  }
243
254
  static get watchers() { return {
package/dist/cjs/user-login.cjs.js CHANGED
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- return index.bootstrapLazy([["user-login.cjs",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"checkValid":[32]}]]]], options);
18
+ return index.bootstrapLazy([["user-login.cjs",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"hasError":[32]}]]]], options);
19
19
  });
package/dist/collection/components/user-login/user-login.js CHANGED
@@ -37,7 +37,7 @@ export class UserLogin {
37
37
  /**
38
38
  * Password regex
39
39
  */
40
- this.passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$';
40
+ this.passwordRegex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{8,20}$';
41
41
  /**
42
42
  * Password regex options
43
43
  */
@@ -55,7 +55,7 @@ export class UserLogin {
55
55
  this.isPasswordVisible = false;
56
56
  this.limitStylingAppends = false;
57
57
  this.errorMessage = '';
58
- this.checkValid = true;
58
+ this.hasError = false;
59
59
  this.userLogin = async ({ username, password }) => {
60
60
  let headers = {
61
61
  'Content-Type': 'application/json'
@@ -76,11 +76,13 @@ export class UserLogin {
76
76
  var _a;
77
77
  if (data.sessionId) {
78
78
  window.postMessage({ type: 'UserSessionID', session: data.sessionID, userid: data.universalID }, window.location.href);
79
- this.isFormValid(this.errorMessage = '');
79
+ this.hasError = false;
80
80
  }
81
81
  else {
82
+ // handles errors thrown by api
83
+ this.hasError = true;
82
84
  this.errorMessage = (_a = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message;
83
- this.isFormValid(this.errorMessage);
85
+ console.error(this.errorMessage);
84
86
  window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
85
87
  window.postMessage({ type: 'WidgetNotification', data: {
86
88
  type: 'error',
@@ -88,12 +90,17 @@ export class UserLogin {
88
90
  } }, window.location.href);
89
91
  }
90
92
  }).catch((err) => {
91
- this.errorMessage = err;
92
- console.log('Error', err);
93
+ // handles unexpected errors
94
+ console.error(err);
95
+ this.hasError = true;
96
+ this.errorMessage = translate('genericError', this.lang);
97
+ window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
98
+ window.postMessage({ type: 'WidgetNotification', data: {
99
+ type: 'error',
100
+ message: this.errorMessage
101
+ } }, window.location.href);
93
102
  });
94
- };
95
- this.isFormValid = (error) => {
96
- this.checkValid = (error === '');
103
+ ;
97
104
  };
98
105
  this.setClientStyling = () => {
99
106
  let sheet = document.createElement('style');
@@ -111,7 +118,7 @@ export class UserLogin {
111
118
  });
112
119
  };
113
120
  this.handleInputChange = (event, location) => {
114
- this.checkValid = true;
121
+ this.hasError = false;
115
122
  const inputValue = event.target.value;
116
123
  if (location === 'user') {
117
124
  this.userNameEmail = inputValue;
@@ -176,23 +183,23 @@ export class UserLogin {
176
183
  h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
177
184
  let userIdentification = h("div", { class: "FormBox" },
178
185
  h("div", { class: "FormValue" },
179
- h("div", { class: (!this.isValidUserEmail || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' },
186
+ h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' },
180
187
  h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }),
181
- h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || !this.checkValid ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)),
188
+ h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)),
182
189
  !this.isValidUserEmail &&
183
190
  h("p", { class: "InvalidField" }, translate('invalidField', this.lang))),
184
- h("div", { class: (!this.isValidPassword || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' },
191
+ h("div", { class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' },
185
192
  visibilityIcon,
186
193
  h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }),
187
- h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || !this.checkValid ? 'FieldInvalid' : '') }, translate('password', this.lang)),
194
+ h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)),
188
195
  !this.isValidPassword &&
189
196
  h("p", { class: "InvalidField" }, translate('invalidField', this.lang))),
190
197
  this.passwordReset == 'true' &&
191
198
  h("div", { class: "ForgotPassword" },
192
199
  h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))),
193
200
  h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)),
194
- this.errorMessage &&
195
- h("p", { class: "CredentialsError" }, this.errorMessage)));
201
+ this.hasError &&
202
+ h("p", { class: "CredentialsError" }, this.errorMessage ? this.errorMessage : translate('genericError', this.lang))));
196
203
  return h("section", { ref: el => this.stylingContainer = el }, userIdentification);
197
204
  }
198
205
  static get is() { return "user-login"; }
@@ -364,7 +371,7 @@ export class UserLogin {
364
371
  },
365
372
  "attribute": "password-regex",
366
373
  "reflect": true,
367
- "defaultValue": "'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\\\w\\\\s]).{8,20}$'"
374
+ "defaultValue": "'^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@#$%^&+=!]).{8,20}$'"
368
375
  },
369
376
  "passwordRegexOptions": {
370
377
  "type": "string",
@@ -393,7 +400,7 @@ export class UserLogin {
393
400
  "isPasswordVisible": {},
394
401
  "limitStylingAppends": {},
395
402
  "errorMessage": {},
396
- "checkValid": {}
403
+ "hasError": {}
397
404
  }; }
398
405
  static get watchers() { return [{
399
406
  "propName": "translationUrl",
package/dist/collection/utils/locale.utils.js CHANGED
@@ -6,35 +6,40 @@ const TRANSLATIONS = {
6
6
  forgotPassword: 'Forgot Password',
7
7
  userEmail: 'Username or Email',
8
8
  password: 'Password',
9
- login: 'Login'
9
+ login: 'Login',
10
+ genericError: 'An unexpected error has occured'
10
11
  },
11
12
  ro: {
12
13
  invalidField: 'This field is invalid',
13
14
  forgotPassword: 'Forgot Password',
14
15
  userEmail: 'Username or Email',
15
16
  password: 'Password',
16
- login: 'Login'
17
+ login: 'Login',
18
+ genericError: 'An unexpected error has occured'
17
19
  },
18
20
  fr: {
19
21
  invalidField: 'This field is invalid',
20
22
  forgotPassword: 'Forgot Password',
21
23
  userEmail: 'Username or Email',
22
24
  password: 'Password',
23
- login: 'Login'
25
+ login: 'Login',
26
+ genericError: 'An unexpected error has occured'
24
27
  },
25
28
  cs: {
26
29
  invalidField: 'Ovo polje je nevažeće.',
27
30
  forgotPassword: 'Zaboravio sam lozinku ',
28
31
  userEmail: 'Korisničko ime ili email',
29
32
  password: 'Lozinka',
30
- login: 'Prijava'
33
+ login: 'Prijava',
34
+ genericError: 'An unexpected error has occured'
31
35
  },
32
36
  de: {
33
37
  invalidField: 'This field is invalid',
34
38
  forgotPassword: 'Forgot Password',
35
39
  userEmail: 'Username or Email',
36
40
  password: 'Password',
37
- login: 'Login'
41
+ login: 'Login',
42
+ genericError: 'An unexpected error has occured'
38
43
  },
39
44
  };
40
45
  export const getTranslations = (url) => {
package/dist/components/user-login.js CHANGED
@@ -8,35 +8,40 @@ const TRANSLATIONS = {
8
8
  forgotPassword: 'Forgot Password',
9
9
  userEmail: 'Username or Email',
10
10
  password: 'Password',
11
- login: 'Login'
11
+ login: 'Login',
12
+ genericError: 'An unexpected error has occured'
12
13
  },
13
14
  ro: {
14
15
  invalidField: 'This field is invalid',
15
16
  forgotPassword: 'Forgot Password',
16
17
  userEmail: 'Username or Email',
17
18
  password: 'Password',
18
- login: 'Login'
19
+ login: 'Login',
20
+ genericError: 'An unexpected error has occured'
19
21
  },
20
22
  fr: {
21
23
  invalidField: 'This field is invalid',
22
24
  forgotPassword: 'Forgot Password',
23
25
  userEmail: 'Username or Email',
24
26
  password: 'Password',
25
- login: 'Login'
27
+ login: 'Login',
28
+ genericError: 'An unexpected error has occured'
26
29
  },
27
30
  cs: {
28
31
  invalidField: 'Ovo polje je nevažeće.',
29
32
  forgotPassword: 'Zaboravio sam lozinku ',
30
33
  userEmail: 'Korisničko ime ili email',
31
34
  password: 'Lozinka',
32
- login: 'Prijava'
35
+ login: 'Prijava',
36
+ genericError: 'An unexpected error has occured'
33
37
  },
34
38
  de: {
35
39
  invalidField: 'This field is invalid',
36
40
  forgotPassword: 'Forgot Password',
37
41
  userEmail: 'Username or Email',
38
42
  password: 'Password',
39
- login: 'Login'
43
+ login: 'Login',
44
+ genericError: 'An unexpected error has occured'
40
45
  },
41
46
  };
42
47
  const getTranslations = (url) => {
@@ -108,7 +113,7 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
108
113
  /**
109
114
  * Password regex
110
115
  */
111
- this.passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$';
116
+ this.passwordRegex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{8,20}$';
112
117
  /**
113
118
  * Password regex options
114
119
  */
@@ -126,7 +131,7 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
126
131
  this.isPasswordVisible = false;
127
132
  this.limitStylingAppends = false;
128
133
  this.errorMessage = '';
129
- this.checkValid = true;
134
+ this.hasError = false;
130
135
  this.userLogin = async ({ username, password }) => {
131
136
  let headers = {
132
137
  'Content-Type': 'application/json'
@@ -147,11 +152,13 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
147
152
  var _a;
148
153
  if (data.sessionId) {
149
154
  window.postMessage({ type: 'UserSessionID', session: data.sessionID, userid: data.universalID }, window.location.href);
150
- this.isFormValid(this.errorMessage = '');
155
+ this.hasError = false;
151
156
  }
152
157
  else {
158
+ // handles errors thrown by api
159
+ this.hasError = true;
153
160
  this.errorMessage = (_a = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message;
154
- this.isFormValid(this.errorMessage);
161
+ console.error(this.errorMessage);
155
162
  window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
156
163
  window.postMessage({ type: 'WidgetNotification', data: {
157
164
  type: 'error',
@@ -159,13 +166,17 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
159
166
  } }, window.location.href);
160
167
  }
161
168
  }).catch((err) => {
162
- this.errorMessage = err;
163
- console.log('Error', err);
169
+ // handles unexpected errors
170
+ console.error(err);
171
+ this.hasError = true;
172
+ this.errorMessage = translate('genericError', this.lang);
173
+ window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
174
+ window.postMessage({ type: 'WidgetNotification', data: {
175
+ type: 'error',
176
+ message: this.errorMessage
177
+ } }, window.location.href);
164
178
  });
165
179
  };
166
- this.isFormValid = (error) => {
167
- this.checkValid = (error === '');
168
- };
169
180
  this.setClientStyling = () => {
170
181
  let sheet = document.createElement('style');
171
182
  sheet.innerHTML = this.clientStyling;
@@ -182,7 +193,7 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
182
193
  });
183
194
  };
184
195
  this.handleInputChange = (event, location) => {
185
- this.checkValid = true;
196
+ this.hasError = false;
186
197
  const inputValue = event.target.value;
187
198
  if (location === 'user') {
188
199
  this.userNameEmail = inputValue;
@@ -231,11 +242,11 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
231
242
  let visibilityIcon = h("span", { class: "InputIcon" }, this.isPasswordVisible &&
232
243
  h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { transform: "translate(-110.856 -23.242)" }, h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { transform: "translate(117.499 27.37)" }, h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { transform: "translate(110.856 24.899)" }, h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
233
244
  h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { transform: "translate(-14.185 -27.832)" }, h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
234
- let userIdentification = h("div", { class: "FormBox" }, h("div", { class: "FormValue" }, h("div", { class: (!this.isValidUserEmail || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || !this.checkValid ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
235
- h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { class: (!this.isValidPassword || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || !this.checkValid ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
245
+ let userIdentification = h("div", { class: "FormBox" }, h("div", { class: "FormValue" }, h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
246
+ h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
236
247
  h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
237
- h("div", { class: "ForgotPassword" }, h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.errorMessage &&
238
- h("p", { class: "CredentialsError" }, this.errorMessage)));
248
+ h("div", { class: "ForgotPassword" }, h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.hasError &&
249
+ h("p", { class: "CredentialsError" }, this.errorMessage ? this.errorMessage : translate('genericError', this.lang))));
239
250
  return h("section", { ref: el => this.stylingContainer = el }, userIdentification);
240
251
  }
241
252
  static get watchers() { return {
@@ -260,7 +271,7 @@ const UserLogin$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
260
271
  "isPasswordVisible": [32],
261
272
  "limitStylingAppends": [32],
262
273
  "errorMessage": [32],
263
- "checkValid": [32]
274
+ "hasError": [32]
264
275
  }]);
265
276
  function defineCustomElement$1() {
266
277
  if (typeof customElements === "undefined") {
package/dist/esm/loader.js CHANGED
@@ -10,7 +10,7 @@ const patchEsm = () => {
10
10
  const defineCustomElements = (win, options) => {
11
11
  if (typeof window === 'undefined') return Promise.resolve();
12
12
  return patchEsm().then(() => {
13
- return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"checkValid":[32]}]]]], options);
13
+ return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"hasError":[32]}]]]], options);
14
14
  });
15
15
  };
16
16
 
package/dist/esm/user-login.entry.js CHANGED
@@ -8,35 +8,40 @@ const TRANSLATIONS = {
8
8
  forgotPassword: 'Forgot Password',
9
9
  userEmail: 'Username or Email',
10
10
  password: 'Password',
11
- login: 'Login'
11
+ login: 'Login',
12
+ genericError: 'An unexpected error has occured'
12
13
  },
13
14
  ro: {
14
15
  invalidField: 'This field is invalid',
15
16
  forgotPassword: 'Forgot Password',
16
17
  userEmail: 'Username or Email',
17
18
  password: 'Password',
18
- login: 'Login'
19
+ login: 'Login',
20
+ genericError: 'An unexpected error has occured'
19
21
  },
20
22
  fr: {
21
23
  invalidField: 'This field is invalid',
22
24
  forgotPassword: 'Forgot Password',
23
25
  userEmail: 'Username or Email',
24
26
  password: 'Password',
25
- login: 'Login'
27
+ login: 'Login',
28
+ genericError: 'An unexpected error has occured'
26
29
  },
27
30
  cs: {
28
31
  invalidField: 'Ovo polje je nevažeće.',
29
32
  forgotPassword: 'Zaboravio sam lozinku ',
30
33
  userEmail: 'Korisničko ime ili email',
31
34
  password: 'Lozinka',
32
- login: 'Prijava'
35
+ login: 'Prijava',
36
+ genericError: 'An unexpected error has occured'
33
37
  },
34
38
  de: {
35
39
  invalidField: 'This field is invalid',
36
40
  forgotPassword: 'Forgot Password',
37
41
  userEmail: 'Username or Email',
38
42
  password: 'Password',
39
- login: 'Login'
43
+ login: 'Login',
44
+ genericError: 'An unexpected error has occured'
40
45
  },
41
46
  };
42
47
  const getTranslations = (url) => {
@@ -106,7 +111,7 @@ const UserLogin = class {
106
111
  /**
107
112
  * Password regex
108
113
  */
109
- this.passwordRegex = '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$';
114
+ this.passwordRegex = '^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{8,20}$';
110
115
  /**
111
116
  * Password regex options
112
117
  */
@@ -124,7 +129,7 @@ const UserLogin = class {
124
129
  this.isPasswordVisible = false;
125
130
  this.limitStylingAppends = false;
126
131
  this.errorMessage = '';
127
- this.checkValid = true;
132
+ this.hasError = false;
128
133
  this.userLogin = async ({ username, password }) => {
129
134
  let headers = {
130
135
  'Content-Type': 'application/json'
@@ -145,11 +150,13 @@ const UserLogin = class {
145
150
  var _a;
146
151
  if (data.sessionId) {
147
152
  window.postMessage({ type: 'UserSessionID', session: data.sessionID, userid: data.universalID }, window.location.href);
148
- this.isFormValid(this.errorMessage = '');
153
+ this.hasError = false;
149
154
  }
150
155
  else {
156
+ // handles errors thrown by api
157
+ this.hasError = true;
151
158
  this.errorMessage = (_a = data === null || data === void 0 ? void 0 : data.thirdPartyResponse) === null || _a === void 0 ? void 0 : _a.message;
152
- this.isFormValid(this.errorMessage);
159
+ console.error(this.errorMessage);
153
160
  window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
154
161
  window.postMessage({ type: 'WidgetNotification', data: {
155
162
  type: 'error',
@@ -157,13 +164,17 @@ const UserLogin = class {
157
164
  } }, window.location.href);
158
165
  }
159
166
  }).catch((err) => {
160
- this.errorMessage = err;
161
- console.log('Error', err);
167
+ // handles unexpected errors
168
+ console.error(err);
169
+ this.hasError = true;
170
+ this.errorMessage = translate('genericError', this.lang);
171
+ window.postMessage({ type: "HasError", error: this.errorMessage }, window.location.href);
172
+ window.postMessage({ type: 'WidgetNotification', data: {
173
+ type: 'error',
174
+ message: this.errorMessage
175
+ } }, window.location.href);
162
176
  });
163
177
  };
164
- this.isFormValid = (error) => {
165
- this.checkValid = (error === '');
166
- };
167
178
  this.setClientStyling = () => {
168
179
  let sheet = document.createElement('style');
169
180
  sheet.innerHTML = this.clientStyling;
@@ -180,7 +191,7 @@ const UserLogin = class {
180
191
  });
181
192
  };
182
193
  this.handleInputChange = (event, location) => {
183
- this.checkValid = true;
194
+ this.hasError = false;
184
195
  const inputValue = event.target.value;
185
196
  if (location === 'user') {
186
197
  this.userNameEmail = inputValue;
@@ -229,11 +240,11 @@ const UserLogin = class {
229
240
  let visibilityIcon = h("span", { class: "InputIcon" }, this.isPasswordVisible &&
230
241
  h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.844", height: "12.887", viewBox: "0 0 18.844 12.887" }, h("g", { transform: "translate(-110.856 -23.242)" }, h("circle", { class: "PasswordVisibilityIcon", cx: "0.05", cy: "0.05", r: "0.05", transform: "translate(121.017 31.148)" }), h("g", { transform: "translate(117.499 27.37)" }, h("path", { class: "PasswordVisibilityIcon", d: "M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z", transform: "translate(-142.164 -39.123)" }), h("path", { class: "PasswordVisibilityIcon", d: "M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z", transform: "translate(-136.413 -42.068)" })), h("g", { transform: "translate(110.856 24.899)" }, h("path", { class: "PasswordVisibilityIcon", d: "M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z", transform: "translate(-110.856 -33.157)" }), h("path", { class: "PasswordVisibilityIcon", d: "M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z", transform: "translate(-130.743 -29.617)" })), h("rect", { class: "PasswordVisibilityIcon", width: "0.972", height: "15.861", rx: "0.486", transform: "translate(114.827 23.858) rotate(-39.315)" }))), !this.isPasswordVisible &&
231
242
  h("svg", { onClick: () => this.togglePassword(), class: "TogglePasswordVisibility PasswordVisible", part: "TogglePasswordVisibility", xmlns: "http://www.w3.org/2000/svg", width: "18.843", height: "10.5", viewBox: "0 0 18.843 10.5" }, h("g", { transform: "translate(-14.185 -27.832)" }, h("path", { class: "PasswordVisibilityIcon", d: "M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z", transform: "translate(0)" }), h("circle", { class: "PasswordVisibilityIcon", cx: "2.779", cy: "2.779", r: "2.779", transform: "translate(20.827 30.303)" }))));
232
- let userIdentification = h("div", { class: "FormBox" }, h("div", { class: "FormValue" }, h("div", { class: (!this.isValidUserEmail || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || !this.checkValid ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
233
- h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { class: (!this.isValidPassword || !this.checkValid) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || !this.checkValid ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
243
+ let userIdentification = h("div", { class: "FormBox" }, h("div", { class: "FormValue" }, h("div", { class: (!this.isValidUserEmail || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, h("input", { type: "text", placeholder: '', value: this.userNameEmail, onFocus: (event) => this.handleInputChange(event, 'user'), onInput: (event) => this.handleInputChange(event, 'user'), required: true }), h("label", { class: (this.userNameEmail ? 'FieldFilledIn' : '') + ' ' + (!this.isValidUserEmail || this.hasError ? 'FieldInvalid' : '') }, translate('userEmail', this.lang)), !this.isValidUserEmail &&
244
+ h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), h("div", { class: (!this.isValidPassword || this.hasError) ? 'InputBox InputInvalidBox' : 'InputBox' }, visibilityIcon, h("input", { type: this.isPasswordVisible ? "text" : "password", placeholder: '', value: this.userPassword, onFocus: (event) => this.handleInputChange(event, 'password'), onInput: (event) => this.handleInputChange(event, 'password'), required: true }), h("label", { class: (this.userPassword ? 'FieldFilledIn' : '') + ' ' + (!this.isValidPassword || this.hasError ? 'FieldInvalid' : '') }, translate('password', this.lang)), !this.isValidPassword &&
234
245
  h("p", { class: "InvalidField" }, translate('invalidField', this.lang))), this.passwordReset == 'true' &&
235
- h("div", { class: "ForgotPassword" }, h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.errorMessage &&
236
- h("p", { class: "CredentialsError" }, this.errorMessage)));
246
+ h("div", { class: "ForgotPassword" }, h("button", { onClick: () => this.resetPassword() }, translate('forgotPassword', this.lang))), h("button", { disabled: (!this.isValidUserEmail || !this.isValidPassword || !this.userNameEmail || !this.userPassword), class: "SubmitCredentials", onClick: () => this.userLogin({ username: this.userNameEmail, password: this.userPassword }) }, translate('login', this.lang)), this.hasError &&
247
+ h("p", { class: "CredentialsError" }, this.errorMessage ? this.errorMessage : translate('genericError', this.lang))));
237
248
  return h("section", { ref: el => this.stylingContainer = el }, userIdentification);
238
249
  }
239
250
  static get watchers() { return {
package/dist/esm/user-login.js CHANGED
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"checkValid":[32]}]]]], options);
16
+ return bootstrapLazy([["user-login",[[1,"user-login",{"endpoint":[513],"lang":[1537],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"passwordReset":[513,"password-reset"],"userEmailRegex":[513,"user-email-regex"],"userEmailRegexOptions":[513,"user-email-regex-options"],"passwordRegex":[513,"password-regex"],"passwordRegexOptions":[513,"password-regex-options"],"userNameEmail":[32],"userPassword":[32],"isValidUserEmail":[32],"isValidPassword":[32],"isPasswordVisible":[32],"limitStylingAppends":[32],"errorMessage":[32],"hasError":[32]}]]]], options);
17
17
  });
package/dist/types/components/user-login/user-login.d.ts CHANGED
@@ -52,7 +52,7 @@ export declare class UserLogin {
52
52
  isPasswordVisible: boolean;
53
53
  private limitStylingAppends;
54
54
  private errorMessage;
55
- private checkValid;
55
+ private hasError;
56
56
  handleNewTranslations(): void;
57
57
  componentWillLoad(): Promise<void>;
58
58
  private stylingContainer;
@@ -60,7 +60,6 @@ export declare class UserLogin {
60
60
  username: any;
61
61
  password: any;
62
62
  }) => Promise<any>;
63
- isFormValid: (error: any) => void;
64
63
  setClientStyling: () => void;
65
64
  setClientStylingURL: () => void;
66
65
  handleInputChange: (event: Event, location: string) => void;
package/dist/user-login/p-59b01e2b.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as i,h as s}from"./p-0c865c25.js";const t=["ro","en","cz","de"],o={en:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login",genericError:"An unexpected error has occured"},ro:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login",genericError:"An unexpected error has occured"},fr:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login",genericError:"An unexpected error has occured"},cs:{invalidField:"Ovo polje je nevažeće.",forgotPassword:"Zaboravio sam lozinku ",userEmail:"Korisničko ime ili email",password:"Lozinka",login:"Prijava",genericError:"An unexpected error has occured"},de:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login",genericError:"An unexpected error has occured"}},e=i=>new Promise((s=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((s=>{for(let t in i[s])o[s][t]=i[s][t]})),s(!0)}))})),r=(i,s,e)=>{const r=s;let n=o[void 0!==r&&t.includes(r)?r:"en"][i];if(void 0!==e)for(const[i,s]of Object.entries(e.values)){const t=new RegExp(`{${i}}`,"g");n=n.replace(t,s)}return n},n=class{constructor(s){i(this,s),this.endpoint="",this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.passwordReset="false",this.userEmailRegex="^(?:[A-Z0-9][A-Z0-9._%@+-]{5,30}|[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4})$",this.userEmailRegexOptions="i",this.passwordRegex="^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@#$%^&+=!]).{8,20}$",this.passwordRegexOptions="",this.userNameEmail="",this.userPassword="",this.isValidUserEmail=!0,this.isValidPassword=!0,this.isPasswordVisible=!1,this.limitStylingAppends=!1,this.errorMessage="",this.hasError=!1,this.userLogin=async({username:i,password:s})=>{let t={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:i,password:s})};fetch(`${this.endpoint}/player/legislation/login`,t).then((i=>i.json())).then((i=>{var s;i.sessionId?(window.postMessage({type:"UserSessionID",session:i.sessionID,userid:i.universalID},window.location.href),this.hasError=!1):(this.hasError=!0,this.errorMessage=null===(s=null==i?void 0:i.thirdPartyResponse)||void 0===s?void 0:s.message,console.error(this.errorMessage),window.postMessage({type:"HasError",error:this.errorMessage},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"error",message:this.errorMessage}},window.location.href))})).catch((i=>{console.error(i),this.hasError=!0,this.errorMessage=r("genericError",this.lang),window.postMessage({type:"HasError",error:this.errorMessage},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"error",message:this.errorMessage}},window.location.href)}))},this.setClientStyling=()=>{let i=document.createElement("style");i.innerHTML=this.clientStyling,this.stylingContainer.appendChild(i)},this.setClientStylingURL=()=>{let i=new URL(this.clientStylingUrl),s=document.createElement("style");fetch(i.href).then((i=>i.text())).then((i=>{s.innerHTML=i,setTimeout((()=>{this.stylingContainer.appendChild(s)}),1)}))},this.handleInputChange=(i,s)=>{this.hasError=!1;const t=i.target.value;"user"===s?(this.userNameEmail=t,this.isValidUserEmail=this.userEmailValidation(this.userNameEmail)):(this.userPassword=t,this.isValidPassword=this.passwordValidation(t))},this.userEmailValidation=i=>new RegExp(this.userEmailRegex,this.userEmailRegexOptions).test(i),this.passwordValidation=i=>new RegExp(this.passwordRegex,this.passwordRegexOptions).test(i),this.togglePassword=()=>{this.isPasswordVisible=!this.isPasswordVisible},this.resetPassword=()=>{window.postMessage({type:"ResetPassword"},window.location.href)}}handleNewTranslations(){e(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await e(this.translationUrl)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){let i=s("span",{class:"InputIcon"},this.isPasswordVisible&&s("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.844",height:"12.887",viewBox:"0 0 18.844 12.887"},s("g",{transform:"translate(-110.856 -23.242)"},s("circle",{class:"PasswordVisibilityIcon",cx:"0.05",cy:"0.05",r:"0.05",transform:"translate(121.017 31.148)"}),s("g",{transform:"translate(117.499 27.37)"},s("path",{class:"PasswordVisibilityIcon",d:"M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z",transform:"translate(-142.164 -39.123)"}),s("path",{class:"PasswordVisibilityIcon",d:"M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z",transform:"translate(-136.413 -42.068)"})),s("g",{transform:"translate(110.856 24.899)"},s("path",{class:"PasswordVisibilityIcon",d:"M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z",transform:"translate(-110.856 -33.157)"}),s("path",{class:"PasswordVisibilityIcon",d:"M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z",transform:"translate(-130.743 -29.617)"})),s("rect",{class:"PasswordVisibilityIcon",width:"0.972",height:"15.861",rx:"0.486",transform:"translate(114.827 23.858) rotate(-39.315)"}))),!this.isPasswordVisible&&s("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility PasswordVisible",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.843",height:"10.5",viewBox:"0 0 18.843 10.5"},s("g",{transform:"translate(-14.185 -27.832)"},s("path",{class:"PasswordVisibilityIcon",d:"M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z",transform:"translate(0)"}),s("circle",{class:"PasswordVisibilityIcon",cx:"2.779",cy:"2.779",r:"2.779",transform:"translate(20.827 30.303)"})))),t=s("div",{class:"FormBox"},s("div",{class:"FormValue"},s("div",{class:!this.isValidUserEmail||this.hasError?"InputBox InputInvalidBox":"InputBox"},s("input",{type:"text",placeholder:"",value:this.userNameEmail,onFocus:i=>this.handleInputChange(i,"user"),onInput:i=>this.handleInputChange(i,"user"),required:!0}),s("label",{class:(this.userNameEmail?"FieldFilledIn":"")+" "+(!this.isValidUserEmail||this.hasError?"FieldInvalid":"")},r("userEmail",this.lang)),!this.isValidUserEmail&&s("p",{class:"InvalidField"},r("invalidField",this.lang))),s("div",{class:!this.isValidPassword||this.hasError?"InputBox InputInvalidBox":"InputBox"},i,s("input",{type:this.isPasswordVisible?"text":"password",placeholder:"",value:this.userPassword,onFocus:i=>this.handleInputChange(i,"password"),onInput:i=>this.handleInputChange(i,"password"),required:!0}),s("label",{class:(this.userPassword?"FieldFilledIn":"")+" "+(!this.isValidPassword||this.hasError?"FieldInvalid":"")},r("password",this.lang)),!this.isValidPassword&&s("p",{class:"InvalidField"},r("invalidField",this.lang))),"true"==this.passwordReset&&s("div",{class:"ForgotPassword"},s("button",{onClick:()=>this.resetPassword()},r("forgotPassword",this.lang))),s("button",{disabled:!(this.isValidUserEmail&&this.isValidPassword&&this.userNameEmail&&this.userPassword),class:"SubmitCredentials",onClick:()=>this.userLogin({username:this.userNameEmail,password:this.userPassword})},r("login",this.lang)),this.hasError&&s("p",{class:"CredentialsError"},this.errorMessage?this.errorMessage:r("genericError",this.lang))));return s("section",{ref:i=>this.stylingContainer=i},t)}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};n.style=':host{display:block;font-family:"Roboto", sans-serif}section{min-height:100vh;width:100%;background-position:center;background-size:cover}.FormBox{height:100vh;display:flex;position:relative;background:#082649;border:none;backdrop-filter:blur(15px) brightness(80%);justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:310px;border-bottom:2px solid #0797B9}.InputBox.InputInvalidBox::after{content:"";height:2px;width:100%;transition:width 0.6s linear;background:#C23135}.InputBox::after{content:"";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:#0797B9}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:#0797B9;font-size:1em;pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:1em;padding:0 35px 0 5px;color:#fff;box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-3px;font-size:0.7em}.ForgotPassword button{margin:-10px 0 17px;font-size:0.9em;color:#0797B9;display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.ForgotPassword button:hover{color:#fff}.SubmitCredentials{display:block;margin:0 auto;padding:10px 20px;border-radius:5px;color:#fff;background:linear-gradient(to right, #EA0C66, #77318F);border:none;outline:none;cursor:pointer;font-size:1em}.SubmitCredentials:disabled{background:#707070}.Register{font-size:0.9em;color:#fff;text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;color:#fff;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;top:45px;color:#C23135;font-size:0.7em}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:#C23135;font-size:0.7em;padding:0 0 20px 0;margin:0}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}';export{n as user_login}
package/dist/user-login/user-login.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as s,b as e}from"./p-0c865c25.js";(()=>{const e=import.meta.url,r={};return""!==e&&(r.resourcesUrl=new URL(".",e).href),s(r)})().then((s=>e([["p-09aa993f",[[1,"user-login",{endpoint:[513],lang:[1537],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],passwordReset:[513,"password-reset"],userEmailRegex:[513,"user-email-regex"],userEmailRegexOptions:[513,"user-email-regex-options"],passwordRegex:[513,"password-regex"],passwordRegexOptions:[513,"password-regex-options"],userNameEmail:[32],userPassword:[32],isValidUserEmail:[32],isValidPassword:[32],isPasswordVisible:[32],limitStylingAppends:[32],errorMessage:[32],checkValid:[32]}]]]],s)));
1
+ import{p as s,b as e}from"./p-0c865c25.js";(()=>{const e=import.meta.url,r={};return""!==e&&(r.resourcesUrl=new URL(".",e).href),s(r)})().then((s=>e([["p-59b01e2b",[[1,"user-login",{endpoint:[513],lang:[1537],clientStyling:[513,"client-styling"],clientStylingUrl:[513,"client-styling-url"],translationUrl:[513,"translation-url"],passwordReset:[513,"password-reset"],userEmailRegex:[513,"user-email-regex"],userEmailRegexOptions:[513,"user-email-regex-options"],passwordRegex:[513,"password-regex"],passwordRegexOptions:[513,"password-regex-options"],userNameEmail:[32],userPassword:[32],isValidUserEmail:[32],isValidPassword:[32],isPasswordVisible:[32],limitStylingAppends:[32],errorMessage:[32],hasError:[32]}]]]],s)));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/user-login",
3
- "version": "1.15.0",
3
+ "version": "1.16.1",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/user-login/p-09aa993f.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as i,h as s}from"./p-0c865c25.js";const t=["ro","en","cz","de"],o={en:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login"},ro:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login"},fr:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login"},cs:{invalidField:"Ovo polje je nevažeće.",forgotPassword:"Zaboravio sam lozinku ",userEmail:"Korisničko ime ili email",password:"Lozinka",login:"Prijava"},de:{invalidField:"This field is invalid",forgotPassword:"Forgot Password",userEmail:"Username or Email",password:"Password",login:"Login"}},e=i=>new Promise((s=>{fetch(i).then((i=>i.json())).then((i=>{Object.keys(i).forEach((s=>{for(let t in i[s])o[s][t]=i[s][t]})),s(!0)}))})),r=(i,s,e)=>{const r=s;let n=o[void 0!==r&&t.includes(r)?r:"en"][i];if(void 0!==e)for(const[i,s]of Object.entries(e.values)){const t=new RegExp(`{${i}}`,"g");n=n.replace(t,s)}return n},n=class{constructor(s){i(this,s),this.endpoint="",this.lang="en",this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.passwordReset="false",this.userEmailRegex="^(?:[A-Z0-9][A-Z0-9._%@+-]{5,30}|[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4})$",this.userEmailRegexOptions="i",this.passwordRegex="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,20}$",this.passwordRegexOptions="",this.userNameEmail="",this.userPassword="",this.isValidUserEmail=!0,this.isValidPassword=!0,this.isPasswordVisible=!1,this.limitStylingAppends=!1,this.errorMessage="",this.checkValid=!0,this.userLogin=async({username:i,password:s})=>{let t={method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:i,password:s})};fetch(`${this.endpoint}/player/legislation/login`,t).then((i=>i.json())).then((i=>{var s;i.sessionId?(window.postMessage({type:"UserSessionID",session:i.sessionID,userid:i.universalID},window.location.href),this.isFormValid(this.errorMessage="")):(this.errorMessage=null===(s=null==i?void 0:i.thirdPartyResponse)||void 0===s?void 0:s.message,this.isFormValid(this.errorMessage),window.postMessage({type:"HasError",error:this.errorMessage},window.location.href),window.postMessage({type:"WidgetNotification",data:{type:"error",message:this.errorMessage}},window.location.href))})).catch((i=>{this.errorMessage=i,console.log("Error",i)}))},this.isFormValid=i=>{this.checkValid=""===i},this.setClientStyling=()=>{let i=document.createElement("style");i.innerHTML=this.clientStyling,this.stylingContainer.appendChild(i)},this.setClientStylingURL=()=>{let i=new URL(this.clientStylingUrl),s=document.createElement("style");fetch(i.href).then((i=>i.text())).then((i=>{s.innerHTML=i,setTimeout((()=>{this.stylingContainer.appendChild(s)}),1)}))},this.handleInputChange=(i,s)=>{this.checkValid=!0;const t=i.target.value;"user"===s?(this.userNameEmail=t,this.isValidUserEmail=this.userEmailValidation(this.userNameEmail)):(this.userPassword=t,this.isValidPassword=this.passwordValidation(t))},this.userEmailValidation=i=>new RegExp(this.userEmailRegex,this.userEmailRegexOptions).test(i),this.passwordValidation=i=>new RegExp(this.passwordRegex,this.passwordRegexOptions).test(i),this.togglePassword=()=>{this.isPasswordVisible=!this.isPasswordVisible},this.resetPassword=()=>{window.postMessage({type:"ResetPassword"},window.location.href)}}handleNewTranslations(){e(this.translationUrl)}async componentWillLoad(){this.translationUrl.length>2&&await e(this.translationUrl)}componentDidRender(){!this.limitStylingAppends&&this.stylingContainer&&(this.clientStyling&&this.setClientStyling(),this.clientStylingUrl&&this.setClientStylingURL(),this.limitStylingAppends=!0)}render(){let i=s("span",{class:"InputIcon"},this.isPasswordVisible&&s("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.844",height:"12.887",viewBox:"0 0 18.844 12.887"},s("g",{transform:"translate(-110.856 -23.242)"},s("circle",{class:"PasswordVisibilityIcon",cx:"0.05",cy:"0.05",r:"0.05",transform:"translate(121.017 31.148)"}),s("g",{transform:"translate(117.499 27.37)"},s("path",{class:"PasswordVisibilityIcon",d:"M147.413,43.174a2.774,2.774,0,0,0-3.229-3.943Z",transform:"translate(-142.164 -39.123)"}),s("path",{class:"PasswordVisibilityIcon",d:"M137.031,43.1a2.778,2.778,0,0,0,3.447,4.209Z",transform:"translate(-136.413 -42.068)"})),s("g",{transform:"translate(110.856 24.899)"},s("path",{class:"PasswordVisibilityIcon",d:"M122.538,42.061a7.043,7.043,0,0,1-2.325.53,10.373,10.373,0,0,1-4.393-1.482,36.509,36.509,0,0,1-3.873-2.391.13.13,0,0,1,0-.208,44.141,44.141,0,0,1,3.873-2.651c.394-.233.768-.437,1.13-.622l-.686-.838c-.322.167-.651.347-.99.55a37.989,37.989,0,0,0-3.977,2.729,1.21,1.21,0,0,0-.442.962,1.1,1.1,0,0,0,.494.936,34.416,34.416,0,0,0,3.977,2.469,11.468,11.468,0,0,0,4.886,1.611,8.427,8.427,0,0,0,3.039-.725Z",transform:"translate(-110.856 -33.157)"}),s("path",{class:"PasswordVisibilityIcon",d:"M149.119,34.14a45.875,45.875,0,0,0-4.055-2.729,20.541,20.541,0,0,0-2.547-1.248,5.6,5.6,0,0,0-4.79-.017l.7.856a5.254,5.254,0,0,1,1.672-.346,10.072,10.072,0,0,1,4.445,1.663,34.132,34.132,0,0,1,3.925,2.651.13.13,0,0,1,0,.208,40.2,40.2,0,0,1-3.925,2.391c-.179.092-.352.176-.525.26l.684.835c.1-.054.2-.1.309-.159a36.356,36.356,0,0,0,4.055-2.469,1.067,1.067,0,0,0,.52-.936A1.159,1.159,0,0,0,149.119,34.14Z",transform:"translate(-130.743 -29.617)"})),s("rect",{class:"PasswordVisibilityIcon",width:"0.972",height:"15.861",rx:"0.486",transform:"translate(114.827 23.858) rotate(-39.315)"}))),!this.isPasswordVisible&&s("svg",{onClick:()=>this.togglePassword(),class:"TogglePasswordVisibility PasswordVisible",part:"TogglePasswordVisibility",xmlns:"http://www.w3.org/2000/svg",width:"18.843",height:"10.5",viewBox:"0 0 18.843 10.5"},s("g",{transform:"translate(-14.185 -27.832)"},s("path",{class:"PasswordVisibilityIcon",d:"M23.541,38.332a11.467,11.467,0,0,1-4.886-1.611,34.413,34.413,0,0,1-3.976-2.469,1.1,1.1,0,0,1-.494-.936,1.21,1.21,0,0,1,.442-.962A37.986,37.986,0,0,1,18.6,29.625a16.06,16.06,0,0,1,2.521-1.248,6.862,6.862,0,0,1,2.417-.546,6.862,6.862,0,0,1,2.417.546,20.541,20.541,0,0,1,2.547,1.248,45.872,45.872,0,0,1,4.054,2.729,1.159,1.159,0,0,1,.468.962,1.067,1.067,0,0,1-.52.936,36.353,36.353,0,0,1-4.054,2.469A11.2,11.2,0,0,1,23.541,38.332Zm0-9.46a9.813,9.813,0,0,0-4.392,1.663,44.138,44.138,0,0,0-3.873,2.651.13.13,0,0,0,0,.208,36.5,36.5,0,0,0,3.873,2.391,10.372,10.372,0,0,0,4.392,1.481,11.051,11.051,0,0,0,4.444-1.481,40.2,40.2,0,0,0,3.925-2.391.13.13,0,0,0,0-.208h0a34.132,34.132,0,0,0-3.925-2.651A10.072,10.072,0,0,0,23.541,28.872Z",transform:"translate(0)"}),s("circle",{class:"PasswordVisibilityIcon",cx:"2.779",cy:"2.779",r:"2.779",transform:"translate(20.827 30.303)"})))),t=s("div",{class:"FormBox"},s("div",{class:"FormValue"},s("div",{class:this.isValidUserEmail&&this.checkValid?"InputBox":"InputBox InputInvalidBox"},s("input",{type:"text",placeholder:"",value:this.userNameEmail,onFocus:i=>this.handleInputChange(i,"user"),onInput:i=>this.handleInputChange(i,"user"),required:!0}),s("label",{class:(this.userNameEmail?"FieldFilledIn":"")+" "+(this.isValidUserEmail&&this.checkValid?"":"FieldInvalid")},r("userEmail",this.lang)),!this.isValidUserEmail&&s("p",{class:"InvalidField"},r("invalidField",this.lang))),s("div",{class:this.isValidPassword&&this.checkValid?"InputBox":"InputBox InputInvalidBox"},i,s("input",{type:this.isPasswordVisible?"text":"password",placeholder:"",value:this.userPassword,onFocus:i=>this.handleInputChange(i,"password"),onInput:i=>this.handleInputChange(i,"password"),required:!0}),s("label",{class:(this.userPassword?"FieldFilledIn":"")+" "+(this.isValidPassword&&this.checkValid?"":"FieldInvalid")},r("password",this.lang)),!this.isValidPassword&&s("p",{class:"InvalidField"},r("invalidField",this.lang))),"true"==this.passwordReset&&s("div",{class:"ForgotPassword"},s("button",{onClick:()=>this.resetPassword()},r("forgotPassword",this.lang))),s("button",{disabled:!(this.isValidUserEmail&&this.isValidPassword&&this.userNameEmail&&this.userPassword),class:"SubmitCredentials",onClick:()=>this.userLogin({username:this.userNameEmail,password:this.userPassword})},r("login",this.lang)),this.errorMessage&&s("p",{class:"CredentialsError"},this.errorMessage)));return s("section",{ref:i=>this.stylingContainer=i},t)}static get watchers(){return{translationUrl:["handleNewTranslations"]}}};n.style=':host{display:block;font-family:"Roboto", sans-serif}section{min-height:100vh;width:100%;background-position:center;background-size:cover}.FormBox{height:100vh;display:flex;position:relative;background:#082649;border:none;backdrop-filter:blur(15px) brightness(80%);justify-content:center;align-items:center}.InputBox{position:relative;margin:30px 0;width:310px;border-bottom:2px solid #0797B9}.InputBox.InputInvalidBox::after{content:"";height:2px;width:100%;transition:width 0.6s linear;background:#C23135}.InputBox::after{content:"";display:block;width:0;height:2px;position:relative;top:2px}.InputBox .PasswordVisibilityIcon{fill:#0797B9}.InputBox .InputIcon .TogglePasswordVisibility{cursor:pointer;position:absolute;top:18px;right:0}.InputBox .InputIcon .TogglePasswordVisibility.PasswordVisible{top:19.5px}.InputBox label{position:absolute;top:50%;left:5px;transform:translateY(-50%);color:#0797B9;font-size:1em;pointer-events:none;transition:0.5s}.InputBox label.FieldInvalid{color:#C23135}.InputBox input{width:100%;height:50px;background:transparent;border:none;outline:none;font-size:1em;padding:0 35px 0 5px;color:#fff;box-sizing:border-box}input:focus~label,label.FieldFilledIn{top:-3px;font-size:0.7em}.ForgotPassword button{margin:-10px 0 17px;font-size:0.9em;color:#0797B9;display:flex;justify-content:space-between;background-color:transparent;padding:0;height:unset;border:0;cursor:pointer}.ForgotPassword button:hover{color:#fff}.SubmitCredentials{display:block;margin:0 auto;padding:10px 20px;border-radius:5px;color:#fff;background:linear-gradient(to right, #EA0C66, #77318F);border:none;outline:none;cursor:pointer;font-size:1em}.SubmitCredentials:disabled{background:#707070}.Register{font-size:0.9em;color:#fff;text-align:center;margin:25px 0 10px}.Register p a{text-decoration:none;color:#fff;font-weight:600}.Register p a:hover{text-decoration:underline}.InvalidField{position:absolute;top:45px;color:#C23135;font-size:0.7em}.SubmitCredentials{margin-bottom:20px}.CredentialsError{color:#C23135;font-size:0.7em;padding:0 0 20px 0;margin:0}@media screen and (max-width: 480px){.FormBox{width:100%;border-radius:0px}}';export{n as user_login}