Merge branch 'error_wrong_pwd_rm_map_files' into 'master'

Error message when password wrong

Closes #66 and #46

See merge request lukas/openmediacenter!42

.gitlab-ci.yml

@@ -6,15 +6,13 @@ stages:
   - packaging
   - deploy
 
-variables:
-  SAST_DISABLE_DIND: "true"
-
 Minimize_Frontend:
   stage: build
   before_script:
     - yarn install --cache-folder .yarn
   script:
     - yarn run build
+    - rm build/*/*/*.map
   artifacts:
     expire_in: 2 days
     paths:

src/App.tsx

@@ -109,23 +109,8 @@ class App extends React.Component<{}, state> {
         document.body.className = themeStyle.backgroundcolor;
 
         if (this.state.password === true) {
-            return (
+            // render authentication page if auth is neccessary
-                <AuthenticationPage
+            return <AuthenticationPage onSuccessLogin={(): void => this.setState({password: false})} />;
-                    submit={(password): void => {
-                        refreshAPIToken(
-                            (error) => {
-                                if (error !== '') {
-                                    console.log('wrong password!!!');
-                                } else {
-                                    this.setState({password: false});
-                                }
-                            },
-                            true,
-                            password
-                        );
-                    }}
-                />
-            );
         } else if (this.state.password === false) {
             return (
                 <Router>

src/elements/Popups/PopupBase.test.js

@@ -8,18 +8,11 @@ describe('<PopupBase/>', function () {
         wrapper.unmount();
     });
 
-    let events;
-
-    function mockKeyPress() {
-        events = [];
-        document.addEventListener = jest.fn((event, cb) => {
-            events[event] = cb;
-        });
-    }
-
     it('simulate keypress', function () {
         mockKeyPress();
         const func = jest.fn();
+        const events = mockKeyPress();
+
         shallow(<PopupBase onHide={() => func()}/>);
 
         // trigger the keypress event
@@ -29,7 +22,7 @@ describe('<PopupBase/>', function () {
     });
 
     it('test an Enter sumit', function () {
-        mockKeyPress();
+        const events = mockKeyPress();
         const func = jest.fn();
         shallow(<PopupBase ParentSubmit={() => func()}/>);
 

src/pages/AuthenticationPage/AuthenticationPage.module.css

@@ -37,6 +37,10 @@
     font-size: larger;
 }
 
+.submitbtn {
+    margin-top: 10px;
+}
+
 ::placeholder {
     color: #505050;
     opacity: 1;
@@ -49,4 +53,4 @@
 .input:focus {
     color: black;
     border-color: black;
-}
+}

src/pages/AuthenticationPage/AuthenticationPage.test.js

@@ -4,18 +4,53 @@ import {shallow} from 'enzyme';
 
 describe('<AuthenticationPage/>', function () {
     it('renders without crashing ', function () {
-        const wrapper = shallow(<AuthenticationPage submit={() => {}}/>);
+        const wrapper = shallow(<AuthenticationPage submit={() => {
+        }}/>);
         wrapper.unmount();
     });
 
     it('test button click', function () {
-        let pass;
+        const func = jest.fn();
-        const func = jest.fn((pwd) => {pass = pwd});
+        const wrapper = shallow(<AuthenticationPage onSuccessLogin={func}/>);
-        const wrapper = shallow(<AuthenticationPage submit={func}/>);
+        wrapper.instance().authenticate = jest.fn(() => {
+            wrapper.instance().props.onSuccessLogin()
+        });
         wrapper.setState({pwdText: 'testpwd'});
+
         wrapper.find('Button').simulate('click');
 
         expect(func).toHaveBeenCalledTimes(1);
-        expect(pass).toBe('testpwd');
+    });
+
+    it('test fail authenticate', function () {
+        const events = mockKeyPress();
+
+        const helpers = require('../../utils/Api');
+        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+            callback('there was an error')
+        });
+
+        const wrapper = shallow(<AuthenticationPage/>);
+
+        events.keyup({key: 'Enter'});
+
+        expect(wrapper.state().wrongPWDInfo).toBe(true);
+    });
+
+    it('test success authenticate', function () {
+        const events = mockKeyPress();
+        const func = jest.fn()
+
+        const helpers = require('../../utils/Api');
+        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+            callback('')
+        });
+
+        const wrapper = shallow(<AuthenticationPage onSuccessLogin={func}/>);
+
+        events.keyup({key: 'Enter'});
+
+        expect(wrapper.state().wrongPWDInfo).toBe(false);
+        expect(func).toHaveBeenCalledTimes(1);
     });
 });

src/pages/AuthenticationPage/AuthenticationPage.tsx

@@ -2,13 +2,17 @@ import React from 'react';
 import {Button} from '../../elements/GPElements/Button';
 import style from './AuthenticationPage.module.css';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
+import {refreshAPIToken} from '../../utils/Api';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
 interface state {
     pwdText: string;
+    wrongPWDInfo: boolean;
 }
 
 interface Props {
-    submit: (password: string) => void;
+    onSuccessLogin: () => void;
 }
 
 class AuthenticationPage extends React.Component<Props, state> {
@@ -16,10 +20,12 @@ class AuthenticationPage extends React.Component<Props, state> {
         super(props);
 
         this.state = {
-            pwdText: ''
+            pwdText: '',
+            wrongPWDInfo: false
         };
 
         this.keypress = this.keypress.bind(this);
+        this.authenticate = this.authenticate.bind(this);
     }
 
     componentDidMount(): void {
@@ -44,20 +50,50 @@ class AuthenticationPage extends React.Component<Props, state> {
                             onChange={(ch): void => this.setState({pwdText: ch.target.value})}
                             value={this.state.pwdText}
                         />
+                        {this.state.wrongPWDInfo ? (
+                            <div>
+                                <FontAwesomeIcon
+                                    style={{
+                                        color: 'red',
+                                        marginRight: '7px'
+                                    }}
+                                    icon={faTimes}
+                                    size='1x'
+                                />
+                                wrong password!
+                            </div>
+                        ) : null}
                     </div>
-                    <div>
+                    <div className={style.submitbtn}>
-                        <Button
+                        <Button title='Submit' onClick={this.authenticate} />
-                            title='Submit'
-                            onClick={(): void => {
-                                this.props.submit(this.state.pwdText);
-                            }}
-                        />
                     </div>
                 </div>
             </>
         );
     }
 
+    /**
+     * request a new token and check if pwd was valid
+     */
+    authenticate(): void {
+        refreshAPIToken(
+            (error) => {
+                if (error !== '') {
+                    this.setState({wrongPWDInfo: true});
+
+                    // set timeout to make the info auto-disappearing
+                    setTimeout(() => {
+                        this.setState({wrongPWDInfo: false});
+                    }, 2000);
+                } else {
+                    this.props.onSuccessLogin();
+                }
+            },
+            true,
+            this.state.pwdText
+        );
+    }
+
     /**
      * key event handling
      * @param event keyevent
@@ -65,10 +101,8 @@ class AuthenticationPage extends React.Component<Props, state> {
     keypress(event: KeyboardEvent): void {
         // hide if escape is pressed
         if (event.key === 'Enter') {
-            // call a parentsubmit if defined
+            // call submit
-            if (this.props.submit) {
+            this.authenticate();
-                this.props.submit(this.state.pwdText);
-            }
         }
     }
 }

src/setupTests.js

@@ -52,3 +52,12 @@ global.afterEach(() => {
     jest.resetAllMocks();
 });
 
+
+global.mockKeyPress = () => {
+    let events = [];
+    document.addEventListener = jest.fn((event, cb) => {
+        events[event] = cb;
+    });
+    return events;
+}
+