@activecollab/components 2.0.20 → 2.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Input/InputPassword.js +218 -0
- package/dist/cjs/components/Input/InputPassword.js.map +1 -0
- package/dist/cjs/components/Input/Styles.js +25 -1
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Input/InputPassword.d.ts +30 -0
- package/dist/esm/components/Input/InputPassword.d.ts.map +1 -0
- package/dist/esm/components/Input/InputPassword.js +185 -0
- package/dist/esm/components/Input/InputPassword.js.map +1 -0
- package/dist/esm/components/Input/Styles.d.ts +5 -0
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +27 -1
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/index.js +24 -0
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.InputPassword = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
+
var _Input = require("./Input");
|
|
10
|
+
var _Styles = require("./Styles");
|
|
11
|
+
var _utils = require("../../utils");
|
|
12
|
+
var _IconButton = require("../IconButton");
|
|
13
|
+
var _Icons = require("../Icons");
|
|
14
|
+
var _Tooltip = require("../Tooltip");
|
|
15
|
+
var _Typography = require("../Typography");
|
|
16
|
+
var _excluded = ["size", "disabled", "show", "hideControl", "hideIndicator", "showTooltipText", "hideTooltipText", "value", "tooShortText", "weakText", "okayText", "goodText", "strongText", "errorMessage", "invalid", "onChange"];
|
|
17
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
22
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
23
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
24
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
25
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
26
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
27
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
28
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
29
|
+
var transform = {
|
|
30
|
+
biggest: "big",
|
|
31
|
+
regular: "small",
|
|
32
|
+
big: "medium"
|
|
33
|
+
};
|
|
34
|
+
var StypedEyeIconSmall = (0, _styledComponents.default)(_Icons.EyeSmallIcon).withConfig({
|
|
35
|
+
displayName: "InputPassword__StypedEyeIconSmall",
|
|
36
|
+
componentId: "sc-v930fj-0"
|
|
37
|
+
})(["", ""], {
|
|
38
|
+
"cursor": "pointer"
|
|
39
|
+
});
|
|
40
|
+
var StypedEyeOffIconSmall = (0, _styledComponents.default)(_Icons.EyeOffSmallIcon).withConfig({
|
|
41
|
+
displayName: "InputPassword__StypedEyeOffIconSmall",
|
|
42
|
+
componentId: "sc-v930fj-1"
|
|
43
|
+
})(["", ""], {
|
|
44
|
+
"cursor": "pointer"
|
|
45
|
+
});
|
|
46
|
+
var StypedEyeIcon = (0, _styledComponents.default)(_Icons.EyeIcon).withConfig({
|
|
47
|
+
displayName: "InputPassword__StypedEyeIcon",
|
|
48
|
+
componentId: "sc-v930fj-2"
|
|
49
|
+
})(["", ""], {
|
|
50
|
+
"cursor": "pointer"
|
|
51
|
+
});
|
|
52
|
+
var StypedEyeOffIcon = (0, _styledComponents.default)(_Icons.EyeOffIcon).withConfig({
|
|
53
|
+
displayName: "InputPassword__StypedEyeOffIcon",
|
|
54
|
+
componentId: "sc-v930fj-3"
|
|
55
|
+
})(["", ""], {
|
|
56
|
+
"cursor": "pointer"
|
|
57
|
+
});
|
|
58
|
+
var StyledInfoIcon = (0, _styledComponents.default)(_Icons.InfoIcon).withConfig({
|
|
59
|
+
displayName: "InputPassword__StyledInfoIcon",
|
|
60
|
+
componentId: "sc-v930fj-4"
|
|
61
|
+
})(["", ""], {
|
|
62
|
+
"marginRight": "0.25rem",
|
|
63
|
+
"cursor": "help",
|
|
64
|
+
"fill": "var(--red-alert)"
|
|
65
|
+
});
|
|
66
|
+
var StyledInfoSmallIcon = (0, _styledComponents.default)(_Icons.InfoSmallIcon).withConfig({
|
|
67
|
+
displayName: "InputPassword__StyledInfoSmallIcon",
|
|
68
|
+
componentId: "sc-v930fj-5"
|
|
69
|
+
})(["", ""], {
|
|
70
|
+
"marginRight": "0.25rem",
|
|
71
|
+
"cursor": "pointer",
|
|
72
|
+
"fill": "var(--red-alert)"
|
|
73
|
+
});
|
|
74
|
+
var InputPasswordAdornment = function InputPasswordAdornment(_ref) {
|
|
75
|
+
var invalid = _ref.invalid,
|
|
76
|
+
errorMessage = _ref.errorMessage,
|
|
77
|
+
size = _ref.size,
|
|
78
|
+
hideControl = _ref.hideControl,
|
|
79
|
+
showText = _ref.showText,
|
|
80
|
+
hideTooltipText = _ref.hideTooltipText,
|
|
81
|
+
showTooltipText = _ref.showTooltipText,
|
|
82
|
+
disabled = _ref.disabled,
|
|
83
|
+
toggleShow = _ref.toggleShow;
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && errorMessage && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
85
|
+
title: errorMessage
|
|
86
|
+
}, size === "regular" ? /*#__PURE__*/_react.default.createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
87
|
+
title: showText ? hideTooltipText : showTooltipText
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
|
|
89
|
+
variant: "text gray",
|
|
90
|
+
type: "button",
|
|
91
|
+
size: transform[size],
|
|
92
|
+
disabled: disabled,
|
|
93
|
+
onClick: toggleShow
|
|
94
|
+
}, showText ? size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeIcon, null))));
|
|
95
|
+
};
|
|
96
|
+
var InputPassword = exports.InputPassword = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
97
|
+
var _ref2$size = _ref2.size,
|
|
98
|
+
size = _ref2$size === void 0 ? "regular" : _ref2$size,
|
|
99
|
+
disabled = _ref2.disabled,
|
|
100
|
+
_ref2$show = _ref2.show,
|
|
101
|
+
show = _ref2$show === void 0 ? false : _ref2$show,
|
|
102
|
+
hideControl = _ref2.hideControl,
|
|
103
|
+
hideIndicator = _ref2.hideIndicator,
|
|
104
|
+
_ref2$showTooltipText = _ref2.showTooltipText,
|
|
105
|
+
showTooltipText = _ref2$showTooltipText === void 0 ? "Show" : _ref2$showTooltipText,
|
|
106
|
+
_ref2$hideTooltipText = _ref2.hideTooltipText,
|
|
107
|
+
hideTooltipText = _ref2$hideTooltipText === void 0 ? "Hide" : _ref2$hideTooltipText,
|
|
108
|
+
defaultValue = _ref2.value,
|
|
109
|
+
_ref2$tooShortText = _ref2.tooShortText,
|
|
110
|
+
tooShortText = _ref2$tooShortText === void 0 ? "Too short" : _ref2$tooShortText,
|
|
111
|
+
_ref2$weakText = _ref2.weakText,
|
|
112
|
+
weakText = _ref2$weakText === void 0 ? "Weak" : _ref2$weakText,
|
|
113
|
+
_ref2$okayText = _ref2.okayText,
|
|
114
|
+
okayText = _ref2$okayText === void 0 ? "Okay" : _ref2$okayText,
|
|
115
|
+
_ref2$goodText = _ref2.goodText,
|
|
116
|
+
goodText = _ref2$goodText === void 0 ? "Good" : _ref2$goodText,
|
|
117
|
+
_ref2$strongText = _ref2.strongText,
|
|
118
|
+
strongText = _ref2$strongText === void 0 ? "Strong" : _ref2$strongText,
|
|
119
|
+
errorMessage = _ref2.errorMessage,
|
|
120
|
+
invalid = _ref2.invalid,
|
|
121
|
+
onChange = _ref2.onChange,
|
|
122
|
+
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
123
|
+
var inputRef = (0, _react.useRef)(null);
|
|
124
|
+
var handleRef = (0, _utils.useForkRef)(ref, inputRef);
|
|
125
|
+
var _useState = (0, _react.useState)(show),
|
|
126
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
127
|
+
showText = _useState2[0],
|
|
128
|
+
setShowText = _useState2[1];
|
|
129
|
+
var _useState3 = (0, _react.useState)(0),
|
|
130
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
131
|
+
strength = _useState4[0],
|
|
132
|
+
setStrength = _useState4[1];
|
|
133
|
+
var _useState5 = (0, _react.useState)(tooShortText),
|
|
134
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
135
|
+
strengthText = _useState6[0],
|
|
136
|
+
setStrengthText = _useState6[1];
|
|
137
|
+
var _useState7 = (0, _react.useState)(function () {
|
|
138
|
+
return defaultValue;
|
|
139
|
+
}),
|
|
140
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
141
|
+
value = _useState8[0],
|
|
142
|
+
setValue = _useState8[1];
|
|
143
|
+
var calculateStrength = (0, _react.useCallback)(function (passwordString) {
|
|
144
|
+
var score = 0;
|
|
145
|
+
if (passwordString.length < 4) {
|
|
146
|
+
score = 0;
|
|
147
|
+
setStrengthText(tooShortText);
|
|
148
|
+
} else if (passwordString.length === 4) {
|
|
149
|
+
score = 1;
|
|
150
|
+
setStrengthText(weakText);
|
|
151
|
+
} else if (passwordString.length >= 5 && passwordString.length < 10) {
|
|
152
|
+
score = 2;
|
|
153
|
+
setStrengthText(okayText);
|
|
154
|
+
if (/[A-Z!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(passwordString) && passwordString.length >= 5 && passwordString.length < 10) {
|
|
155
|
+
score = 3;
|
|
156
|
+
setStrengthText(goodText);
|
|
157
|
+
}
|
|
158
|
+
} else if (passwordString.length >= 10) {
|
|
159
|
+
score = 4;
|
|
160
|
+
setStrengthText(strongText);
|
|
161
|
+
}
|
|
162
|
+
setStrength(score);
|
|
163
|
+
}, [goodText, okayText, strongText, tooShortText, weakText]);
|
|
164
|
+
var handleChange = (0, _react.useCallback)(function (e) {
|
|
165
|
+
setValue(e.target.value);
|
|
166
|
+
calculateStrength(e.target.value);
|
|
167
|
+
typeof onChange === "function" && onChange(e.target.value);
|
|
168
|
+
}, [calculateStrength, onChange]);
|
|
169
|
+
var toggleShow = (0, _react.useCallback)(function () {
|
|
170
|
+
var _inputRef$current;
|
|
171
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
172
|
+
setShowText(function (prevState) {
|
|
173
|
+
return !prevState;
|
|
174
|
+
});
|
|
175
|
+
}, []);
|
|
176
|
+
(0, _react.useEffect)(function () {
|
|
177
|
+
setShowText(show);
|
|
178
|
+
}, [show]);
|
|
179
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
180
|
+
style: {
|
|
181
|
+
width: "fit-content",
|
|
182
|
+
display: "flex",
|
|
183
|
+
flexDirection: "column"
|
|
184
|
+
}
|
|
185
|
+
}, /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, rest, {
|
|
186
|
+
ref: handleRef,
|
|
187
|
+
size: size,
|
|
188
|
+
value: value,
|
|
189
|
+
disabled: disabled,
|
|
190
|
+
type: showText ? "text" : "password",
|
|
191
|
+
onChange: handleChange,
|
|
192
|
+
invalid: invalid,
|
|
193
|
+
"data-testid": "InputPassword",
|
|
194
|
+
endAdornment: /*#__PURE__*/_react.default.createElement(InputPasswordAdornment, {
|
|
195
|
+
invalid: invalid,
|
|
196
|
+
errorMessage: errorMessage,
|
|
197
|
+
size: size,
|
|
198
|
+
hideControl: hideControl,
|
|
199
|
+
showText: showText,
|
|
200
|
+
hideTooltipText: hideTooltipText,
|
|
201
|
+
showTooltipText: showTooltipText,
|
|
202
|
+
disabled: disabled,
|
|
203
|
+
toggleShow: toggleShow
|
|
204
|
+
})
|
|
205
|
+
})), !hideIndicator && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicatorWrapper, null, [...Array(4)].map(function (_, index) {
|
|
206
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicator, {
|
|
207
|
+
key: index,
|
|
208
|
+
$strength: strength,
|
|
209
|
+
$index: index,
|
|
210
|
+
"data-testid": strength >= index + 1 ? "active" : ""
|
|
211
|
+
});
|
|
212
|
+
})), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
|
|
213
|
+
align: "right",
|
|
214
|
+
color: "tertiary"
|
|
215
|
+
}, strengthText)));
|
|
216
|
+
});
|
|
217
|
+
InputPassword.displayName = "InputPassword";
|
|
218
|
+
//# sourceMappingURL=InputPassword.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputPassword.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Input","_Styles","_utils","_IconButton","_Icons","_Tooltip","_Typography","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","transform","biggest","regular","big","StypedEyeIconSmall","styled","EyeSmallIcon","withConfig","displayName","componentId","StypedEyeOffIconSmall","EyeOffSmallIcon","StypedEyeIcon","EyeIcon","StypedEyeOffIcon","EyeOffIcon","StyledInfoIcon","InfoIcon","StyledInfoSmallIcon","InfoSmallIcon","InputPasswordAdornment","_ref","invalid","errorMessage","size","hideControl","showText","hideTooltipText","showTooltipText","disabled","toggleShow","createElement","Fragment","Tooltip","title","IconButton","variant","type","onClick","InputPassword","exports","forwardRef","_ref2","ref","_ref2$size","_ref2$show","show","hideIndicator","_ref2$showTooltipText","_ref2$hideTooltipText","defaultValue","_ref2$tooShortText","tooShortText","_ref2$weakText","weakText","_ref2$okayText","okayText","_ref2$goodText","goodText","_ref2$strongText","strongText","onChange","rest","inputRef","useRef","handleRef","useForkRef","_useState","useState","_useState2","setShowText","_useState3","_useState4","strength","setStrength","_useState5","_useState6","strengthText","setStrengthText","_useState7","_useState8","setValue","calculateStrength","useCallback","passwordString","score","handleChange","_inputRef$current","current","focus","prevState","useEffect","style","width","display","flexDirection","Input","endAdornment","StyledPasswordIndicatorWrapper","map","_","index","StyledPasswordIndicator","$strength","$index","Caption1","align","color"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Input, InputProps } from \"./Input\";\nimport {\n StyledPasswordIndicator,\n StyledPasswordIndicatorWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { IconButton } from \"../IconButton\";\nimport {\n EyeIcon,\n EyeOffIcon,\n EyeOffSmallIcon,\n EyeSmallIcon,\n InfoIcon,\n InfoSmallIcon,\n} from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Caption1 } from \"../Typography\";\n\nconst transform = {\n biggest: \"big\",\n regular: \"small\",\n big: \"medium\",\n} as const;\n\nexport interface InputPasswordProps extends Omit<InputProps, \"type\" | \"size\"> {\n /** Input size */\n size?: \"regular\" | \"big\" | \"biggest\";\n /** Renders with shown text */\n show?: boolean;\n /** Removes show/hide control */\n hideControl?: boolean;\n /** Removes strenght indicator */\n hideIndicator?: boolean;\n /** Show tooltip text */\n showTooltipText?: string;\n /** Hide tooltip text */\n hideTooltipText?: string;\n /** Too short strength indicator text */\n tooShortText?: string;\n /** Weak strength indicator text */\n weakText?: string;\n /** Okay strength indicator text */\n okayText?: string;\n /** Good strength indicator text */\n goodText?: string;\n /** Strong strength indicator text */\n strongText?: string;\n /** Error message tooltip text */\n errorMessage?: string;\n}\n\nconst StypedEyeIconSmall = styled(EyeSmallIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIconSmall = styled(EyeOffSmallIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeIcon = styled(EyeIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIcon = styled(EyeOffIcon)`\n ${tw`tw-cursor-pointer`}\n`;\nconst StyledInfoIcon = styled(InfoIcon)`\n ${tw`tw-cursor-help tw-fill-alert tw-mr-1`}\n`;\n\nconst StyledInfoSmallIcon = styled(InfoSmallIcon)`\n ${tw`tw-cursor-pointer tw-fill-alert tw-mr-1`}\n`;\n\ninterface InputPasswordAdornmentProps {\n invalid?: boolean;\n errorMessage?: string;\n size: \"regular\" | \"big\" | \"biggest\";\n hideControl?: boolean;\n showText: boolean;\n hideTooltipText: string;\n showTooltipText: string;\n disabled?: boolean;\n toggleShow?: () => void;\n}\n\nconst InputPasswordAdornment = ({\n invalid,\n errorMessage,\n size,\n hideControl,\n showText,\n hideTooltipText,\n showTooltipText,\n disabled,\n toggleShow,\n}: InputPasswordAdornmentProps) => (\n <>\n {invalid && errorMessage && (\n <Tooltip title={errorMessage}>\n {size === \"regular\" ? <StyledInfoSmallIcon /> : <StyledInfoIcon />}\n </Tooltip>\n )}\n {!hideControl && (\n <Tooltip title={showText ? hideTooltipText : showTooltipText}>\n <IconButton\n variant=\"text gray\"\n type=\"button\"\n size={transform[size] as \"big\" | \"small\" | \"medium\"}\n disabled={disabled}\n onClick={toggleShow}\n >\n {showText ? (\n size === \"regular\" ? (\n <StypedEyeOffIconSmall />\n ) : (\n <StypedEyeOffIcon />\n )\n ) : size === \"regular\" ? (\n <StypedEyeIconSmall />\n ) : (\n <StypedEyeIcon />\n )}\n </IconButton>\n </Tooltip>\n )}\n </>\n);\n\nexport const InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(\n (\n {\n size = \"regular\",\n disabled,\n show = false,\n hideControl,\n hideIndicator,\n showTooltipText = \"Show\",\n hideTooltipText = \"Hide\",\n value: defaultValue,\n tooShortText = \"Too short\",\n weakText = \"Weak\",\n okayText = \"Okay\",\n goodText = \"Good\",\n strongText = \"Strong\",\n errorMessage,\n invalid,\n onChange,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const [showText, setShowText] = useState(show);\n const [strength, setStrength] = useState(0);\n const [strengthText, setStrengthText] = useState(tooShortText);\n const [value, setValue] = useState(() => defaultValue as string);\n\n const calculateStrength = useCallback(\n (passwordString: string) => {\n let score = 0;\n\n if (passwordString.length < 4) {\n score = 0;\n setStrengthText(tooShortText);\n } else if (passwordString.length === 4) {\n score = 1;\n setStrengthText(weakText);\n } else if (passwordString.length >= 5 && passwordString.length < 10) {\n score = 2;\n setStrengthText(okayText);\n if (\n /[A-Z!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?]/.test(passwordString) &&\n passwordString.length >= 5 &&\n passwordString.length < 10\n ) {\n score = 3;\n setStrengthText(goodText);\n }\n } else if (passwordString.length >= 10) {\n score = 4;\n setStrengthText(strongText);\n }\n\n setStrength(score);\n },\n [goodText, okayText, strongText, tooShortText, weakText]\n );\n\n const handleChange = useCallback(\n (e) => {\n setValue(e.target.value);\n calculateStrength(e.target.value);\n typeof onChange === \"function\" && onChange(e.target.value);\n },\n [calculateStrength, onChange]\n );\n\n const toggleShow = useCallback(() => {\n inputRef.current?.focus();\n setShowText((prevState) => !prevState);\n }, []);\n\n useEffect(() => {\n setShowText(show);\n }, [show]);\n\n return (\n <div\n style={{\n width: \"fit-content\",\n display: \"flex\",\n flexDirection: \"column\",\n }}\n >\n <Input\n {...rest}\n ref={handleRef}\n size={size}\n value={value}\n disabled={disabled}\n type={showText ? \"text\" : \"password\"}\n onChange={handleChange}\n invalid={invalid}\n data-testid=\"InputPassword\"\n endAdornment={\n <InputPasswordAdornment\n invalid={invalid}\n errorMessage={errorMessage}\n size={size}\n hideControl={hideControl}\n showText={showText}\n hideTooltipText={hideTooltipText}\n showTooltipText={showTooltipText}\n disabled={disabled}\n toggleShow={toggleShow}\n />\n }\n />\n {!hideIndicator && (\n <>\n <StyledPasswordIndicatorWrapper>\n {[...Array(4)].map((_, index) => (\n <StyledPasswordIndicator\n key={index}\n $strength={strength}\n $index={index}\n data-testid={strength >= index + 1 ? \"active\" : \"\"}\n />\n ))}\n </StyledPasswordIndicatorWrapper>\n <Caption1 align=\"right\" color=\"tertiary\">\n {strengthText}\n </Caption1>\n </>\n )}\n </div>\n );\n }\n);\n\nInputPassword.displayName = \"InputPassword\";\n"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledInputWrapper = exports.StyledInput = void 0;
|
|
6
|
+
exports.StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicator = exports.StyledInputWrapper = exports.StyledInput = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
9
9
|
var _FontStyle = require("../FontStyle");
|
|
@@ -41,4 +41,28 @@ var StyledInput = exports.StyledInput = _styledComponents.default.input.withConf
|
|
|
41
41
|
return props.align && (0, _styledComponents.css)(["text-align:", ";"], props.align);
|
|
42
42
|
});
|
|
43
43
|
StyledInput.displayName = "StyledInput";
|
|
44
|
+
var StyledPasswordIndicatorWrapper = exports.StyledPasswordIndicatorWrapper = _styledComponents.default.div.withConfig({
|
|
45
|
+
displayName: "Styles__StyledPasswordIndicatorWrapper",
|
|
46
|
+
componentId: "sc-ce8kcp-2"
|
|
47
|
+
})(["display:flex;gap:2px;margin-top:6px;margin-bottom:4px;"]);
|
|
48
|
+
StyledPasswordIndicatorWrapper.displayName = "StyledPasswordIndicatorWrapper";
|
|
49
|
+
var StyledPasswordIndicator = exports.StyledPasswordIndicator = _styledComponents.default.div.withConfig({
|
|
50
|
+
displayName: "Styles__StyledPasswordIndicator",
|
|
51
|
+
componentId: "sc-ce8kcp-3"
|
|
52
|
+
})(["width:100%;height:4px;border-radius:6px;background-color:", ";"], function (props) {
|
|
53
|
+
var $strength = props.$strength,
|
|
54
|
+
$index = props.$index;
|
|
55
|
+
if ($strength === 0) {
|
|
56
|
+
return "var(--color-theme-300)";
|
|
57
|
+
} else if ($strength === 1) {
|
|
58
|
+
return $index === 0 ? "var(--red-alert)" : "var(--color-theme-300)";
|
|
59
|
+
} else if ($strength === 2) {
|
|
60
|
+
return $index < 2 ? "var(--color-orange)" : "var(--color-theme-300)";
|
|
61
|
+
} else if ($strength === 3) {
|
|
62
|
+
return $index < 3 ? "var(--color-blue-sky)" : "var(--color-theme-300)";
|
|
63
|
+
} else {
|
|
64
|
+
return "var(--color-sucess-green)";
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
StyledPasswordIndicator.displayName = "StyledPasswordIndicator";
|
|
44
68
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQlC,IAAMY,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAEDX,kBAAkB,CAACK,WAAW,GAAG,oBAAoB;AAO9C,IAAMS,WAAW,GAAAb,OAAA,CAAAa,WAAA,GAAGZ,yBAAM,CAACa,KAAK,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8SAkBnC,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,QACdL,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,uBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,QACXP,qBAAG,wBACaF,KAAK,CAACS,KAAK,CAC1B;AAAA,EACJ;AAEDJ,WAAW,CAACT,WAAW,GAAG,aAAa"}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 6px;\n margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n $strength: number;\n $index: number;\n}>`\n width: 100%;\n height: 4px;\n border-radius: 6px;\n background-color: ${(props) => {\n const { $strength, $index } = props;\n\n if ($strength === 0) {\n return \"var(--color-theme-300)\";\n } else if ($strength === 1) {\n return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n } else if ($strength === 2) {\n return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n } else if ($strength === 3) {\n return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n } else {\n return \"var(--color-sucess-green)\";\n }\n }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQlC,IAAMY,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAEDX,kBAAkB,CAACK,WAAW,GAAG,oBAAoB;AAO9C,IAAMS,WAAW,GAAAb,OAAA,CAAAa,WAAA,GAAGZ,yBAAM,CAACa,KAAK,CAAAX,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8SAkBnC,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,QACdL,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,uBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,QACXP,qBAAG,wBACaF,KAAK,CAACS,KAAK,CAC1B;AAAA,EACJ;AAEDJ,WAAW,CAACT,WAAW,GAAG,aAAa;AAEhC,IAAMc,8BAA8B,GAAAlB,OAAA,CAAAkB,8BAAA,GAAGjB,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAKvD;AAEDa,8BAA8B,CAACd,WAAW,GAAG,gCAAgC;AAEtE,IAAMe,uBAAuB,GAAAnB,OAAA,CAAAmB,uBAAA,GAAGlB,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uEAO3B,UAACG,KAAK,EAAK;EAC7B,IAAQY,SAAS,GAAaZ,KAAK,CAA3BY,SAAS;IAAEC,MAAM,GAAKb,KAAK,CAAhBa,MAAM;EAEzB,IAAID,SAAS,KAAK,CAAC,EAAE;IACnB,OAAO,wBAAwB;EACjC,CAAC,MAAM,IAAIA,SAAS,KAAK,CAAC,EAAE;IAC1B,OAAOC,MAAM,KAAK,CAAC,GAAG,kBAAkB,GAAG,wBAAwB;EACrE,CAAC,MAAM,IAAID,SAAS,KAAK,CAAC,EAAE;IAC1B,OAAOC,MAAM,GAAG,CAAC,GAAG,qBAAqB,GAAG,wBAAwB;EACtE,CAAC,MAAM,IAAID,SAAS,KAAK,CAAC,EAAE;IAC1B,OAAOC,MAAM,GAAG,CAAC,GAAG,uBAAuB,GAAG,wBAAwB;EACxE,CAAC,MAAM;IACL,OAAO,2BAA2B;EACpC;AACF,CAAC,CACF;AAEDF,uBAAuB,CAACf,WAAW,GAAG,yBAAyB"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { InputProps } from "./Input";
|
|
3
|
+
export interface InputPasswordProps extends Omit<InputProps, "type" | "size"> {
|
|
4
|
+
/** Input size */
|
|
5
|
+
size?: "regular" | "big" | "biggest";
|
|
6
|
+
/** Renders with shown text */
|
|
7
|
+
show?: boolean;
|
|
8
|
+
/** Removes show/hide control */
|
|
9
|
+
hideControl?: boolean;
|
|
10
|
+
/** Removes strenght indicator */
|
|
11
|
+
hideIndicator?: boolean;
|
|
12
|
+
/** Show tooltip text */
|
|
13
|
+
showTooltipText?: string;
|
|
14
|
+
/** Hide tooltip text */
|
|
15
|
+
hideTooltipText?: string;
|
|
16
|
+
/** Too short strength indicator text */
|
|
17
|
+
tooShortText?: string;
|
|
18
|
+
/** Weak strength indicator text */
|
|
19
|
+
weakText?: string;
|
|
20
|
+
/** Okay strength indicator text */
|
|
21
|
+
okayText?: string;
|
|
22
|
+
/** Good strength indicator text */
|
|
23
|
+
goodText?: string;
|
|
24
|
+
/** Strong strength indicator text */
|
|
25
|
+
strongText?: string;
|
|
26
|
+
/** Error message tooltip text */
|
|
27
|
+
errorMessage?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
|
|
30
|
+
//# sourceMappingURL=InputPassword.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputPassword.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputPassword.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAwB5C,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3E,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;IACrC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgFD,eAAO,MAAM,aAAa,6FAoIzB,CAAC"}
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.InputPassword = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
var _Input = require("./Input");
|
|
12
|
+
var _Styles = require("./Styles");
|
|
13
|
+
var _utils = require("../../utils");
|
|
14
|
+
var _IconButton = require("../IconButton");
|
|
15
|
+
var _Icons = require("../Icons");
|
|
16
|
+
var _Tooltip = require("../Tooltip");
|
|
17
|
+
var _Typography = require("../Typography");
|
|
18
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
+
const transform = {
|
|
21
|
+
biggest: "big",
|
|
22
|
+
regular: "small",
|
|
23
|
+
big: "medium"
|
|
24
|
+
};
|
|
25
|
+
const StypedEyeIconSmall = (0, _styledComponents.default)(_Icons.EyeSmallIcon).withConfig({
|
|
26
|
+
displayName: "InputPassword__StypedEyeIconSmall",
|
|
27
|
+
componentId: "sc-v930fj-0"
|
|
28
|
+
})(["", ""], {
|
|
29
|
+
"cursor": "pointer"
|
|
30
|
+
});
|
|
31
|
+
const StypedEyeOffIconSmall = (0, _styledComponents.default)(_Icons.EyeOffSmallIcon).withConfig({
|
|
32
|
+
displayName: "InputPassword__StypedEyeOffIconSmall",
|
|
33
|
+
componentId: "sc-v930fj-1"
|
|
34
|
+
})(["", ""], {
|
|
35
|
+
"cursor": "pointer"
|
|
36
|
+
});
|
|
37
|
+
const StypedEyeIcon = (0, _styledComponents.default)(_Icons.EyeIcon).withConfig({
|
|
38
|
+
displayName: "InputPassword__StypedEyeIcon",
|
|
39
|
+
componentId: "sc-v930fj-2"
|
|
40
|
+
})(["", ""], {
|
|
41
|
+
"cursor": "pointer"
|
|
42
|
+
});
|
|
43
|
+
const StypedEyeOffIcon = (0, _styledComponents.default)(_Icons.EyeOffIcon).withConfig({
|
|
44
|
+
displayName: "InputPassword__StypedEyeOffIcon",
|
|
45
|
+
componentId: "sc-v930fj-3"
|
|
46
|
+
})(["", ""], {
|
|
47
|
+
"cursor": "pointer"
|
|
48
|
+
});
|
|
49
|
+
const StyledInfoIcon = (0, _styledComponents.default)(_Icons.InfoIcon).withConfig({
|
|
50
|
+
displayName: "InputPassword__StyledInfoIcon",
|
|
51
|
+
componentId: "sc-v930fj-4"
|
|
52
|
+
})(["", ""], {
|
|
53
|
+
"marginRight": "0.25rem",
|
|
54
|
+
"cursor": "help",
|
|
55
|
+
"fill": "var(--red-alert)"
|
|
56
|
+
});
|
|
57
|
+
const StyledInfoSmallIcon = (0, _styledComponents.default)(_Icons.InfoSmallIcon).withConfig({
|
|
58
|
+
displayName: "InputPassword__StyledInfoSmallIcon",
|
|
59
|
+
componentId: "sc-v930fj-5"
|
|
60
|
+
})(["", ""], {
|
|
61
|
+
"marginRight": "0.25rem",
|
|
62
|
+
"cursor": "pointer",
|
|
63
|
+
"fill": "var(--red-alert)"
|
|
64
|
+
});
|
|
65
|
+
const InputPasswordAdornment = _ref => {
|
|
66
|
+
let {
|
|
67
|
+
invalid,
|
|
68
|
+
errorMessage,
|
|
69
|
+
size,
|
|
70
|
+
hideControl,
|
|
71
|
+
showText,
|
|
72
|
+
hideTooltipText,
|
|
73
|
+
showTooltipText,
|
|
74
|
+
disabled,
|
|
75
|
+
toggleShow
|
|
76
|
+
} = _ref;
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, invalid && errorMessage && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
78
|
+
title: errorMessage
|
|
79
|
+
}, size === "regular" ? /*#__PURE__*/_react.default.createElement(StyledInfoSmallIcon, null) : /*#__PURE__*/_react.default.createElement(StyledInfoIcon, null)), !hideControl && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
80
|
+
title: showText ? hideTooltipText : showTooltipText
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
|
|
82
|
+
variant: "text gray",
|
|
83
|
+
type: "button",
|
|
84
|
+
size: transform[size],
|
|
85
|
+
disabled: disabled,
|
|
86
|
+
onClick: toggleShow
|
|
87
|
+
}, showText ? size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeOffIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeOffIcon, null) : size === "regular" ? /*#__PURE__*/_react.default.createElement(StypedEyeIconSmall, null) : /*#__PURE__*/_react.default.createElement(StypedEyeIcon, null))));
|
|
88
|
+
};
|
|
89
|
+
const InputPassword = exports.InputPassword = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
|
|
90
|
+
let {
|
|
91
|
+
size = "regular",
|
|
92
|
+
disabled,
|
|
93
|
+
show = false,
|
|
94
|
+
hideControl,
|
|
95
|
+
hideIndicator,
|
|
96
|
+
showTooltipText = "Show",
|
|
97
|
+
hideTooltipText = "Hide",
|
|
98
|
+
value: defaultValue,
|
|
99
|
+
tooShortText = "Too short",
|
|
100
|
+
weakText = "Weak",
|
|
101
|
+
okayText = "Okay",
|
|
102
|
+
goodText = "Good",
|
|
103
|
+
strongText = "Strong",
|
|
104
|
+
errorMessage,
|
|
105
|
+
invalid,
|
|
106
|
+
onChange,
|
|
107
|
+
...rest
|
|
108
|
+
} = _ref2;
|
|
109
|
+
const inputRef = (0, _react.useRef)(null);
|
|
110
|
+
const handleRef = (0, _utils.useForkRef)(ref, inputRef);
|
|
111
|
+
const [showText, setShowText] = (0, _react.useState)(show);
|
|
112
|
+
const [strength, setStrength] = (0, _react.useState)(0);
|
|
113
|
+
const [strengthText, setStrengthText] = (0, _react.useState)(tooShortText);
|
|
114
|
+
const [value, setValue] = (0, _react.useState)(() => defaultValue);
|
|
115
|
+
const calculateStrength = (0, _react.useCallback)(passwordString => {
|
|
116
|
+
let score = 0;
|
|
117
|
+
if (passwordString.length < 4) {
|
|
118
|
+
score = 0;
|
|
119
|
+
setStrengthText(tooShortText);
|
|
120
|
+
} else if (passwordString.length === 4) {
|
|
121
|
+
score = 1;
|
|
122
|
+
setStrengthText(weakText);
|
|
123
|
+
} else if (passwordString.length >= 5 && passwordString.length < 10) {
|
|
124
|
+
score = 2;
|
|
125
|
+
setStrengthText(okayText);
|
|
126
|
+
if (/[A-Z!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(passwordString) && passwordString.length >= 5 && passwordString.length < 10) {
|
|
127
|
+
score = 3;
|
|
128
|
+
setStrengthText(goodText);
|
|
129
|
+
}
|
|
130
|
+
} else if (passwordString.length >= 10) {
|
|
131
|
+
score = 4;
|
|
132
|
+
setStrengthText(strongText);
|
|
133
|
+
}
|
|
134
|
+
setStrength(score);
|
|
135
|
+
}, [goodText, okayText, strongText, tooShortText, weakText]);
|
|
136
|
+
const handleChange = (0, _react.useCallback)(e => {
|
|
137
|
+
setValue(e.target.value);
|
|
138
|
+
calculateStrength(e.target.value);
|
|
139
|
+
typeof onChange === "function" && onChange(e.target.value);
|
|
140
|
+
}, [calculateStrength, onChange]);
|
|
141
|
+
const toggleShow = (0, _react.useCallback)(() => {
|
|
142
|
+
inputRef.current?.focus();
|
|
143
|
+
setShowText(prevState => !prevState);
|
|
144
|
+
}, []);
|
|
145
|
+
(0, _react.useEffect)(() => {
|
|
146
|
+
setShowText(show);
|
|
147
|
+
}, [show]);
|
|
148
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
149
|
+
style: {
|
|
150
|
+
width: "fit-content",
|
|
151
|
+
display: "flex",
|
|
152
|
+
flexDirection: "column"
|
|
153
|
+
}
|
|
154
|
+
}, /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({}, rest, {
|
|
155
|
+
ref: handleRef,
|
|
156
|
+
size: size,
|
|
157
|
+
value: value,
|
|
158
|
+
disabled: disabled,
|
|
159
|
+
type: showText ? "text" : "password",
|
|
160
|
+
onChange: handleChange,
|
|
161
|
+
invalid: invalid,
|
|
162
|
+
"data-testid": "InputPassword",
|
|
163
|
+
endAdornment: /*#__PURE__*/_react.default.createElement(InputPasswordAdornment, {
|
|
164
|
+
invalid: invalid,
|
|
165
|
+
errorMessage: errorMessage,
|
|
166
|
+
size: size,
|
|
167
|
+
hideControl: hideControl,
|
|
168
|
+
showText: showText,
|
|
169
|
+
hideTooltipText: hideTooltipText,
|
|
170
|
+
showTooltipText: showTooltipText,
|
|
171
|
+
disabled: disabled,
|
|
172
|
+
toggleShow: toggleShow
|
|
173
|
+
})
|
|
174
|
+
})), !hideIndicator && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicatorWrapper, null, [...Array(4)].map((_, index) => /*#__PURE__*/_react.default.createElement(_Styles.StyledPasswordIndicator, {
|
|
175
|
+
key: index,
|
|
176
|
+
$strength: strength,
|
|
177
|
+
$index: index,
|
|
178
|
+
"data-testid": strength >= index + 1 ? "active" : ""
|
|
179
|
+
}))), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
|
|
180
|
+
align: "right",
|
|
181
|
+
color: "tertiary"
|
|
182
|
+
}, strengthText)));
|
|
183
|
+
});
|
|
184
|
+
InputPassword.displayName = "InputPassword";
|
|
185
|
+
//# sourceMappingURL=InputPassword.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputPassword.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Input","_Styles","_utils","_IconButton","_Icons","_Tooltip","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","transform","biggest","regular","big","StypedEyeIconSmall","styled","EyeSmallIcon","withConfig","displayName","componentId","StypedEyeOffIconSmall","EyeOffSmallIcon","StypedEyeIcon","EyeIcon","StypedEyeOffIcon","EyeOffIcon","StyledInfoIcon","InfoIcon","StyledInfoSmallIcon","InfoSmallIcon","InputPasswordAdornment","_ref","invalid","errorMessage","size","hideControl","showText","hideTooltipText","showTooltipText","disabled","toggleShow","createElement","Fragment","Tooltip","title","IconButton","variant","type","onClick","InputPassword","exports","forwardRef","_ref2","ref","show","hideIndicator","value","defaultValue","tooShortText","weakText","okayText","goodText","strongText","onChange","rest","inputRef","useRef","handleRef","useForkRef","setShowText","useState","strength","setStrength","strengthText","setStrengthText","setValue","calculateStrength","useCallback","passwordString","score","length","test","handleChange","target","current","focus","prevState","useEffect","style","width","display","flexDirection","Input","_extends2","endAdornment","StyledPasswordIndicatorWrapper","Array","map","_","index","StyledPasswordIndicator","key","$strength","$index","Caption1","align","color"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Input, InputProps } from \"./Input\";\nimport {\n StyledPasswordIndicator,\n StyledPasswordIndicatorWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { IconButton } from \"../IconButton\";\nimport {\n EyeIcon,\n EyeOffIcon,\n EyeOffSmallIcon,\n EyeSmallIcon,\n InfoIcon,\n InfoSmallIcon,\n} from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Caption1 } from \"../Typography\";\n\nconst transform = {\n biggest: \"big\",\n regular: \"small\",\n big: \"medium\",\n} as const;\n\nexport interface InputPasswordProps extends Omit<InputProps, \"type\" | \"size\"> {\n /** Input size */\n size?: \"regular\" | \"big\" | \"biggest\";\n /** Renders with shown text */\n show?: boolean;\n /** Removes show/hide control */\n hideControl?: boolean;\n /** Removes strenght indicator */\n hideIndicator?: boolean;\n /** Show tooltip text */\n showTooltipText?: string;\n /** Hide tooltip text */\n hideTooltipText?: string;\n /** Too short strength indicator text */\n tooShortText?: string;\n /** Weak strength indicator text */\n weakText?: string;\n /** Okay strength indicator text */\n okayText?: string;\n /** Good strength indicator text */\n goodText?: string;\n /** Strong strength indicator text */\n strongText?: string;\n /** Error message tooltip text */\n errorMessage?: string;\n}\n\nconst StypedEyeIconSmall = styled(EyeSmallIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIconSmall = styled(EyeOffSmallIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeIcon = styled(EyeIcon)`\n ${tw`tw-cursor-pointer`}\n`;\n\nconst StypedEyeOffIcon = styled(EyeOffIcon)`\n ${tw`tw-cursor-pointer`}\n`;\nconst StyledInfoIcon = styled(InfoIcon)`\n ${tw`tw-cursor-help tw-fill-alert tw-mr-1`}\n`;\n\nconst StyledInfoSmallIcon = styled(InfoSmallIcon)`\n ${tw`tw-cursor-pointer tw-fill-alert tw-mr-1`}\n`;\n\ninterface InputPasswordAdornmentProps {\n invalid?: boolean;\n errorMessage?: string;\n size: \"regular\" | \"big\" | \"biggest\";\n hideControl?: boolean;\n showText: boolean;\n hideTooltipText: string;\n showTooltipText: string;\n disabled?: boolean;\n toggleShow?: () => void;\n}\n\nconst InputPasswordAdornment = ({\n invalid,\n errorMessage,\n size,\n hideControl,\n showText,\n hideTooltipText,\n showTooltipText,\n disabled,\n toggleShow,\n}: InputPasswordAdornmentProps) => (\n <>\n {invalid && errorMessage && (\n <Tooltip title={errorMessage}>\n {size === \"regular\" ? <StyledInfoSmallIcon /> : <StyledInfoIcon />}\n </Tooltip>\n )}\n {!hideControl && (\n <Tooltip title={showText ? hideTooltipText : showTooltipText}>\n <IconButton\n variant=\"text gray\"\n type=\"button\"\n size={transform[size] as \"big\" | \"small\" | \"medium\"}\n disabled={disabled}\n onClick={toggleShow}\n >\n {showText ? (\n size === \"regular\" ? (\n <StypedEyeOffIconSmall />\n ) : (\n <StypedEyeOffIcon />\n )\n ) : size === \"regular\" ? (\n <StypedEyeIconSmall />\n ) : (\n <StypedEyeIcon />\n )}\n </IconButton>\n </Tooltip>\n )}\n </>\n);\n\nexport const InputPassword = forwardRef<HTMLInputElement, InputPasswordProps>(\n (\n {\n size = \"regular\",\n disabled,\n show = false,\n hideControl,\n hideIndicator,\n showTooltipText = \"Show\",\n hideTooltipText = \"Hide\",\n value: defaultValue,\n tooShortText = \"Too short\",\n weakText = \"Weak\",\n okayText = \"Okay\",\n goodText = \"Good\",\n strongText = \"Strong\",\n errorMessage,\n invalid,\n onChange,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n const [showText, setShowText] = useState(show);\n const [strength, setStrength] = useState(0);\n const [strengthText, setStrengthText] = useState(tooShortText);\n const [value, setValue] = useState(() => defaultValue as string);\n\n const calculateStrength = useCallback(\n (passwordString: string) => {\n let score = 0;\n\n if (passwordString.length < 4) {\n score = 0;\n setStrengthText(tooShortText);\n } else if (passwordString.length === 4) {\n score = 1;\n setStrengthText(weakText);\n } else if (passwordString.length >= 5 && passwordString.length < 10) {\n score = 2;\n setStrengthText(okayText);\n if (\n /[A-Z!@#$%^&*()_+\\-=[\\]{};':\"\\\\|,.<>/?]/.test(passwordString) &&\n passwordString.length >= 5 &&\n passwordString.length < 10\n ) {\n score = 3;\n setStrengthText(goodText);\n }\n } else if (passwordString.length >= 10) {\n score = 4;\n setStrengthText(strongText);\n }\n\n setStrength(score);\n },\n [goodText, okayText, strongText, tooShortText, weakText]\n );\n\n const handleChange = useCallback(\n (e) => {\n setValue(e.target.value);\n calculateStrength(e.target.value);\n typeof onChange === \"function\" && onChange(e.target.value);\n },\n [calculateStrength, onChange]\n );\n\n const toggleShow = useCallback(() => {\n inputRef.current?.focus();\n setShowText((prevState) => !prevState);\n }, []);\n\n useEffect(() => {\n setShowText(show);\n }, [show]);\n\n return (\n <div\n style={{\n width: \"fit-content\",\n display: \"flex\",\n flexDirection: \"column\",\n }}\n >\n <Input\n {...rest}\n ref={handleRef}\n size={size}\n value={value}\n disabled={disabled}\n type={showText ? \"text\" : \"password\"}\n onChange={handleChange}\n invalid={invalid}\n data-testid=\"InputPassword\"\n endAdornment={\n <InputPasswordAdornment\n invalid={invalid}\n errorMessage={errorMessage}\n size={size}\n hideControl={hideControl}\n showText={showText}\n hideTooltipText={hideTooltipText}\n showTooltipText={showTooltipText}\n disabled={disabled}\n toggleShow={toggleShow}\n />\n }\n />\n {!hideIndicator && (\n <>\n <StyledPasswordIndicatorWrapper>\n {[...Array(4)].map((_, index) => (\n <StyledPasswordIndicator\n key={index}\n $strength={strength}\n $index={index}\n data-testid={strength >= index + 1 ? \"active\" : \"\"}\n />\n ))}\n </StyledPasswordIndicatorWrapper>\n <Caption1 align=\"right\" color=\"tertiary\">\n {strengthText}\n </Caption1>\n </>\n )}\n </div>\n );\n }\n);\n\nInputPassword.displayName = \"InputPassword\";\n"],"mappings":"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"}
|
|
@@ -11,5 +11,10 @@ interface StyledInputProps extends Pick<InputProps, "align"> {
|
|
|
11
11
|
$loading?: boolean;
|
|
12
12
|
}
|
|
13
13
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
|
|
14
|
+
export declare const StyledPasswordIndicatorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
15
|
+
export declare const StyledPasswordIndicator: import("styled-components").StyledComponent<"div", any, {
|
|
16
|
+
$strength: number;
|
|
17
|
+
$index: number;
|
|
18
|
+
}, never>;
|
|
14
19
|
export {};
|
|
15
20
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAgDvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC"}
|