remove .map files from production build

show error message if wrong password was entered.
This commit is contained in:
Lukas Heiligenbrunner 2021-03-22 19:07:32 +00:00
parent fe349b1fd2
commit a2ac188423
7 changed files with 107 additions and 49 deletions

View File

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

View File

@ -109,23 +109,8 @@ class App extends React.Component<{}, state> {
document.body.className = themeStyle.backgroundcolor; document.body.className = themeStyle.backgroundcolor;
if (this.state.password === true) { 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) { } else if (this.state.password === false) {
return ( return (
<Router> <Router>

View File

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

View File

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

View File

@ -4,18 +4,53 @@ import {shallow} from 'enzyme';
describe('<AuthenticationPage/>', function () { describe('<AuthenticationPage/>', function () {
it('renders without crashing ', function () { it('renders without crashing ', function () {
const wrapper = shallow(<AuthenticationPage submit={() => {}}/>); const wrapper = shallow(<AuthenticationPage submit={() => {
}}/>);
wrapper.unmount(); wrapper.unmount();
}); });
it('test button click', function () { 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.setState({pwdText: 'testpwd'});
wrapper.find('Button').simulate('click'); wrapper.find('Button').simulate('click');
expect(func).toHaveBeenCalledTimes(1); 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);
}); });
}); });

View File

@ -2,13 +2,17 @@ import React from 'react';
import {Button} from '../../elements/GPElements/Button'; import {Button} from '../../elements/GPElements/Button';
import style from './AuthenticationPage.module.css'; import style from './AuthenticationPage.module.css';
import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler'; 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 { interface state {
pwdText: string; pwdText: string;
wrongPWDInfo: boolean;
} }
interface Props { interface Props {
submit: (password: string) => void; onSuccessLogin: () => void;
} }
class AuthenticationPage extends React.Component<Props, state> { class AuthenticationPage extends React.Component<Props, state> {
@ -16,10 +20,12 @@ class AuthenticationPage extends React.Component<Props, state> {
super(props); super(props);
this.state = { this.state = {
pwdText: '' pwdText: '',
wrongPWDInfo: false
}; };
this.keypress = this.keypress.bind(this); this.keypress = this.keypress.bind(this);
this.authenticate = this.authenticate.bind(this);
} }
componentDidMount(): void { componentDidMount(): void {
@ -44,20 +50,50 @@ class AuthenticationPage extends React.Component<Props, state> {
onChange={(ch): void => this.setState({pwdText: ch.target.value})} onChange={(ch): void => this.setState({pwdText: ch.target.value})}
value={this.state.pwdText} 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> <div className={style.submitbtn}>
<Button <Button title='Submit' onClick={this.authenticate} />
title='Submit'
onClick={(): void => {
this.props.submit(this.state.pwdText);
}}
/>
</div> </div>
</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 * key event handling
* @param event keyevent * @param event keyevent
@ -65,10 +101,8 @@ class AuthenticationPage extends React.Component<Props, state> {
keypress(event: KeyboardEvent): void { keypress(event: KeyboardEvent): void {
// hide if escape is pressed // hide if escape is pressed
if (event.key === 'Enter') { if (event.key === 'Enter') {
// call a parentsubmit if defined // call submit
if (this.props.submit) { this.authenticate();
this.props.submit(this.state.pwdText);
}
} }
} }
} }

View File

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