901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

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

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

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

78.33

/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 { getToken } from '../../../auth';
import * as UserConstants from '../../../constants/userConstants';
import { toggle } from '../../../helpers';
import { 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 [emailFormId, setEmailFormId] = useState(new Date());
  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 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 = () => {
    let uniqueId = emailFormId;
    if (editEmail) {
      // changing unique id will reset form values
      uniqueId = new Date();
    }
    setEditEmail(toggle);
    setEmailFormId(uniqueId);
  };

  const toggleMode = () => {
    const newMode = mode === 'dark' ? 'light' : 'dark';
    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
          onSubmit={editSubmit}
          handleCancel={handleEmail}
          submitLabel="Save"
          showButtons={editEmail}
          buttonColor="secondary"
          submitButtonId="submit_email"
          uniqueId={emailFormId}
        >
          <TextInput
            disabled={false}
            focus
            hint="Email"
            id="email"
            InputLabelProps={{ shrink: !!email }}
            label="Email"
            validations="isLength:1,isEmail"
            value={email}
          />
          <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"
              submitButtonId="submit_pass"
              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={mode === 'dark'} />
      </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={getToken()}
            textClasses={{ secondary: 'inventory-text tenant-token-text' }}
          />
        </div>
        <div className="flexbox center-aligned">
          <CopyTextToClipboard token={getToken()} />
        </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 { getToken } from '../../../auth';
23	import * as UserConstants from '../../../constants/userConstants';
24	import { toggle } from '../../../helpers';
25	import { 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()(() => ({	5✔
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 = () => {	5✔
46	const [editEmail, setEditEmail] = useState(false);	7✔
47	const [editPass, setEditPass] = useState(false);	7✔
48	const [emailFormId, setEmailFormId] = useState(new Date());	7✔
49	const { classes } = useStyles();	7✔
50	const dispatch = useDispatch();	7✔
51
52	const { isHosted } = useSelector(getFeatures);	7✔
53	const isEnterprise = useSelector(getIsEnterprise);	7✔
54	const canHave2FA = isEnterprise \|\| isHosted;	7✔
55	const currentUser = useSelector(getCurrentUser);	7✔
56	const hasTracking = useSelector(state => !!state.app.trackerCode);	7✔
57	const { trackingConsentGiven: hasTrackingConsent, mode } = useSelector(getUserSettings);	7✔
58
59	const editSubmit = userData => {	7✔
UNCOV 60	if (userData.password != userData.password_confirmation) {	×
UNCOV 61	dispatch(setSnackbar(`The passwords don't match`));	×
62	} else {
UNCOV 63	dispatch(editUser(UserConstants.OWN_USER_ID, userData)).then(() => {	×
UNCOV 64	setEditEmail(false);	×
UNCOV 65	setEditPass(false);	×
66	});
67	}
68	};
69
70	const handleEmail = () => {	7✔
71	let uniqueId = emailFormId;	2✔
72	if (editEmail) {	2✔
73	// changing unique id will reset form values
74	uniqueId = new Date();	1✔
75	}
76	setEditEmail(toggle);	2✔
77	setEmailFormId(uniqueId);	2✔
78	};
79
80	const toggleMode = () => {	7✔
UNCOV 81	const newMode = mode === 'dark' ? 'light' : 'dark';	×
UNCOV 82	dispatch(saveUserSettings({ mode: newMode }));	×
83	};
84
85	const handlePass = () => setEditPass(toggle);	7✔
86	const email = currentUser.email;	7✔
87	const { isOAuth2, provider } = getUserSSOState(currentUser);	7✔
88	return (	7✔
89	<div className={`margin-top-small ${classes.widthLimit}`}>
90	<h2 className="margin-top-small">My profile</h2>
91	{!editEmail && currentUser.email ? (	20✔
92	<div className="flexbox space-between">
93	<TextField className={classes.formField} label="Email" key={email} InputLabelProps={{ shrink: !!email }} disabled defaultValue={email} />
94	{!isOAuth2 && (	11✔
95	<Button className={`inline-block ${classes.changeButton}`} color="primary" id="change_email" onClick={handleEmail}>
96	Change email
97	</Button>
98	)}
99	</div>
100	) : (
101	<Form
102	onSubmit={editSubmit}
103	handleCancel={handleEmail}
104	submitLabel="Save"
105	showButtons={editEmail}
106	buttonColor="secondary"
107	submitButtonId="submit_email"
108	uniqueId={emailFormId}
109	>
110	<TextInput
111	disabled={false}
112	focus
113	hint="Email"
114	id="email"
115	InputLabelProps={{ shrink: !!email }}
116	label="Email"
117	validations="isLength:1,isEmail"
118	value={email}
119	/>
120	<PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required={true} />
121	</Form>
122	)}
123	{!isOAuth2 &&	13✔
124	(!editPass ? (	6✔
125	<form className="flexbox space-between">
126	<TextField className={classes.formField} label="Password" key="password-placeholder" disabled defaultValue="********" type="password" />
127	<Button className={classes.changeButton} color="primary" id="change_password" onClick={handlePass}>
128	Change password
129	</Button>
130	</form>
131	) : (
132	<>
133	<h3 className="margin-top margin-bottom-none">Change password</h3>
134	<Form
135	onSubmit={editSubmit}
136	handleCancel={handlePass}
137	submitLabel="Save"
138	submitButtonId="submit_pass"
139	buttonColor="secondary"
140	showButtons={editPass}
141	>
142	<PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required />
143	<PasswordInput className="edit-pass" id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
144	<PasswordInput id="password_confirmation" label="Confirm password *" validations={`isLength:8,isNot:${email}`} required />
145	</Form>
146	</>
147	))}
148	<div className="clickable flexbox space-between margin-top" onClick={toggleMode}>
149	<p className="help-content">Enable dark theme</p>
150	<Switch checked={mode === 'dark'} />
151	</div>
152	{!isOAuth2 ? (	7✔
153	canHave2FA && <TwoFactorAuthSetup />	11✔
154	) : (
155	<div className="flexbox margin-top">
156	<div className={classes.oauthIcon}>{provider.icon}</div>
157	<div className="info">
158	You are logging in using your <strong>{provider.name}</strong> account.
159	<br />
160	Please connect to {provider.name} to update your login settings.
161	</div>
162	</div>
163	)}
164	<div className="flexbox space-between margin-top-large">
165	<div className={classes.jwt}>
166	<div className="help-content">Session token</div>
167	<ExpandableAttribute
168	component="div"
169	disableGutters
170	dividerDisabled
171	secondary={getToken()}
172	textClasses={{ secondary: 'inventory-text tenant-token-text' }}
173	/>
174	</div>
175	<div className="flexbox center-aligned">
176	<CopyTextToClipboard token={getToken()} />
177	</div>
178	</div>
179	{!isOAuth2 && <AccessTokenManagement />}	13✔
180	{isEnterprise && hasTracking && (	12!
181	<div className="margin-top">
UNCOV 182	<div className="clickable flexbox space-between" onClick={() => dispatch(saveUserSettings({ trackingConsentGiven: !hasTrackingConsent }))}>	×
183	<p className="help-content">Help us improve Mender</p>
184	<Switch checked={!!hasTrackingConsent} />
185	</div>
186	<InfoText className={classes.infoText}>Enable usage data and errors to be sent to help us improve our service.</InfoText>
187	</div>
188	)}
189	</div>
190	);
191	};
192
193	export default SelfUserManagement;

mendersoftware / gui / 901187442

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