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
- 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:

View File

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

View File

@ -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()}/>);

View File

@ -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;
}
}

View File

@ -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);
});
});

View File

@ -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();
}
}
}

View File

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