aboutsummaryrefslogtreecommitdiffstats
path: root/packages/forms/src/input
diff options
context:
space:
mode:
Diffstat (limited to 'packages/forms/src/input')
-rw-r--r--packages/forms/src/input/index.tsx63
-rw-r--r--packages/forms/src/input/scorePassword.ts6
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
20interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { 20interface 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
13export function scorePasswordFunc(password: string): number { 13export 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;