remove .map files from production build

show error message if wrong password was entered.

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((pwd) => {pass = pwd});
-        const wrapper = shallow(<AuthenticationPage submit={func}/>);
+        const func = jest.fn();
+        const wrapper = shallow(<AuthenticationPage onSuccessLogin={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>
-                        <Button
-                            title='Submit'
-                            onClick={(): void => {
-                                this.props.submit(this.state.pwdText);
-                            }}
-                        />
+                    <div className={style.submitbtn}>
+                        <Button title='Submit' onClick={this.authenticate} />
                     </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
-            if (this.props.submit) {
-                this.props.submit(this.state.pwdText);
-            }
+            // call submit
+            this.authenticate();
         }
     }
 }