@everymatrix/general-registration 1.99.1 → 1.99.3
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.
|
@@ -16100,7 +16100,6 @@ const PasswordInput = class {
|
|
|
16100
16100
|
}
|
|
16101
16101
|
componentDidLoad() {
|
|
16102
16102
|
this.handleClientStyling();
|
|
16103
|
-
this.inputReference = this.element.shadowRoot.querySelector('input');
|
|
16104
16103
|
this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
|
|
16105
16104
|
this.passwordButton.tabIndex = -1;
|
|
16106
16105
|
this.passwordButton.addEventListener('click', (e) => {
|
|
@@ -16136,8 +16135,23 @@ const PasswordInput = class {
|
|
|
16136
16135
|
return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
|
|
16137
16136
|
});
|
|
16138
16137
|
}
|
|
16138
|
+
/**
|
|
16139
|
+
* Same checks as the native `input.validity` flags, but computed from `this.value`.
|
|
16140
|
+
* We can't trust the native flags here: per the HTML spec `tooShort`/`tooLong` only apply while the value was "last changed by the user". When the reveal (eye) button toggles the input `type` between `password` and `text`, WebKit (Safari / iOS) resets that flag, so a too-short password is suddenly reported as `valid`.
|
|
16141
|
+
*/
|
|
16142
|
+
getValueValidity() {
|
|
16143
|
+
var _a;
|
|
16144
|
+
const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
16145
|
+
const { mandatory, minLength, maxLength } = this.validation;
|
|
16146
|
+
return {
|
|
16147
|
+
valueMissing: !!mandatory && value === '',
|
|
16148
|
+
tooShort: value !== '' && !!minLength && value.length < minLength,
|
|
16149
|
+
tooLong: value !== '' && !!maxLength && value.length > maxLength,
|
|
16150
|
+
patternMismatch: value !== '' && !!this.validationPattern && !new RegExp(`^(?:${this.validationPattern})$`).test(value),
|
|
16151
|
+
};
|
|
16152
|
+
}
|
|
16139
16153
|
setValidity() {
|
|
16140
|
-
var _a
|
|
16154
|
+
var _a;
|
|
16141
16155
|
if (this.noValidation) {
|
|
16142
16156
|
return true;
|
|
16143
16157
|
}
|
|
@@ -16148,7 +16162,8 @@ const PasswordInput = class {
|
|
|
16148
16162
|
return false;
|
|
16149
16163
|
}
|
|
16150
16164
|
else {
|
|
16151
|
-
|
|
16165
|
+
const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
|
|
16166
|
+
return !valueMissing && !tooShort && !tooLong && !patternMismatch;
|
|
16152
16167
|
}
|
|
16153
16168
|
}
|
|
16154
16169
|
setPattern() {
|
|
@@ -16159,16 +16174,17 @@ const PasswordInput = class {
|
|
|
16159
16174
|
}
|
|
16160
16175
|
setErrorMessage() {
|
|
16161
16176
|
var _a, _b, _c, _d, _e;
|
|
16162
|
-
|
|
16177
|
+
const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
|
|
16178
|
+
if (tooShort || tooLong) {
|
|
16163
16179
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
16164
16180
|
}
|
|
16165
|
-
if (
|
|
16181
|
+
if (valueMissing) {
|
|
16166
16182
|
return translate$1('requiredError', this.language);
|
|
16167
16183
|
}
|
|
16168
16184
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
16169
16185
|
return translate$1('invalidOriginalPasswordError', this.language);
|
|
16170
16186
|
}
|
|
16171
|
-
if (
|
|
16187
|
+
if (patternMismatch) {
|
|
16172
16188
|
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
16173
16189
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
16174
16190
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
@@ -16178,10 +16194,17 @@ const PasswordInput = class {
|
|
|
16178
16194
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
16179
16195
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
16180
16196
|
}
|
|
16181
|
-
if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))
|
|
16197
|
+
if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))) {
|
|
16182
16198
|
return translate$1('invalidPassword', this.language);
|
|
16183
16199
|
}
|
|
16184
16200
|
}
|
|
16201
|
+
// Mirrors the condition used in `render()` for the complexity popup.
|
|
16202
|
+
isComplexityPopupVisible() {
|
|
16203
|
+
return !!this.passwordComplexity
|
|
16204
|
+
&& this.showPopup
|
|
16205
|
+
&& !this.hidePasswordComplexity
|
|
16206
|
+
&& !this.isDuplicateInput;
|
|
16207
|
+
}
|
|
16185
16208
|
renderTooltip() {
|
|
16186
16209
|
if (this.showTooltip) {
|
|
16187
16210
|
return (index.h("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
@@ -16206,11 +16229,9 @@ const PasswordInput = class {
|
|
|
16206
16229
|
if (this.touched) {
|
|
16207
16230
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16208
16231
|
}
|
|
16209
|
-
return index.h("div", { key: '
|
|
16210
|
-
index.h("img", { key: '
|
|
16211
|
-
this.
|
|
16212
|
-
!this.hidePasswordComplexity &&
|
|
16213
|
-
!this.isDuplicateInput &&
|
|
16232
|
+
return index.h("div", { key: 'b4f26f39d749b45a85e4d3a05419ff74026b9c73', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '25ab8386ec960e36ec411a3142452bb1a7ffbe05', class: 'password__wrapper--flex' }, index.h("label", { key: '0ee895de1059e39fbde8723b1606f9f2a0f89d97', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'd5d84181edfdfc638c6d35f91c555dd91c97b69a', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
16233
|
+
index.h("img", { key: '5a176a28a7efde57506a1db7690d57a86379a527', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '70710167fc3a008c555e447e372e735e3c8af497', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && !this.isComplexityPopupVisible() &&
|
|
16234
|
+
index.h("small", { key: 'd39c8e2c585e574bc31725e6935254d4bf634d0e', class: 'password__error-message' }, this.errorMessage), this.isComplexityPopupVisible() &&
|
|
16214
16235
|
(this.enableSouthAfricanMode
|
|
16215
16236
|
? this.renderCustomComplexityPopup()
|
|
16216
16237
|
: this.renderComplexityPopup()));
|
|
@@ -16096,7 +16096,6 @@ const PasswordInput = class {
|
|
|
16096
16096
|
}
|
|
16097
16097
|
componentDidLoad() {
|
|
16098
16098
|
this.handleClientStyling();
|
|
16099
|
-
this.inputReference = this.element.shadowRoot.querySelector('input');
|
|
16100
16099
|
this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
|
|
16101
16100
|
this.passwordButton.tabIndex = -1;
|
|
16102
16101
|
this.passwordButton.addEventListener('click', (e) => {
|
|
@@ -16132,8 +16131,23 @@ const PasswordInput = class {
|
|
|
16132
16131
|
return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
|
|
16133
16132
|
});
|
|
16134
16133
|
}
|
|
16134
|
+
/**
|
|
16135
|
+
* Same checks as the native `input.validity` flags, but computed from `this.value`.
|
|
16136
|
+
* We can't trust the native flags here: per the HTML spec `tooShort`/`tooLong` only apply while the value was "last changed by the user". When the reveal (eye) button toggles the input `type` between `password` and `text`, WebKit (Safari / iOS) resets that flag, so a too-short password is suddenly reported as `valid`.
|
|
16137
|
+
*/
|
|
16138
|
+
getValueValidity() {
|
|
16139
|
+
var _a;
|
|
16140
|
+
const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
16141
|
+
const { mandatory, minLength, maxLength } = this.validation;
|
|
16142
|
+
return {
|
|
16143
|
+
valueMissing: !!mandatory && value === '',
|
|
16144
|
+
tooShort: value !== '' && !!minLength && value.length < minLength,
|
|
16145
|
+
tooLong: value !== '' && !!maxLength && value.length > maxLength,
|
|
16146
|
+
patternMismatch: value !== '' && !!this.validationPattern && !new RegExp(`^(?:${this.validationPattern})$`).test(value),
|
|
16147
|
+
};
|
|
16148
|
+
}
|
|
16135
16149
|
setValidity() {
|
|
16136
|
-
var _a
|
|
16150
|
+
var _a;
|
|
16137
16151
|
if (this.noValidation) {
|
|
16138
16152
|
return true;
|
|
16139
16153
|
}
|
|
@@ -16144,7 +16158,8 @@ const PasswordInput = class {
|
|
|
16144
16158
|
return false;
|
|
16145
16159
|
}
|
|
16146
16160
|
else {
|
|
16147
|
-
|
|
16161
|
+
const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
|
|
16162
|
+
return !valueMissing && !tooShort && !tooLong && !patternMismatch;
|
|
16148
16163
|
}
|
|
16149
16164
|
}
|
|
16150
16165
|
setPattern() {
|
|
@@ -16155,16 +16170,17 @@ const PasswordInput = class {
|
|
|
16155
16170
|
}
|
|
16156
16171
|
setErrorMessage() {
|
|
16157
16172
|
var _a, _b, _c, _d, _e;
|
|
16158
|
-
|
|
16173
|
+
const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
|
|
16174
|
+
if (tooShort || tooLong) {
|
|
16159
16175
|
return translate$1('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
|
|
16160
16176
|
}
|
|
16161
|
-
if (
|
|
16177
|
+
if (valueMissing) {
|
|
16162
16178
|
return translate$1('requiredError', this.language);
|
|
16163
16179
|
}
|
|
16164
16180
|
if (this.isDuplicateInput && !this.originalValid) {
|
|
16165
16181
|
return translate$1('invalidOriginalPasswordError', this.language);
|
|
16166
16182
|
}
|
|
16167
|
-
if (
|
|
16183
|
+
if (patternMismatch) {
|
|
16168
16184
|
const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
|
|
16169
16185
|
const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
|
|
16170
16186
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
@@ -16174,10 +16190,17 @@ const PasswordInput = class {
|
|
|
16174
16190
|
const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
|
|
16175
16191
|
return translate$1(`${errorCode}`, this.language) ? translate$1(`${errorCode}`, this.language) : errorMessage;
|
|
16176
16192
|
}
|
|
16177
|
-
if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))
|
|
16193
|
+
if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))) {
|
|
16178
16194
|
return translate$1('invalidPassword', this.language);
|
|
16179
16195
|
}
|
|
16180
16196
|
}
|
|
16197
|
+
// Mirrors the condition used in `render()` for the complexity popup.
|
|
16198
|
+
isComplexityPopupVisible() {
|
|
16199
|
+
return !!this.passwordComplexity
|
|
16200
|
+
&& this.showPopup
|
|
16201
|
+
&& !this.hidePasswordComplexity
|
|
16202
|
+
&& !this.isDuplicateInput;
|
|
16203
|
+
}
|
|
16181
16204
|
renderTooltip() {
|
|
16182
16205
|
if (this.showTooltip) {
|
|
16183
16206
|
return (h("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
|
|
@@ -16202,11 +16225,9 @@ const PasswordInput = class {
|
|
|
16202
16225
|
if (this.touched) {
|
|
16203
16226
|
invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
|
|
16204
16227
|
}
|
|
16205
|
-
return h("div", { key: '
|
|
16206
|
-
h("img", { key: '
|
|
16207
|
-
this.
|
|
16208
|
-
!this.hidePasswordComplexity &&
|
|
16209
|
-
!this.isDuplicateInput &&
|
|
16228
|
+
return h("div", { key: 'b4f26f39d749b45a85e4d3a05419ff74026b9c73', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '25ab8386ec960e36ec411a3142452bb1a7ffbe05', class: 'password__wrapper--flex' }, h("label", { key: '0ee895de1059e39fbde8723b1606f9f2a0f89d97', class: `password__label ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'd5d84181edfdfc638c6d35f91c555dd91c97b69a', class: 'password__wrapper--relative' }, this.tooltip &&
|
|
16229
|
+
h("img", { key: '5a176a28a7efde57506a1db7690d57a86379a527', class: 'password__tooltip-icon', src: tooltipIconSvg, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '70710167fc3a008c555e447e372e735e3c8af497', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && !this.isComplexityPopupVisible() &&
|
|
16230
|
+
h("small", { key: 'd39c8e2c585e574bc31725e6935254d4bf634d0e', class: 'password__error-message' }, this.errorMessage), this.isComplexityPopupVisible() &&
|
|
16210
16231
|
(this.enableSouthAfricanMode
|
|
16211
16232
|
? this.renderCustomComplexityPopup()
|
|
16212
16233
|
: this.renderComplexityPopup()));
|