10423

Committed 11 Nov 2025 04:53PM UTC coverage: 74.435% (-0.1%) from 74.562%

Build # 10423

Build Type

push

gitlab-ci

Committed by

web-flow

Commit Message

Merge pull request #1071 from mendersoftware/dependabot/npm_and_yarn/frontend/main/development-dependencies-92732187be

Run Details

3868 of 5393 branches covered (71.72%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 2 files covered. (100.0%)

176 existing lines in 95 files now uncovered.

64605 of 86597 relevant lines covered (74.6%)

7.74 hits per line

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

93.25

/frontend/src/js/components/settings/user-management/TwoFactorAuthSetup.tsx

// Copyright 2019 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 { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { Collapse, Switch } from '@mui/material';

import InfoText from '@northern.tech/common-ui/InfoText';
import storeActions from '@northern.tech/store/actions';
import { twoFAStates } from '@northern.tech/store/constants';
import { getCurrentUser, getHas2FA } from '@northern.tech/store/selectors';
import { disableUser2fa, enableUser2fa, get2FAQRCode, verify2FA, verifyEmailComplete, verifyEmailStart } from '@northern.tech/store/thunks';

import AuthSetup from './twofactorauth-steps/AuthSetup';
import EmailVerification from './twofactorauth-steps/EmailVerification';

const { setSnackbar } = storeActions;

export const TwoFactorAuthSetup = () => {
  const activationCode = useSelector(state => state.users.activationCode);
  const currentUser = useSelector(getCurrentUser);
  const has2FA = useSelector(getHas2FA);
  const qrImage = useSelector(state => state.users.qrCode);
  const [qrExpanded, setQrExpanded] = useState(false);
  const [is2FAEnabled, setIs2FAEnabled] = useState(has2FA);
  const [showEmailVerification, setShowEmailVerification] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    if ((currentUser.verified || currentUser.email?.endsWith('@example.com')) && is2FAEnabled && !has2FA) {
      setShowEmailVerification(false);
      setQrExpanded(true);
    }
  }, [currentUser.email, currentUser.verified, is2FAEnabled, has2FA]);

  useEffect(() => {
    if (activationCode) {
      setIs2FAEnabled(true);
      dispatch(verifyEmailComplete(activationCode))
        .catch(() => {
          setShowEmailVerification(true);
          setQrExpanded(false);
        })
        // we have to explicitly call this, to not send the returned promise as user to activate 2fa for
        .then(() => dispatch(enableUser2fa()))
        .then(() => dispatch(get2FAQRCode()));
    }
  }, [activationCode, dispatch]);

  useEffect(() => {
    if (has2FA) {
      setIs2FAEnabled(has2FA);
    }
  }, [has2FA]);

  const handle2FAState = useCallback(
    state => {
      setIs2FAEnabled(state !== twoFAStates.disabled);
      setQrExpanded(state === twoFAStates.unverified);
      let request;
      if (state === twoFAStates.disabled) {
        request = dispatch(disableUser2fa());
      } else {
        request = dispatch(enableUser2fa());
      }
      request.then(() => {
        if (state === twoFAStates.unverified) {
          dispatch(get2FAQRCode());
        } else if (state === twoFAStates.enabled) {
          setSnackbar('Two Factor authentication set up successfully.');
        }
      });
    },
    [dispatch]
  );

  const onToggle2FAClick = useCallback(() => {
    if (!(currentUser.verified || currentUser.email?.endsWith('@example.com'))) {
      setShowEmailVerification(!showEmailVerification);
      setIs2FAEnabled(!showEmailVerification);
      return;
    }
    if (has2FA) {
      handle2FAState(twoFAStates.disabled);
    } else {
      if (is2FAEnabled) {
        dispatch(disableUser2fa());
      } else {
        handle2FAState(twoFAStates.unverified);
      }
      setQrExpanded(!is2FAEnabled);
      setIs2FAEnabled(!is2FAEnabled);
    }
  }, [currentUser.email, currentUser.verified, dispatch, handle2FAState, has2FA, is2FAEnabled, showEmailVerification]);

  return (
    <div className="margin-top">
      <div className="clickable flexbox space-between" onClick={onToggle2FAClick}>
        <p className="help-content">Enable Two Factor authentication</p>
        <Switch checked={is2FAEnabled} />
      </div>
      <InfoText style={{ width: '75%', margin: 0 }}>
        Two Factor Authentication adds a second layer of protection to your account by asking for an additional verification code each time you log in.
      </InfoText>
      {showEmailVerification && (
        <EmailVerification
          activationCode={activationCode}
          verifyEmailComplete={data => dispatch(verifyEmailComplete(data))}
          verifyEmailStart={() => dispatch(verifyEmailStart())}
        />
      )}
      <Collapse in={qrExpanded} timeout="auto" unmountOnExit>
        <AuthSetup
          currentUser={currentUser}
          handle2FAState={handle2FAState}
          has2FA={has2FA}
          qrImage={qrImage}
          verify2FA={data => dispatch(verify2FA(data))}
          onClose={() => setQrExpanded(false)}
        />
      </Collapse>
    </div>
  );
};

export default TwoFactorAuthSetup;

1	// Copyright 2019 Northern.tech AS	2✔
2	//	2✔
3	// Licensed under the Apache License, Version 2.0 (the "License");	2✔
4	// you may not use this file except in compliance with the License.	2✔
5	// You may obtain a copy of the License at	2✔
6	//	2✔
7	// http://www.apache.org/licenses/LICENSE-2.0	2✔
8	//	2✔
9	// Unless required by applicable law or agreed to in writing, software	2✔
10	// distributed under the License is distributed on an "AS IS" BASIS,	2✔
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.	2✔
12	// See the License for the specific language governing permissions and	2✔
13	// limitations under the License.	2✔
14	import { useCallback, useEffect, useState } from 'react';	2✔
15	import { useDispatch, useSelector } from 'react-redux';	2✔
16		2✔
17	import { Collapse, Switch } from '@mui/material';	2✔
18		2✔
19	import InfoText from '@northern.tech/common-ui/InfoText';	2✔
20	import storeActions from '@northern.tech/store/actions';	2✔
21	import { twoFAStates } from '@northern.tech/store/constants';	2✔
22	import { getCurrentUser, getHas2FA } from '@northern.tech/store/selectors';	2✔
23	import { disableUser2fa, enableUser2fa, get2FAQRCode, verify2FA, verifyEmailComplete, verifyEmailStart } from '@northern.tech/store/thunks';	2✔
24		2✔
25	import AuthSetup from './twofactorauth-steps/AuthSetup';	2✔
26	import EmailVerification from './twofactorauth-steps/EmailVerification';	2✔
27		2✔
28	const { setSnackbar } = storeActions;	8✔
29		2✔
30	export const TwoFactorAuthSetup = () => {	8✔
31	const activationCode = useSelector(state => state.users.activationCode);	26✔
32	const currentUser = useSelector(getCurrentUser);	17✔
33	const has2FA = useSelector(getHas2FA);	17✔
34	const qrImage = useSelector(state => state.users.qrCode);	26✔
35	const [qrExpanded, setQrExpanded] = useState(false);	17✔
36	const [is2FAEnabled, setIs2FAEnabled] = useState(has2FA);	17✔
37	const [showEmailVerification, setShowEmailVerification] = useState(false);	17✔
38	const dispatch = useDispatch();	17✔
39		2✔
40	useEffect(() => {	17✔
41	if ((currentUser.verified \|\| currentUser.email?.endsWith('@example.com')) && is2FAEnabled && !has2FA) {	6!
42	setShowEmailVerification(false);	3✔
43	setQrExpanded(true);	3✔
44	}	2✔
45	}, [currentUser.email, currentUser.verified, is2FAEnabled, has2FA]);	2✔
46		2✔
47	useEffect(() => {	17✔
48	if (activationCode) {	4!
49	setIs2FAEnabled(true);	2✔
50	dispatch(verifyEmailComplete(activationCode))	2✔
51	.catch(() => {	2✔
52	setShowEmailVerification(true);	2✔
53	setQrExpanded(false);	2✔
54	})	2✔
55	// we have to explicitly call this, to not send the returned promise as user to activate 2fa for	2✔
56	.then(() => dispatch(enableUser2fa()))	2✔
57	.then(() => dispatch(get2FAQRCode()));	2✔
58	}	2✔
59	}, [activationCode, dispatch]);	2✔
60		2✔
61	useEffect(() => {	17✔
62	if (has2FA) {	5✔
63	setIs2FAEnabled(has2FA);	3✔
64	}	2✔
65	}, [has2FA]);	2✔
66		2✔
67	const handle2FAState = useCallback(	17✔
68	state => {	2✔
69	setIs2FAEnabled(state !== twoFAStates.disabled);	3✔
70	setQrExpanded(state === twoFAStates.unverified);	3✔
71	let request;	2✔
72	if (state === twoFAStates.disabled) {	3!
73	request = dispatch(disableUser2fa());	2✔
74	} else {	2✔
75	request = dispatch(enableUser2fa());	3✔
76	}	2✔
77	request.then(() => {	3✔
78	if (state === twoFAStates.unverified) {	3!
79	dispatch(get2FAQRCode());	3✔
UNCOV 80	} else if (state === twoFAStates.enabled) {	2!
81	setSnackbar('Two Factor authentication set up successfully.');	2✔
82	}	2✔
83	});	2✔
84	},	2✔
85	[dispatch]	2✔
86	);	2✔
87		2✔
88	const onToggle2FAClick = useCallback(() => {	17✔
89	if (!(currentUser.verified \|\| currentUser.email?.endsWith('@example.com'))) {	3!
90	setShowEmailVerification(!showEmailVerification);	2✔
91	setIs2FAEnabled(!showEmailVerification);	2✔
92	return;	2✔
93	}	2✔
94	if (has2FA) {	3!
95	handle2FAState(twoFAStates.disabled);	2✔
96	} else {	2✔
97	if (is2FAEnabled) {	3!
98	dispatch(disableUser2fa());	2✔
99	} else {	2✔
100	handle2FAState(twoFAStates.unverified);	3✔
101	}	2✔
102	setQrExpanded(!is2FAEnabled);	3✔
103	setIs2FAEnabled(!is2FAEnabled);	3✔
104	}	2✔
105	}, [currentUser.email, currentUser.verified, dispatch, handle2FAState, has2FA, is2FAEnabled, showEmailVerification]);	2✔
106		2✔
107	return (	17✔
108	<div className="margin-top">	2✔
109	<div className="clickable flexbox space-between" onClick={onToggle2FAClick}>	2✔
110	<p className="help-content">Enable Two Factor authentication</p>	2✔
111	<Switch checked={is2FAEnabled} />	2✔
112	</div>	2✔
113	<InfoText style={{ width: '75%', margin: 0 }}>	2✔
114	Two Factor Authentication adds a second layer of protection to your account by asking for an additional verification code each time you log in.	2✔
115	</InfoText>	2✔
116	{showEmailVerification && (	2!
117	<EmailVerification	2✔
118	activationCode={activationCode}	2✔
119	verifyEmailComplete={data => dispatch(verifyEmailComplete(data))}	2✔
120	verifyEmailStart={() => dispatch(verifyEmailStart())}	2✔
121	/>	2✔
122	)}	2✔
123	<Collapse in={qrExpanded} timeout="auto" unmountOnExit>	2✔
124	<AuthSetup	2✔
125	currentUser={currentUser}	2✔
126	handle2FAState={handle2FAState}	2✔
127	has2FA={has2FA}	2✔
128	qrImage={qrImage}	2✔
129	verify2FA={data => dispatch(verify2FA(data))}	3✔
130	onClose={() => setQrExpanded(false)}	3✔
131	/>	2✔
132	</Collapse>	2✔
133	</div>	2✔
134	);	2✔
135	};	2✔
136		2✔
137	export default TwoFactorAuthSetup;	2✔

mendersoftware / mender-server / 10423

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