963124858

pending completion

Build # 963124858

Build Type

Pull #3870

gitlab-ci

Committed by

mzedel

Commit Message

chore: cleaned up left over onboarding tooltips & aligned with updated design

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #3870: MEN-5413

Run Details

4368 of 6355 branches covered (68.73%)

91 of 118 new or added lines in 22 files covered. (77.12%)

1753 existing lines in 162 files now uncovered.

8246 of 10042 relevant lines covered (82.12%)

193.52 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

94.29

/src/js/components/common/forms/passwordinput.js

// Copyright 2016 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useRef, useState } from 'react';
import { Controller, useFormContext, useWatch } from 'react-hook-form';

import { CheckCircle as CheckIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material';
import { Button, FormControl, FormHelperText, IconButton, Input, InputAdornment, InputLabel } from '@mui/material';

import copy from 'copy-to-clipboard';
import generator from 'generate-password';

import { TIMEOUTS } from '../../../constants/appConstants';
import { toggle } from '../../../helpers';
import { runValidations } from './form';

const PasswordGenerateButtons = ({ clearPass, edit, generatePass }) => (
  <div className="pass-buttons">
    <Button color="primary" onClick={generatePass}>
      Generate
    </Button>
    {edit ? <Button onClick={clearPass}>Cancel</Button> : null}
  </div>
);

const SCORE_THRESHOLD = 3;

const PasswordGenerationControls = ({ score, feedback }) => (
  <>
    <div className="help-text" id="pass-strength">
      Strength: <meter max={4} min={0} value={score} high={3.9} optimum={4} low={2.5} />
      {score > SCORE_THRESHOLD ? <CheckIcon className="fadeIn green" style={{ height: 18, marginTop: -3, marginBottom: -3 }} /> : null}
    </div>
    {!!feedback.length && (
      <p className="help-text">
        {feedback.map((message, index) => (
          <React.Fragment key={`feedback-${index}`}>
            <span>{message}</span>
            <br />
          </React.Fragment>
        ))}
      </p>
    )}
  </>
);

export const PasswordInput = ({
  autocomplete,
  className,
  control,
  create,
  defaultValue,
  disabled,
  edit,
  generate,
  id,
  InputLabelProps = {},
  label,
  onClear,
  placeholder,
  required,
  validations = ''
}) => {
  const [score, setScore] = useState('');
  const [visible, setVisible] = useState(false);
  const [copied, setCopied] = useState(false);
  const [feedback, setFeedback] = useState([]);
  const [confirmationId] = useState(id.includes('current') ? '' : ['password', 'password_confirmation'].find(thing => thing !== id));
  const timer = useRef();
  const {
    clearErrors,
    formState: { errors },
    setError,
    setValue,
    trigger,
    getValues
  } = useFormContext();
  const confirmation = useWatch({ name: confirmationId });
  const errorKey = `${id}-error`;

  useEffect(() => {
    return () => {
      clearTimeout(timer.current);
    };
  });

  const clearPassClick = () => {
    setValue(id, '');
    onClear();
    setCopied(false);
  };

  const generatePassClick = () => {
    const password = generator.generate({ length: 16, numbers: true });
    setValue(id, password);
    const form = getValues();
    if (form.hasOwnProperty(`${id}_confirmation`)) {
      setValue(`${id}_confirmation`, password);
    }
    copy(password);
    setCopied(true);
    setVisible(true);
    timer.current = setTimeout(() => setCopied(false), TIMEOUTS.fiveSeconds);
    trigger();
  };

  const validate = async (value = '') => {
    let { isValid, errortext } = runValidations({ id, required, validations, value });
    if (confirmation && value !== confirmation) {
      isValid = false;
      errortext = 'The passwords you provided do not match, please check again.';
    }
    if (isValid) {
      clearErrors(errorKey);
    } else {
      setError(errorKey, { type: 'validate', message: errortext });
    }
    if (!create || (!required && !value)) {
      return isValid;
    }
    const { default: zxcvbn } = await import(/* webpackChunkName: "zxcvbn" */ 'zxcvbn');
    const strength = zxcvbn(value);
    const score = strength.score;
    setFeedback(strength.feedback.suggestions || []);
    setScore(score);
    return score > SCORE_THRESHOLD && isValid;
  };

  return (
    <div className={className}>
      <div className="password-wrapper">
        <Controller
          name={id}
          control={control}
          rules={{ required, validate }}
          render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
            <FormControl className={required ? 'required' : ''} error={Boolean(error?.message || errors[errorKey])} style={{ width: 400 }}>
              <InputLabel htmlFor={id} {...InputLabelProps}>
                {label}
              </InputLabel>
              <Input
                autoComplete={autocomplete}
                id={id}
                name={id}
                type={visible ? 'text' : 'password'}
                defaultValue={defaultValue}
                placeholder={placeholder}
                value={value ?? ''}
                disabled={disabled}
                inputRef={ref}
                required={required}
                onChange={({ target: { value } }) => {
                  setValue(id, value);
                  onChange(value);
                }}
                onBlur={onBlur}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton onClick={() => setVisible(toggle)} size="large">
                      {visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
                    </IconButton>
                  </InputAdornment>
                }
              />
              <FormHelperText>{(errors[errorKey] || error)?.message}</FormHelperText>
            </FormControl>
          )}
        />
        {generate && !required && <PasswordGenerateButtons clearPass={clearPassClick} edit={edit} generatePass={generatePassClick} />}
      </div>
      {copied ? <div className="green fadeIn margin-bottom-small">Copied to clipboard</div> : null}
      {create && (
        <>
          <PasswordGenerationControls feedback={feedback} score={score} />
          {generate && required && <PasswordGenerateButtons clearPass={clearPassClick} edit={edit} generatePass={generatePassClick} />}
        </>
      )}
    </div>
  );
};

export default PasswordInput;

1	// Copyright 2016 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useRef, useState } from 'react';
15	import { Controller, useFormContext, useWatch } from 'react-hook-form';
16
17	import { CheckCircle as CheckIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material';
18	import { Button, FormControl, FormHelperText, IconButton, Input, InputAdornment, InputLabel } from '@mui/material';
19
20	import copy from 'copy-to-clipboard';
21	import generator from 'generate-password';
22
23	import { TIMEOUTS } from '../../../constants/appConstants';
24	import { toggle } from '../../../helpers';
25	import { runValidations } from './form';
26
27	const PasswordGenerateButtons = ({ clearPass, edit, generatePass }) => (	14✔
28	<div className="pass-buttons">	66✔
29	<Button color="primary" onClick={generatePass}>
30	Generate
31	</Button>
32	{edit ? <Button onClick={clearPass}>Cancel</Button> : null}	66!
33	</div>
34	);
35
36	const SCORE_THRESHOLD = 3;	14✔
37
38	const PasswordGenerationControls = ({ score, feedback }) => (	14✔
39	<>	516✔
40	<div className="help-text" id="pass-strength">
41	Strength: <meter max={4} min={0} value={score} high={3.9} optimum={4} low={2.5} />
42	{score > SCORE_THRESHOLD ? <CheckIcon className="fadeIn green" style={{ height: 18, marginTop: -3, marginBottom: -3 }} /> : null}	516✔
43	</div>
44	{!!feedback.length && (	652✔
45	<p className="help-text">
46	{feedback.map((message, index) => (
47	<React.Fragment key={`feedback-${index}`}>	136✔
48	<span>{message}</span>
49	<br />
50	</React.Fragment>
51	))}
52	</p>
53	)}
54	</>
55	);
56
57	export const PasswordInput = ({	14✔
58	autocomplete,
59	className,
60	control,
61	create,
62	defaultValue,
63	disabled,
64	edit,
65	generate,
66	id,
67	InputLabelProps = {},	1,351✔
68	label,
69	onClear,
70	placeholder,
71	required,
72	validations = ''	500✔
73	}) => {
74	const [score, setScore] = useState('');	1,396✔
75	const [visible, setVisible] = useState(false);	1,396✔
76	const [copied, setCopied] = useState(false);	1,396✔
77	const [feedback, setFeedback] = useState([]);	1,396✔
78	const [confirmationId] = useState(id.includes('current') ? '' : ['password', 'password_confirmation'].find(thing => thing !== id));	2,460✔
79	const timer = useRef();	1,396✔
80	const {
81	clearErrors,
82	formState: { errors },
83	setError,
84	setValue,
85	trigger,
86	getValues
87	} = useFormContext();	1,396✔
88	const confirmation = useWatch({ name: confirmationId });	1,396✔
89	const errorKey = `${id}-error`;	1,396✔
90
91	useEffect(() => {	1,396✔
92	return () => {	1,295✔
93	clearTimeout(timer.current);	1,295✔
94	};
95	});
96
97	const clearPassClick = () => {	1,396✔
UNCOV 98	setValue(id, '');	×
UNCOV 99	onClear();	×
UNCOV 100	setCopied(false);	×
101	};
102
103	const generatePassClick = () => {	1,396✔
104	const password = generator.generate({ length: 16, numbers: true });	5✔
105	setValue(id, password);	5✔
106	const form = getValues();	5✔
107	if (form.hasOwnProperty(`${id}_confirmation`)) {	5✔
108	setValue(`${id}_confirmation`, password);	1✔
109	}
110	copy(password);	5✔
111	setCopied(true);	5✔
112	setVisible(true);	5✔
113	timer.current = setTimeout(() => setCopied(false), TIMEOUTS.fiveSeconds);	5✔
114	trigger();	5✔
115	};
116
117	const validate = async (value = '') => {	1,396✔
118	let { isValid, errortext } = runValidations({ id, required, validations, value });	353✔
119	if (confirmation && value !== confirmation) {	353✔
120	isValid = false;	80✔
121	errortext = 'The passwords you provided do not match, please check again.';	80✔
122	}
123	if (isValid) {	353✔
124	clearErrors(errorKey);	252✔
125	} else {
126	setError(errorKey, { type: 'validate', message: errortext });	101✔
127	}
128	if (!create \|\| (!required && !value)) {	353✔
129	return isValid;	215✔
130	}
131	const { default: zxcvbn } = await import(/* webpackChunkName: "zxcvbn" */ 'zxcvbn');	138✔
132	const strength = zxcvbn(value);	138✔
133	const score = strength.score;	138✔
134	setFeedback(strength.feedback.suggestions \|\| []);	138!
135	setScore(score);	138✔
136	return score > SCORE_THRESHOLD && isValid;	138✔
137	};
138
139	return (	1,396✔
140	<div className={className}>
141	<div className="password-wrapper">
142	<Controller
143	name={id}
144	control={control}
145	rules={{ required, validate }}
146	render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
147	<FormControl className={required ? 'required' : ''} error={Boolean(error?.message \|\| errors[errorKey])} style={{ width: 400 }}>	1,680✔
148	<InputLabel htmlFor={id} {...InputLabelProps}>
149	{label}
150	</InputLabel>
151	<Input
152	autoComplete={autocomplete}
153	id={id}
154	name={id}
155	type={visible ? 'text' : 'password'}	1,680✔
156	defaultValue={defaultValue}
157	placeholder={placeholder}
158	value={value ?? ''}	2,126✔
159	disabled={disabled}
160	inputRef={ref}
161	required={required}
162	onChange={({ target: { value } }) => {
163	setValue(id, value);	222✔
164	onChange(value);	222✔
165	}}
166	onBlur={onBlur}
167	endAdornment={
168	<InputAdornment position="end">
UNCOV 169	<IconButton onClick={() => setVisible(toggle)} size="large">	×
170	{visible ? <VisibilityIcon /> : <VisibilityOffIcon />}	1,680✔
171	</IconButton>
172	</InputAdornment>
173	}
174	/>
175	<FormHelperText>{(errors[errorKey] \|\| error)?.message}</FormHelperText>	3,156✔
176	</FormControl>
177	)}
178	/>
179	{generate && !required && <PasswordGenerateButtons clearPass={clearPassClick} edit={edit} generatePass={generatePassClick} />}	1,508✔
180	</div>
181	{copied ? <div className="green fadeIn margin-bottom-small">Copied to clipboard</div> : null}	1,396✔
182	{create && (	2,013✔
183	<>
184	<PasswordGenerationControls feedback={feedback} score={score} />
185	{generate && required && <PasswordGenerateButtons clearPass={clearPassClick} edit={edit} generatePass={generatePassClick} />}	706✔
186	</>
187	)}
188	</div>
189	);
190	};
191
192	export default PasswordInput;

mendersoftware / gui / 963124858

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous