1113439055

Committed 19 Dec 2023 09:01PM UTC coverage: 82.752% (-17.2%) from 99.964%

Build # 1113439055

Build Type

Pull #4258

gitlab-ci

Committed by

mender-test-bot

Commit Message

chore: Types update

Signed-off-by: Mender Test Bot <mender@northern.tech>

Pull Request Pull Request #4258: chore: Types update

Run Details

4326 of 6319 branches covered (0.0%)

8348 of 10088 relevant lines covered (82.75%)

189.39 hits per line

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

76.92

/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, { 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, onClose, qrImage, verify2FA }) => {
  const current2FA = useRef(has2FA);
  const [validated2fa, setValidated2fa] = useState(false);
  const [validating2fa, setValidating2fa] = useState(false);

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

  useEffect(() => {
    const onUnload = e => {
      if (!e || (validated2fa && current2FA.current) || !qrImage) {
        return;
      }
      e.returnValue = '2fa setup incomplete';
      return e.returnValue;
    };

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

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

mendersoftware / gui / 1113439055

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