Improve the Street Smart plugin view for 3D maps visualization(Re-login enabled) #11374 (#11628)

Author: rowheat02

web/client/plugins/StreetView/components/CyclomediaView/Credentials.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import Message from '../../../../components/I18N/Message';
-import { Form, Button, ControlLabel, FormControl, Glyphicon } from 'react-bootstrap';
+import { Form, Button, ControlLabel, FormControl, Glyphicon, Alert } from 'react-bootstrap';
 import tooltip from '../../../../components/misc/enhancers/tooltip';
 const ButtonT = tooltip(Button);
 /**
@@ -11,9 +11,10 @@ const ButtonT = tooltip(Button);
  * @prop {object} credentials object with username and password
  * @prop {boolean} showCredentialsForm show form
  * @prop {function} setShowCredentialsForm function to set showCredentialsForm
+ * @prop {boolean} isCredentialsInvalid flag to indicate if credentials are invalid
  * @returns {JSX.Element} The rendered component
  */
-export default ({setCredentials = () => {}, credentials, showCredentialsForm, setShowCredentialsForm = () => {}}) => {
+export default ({setCredentials = () => {}, credentials, showCredentialsForm, setShowCredentialsForm = () => {}, isCredentialsInvalid = false}) => {
     const [username, setUsername] = useState(credentials?.username || '');
     const [password, setPassword] = useState(credentials?.password || '');
     const onSubmit = () => {
@@ -38,10 +39,15 @@ export default ({setCredentials = () => {}, credentials, showCredentialsForm, se
             <FormControl type="text"  value={username} onChange={e => setUsername(e.target.value)}/>
             <ControlLabel><Message msgId="streetView.cyclomedia.password" /></ControlLabel>
             <FormControl type="password"  value={password} onChange={e => setPassword(e.target.value)}/>
+            {isCredentialsInvalid && (
+                <Alert bsStyle="danger" style={{marginTop: 10}}>
+                    <Message msgId="streetView.cyclomedia.errors.invalidCredentials" />
+                </Alert>
+            )}
             <div className="street-view-credentials-form-buttons">
                 <Button disabled={!username || !password} onClick={() => onSubmit()}><Message msgId="streetView.cyclomedia.submit" /></Button>
                 {
-                    credentials?.username && credentials?.password && <Button onClick={() => {
+                    credentials?.username && credentials?.password && !isCredentialsInvalid && <Button onClick={() => {
                         setCredentials({username: credentials.username, password: credentials.password});
                         setShowCredentialsForm(false);
                     } }><Message msgId="cancel" /></Button>

web/client/plugins/StreetView/components/CyclomediaView/CyclomediaView.js

@@ -215,6 +215,9 @@ const CyclomediaView = ({ apiKey, style, location = {}, setPov = () => {}, setLo
             setInitializing(false);
             setError(err);
             setReloadAllowed(true);
+            if (isInvalidCredentials(err) >= 0) {
+                setShowCredentialsForm(true);
+            }
             if (err) {
                 console.error('Cyclomedia API: init: error: ' + err);
             }
@@ -328,8 +331,11 @@ const CyclomediaView = ({ apiKey, style, location = {}, setPov = () => {}, setLo
             showCredentialsForm={showCredentialsForm}
             setShowCredentialsForm={setShowCredentialsForm}
             credentials={credentials}
+            isCredentialsInvalid={isInvalidCredentials(error) >= 0}
             setCredentials={(newCredentials) => {
                 setCredentials(newCredentials);
+                setError(null);
+                setReload(prev => prev + 1);
             }}/>}
         {showLogout
             && initialized
@@ -368,7 +374,7 @@ const CyclomediaView = ({ apiKey, style, location = {}, setPov = () => {}, setLo
             <Message msgId="streetView.cyclomedia.errorOccurred" />
             {getErrorMessage(error, {srs})}
             <div style={{ display: "flex", justifyContent: "center", marginTop: 10 }}>
-                {initialized || reloadAllowed ? <div><Button
+                {(initialized || reloadAllowed) && isInvalidCredentials(error) < 0 ? <div><Button
                     style={{margin: 10}}
                     onClick={() => {
                         setError(null);

web/client/plugins/StreetView/components/CyclomediaView/__tests__/Credentials-test.jsx

@@ -83,5 +83,31 @@ describe('Cyclomedia Credentials', () => {
 
 
     });
+    it('should show error alert when isCredentialsInvalid is true', () => {
+        act(() => {
+            ReactDOM.render(<Credentials showCredentialsForm isCredentialsInvalid credentials={{username: 'test', password: 'password'}}/>, document.getElementById("container"));
+        });
+        const div = getMainDiv();
+        const errorAlert = div.querySelector('.alert-danger');
+        expect(errorAlert).toExist();
+    });
+    it('should not show cancel button when isCredentialsInvalid is true', () => {
+        act(() => {
+            ReactDOM.render(<Credentials showCredentialsForm isCredentialsInvalid credentials={{username: 'test', password: 'password'}}/>, document.getElementById("container"));
+        });
+        const div = getMainDiv();
+        const buttons = div.querySelectorAll('.street-view-credentials-form-buttons button');
+        // Only submit button should be present, no cancel button
+        expect(buttons.length).toBe(1);
+    });
+    it('should show cancel button when isCredentialsInvalid is false and credentials exist', () => {
+        act(() => {
+            ReactDOM.render(<Credentials showCredentialsForm isCredentialsInvalid={false} credentials={{username: 'test', password: 'password'}}/>, document.getElementById("container"));
+        });
+        const div = getMainDiv();
+        const buttons = div.querySelectorAll('.street-view-credentials-form-buttons button');
+        // Both submit and cancel buttons should be present
+        expect(buttons.length).toBe(2);
+    });
 
 });

web/client/plugins/StreetView/components/CyclomediaView/__tests__/CyclomediaView-test.jsx

@@ -122,4 +122,35 @@ describe('Cyclomedia CyclomediaView', () => {
         // check alert to exist
         expect(document.querySelector('.alert-danger')).toExist();
     });
+    it('shows credentials form automatically when 401 error occurs', (done) => {
+        window.__cyclomedia__mock__ = {
+            init: () => new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    reject(new Error('Authentication failed: code 401 Unauthorized'));
+                }, 100);
+            }),
+            open: () => new Promise((resolve) => { resolve(); })
+        };
+
+        const props = {
+            apiKey: testAPIKey
+        };
+
+        act(() => {
+            ReactDOM.render(<CyclomediaView {...props} providerSettings={mockProviderSettings}/>, document.getElementById("container"));
+        });
+
+        // Wait for the error to be processed and displayed
+        setTimeout(() => {
+            // Check that credentials form is automatically shown
+            const credentialsForm = document.querySelector('.street-view-credentials');
+            expect(credentialsForm).toExist();
+
+            // Check that error alert is shown within the form
+            const errorAlert = document.querySelector('.street-view-credentials .alert-danger');
+            expect(errorAlert).toExist();
+
+            done();
+        }, 500);
+    });
 });