allaw-ui 4.6.2 → 4.6.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.
|
@@ -43,7 +43,38 @@ var VerificationCodeInput = function (_a) {
|
|
|
43
43
|
}, []);
|
|
44
44
|
var handleInputChange = function (index, value) {
|
|
45
45
|
// console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
|
|
46
|
-
var _a;
|
|
46
|
+
var _a, _b, _c;
|
|
47
|
+
// Si c'est le premier input et que la valeur est plus longue qu'un caractère
|
|
48
|
+
// (cas de l'auto-complétion SMS), traiter comme un collage
|
|
49
|
+
if (index === 0 && value.length > 1) {
|
|
50
|
+
var validChars = value
|
|
51
|
+
.split("")
|
|
52
|
+
.filter(function (char) { return validateInput(char, allowedChars); })
|
|
53
|
+
.slice(0, numInputs);
|
|
54
|
+
if (validChars.length > 0) {
|
|
55
|
+
var newValues_1 = Array(numInputs).fill("");
|
|
56
|
+
validChars.forEach(function (char, i) {
|
|
57
|
+
if (i < numInputs) {
|
|
58
|
+
newValues_1[i] = char;
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
setValues(newValues_1);
|
|
62
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
|
|
63
|
+
if (validChars.length >= numInputs) {
|
|
64
|
+
var fullValue_1 = newValues_1.join("");
|
|
65
|
+
setError("");
|
|
66
|
+
onError === null || onError === void 0 ? void 0 : onError(null);
|
|
67
|
+
onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue_1);
|
|
68
|
+
inputRefs.current.forEach(function (input) { return input === null || input === void 0 ? void 0 : input.blur(); });
|
|
69
|
+
(_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
var nextIndex = validChars.length;
|
|
73
|
+
(_b = inputRefs.current[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
47
78
|
if (!validateInput(value, allowedChars)) {
|
|
48
79
|
// console.log("[VerificationCodeInput] Invalid input value");
|
|
49
80
|
return;
|
|
@@ -66,7 +97,7 @@ var VerificationCodeInput = function (_a) {
|
|
|
66
97
|
}
|
|
67
98
|
}
|
|
68
99
|
else if (index < numInputs - 1) {
|
|
69
|
-
(
|
|
100
|
+
(_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
70
101
|
}
|
|
71
102
|
};
|
|
72
103
|
var handleKeyDown = function (index, e) {
|
|
@@ -105,16 +136,16 @@ var VerificationCodeInput = function (_a) {
|
|
|
105
136
|
.filter(function (char) { return validateInput(char, allowedChars); })
|
|
106
137
|
.slice(0, numInputs);
|
|
107
138
|
if (validChars.length > 0) {
|
|
108
|
-
var
|
|
139
|
+
var newValues_2 = Array(numInputs).fill("");
|
|
109
140
|
validChars.forEach(function (char, i) {
|
|
110
141
|
if (i < numInputs) {
|
|
111
|
-
|
|
142
|
+
newValues_2[i] = char;
|
|
112
143
|
}
|
|
113
144
|
});
|
|
114
|
-
setValues(
|
|
115
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(
|
|
145
|
+
setValues(newValues_2);
|
|
146
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValues_2.join(""));
|
|
116
147
|
if (validChars.length >= numInputs) {
|
|
117
|
-
var fullValue =
|
|
148
|
+
var fullValue = newValues_2.join("");
|
|
118
149
|
// console.log(
|
|
119
150
|
// "[VerificationCodeInput] All inputs filled, length:",
|
|
120
151
|
// fullValue.length
|
|
@@ -140,13 +171,13 @@ var VerificationCodeInput = function (_a) {
|
|
|
140
171
|
return regex.test(value);
|
|
141
172
|
};
|
|
142
173
|
var renderInputs = function () {
|
|
143
|
-
return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
|
|
174
|
+
return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: index === 0 ? numInputs : 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
|
|
144
175
|
? "[0-9]*"
|
|
145
176
|
: allowedChars === "alphabetic"
|
|
146
177
|
? "[a-zA-Z]*"
|
|
147
178
|
: "[a-zA-Z0-9]*", ref: function (input) { return (inputRefs.current[index] = input); }, autoFocus: index === 0 && autoFocus, tabIndex: index === 0 ? 0 : undefined, "data-lpignore": "true" // Empêche Dashlane d'intervenir
|
|
148
179
|
, "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
|
|
149
|
-
, disabled: isDisabled })); });
|
|
180
|
+
, disabled: isDisabled, autoComplete: index === 0 ? "one-time-code" : "off" })); });
|
|
150
181
|
};
|
|
151
182
|
return (React.createElement("div", { className: "".concat(styles.container, " ").concat(isSmallScreen ? styles.responsiveContainer : "") },
|
|
152
183
|
React.createElement("div", { className: "".concat(styles.inputsContainer, " ").concat(isSmallScreen ? styles.responsiveInputsContainer : "") }, renderInputs()),
|