14906411701

Committed 08 May 2025 12:25PM UTC coverage: 76.92%. Remained the same

Build # 14906411701

Build Type

push

github

Committed by

web-flow

Commit Message

fix #10966 some inconsistencies on the security popup modal (#11082)

* fix #10966 some inconsistencies on the security popup modal

* review changes (#7)

* fix an error in widgets state

* update tests

* fix test and animation

* fix test

---------

Co-authored-by: stefano bovio <stefano.bovio@geosolutionsgroup.com>

Run Details

30888 of 48099 branches covered (64.22%)

11 of 19 new or added lines in 2 files covered. (57.89%)

1 existing line in 1 file now uncovered.

38423 of 49952 relevant lines covered (76.92%)

35.96 hits per line

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

66.67

/web/client/components/security/SecurityPopupDialog.jsx

/*
 * Copyright 2025, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import {Glyphicon, InputGroup, ControlLabel, FormGroup, FormControl as FormControlRB} from 'react-bootstrap';

import Modal from '../misc/Modal';
import Message from '../I18N/Message';
import _Button from '../layout/Button';
import FlexBox from '../layout/FlexBox';
import Text from '../layout/Text';
import Spinner from '../layout/Spinner';
import uuidv1 from 'uuid/v1';
import tooltip from '../misc/enhancers/tooltip';
import withDebounceOnCallback from '../misc/enhancers/withDebounceOnCallback';
import localizedProps from '../misc/enhancers/localizedProps';
import { getCredentials } from '../../utils/SecurityUtils';

const FormControl = localizedProps('placeholder')(FormControlRB);

function _InputControl({ onChange, value, ...props }) {
    return <FormControl {...props} value={value} onChange={event => onChange(event.target.value)}/>;
}

const InputControl = withDebounceOnCallback('onChange', 'value')(_InputControl);

const Button = tooltip(_Button);

function SecurityPopupDialog({
    show,
    showClose,
    disabledClose,
    onCancel,
    onConfirm,
    onClear,
    titleId,
    confirmId,
    variant,
    loading,
    preventHide,
    titleParams,
    service,
    debounceTime,
    maxLength,
    showPassword,
    setShowPassword = () => {}
}) {

    const [creds, setCreds] = useState(getCredentials(service?.protectedId));
    const disabled = !(creds.username && creds.password);

    function handleCancel() {
        onCancel();
    }

    function handleHide() {
        if (!loading && !preventHide) {
            handleCancel();
        }
    }
    function handleClear() {
        onClear();
        setCreds({});
    }
    function handleConfirm() {
        onConfirm(creds);
        setCreds({});
    }

    if (!show) {
        return null;
    }
    return (
        <Modal
            show={show}
            onHide={handleHide}
            animation={false}
        >
            <FlexBox classNames={['_padding-lr-lg', '_padding-tb-md']} column gap="md">
                <FlexBox centerChildrenVertically gap="sm">
                    <Text fontSize="lg" strong component={FlexBox.Fill}>
                        {titleId ? <Message msgId={titleId} msgParams={titleParams} /> : null}
                    </Text>
                    {showClose && onCancel &&
                        <Button id="security-close-btn" square borderTransparent disabled={disabledClose} onClick={handleCancel}>
                            <Glyphicon glyph="1-close"/>
                        </Button>
                    }
                </FlexBox>
                <FormGroup>
                    <InputGroup>
                        {service?.url}
                    </InputGroup>
                </FormGroup>
                <FlexBox inline>
                    <FormGroup style={{
                        flex: 1,
                        padding: "0px 5px 0px 0px"
                    }}>
                        <ControlLabel>
                            <Message msgId="securityPopup.username" />
                        </ControlLabel>
                        <InputControl
                            name={`username_${uuidv1()}`}
                            value={creds.username}
                            debounceTime={debounceTime}
                            onChange={(username) => setCreds({...creds, username})}
                            maxLength={maxLength}
                        />
                    </FormGroup>
                    <FormGroup style={{
                        flex: 1,
                        padding: "0px 5px 0px 0px"
                    }}>
                        <ControlLabel>
                            <Message msgId="securityPopup.pwd" />
                        </ControlLabel>
                        <InputGroup style={{width: "100%"}}>
                            <InputControl
                                name={`password_${uuidv1()}`}
                                autoComplete="new-password"
                                type={showPassword ? "text" : "password"}
                                value={creds.password}
                                debounceTime={debounceTime}
                                onChange={(password) => setCreds({...creds, password })}
                                maxLength={maxLength}
                            />
                            <InputGroup.Addon>
                                <Button
                                    id="security-show-hide"
                                    tooltipId={showPassword ? "securityPopup.hide" : "securityPopup.show" }
                                    onClick={() => {setShowPassword(!showPassword);}}>
                                    <Glyphicon glyph={!showPassword ? "eye-open" : "eye-close"}/>
                                </Button>
                            </InputGroup.Addon>
                        </InputGroup>
                    </FormGroup>
                    <FormGroup style={{alignContent: "flex-end"}}>
                        <Button
                            id="security-clear"
                            onClick={handleClear} tooltipId="securityPopup.remove" >
                            <Glyphicon glyph="trash"/>
                        </Button>
                    </FormGroup>
                </FlexBox>
                <FlexBox centerChildrenVertically gap="sm">
                    <FlexBox.Fill />
                    <Button id="security-confirm"
                        disabled={disabled || loading} variant={variant} onClick={handleConfirm}>
                        <Message msgId={confirmId} />
                        {loading ? <>{' '}<Spinner /></> : null}
                    </Button>
                </FlexBox>
            </FlexBox>
        </Modal>
    );
}

export default SecurityPopupDialog;

SecurityPopupDialog.defaultProps = {
    show: false,
    showClose: false,
    onCancel: () => {},
    onConfirm: () => {},
    onClear: () => {},
    titleId: '',
    errorId: '',
    disabledClose: false,
    loading: false,
    preventHide: true,
    confirmId: 'confirm',
    variant: 'danger'
};

SecurityPopupDialog.propTypes = {
    show: PropTypes.bool,
    onCancel: PropTypes.func,
    onConfirm: PropTypes.func,
    onClear: PropTypes.func,
    titleId: PropTypes.string,
    loading: PropTypes.bool,
    preventHide: PropTypes.bool,
    confirmId: PropTypes.string,
    variant: PropTypes.string,
    children: PropTypes.node
};


1	/*
2	* Copyright 2025, GeoSolutions Sas.
3	* All rights reserved.
4	*
5	* This source code is licensed under the BSD-style license found in the
6	* LICENSE file in the root directory of this source tree.
7	*/
8
9	import React, { useState } from 'react';
10	import PropTypes from 'prop-types';
11	import {Glyphicon, InputGroup, ControlLabel, FormGroup, FormControl as FormControlRB} from 'react-bootstrap';
12
13	import Modal from '../misc/Modal';
14	import Message from '../I18N/Message';
15	import _Button from '../layout/Button';
16	import FlexBox from '../layout/FlexBox';
17	import Text from '../layout/Text';
18	import Spinner from '../layout/Spinner';
19	import uuidv1 from 'uuid/v1';
20	import tooltip from '../misc/enhancers/tooltip';
21	import withDebounceOnCallback from '../misc/enhancers/withDebounceOnCallback';
22	import localizedProps from '../misc/enhancers/localizedProps';
23	import { getCredentials } from '../../utils/SecurityUtils';
24
25	const FormControl = localizedProps('placeholder')(FormControlRB);	1✔
26
27	function _InputControl({ onChange, value, ...props }) {
28	return <FormControl {...props} value={value} onChange={event => onChange(event.target.value)}/>;	12✔
29	}
30
31	const InputControl = withDebounceOnCallback('onChange', 'value')(_InputControl);	1✔
32
33	const Button = tooltip(_Button);	1✔
34
35	function SecurityPopupDialog({
36	show,
37	showClose,
38	disabledClose,
39	onCancel,
40	onConfirm,
41	onClear,
42	titleId,
43	confirmId,
44	variant,
45	loading,
46	preventHide,
47	titleParams,
48	service,
49	debounceTime,
50	maxLength,
51	showPassword,
52	setShowPassword = () => {}	6✔
53	}) {
54
55	const [creds, setCreds] = useState(getCredentials(service?.protectedId));	6✔
56	const disabled = !(creds.username && creds.password);	6✔
57
58	function handleCancel() {
59	onCancel();	1✔
60	}
61
62	function handleHide() {
63	if (!loading && !preventHide) {	×
NEW 64	handleCancel();	×
65	}
66	}
67	function handleClear() {
NEW 68	onClear();	×
NEW 69	setCreds({});	×
70	}
71	function handleConfirm() {
72	onConfirm(creds);	1✔
73	setCreds({});	1✔
74	}
75
76	if (!show) {	6✔
77	return null;	1✔
78	}
79	return (	5✔
80	<Modal
81	show={show}
82	onHide={handleHide}
83	animation={false}
84	>
85	<FlexBox classNames={['_padding-lr-lg', '_padding-tb-md']} column gap="md">
86	<FlexBox centerChildrenVertically gap="sm">
87	<Text fontSize="lg" strong component={FlexBox.Fill}>
88	{titleId ? <Message msgId={titleId} msgParams={titleParams} /> : null}	5!
89	</Text>
90	{showClose && onCancel &&	7✔
91	<Button id="security-close-btn" square borderTransparent disabled={disabledClose} onClick={handleCancel}>
92	<Glyphicon glyph="1-close"/>
93	</Button>
94	}
95	</FlexBox>
96	<FormGroup>
97	<InputGroup>
98	{service?.url}
99	</InputGroup>
100	</FormGroup>
101	<FlexBox inline>
102	<FormGroup style={{
103	flex: 1,
104	padding: "0px 5px 0px 0px"
105	}}>
106	<ControlLabel>
107	<Message msgId="securityPopup.username" />
108	</ControlLabel>
109	<InputControl
110	name={`username_${uuidv1()}`}
111	value={creds.username}
112	debounceTime={debounceTime}
NEW 113	onChange={(username) => setCreds({...creds, username})}	×
114	maxLength={maxLength}
115	/>
116	</FormGroup>
117	<FormGroup style={{
118	flex: 1,
119	padding: "0px 5px 0px 0px"
120	}}>
121	<ControlLabel>
122	<Message msgId="securityPopup.pwd" />
123	</ControlLabel>
124	<InputGroup style={{width: "100%"}}>
125	<InputControl
126	name={`password_${uuidv1()}`}
127	autoComplete="new-password"
128	type={showPassword ? "text" : "password"}	5!
129	value={creds.password}
130	debounceTime={debounceTime}
NEW 131	onChange={(password) => setCreds({...creds, password })}	×
132	maxLength={maxLength}
133	/>
134	<InputGroup.Addon>
135	<Button
136	id="security-show-hide"
137	tooltipId={showPassword ? "securityPopup.hide" : "securityPopup.show" }	5!
NEW 138	onClick={() => {setShowPassword(!showPassword);}}>	×
139	<Glyphicon glyph={!showPassword ? "eye-open" : "eye-close"}/>	5!
140	</Button>
141	</InputGroup.Addon>
142	</InputGroup>
143	</FormGroup>
144	<FormGroup style={{alignContent: "flex-end"}}>
145	<Button
146	id="security-clear"
147	onClick={handleClear} tooltipId="securityPopup.remove" >
148	<Glyphicon glyph="trash"/>
149	</Button>
150	</FormGroup>
151	</FlexBox>
152	<FlexBox centerChildrenVertically gap="sm">
153	<FlexBox.Fill />
154	<Button id="security-confirm"
155	disabled={disabled \|\| loading} variant={variant} onClick={handleConfirm}>	6✔
156	<Message msgId={confirmId} />
157	{loading ? <>{' '}<Spinner /></> : null}	5!
158	</Button>
159	</FlexBox>
160	</FlexBox>
161	</Modal>
162	);
163	}
164
165	export default SecurityPopupDialog;
166
167	SecurityPopupDialog.defaultProps = {	1✔
168	show: false,
169	showClose: false,
170	onCancel: () => {},
171	onConfirm: () => {},
172	onClear: () => {},
173	titleId: '',
174	errorId: '',
175	disabledClose: false,
176	loading: false,
177	preventHide: true,
178	confirmId: 'confirm',
179	variant: 'danger'
180	};
181
182	SecurityPopupDialog.propTypes = {	1✔
183	show: PropTypes.bool,
184	onCancel: PropTypes.func,
185	onConfirm: PropTypes.func,
186	onClear: PropTypes.func,
187	titleId: PropTypes.string,
188	loading: PropTypes.bool,
189	preventHide: PropTypes.bool,
190	confirmId: PropTypes.string,
191	variant: PropTypes.string,
192	children: PropTypes.node
193	};
194

geosolutions-it / MapStore2 / 14906411701

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