1081664682

Committed 22 Nov 2023 02:11PM UTC coverage: 82.798% (-17.2%) from 99.964%

Build # 1081664682

Build Type

Pull #4214

gitlab-ci

Committed by

tranchitella

Commit Message

fix: Fixed the infinite page redirects when the back button is pressed

Remove the location and navigate from the useLocationParams.setValue callback
dependencies as they change the set function that is presented in other
useEffect dependencies. This happens when the back button is clicked, which
leads to the location changing infinitely.

Changelog: Title
Ticket: MEN-6847
Ticket: MEN-6796

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>
Signed-off-by: Fabio Tranchitella <fabio.tranchitella@northern.tech>

Pull Request Pull Request #4214: fix: Fixed the infinite page redirects when the back button is pressed

Run Details

4319 of 6292 branches covered (0.0%)

8332 of 10063 relevant lines covered (82.8%)

191.0 hits per line

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

71.43

/src/js/components/settings/user-management/selfusermanagement.js

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

import { Button, Switch, TextField } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { setSnackbar } from '../../../actions/appActions';
import { editUser, saveUserSettings } from '../../../actions/userActions';
import { DARK_MODE, LIGHT_MODE } from '../../../constants/appConstants';
import * as UserConstants from '../../../constants/userConstants';
import { isDarkMode, toggle } from '../../../helpers';
import { getCurrentSession, getCurrentUser, getFeatures, getIsEnterprise, getUserSettings } from '../../../selectors';
import ExpandableAttribute from '../../common/expandable-attribute';
import Form from '../../common/forms/form';
import PasswordInput from '../../common/forms/passwordinput';
import TextInput from '../../common/forms/textinput';
import InfoText from '../../common/infotext';
import AccessTokenManagement from '../accesstokenmanagement';
import { CopyTextToClipboard } from '../organization/organization';
import TwoFactorAuthSetup from './twofactorauthsetup';
import { getUserSSOState } from './userdefinition';

const useStyles = makeStyles()(() => ({
  formField: { width: 400, maxWidth: '100%' },
  changeButton: { margin: '30px 0 0 15px' },
  infoText: { margin: 0, width: '75%' },
  jwt: { maxWidth: '70%' },
  oauthIcon: { fontSize: '36px', marginRight: 10 },
  widthLimit: { maxWidth: 750 }
}));

export const SelfUserManagement = () => {
  const [editEmail, setEditEmail] = useState(false);
  const [editPass, setEditPass] = useState(false);
  const { classes } = useStyles();
  const dispatch = useDispatch();

  const { isHosted } = useSelector(getFeatures);
  const isEnterprise = useSelector(getIsEnterprise);
  const canHave2FA = isEnterprise || isHosted;
  const currentUser = useSelector(getCurrentUser);
  const hasTracking = useSelector(state => !!state.app.trackerCode);
  const { trackingConsentGiven: hasTrackingConsent, mode } = useSelector(getUserSettings);
  const { token } = useSelector(getCurrentSession);

  const editSubmit = userData => {
    if (userData.password != userData.password_confirmation) {
      dispatch(setSnackbar(`The passwords don't match`));
    } else {
      dispatch(editUser(UserConstants.OWN_USER_ID, userData)).then(() => {
        setEditEmail(false);
        setEditPass(false);
      });
    }
  };

  const handleEmail = () => setEditEmail(toggle);

  const toggleMode = () => {
    const newMode = isDarkMode(mode) ? LIGHT_MODE : DARK_MODE;
    dispatch(saveUserSettings({ mode: newMode }));
  };

  const handlePass = () => setEditPass(toggle);
  const email = currentUser.email;
  const { isOAuth2, provider } = getUserSSOState(currentUser);
  return (
    <div className={`margin-top-small ${classes.widthLimit}`}>
      <h2 className="margin-top-small">My profile</h2>
      {!editEmail && currentUser.email ? (
        <div className="flexbox space-between">
          <TextField className={classes.formField} label="Email" key={email} InputLabelProps={{ shrink: !!email }} disabled defaultValue={email} />
          {!isOAuth2 && (
            <Button className={`inline-block ${classes.changeButton}`} color="primary" id="change_email" onClick={handleEmail}>
              Change email
            </Button>
          )}
        </div>
      ) : (
        <Form defaultValues={{ email }} onSubmit={editSubmit} handleCancel={handleEmail} submitLabel="Save" showButtons={editEmail} buttonColor="secondary">
          <TextInput disabled={false} hint="Email" id="email" InputLabelProps={{ shrink: !!email }} label="Email" validations="isLength:1,isEmail,trim" />
          <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required={true} />
        </Form>
      )}
      {!isOAuth2 &&
        (!editPass ? (
          <form className="flexbox space-between">
            <TextField className={classes.formField} label="Password" key="password-placeholder" disabled defaultValue="********" type="password" />
            <Button className={classes.changeButton} color="primary" id="change_password" onClick={handlePass}>
              Change password
            </Button>
          </form>
        ) : (
          <>
            <h3 className="margin-top margin-bottom-none">Change password</h3>
            <Form onSubmit={editSubmit} handleCancel={handlePass} submitLabel="Save" buttonColor="secondary" showButtons={editPass}>
              <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required />
              <PasswordInput className="edit-pass" id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
              <PasswordInput id="password_confirmation" label="Confirm password *" validations={`isLength:8,isNot:${email}`} required />
            </Form>
          </>
        ))}
      <div className="clickable flexbox space-between margin-top" onClick={toggleMode}>
        <p className="help-content">Enable dark theme</p>
        <Switch checked={isDarkMode(mode)} />
      </div>
      {!isOAuth2 ? (
        canHave2FA && <TwoFactorAuthSetup />
      ) : (
        <div className="flexbox margin-top">
          <div className={classes.oauthIcon}>{provider.icon}</div>
          <div className="info">
            You are logging in using your <strong>{provider.name}</strong> account.
            <br />
            Please connect to {provider.name} to update your login settings.
          </div>
        </div>
      )}
      <div className="flexbox space-between margin-top-large">
        <div className={classes.jwt}>
          <div className="help-content">Session token</div>
          <ExpandableAttribute
            component="div"
            disableGutters
            dividerDisabled
            secondary={token}
            textClasses={{ secondary: 'inventory-text tenant-token-text' }}
          />
        </div>
        <div className="flexbox center-aligned">
          <CopyTextToClipboard token={token} />
        </div>
      </div>
      {!isOAuth2 && <AccessTokenManagement />}
      {isEnterprise && hasTracking && (
        <div className="margin-top">
          <div className="clickable flexbox space-between" onClick={() => dispatch(saveUserSettings({ trackingConsentGiven: !hasTrackingConsent }))}>
            <p className="help-content">Help us improve Mender</p>
            <Switch checked={!!hasTrackingConsent} />
          </div>
          <InfoText className={classes.infoText}>Enable usage data and errors to be sent to help us improve our service.</InfoText>
        </div>
      )}
    </div>
  );
};

export default SelfUserManagement;

1	// Copyright 2017 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, { useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16
17	import { Button, Switch, TextField } from '@mui/material';
18	import { makeStyles } from 'tss-react/mui';
19
20	import { setSnackbar } from '../../../actions/appActions';
21	import { editUser, saveUserSettings } from '../../../actions/userActions';
22	import { DARK_MODE, LIGHT_MODE } from '../../../constants/appConstants';
23	import * as UserConstants from '../../../constants/userConstants';
24	import { isDarkMode, toggle } from '../../../helpers';
25	import { getCurrentSession, getCurrentUser, getFeatures, getIsEnterprise, getUserSettings } from '../../../selectors';
26	import ExpandableAttribute from '../../common/expandable-attribute';
27	import Form from '../../common/forms/form';
28	import PasswordInput from '../../common/forms/passwordinput';
29	import TextInput from '../../common/forms/textinput';
30	import InfoText from '../../common/infotext';
31	import AccessTokenManagement from '../accesstokenmanagement';
32	import { CopyTextToClipboard } from '../organization/organization';
33	import TwoFactorAuthSetup from './twofactorauthsetup';
34	import { getUserSSOState } from './userdefinition';
35
36	const useStyles = makeStyles()(() => ({	4✔
37	formField: { width: 400, maxWidth: '100%' },
38	changeButton: { margin: '30px 0 0 15px' },
39	infoText: { margin: 0, width: '75%' },
40	jwt: { maxWidth: '70%' },
41	oauthIcon: { fontSize: '36px', marginRight: 10 },
42	widthLimit: { maxWidth: 750 }
43	}));
44
45	export const SelfUserManagement = () => {	4✔
46	const [editEmail, setEditEmail] = useState(false);	11✔
47	const [editPass, setEditPass] = useState(false);	10✔
48	const { classes } = useStyles();	10✔
49	const dispatch = useDispatch();	10✔
50
51	const { isHosted } = useSelector(getFeatures);	10✔
52	const isEnterprise = useSelector(getIsEnterprise);	10✔
53	const canHave2FA = isEnterprise \|\| isHosted;	10✔
54	const currentUser = useSelector(getCurrentUser);	10✔
55	const hasTracking = useSelector(state => !!state.app.trackerCode);	19✔
56	const { trackingConsentGiven: hasTrackingConsent, mode } = useSelector(getUserSettings);	10✔
57	const { token } = useSelector(getCurrentSession);	10✔
58
59	const editSubmit = userData => {	10✔
60	if (userData.password != userData.password_confirmation) {	×
61	dispatch(setSnackbar(`The passwords don't match`));	×
62	} else {
63	dispatch(editUser(UserConstants.OWN_USER_ID, userData)).then(() => {	×
64	setEditEmail(false);	×
65	setEditPass(false);	×
66	});
67	}
68	};
69
70	const handleEmail = () => setEditEmail(toggle);	10✔
71
72	const toggleMode = () => {	10✔
73	const newMode = isDarkMode(mode) ? LIGHT_MODE : DARK_MODE;	×
74	dispatch(saveUserSettings({ mode: newMode }));	×
75	};
76
77	const handlePass = () => setEditPass(toggle);	10✔
78	const email = currentUser.email;	10✔
79	const { isOAuth2, provider } = getUserSSOState(currentUser);	10✔
80	return (	10✔
81	<div className={`margin-top-small ${classes.widthLimit}`}>
82	<h2 className="margin-top-small">My profile</h2>
83	{!editEmail && currentUser.email ? (	29✔
84	<div className="flexbox space-between">
85	<TextField className={classes.formField} label="Email" key={email} InputLabelProps={{ shrink: !!email }} disabled defaultValue={email} />
86	{!isOAuth2 && (	17✔
87	<Button className={`inline-block ${classes.changeButton}`} color="primary" id="change_email" onClick={handleEmail}>
88	Change email
89	</Button>
90	)}
91	</div>
92	) : (
93	<Form defaultValues={{ email }} onSubmit={editSubmit} handleCancel={handleEmail} submitLabel="Save" showButtons={editEmail} buttonColor="secondary">
94	<TextInput disabled={false} hint="Email" id="email" InputLabelProps={{ shrink: !!email }} label="Email" validations="isLength:1,isEmail,trim" />
95	<PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required={true} />
96	</Form>
97	)}
98	{!isOAuth2 &&	19✔
99	(!editPass ? (	9✔
100	<form className="flexbox space-between">
101	<TextField className={classes.formField} label="Password" key="password-placeholder" disabled defaultValue="********" type="password" />
102	<Button className={classes.changeButton} color="primary" id="change_password" onClick={handlePass}>
103	Change password
104	</Button>
105	</form>
106	) : (
107	<>
108	<h3 className="margin-top margin-bottom-none">Change password</h3>
109	<Form onSubmit={editSubmit} handleCancel={handlePass} submitLabel="Save" buttonColor="secondary" showButtons={editPass}>
110	<PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required />
111	<PasswordInput className="edit-pass" id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
112	<PasswordInput id="password_confirmation" label="Confirm password *" validations={`isLength:8,isNot:${email}`} required />
113	</Form>
114	</>
115	))}
116	<div className="clickable flexbox space-between margin-top" onClick={toggleMode}>
117	<p className="help-content">Enable dark theme</p>
118	<Switch checked={isDarkMode(mode)} />
119	</div>
120	{!isOAuth2 ? (	10✔
121	canHave2FA && <TwoFactorAuthSetup />	17✔
122	) : (
123	<div className="flexbox margin-top">
124	<div className={classes.oauthIcon}>{provider.icon}</div>
125	<div className="info">
126	You are logging in using your <strong>{provider.name}</strong> account.
127	<br />
128	Please connect to {provider.name} to update your login settings.
129	</div>
130	</div>
131	)}
132	<div className="flexbox space-between margin-top-large">
133	<div className={classes.jwt}>
134	<div className="help-content">Session token</div>
135	<ExpandableAttribute
136	component="div"
137	disableGutters
138	dividerDisabled
139	secondary={token}
140	textClasses={{ secondary: 'inventory-text tenant-token-text' }}
141	/>
142	</div>
143	<div className="flexbox center-aligned">
144	<CopyTextToClipboard token={token} />
145	</div>
146	</div>
147	{!isOAuth2 && <AccessTokenManagement />}	19✔
148	{isEnterprise && hasTracking && (	18!
149	<div className="margin-top">
150	<div className="clickable flexbox space-between" onClick={() => dispatch(saveUserSettings({ trackingConsentGiven: !hasTrackingConsent }))}>	×
151	<p className="help-content">Help us improve Mender</p>
152	<Switch checked={!!hasTrackingConsent} />
153	</div>
154	<InfoText className={classes.infoText}>Enable usage data and errors to be sent to help us improve our service.</InfoText>
155	</div>
156	)}
157	</div>
158	);
159	};
160
161	export default SelfUserManagement;

mendersoftware / gui / 1081664682

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