diff options
Diffstat (limited to 'packages/forms/src/input')
-rw-r--r-- | packages/forms/src/input/index.tsx | 63 | ||||
-rw-r--r-- | packages/forms/src/input/scorePassword.ts | 6 |
2 files changed, 32 insertions, 37 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index b96dbc12d..41751710a 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -17,7 +17,10 @@ interface IData { | |||
17 | [index: string]: string; | 17 | [index: string]: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 20 | interface IProps |
21 | extends React.InputHTMLAttributes<HTMLInputElement>, | ||
22 | IFormField, | ||
23 | IWithStyle { | ||
21 | focus?: boolean; | 24 | focus?: boolean; |
22 | prefix?: string; | 25 | prefix?: string; |
23 | suffix?: string; | 26 | suffix?: string; |
@@ -62,23 +65,24 @@ class InputComponent extends Component<IProps, IState> { | |||
62 | } | 65 | } |
63 | 66 | ||
64 | if (data) { | 67 | if (data) { |
65 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); | 68 | Object.keys(data).map( |
69 | key => (this.inputRef.current!.dataset[key] = data[key]), | ||
70 | ); | ||
66 | } | 71 | } |
67 | } | 72 | } |
68 | } | 73 | } |
69 | 74 | ||
70 | onChange(e: React.ChangeEvent<HTMLInputElement>) { | 75 | onChange(e: React.ChangeEvent<HTMLInputElement>) { |
71 | const { | 76 | const { scorePassword, onChange } = this.props; |
72 | scorePassword, | ||
73 | onChange, | ||
74 | } = this.props; | ||
75 | 77 | ||
76 | if (onChange) { | 78 | if (onChange) { |
77 | onChange(e); | 79 | onChange(e); |
78 | } | 80 | } |
79 | 81 | ||
80 | if (this.inputRef && this.inputRef.current && scorePassword) { | 82 | if (this.inputRef && this.inputRef.current && scorePassword) { |
81 | this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) }); | 83 | this.setState({ |
84 | passwordScore: scorePasswordFunc(this.inputRef.current.value), | ||
85 | }); | ||
82 | } | 86 | } |
83 | } | 87 | } |
84 | 88 | ||
@@ -117,10 +121,7 @@ class InputComponent extends Component<IProps, IState> { | |||
117 | noMargin, | 121 | noMargin, |
118 | } = this.props; | 122 | } = this.props; |
119 | 123 | ||
120 | const { | 124 | const { showPassword, passwordScore } = this.state; |
121 | showPassword, | ||
122 | passwordScore, | ||
123 | } = this.state; | ||
124 | 125 | ||
125 | const inputType = type === 'password' && showPassword ? 'text' : type; | 126 | const inputType = type === 'password' && showPassword ? 'text' : type; |
126 | 127 | ||
@@ -144,12 +145,9 @@ class InputComponent extends Component<IProps, IState> { | |||
144 | [`${classes.wrapper}`]: true, | 145 | [`${classes.wrapper}`]: true, |
145 | [`${classes.disabled}`]: disabled, | 146 | [`${classes.disabled}`]: disabled, |
146 | [`${classes.hasError}`]: error, | 147 | [`${classes.hasError}`]: error, |
147 | })}> | 148 | })} |
148 | {prefix && ( | 149 | > |
149 | <span className={classes.prefix}> | 150 | {prefix && <span className={classes.prefix}>{prefix}</span>} |
150 | {prefix} | ||
151 | </span> | ||
152 | )} | ||
153 | <input | 151 | <input |
154 | id={id} | 152 | id={id} |
155 | type={inputType} | 153 | type={inputType} |
@@ -168,30 +166,29 @@ class InputComponent extends Component<IProps, IState> { | |||
168 | max={max} | 166 | max={max} |
169 | step={step} | 167 | step={step} |
170 | /> | 168 | /> |
171 | {suffix && ( | 169 | {suffix && <span className={classes.suffix}>{suffix}</span>} |
172 | <span className={classes.suffix}> | ||
173 | {suffix} | ||
174 | </span> | ||
175 | )} | ||
176 | {showPasswordToggle && ( | 170 | {showPasswordToggle && ( |
177 | <button | 171 | <button |
178 | type="button" | 172 | type="button" |
179 | className={classes.formModifier} | 173 | className={classes.formModifier} |
180 | onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))} | 174 | onClick={() => |
175 | this.setState(prevState => ({ | ||
176 | showPassword: !prevState.showPassword, | ||
177 | })) | ||
178 | } | ||
181 | tabIndex={-1} | 179 | tabIndex={-1} |
182 | > | 180 | > |
183 | <Icon | 181 | <Icon path={!showPassword ? mdiEye : mdiEyeOff} size={1} /> |
184 | path={!showPassword ? mdiEye : mdiEyeOff} | ||
185 | size={1} | ||
186 | /> | ||
187 | </button> | 182 | </button> |
188 | )} | 183 | )} |
189 | </div> | 184 | </div> |
190 | {scorePassword && ( | 185 | {scorePassword && ( |
191 | <div className={classnames({ | 186 | <div |
192 | [`${classes.passwordScore}`]: true, | 187 | className={classnames({ |
193 | [`${classes.hasError}`]: error, | 188 | [`${classes.passwordScore}`]: true, |
194 | })}> | 189 | [`${classes.hasError}`]: error, |
190 | })} | ||
191 | > | ||
195 | <meter | 192 | <meter |
196 | value={passwordScore < 5 ? 5 : passwordScore} | 193 | value={passwordScore < 5 ? 5 : passwordScore} |
197 | low={30} | 194 | low={30} |
@@ -202,9 +199,7 @@ class InputComponent extends Component<IProps, IState> { | |||
202 | </div> | 199 | </div> |
203 | )} | 200 | )} |
204 | </Label> | 201 | </Label> |
205 | {error && ( | 202 | {error && <Error message={error} />} |
206 | <Error message={error} /> | ||
207 | )} | ||
208 | </Wrapper> | 203 | </Wrapper> |
209 | ); | 204 | ); |
210 | } | 205 | } |
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts index 0b7719ec1..bc30de4b8 100644 --- a/packages/forms/src/input/scorePassword.ts +++ b/packages/forms/src/input/scorePassword.ts | |||
@@ -11,7 +11,7 @@ interface IVariations { | |||
11 | } | 11 | } |
12 | 12 | ||
13 | export function scorePasswordFunc(password: string): number { | 13 | export function scorePasswordFunc(password: string): number { |
14 | let score: number = 0; | 14 | let score = 0; |
15 | if (!password) { | 15 | if (!password) { |
16 | return score; | 16 | return score; |
17 | } | 17 | } |
@@ -32,8 +32,8 @@ export function scorePasswordFunc(password: string): number { | |||
32 | }; | 32 | }; |
33 | 33 | ||
34 | let variationCount = 0; | 34 | let variationCount = 0; |
35 | Object.keys(variations).forEach((key) => { | 35 | Object.keys(variations).forEach(key => { |
36 | variationCount += (variations[key] === true) ? 1 : 0; | 36 | variationCount += variations[key] === true ? 1 : 0; |
37 | }); | 37 | }); |
38 | 38 | ||
39 | score += (variationCount - 1) * 10; | 39 | score += (variationCount - 1) * 10; |