963002358

pending completion

Build # 963002358

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

4348 of 6319 branches covered (68.81%)

95 of 122 new or added lines in 24 files covered. (77.87%)

1734 existing lines in 160 files now uncovered.

8174 of 9951 relevant lines covered (82.14%)

178.12 hits per line

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

72.09

/src/js/components/settings/user-management/twofactorauth-steps/authsetup.js

// Copyright 2021 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, { useCallback, useEffect, useRef, useState } from 'react';

import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
import { Button } from '@mui/material';

import { twoFAStates } from '../../../../constants/userConstants';
import Form from '../../../common/forms/form';
import TextInput from '../../../common/forms/textinput';
import Loader from '../../../common/loader';

export const AuthSetup = ({ currentUser, handle2FAState, has2FA, qrImage, verify2FA }) => {
  const current2FA = useRef(has2FA);
  const [validated2fa, setValidated2fa] = useState(false);
  const [validating2fa, setValidating2fa] = useState(false);

  const onUnload = useCallback(
    e => {
      if (!e || (validated2fa && has2FA) || !qrImage) {
        return;
      }
      e.returnValue = '2fa setup incomplete';
      return e.returnValue;
    },
    [has2FA, qrImage, validated2fa]
  );

  useEffect(() => {
    window.addEventListener('beforeunload', onUnload);
    return () => {
      if (!current2FA.current && qrImage) {
        handle2FAState(twoFAStates.disabled);
      }
      window.removeEventListener('beforeunload', onUnload);
    };
  }, [handle2FAState, onUnload, qrImage]);

  useEffect(() => {
    current2FA.current = has2FA;
  }, [has2FA]);

  const validate2faSetup = formData => {
    setValidating2fa(true);
    formData.email = currentUser.email;
    return verify2FA(formData)
      .then(() => setValidated2fa(true))
      .catch(() => setValidated2fa(false))
      .finally(() => setValidating2fa(false));
  };

  return (
    <div className="margin-top">
      Setup:
      <div className="flexbox margin-top">
        <ol className="spaced-list margin-right-large" style={{ paddingInlineStart: 20 }}>
          <li className="margin-top-none">
            To use Two Factor Authentication, first download a third party authentication app such as{' '}
            <a href="https://authy.com/download/" target="_blank" rel="noopener noreferrer">
              Authy
            </a>{' '}
            or{' '}
            <a href="https://support.google.com/accounts/answer/1066447" target="_blank" rel="noopener noreferrer">
              Google Authenticator
            </a>
            .
          </li>
          <li>Scan the QR code on the right with the authenticator app you just downloaded on your device.</li>
          <li>
            <div>
              Type in the generated code in the input field below and click Verify.
              {validated2fa ? (
                <div className="flexbox space-between centered margin-top margin-right margin-bottom" style={{ justifyContent: 'flex-end' }}>
                  <CheckCircleIcon className="green" />
                  <h3 className="green margin-left-small" style={{ textTransform: 'uppercase' }}>
                    Verified
                  </h3>
                </div>
              ) : (
                <>
                  <Form showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify" submitButtonId="confirm-button">
                    <TextInput hint="Verification code" label="Verification code" id="token2fa" validations="isLength:6,isNumeric" required={true} />
                  </Form>
                  {validating2fa && (
                    <div className="flexbox" style={{ alignItems: 'flex-end', justifyContent: 'flex-end', height: 'min-content' }}>
                      <Loader show={true} />
                      <Button variant="contained" color="primary" disabled={true} style={{ marginLeft: 30 }}>
                        Verifying...
                      </Button>
                    </div>
                  )}
                </>
              )}
            </div>
          </li>
          <li>Then each time you log in, you will be asked for a verification code which you can retrieve from the authentication app on your device.</li>
        </ol>
        {!qrImage ? <Loader show={!qrImage} /> : <img src={`data:image/png;base64,${qrImage}`} style={{ maxHeight: '20vh' }} />}
      </div>
      <div className="flexbox" style={{ justifyContent: 'flex-end' }}>
        <Button onClick={() => handle2FAState(twoFAStates.disabled)} style={{ marginRight: 10 }}>
          Cancel
        </Button>
        <Button variant="contained" color="secondary" disabled={!validated2fa} onClick={() => handle2FAState(twoFAStates.enabled)}>
          Save
        </Button>
      </div>
    </div>
  );
};

export default AuthSetup;

1	// Copyright 2021 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, { useCallback, useEffect, useRef, useState } from 'react';
15
16	import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
17	import { Button } from '@mui/material';
18
19	import { twoFAStates } from '../../../../constants/userConstants';
20	import Form from '../../../common/forms/form';
21	import TextInput from '../../../common/forms/textinput';
22	import Loader from '../../../common/loader';
23
24	export const AuthSetup = ({ currentUser, handle2FAState, has2FA, qrImage, verify2FA }) => {	7✔
25	const current2FA = useRef(has2FA);	10✔
26	const [validated2fa, setValidated2fa] = useState(false);	10✔
27	const [validating2fa, setValidating2fa] = useState(false);	10✔
28
29	const onUnload = useCallback(	10✔
30	e => {
UNCOV 31	if (!e \|\| (validated2fa && has2FA) \|\| !qrImage) {	×
UNCOV 32	return;	×
33	}
UNCOV 34	e.returnValue = '2fa setup incomplete';	×
UNCOV 35	return e.returnValue;	×
36	},
37	[has2FA, qrImage, validated2fa]
38	);
39
40	useEffect(() => {	10✔
41	window.addEventListener('beforeunload', onUnload);	5✔
42	return () => {	5✔
43	if (!current2FA.current && qrImage) {	5✔
44	handle2FAState(twoFAStates.disabled);	1✔
45	}
46	window.removeEventListener('beforeunload', onUnload);	5✔
47	};
48	}, [handle2FAState, onUnload, qrImage]);
49
50	useEffect(() => {	10✔
51	current2FA.current = has2FA;	3✔
52	}, [has2FA]);
53
54	const validate2faSetup = formData => {	10✔
55	setValidating2fa(true);	1✔
56	formData.email = currentUser.email;	1✔
57	return verify2FA(formData)	1✔
58	.then(() => setValidated2fa(true))	1✔
UNCOV 59	.catch(() => setValidated2fa(false))	×
60	.finally(() => setValidating2fa(false));	1✔
61	};
62
63	return (	10✔
64	<div className="margin-top">
65	Setup:
66	<div className="flexbox margin-top">
67	<ol className="spaced-list margin-right-large" style={{ paddingInlineStart: 20 }}>
68	<li className="margin-top-none">
69	To use Two Factor Authentication, first download a third party authentication app such as{' '}
70	<a href="https://authy.com/download/" target="_blank" rel="noopener noreferrer">
71	Authy
72	</a>{' '}
73	or{' '}
74	<a href="https://support.google.com/accounts/answer/1066447" target="_blank" rel="noopener noreferrer">
75	Google Authenticator
76	</a>
77	.
78	</li>
79	<li>Scan the QR code on the right with the authenticator app you just downloaded on your device.</li>
80	<li>
81	<div>
82	Type in the generated code in the input field below and click Verify.
83	{validated2fa ? (	10✔
84	<div className="flexbox space-between centered margin-top margin-right margin-bottom" style={{ justifyContent: 'flex-end' }}>
85	<CheckCircleIcon className="green" />
86	<h3 className="green margin-left-small" style={{ textTransform: 'uppercase' }}>
87	Verified
88	</h3>
89	</div>
90	) : (
91	<>
92	<Form showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify" submitButtonId="confirm-button">
93	<TextInput hint="Verification code" label="Verification code" id="token2fa" validations="isLength:6,isNumeric" required={true} />
94	</Form>
95	{validating2fa && (	10✔
96	<div className="flexbox" style={{ alignItems: 'flex-end', justifyContent: 'flex-end', height: 'min-content' }}>
97	<Loader show={true} />
98	<Button variant="contained" color="primary" disabled={true} style={{ marginLeft: 30 }}>
99	Verifying...
100	</Button>
101	</div>
102	)}
103	</>
104	)}
105	</div>
106	</li>
107	<li>Then each time you log in, you will be asked for a verification code which you can retrieve from the authentication app on your device.</li>
108	</ol>
109	{!qrImage ? <Loader show={!qrImage} /> : <img src={`data:image/png;base64,${qrImage}`} style={{ maxHeight: '20vh' }} />}	10✔
110	</div>
111	<div className="flexbox" style={{ justifyContent: 'flex-end' }}>
UNCOV 112	<Button onClick={() => handle2FAState(twoFAStates.disabled)} style={{ marginRight: 10 }}>	×
113	Cancel
114	</Button>
115	<Button variant="contained" color="secondary" disabled={!validated2fa} onClick={() => handle2FAState(twoFAStates.enabled)}>	1✔
116	Save
117	</Button>
118	</div>
119	</div>
120	);
121	};
122
123	export default AuthSetup;

mendersoftware / gui / 963002358

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