From a2ac188423da27a20b80bba4beca201726812b32 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Mon, 22 Mar 2021 19:07:32 +0000 Subject: [PATCH] remove .map files from production build show error message if wrong password was entered. --- .gitlab-ci.yml | 4 +- src/App.tsx | 19 +----- src/elements/Popups/PopupBase.test.js | 13 +--- .../AuthenticationPage.module.css | 6 +- .../AuthenticationPage.test.js | 45 ++++++++++++-- .../AuthenticationPage/AuthenticationPage.tsx | 60 +++++++++++++++---- src/setupTests.js | 9 +++ 7 files changed, 107 insertions(+), 49 deletions(-) diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 5109cf2..62f29d6 100644 --- a/.gitlab-ci.yml +++ b/.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: diff --git a/src/App.tsx b/src/App.tsx index 17bda85..42c783b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -109,23 +109,8 @@ class App extends React.Component<{}, state> { document.body.className = themeStyle.backgroundcolor; if (this.state.password === true) { - return ( - { - refreshAPIToken( - (error) => { - if (error !== '') { - console.log('wrong password!!!'); - } else { - this.setState({password: false}); - } - }, - true, - password - ); - }} - /> - ); + // render authentication page if auth is neccessary + return this.setState({password: false})} />; } else if (this.state.password === false) { return ( diff --git a/src/elements/Popups/PopupBase.test.js b/src/elements/Popups/PopupBase.test.js index 180bee2..fa0390b 100644 --- a/src/elements/Popups/PopupBase.test.js +++ b/src/elements/Popups/PopupBase.test.js @@ -8,18 +8,11 @@ describe('', 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( func()}/>); // trigger the keypress event @@ -29,7 +22,7 @@ describe('', function () { }); it('test an Enter sumit', function () { - mockKeyPress(); + const events = mockKeyPress(); const func = jest.fn(); shallow( func()}/>); diff --git a/src/pages/AuthenticationPage/AuthenticationPage.module.css b/src/pages/AuthenticationPage/AuthenticationPage.module.css index 1fce23a..5f59296 100644 --- a/src/pages/AuthenticationPage/AuthenticationPage.module.css +++ b/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; -} \ No newline at end of file +} diff --git a/src/pages/AuthenticationPage/AuthenticationPage.test.js b/src/pages/AuthenticationPage/AuthenticationPage.test.js index 0b6675c..679aeb6 100644 --- a/src/pages/AuthenticationPage/AuthenticationPage.test.js +++ b/src/pages/AuthenticationPage/AuthenticationPage.test.js @@ -4,18 +4,53 @@ import {shallow} from 'enzyme'; describe('', function () { it('renders without crashing ', function () { - const wrapper = shallow( {}}/>); + const wrapper = shallow( { + }}/>); wrapper.unmount(); }); it('test button click', function () { - let pass; - const func = jest.fn((pwd) => {pass = pwd}); - const wrapper = shallow(); + const func = jest.fn(); + const wrapper = shallow(); + 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(); + + 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(); + + events.keyup({key: 'Enter'}); + + expect(wrapper.state().wrongPWDInfo).toBe(false); + expect(func).toHaveBeenCalledTimes(1); }); }); diff --git a/src/pages/AuthenticationPage/AuthenticationPage.tsx b/src/pages/AuthenticationPage/AuthenticationPage.tsx index fd743c6..5aef7ee 100644 --- a/src/pages/AuthenticationPage/AuthenticationPage.tsx +++ b/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 { @@ -16,10 +20,12 @@ class AuthenticationPage extends React.Component { 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 { onChange={(ch): void => this.setState({pwdText: ch.target.value})} value={this.state.pwdText} /> + {this.state.wrongPWDInfo ? ( +
+ + wrong password! +
+ ) : null} -
-
); } + /** + * 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 { 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(); } } } diff --git a/src/setupTests.js b/src/setupTests.js index 0ebb3a3..47cf44f 100644 --- a/src/setupTests.js +++ b/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; +} +