Skip to content

Commit f4f0096

Browse files
mertakdutmertakdut
committed
fe adaptation to authorization.
1 parent 4f2b809 commit f4f0096

File tree

16 files changed

+72
-62
lines changed

16 files changed

+72
-62
lines changed

‎BankApplicationFrontend/src/actions/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ export const closeDialog = {
1818
type: ACTIONTYPE_HIDEDIALOG
1919
}
2020

21-
export const login = (username) => ({
21+
export const login = (username, token) => ({
2222
type: ACTIONTYPE_LOGIN,
23-
username
23+
username,
24+
token
2425
})
2526

2627
export const logout = {

‎BankApplicationFrontend/src/components/MoneyBar/MoneyBar.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { URL_RETRIEVEWEALTH } from '../../config/constants'
77
import NumberFormat from 'react-number-format'
88

99
const mapStateToProps = state => ({
10-
loggedInUsername: state.login,
10+
loggedInUsername: state.login != null ? state.login.username : null,
11+
token: state.login != null ? state.login.token : null,
1112
isCurrenciesObsolete: state.currencies
1213
})
1314

@@ -30,14 +31,14 @@ class MoneyBar extends React.Component {
3031
}
3132

3233
componentDidMount() {
33-
if (this.props.loggedInUsername != null) {
34+
if (this.props.loggedInUsername != null && this.props.token != null) {
3435
this.retrieveWealthAndUpdateState();
3536
}
3637
}
3738

3839
componentDidUpdate(prevProps) {
3940
if (this.props.loggedInUsername != prevProps.loggedInUsername || this.props.isCurrenciesObsolete) {
40-
if (this.props.loggedInUsername != null) {
41+
if (this.props.loggedInUsername != null && this.props.token != null) {
4142
this.retrieveWealthAndUpdateState();
4243
} else {
4344
this.setState({ ownedCurrencies: null });
@@ -49,7 +50,7 @@ class MoneyBar extends React.Component {
4950
if (!this.state.isProcessing) {
5051
this.setState({ isProcessing: true });
5152

52-
const request = new Request().getRequestInstance();
53+
const request = new Request().getRequestInstance(null, this.props.token);
5354
request.post(URL_RETRIEVEWEALTH, { username: this.props.loggedInUsername })
5455
.then((response) => {
5556
Object.keys(response.data.wealthMap).map((key) => {
@@ -58,7 +59,7 @@ class MoneyBar extends React.Component {
5859
this.props.currenciesUptodate();
5960
this.setState({ ownedCurrencies: response.data.wealthMap });
6061
}).catch((error) => {
61-
console.log(error);
62+
console.log(error.response);
6263
var errorMessage = 'Network error.';
6364
if (error != null && error.response != null && error.response.data != null && error.response.data.message != null) {
6465
errorMessage = error.response.data.message;

‎BankApplicationFrontend/src/components/NavigationBar/NavigationBar.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Link, Redirect } from 'react-router-dom'
33
import { connect } from 'react-redux'
44
import { Navbar, Nav, NavItem } from 'react-bootstrap'
55
import { showDialog, logout } from '../../actions'
6-
import { LSKEY_USERNAME } from '../../config/constants'
6+
import { LSKEY_USERNAME, LSKEY_TOKEN } from '../../config/constants'
77

88
const mapStateToProps = state => ({
9-
loggedInUsername: state.login
9+
loggedInUsername: state.login != null ? state.login.username : null
1010
})
1111

1212
const mapDispatchToProps = dispatch => ({
@@ -35,6 +35,7 @@ class NavBarTop extends React.Component {
3535

3636
onLoggedOut() {
3737
localStorage.removeItem(LSKEY_USERNAME);
38+
localStorage.removeItem(LSKEY_TOKEN);
3839
this.props.logout();
3940
this.setState({ hasJustLoggedOut: true });
4041
}

‎BankApplicationFrontend/src/components/PopupDialog/PopupDialog.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,14 @@ class PopupDialog extends React.Component {
2828
this.props.onClose();
2929
}
3030

31+
/*
32+
** There is an issue here:
33+
** Since the state is saved to the store instantly, when popup is used with animations, it's fading away slowly
34+
** and we can see its default state while it is in animation state. I tried to stop the animation by setting animation property to false,
35+
** i.e. animation={false}, but then popup is overlayed to the screen and screen went black.
36+
** https://github.com/react-bootstrap/react-bootstrap/issues/3399
37+
*/
3138
render() {
32-
3339
return (
3440
<Modal show={this.props.show} onHide={this.props.onClose}>
3541
<Modal.Header closeButton>

‎BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyList/Currency/BuySellModal/BuySellModal.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React from 'react'
2+
import { connect } from 'react-redux'
23
import NumberFormat from 'react-number-format'
34
import { Modal, InputGroup, FormControl, Button } from 'react-bootstrap'
45
import Request from '../../../../../../services/Request'
56
import {URL_MAKETRANSACTION} from '../../../../../../config/constants'
67

8+
const mapStateToProps = state => ({
9+
loggedInUsername: state.login != null ? state.login.username : null,
10+
token: state.login != null ? state.login.token : null
11+
})
12+
713
class BuySellModal extends React.Component {
814

915
constructor(props) {
@@ -32,10 +38,10 @@ class BuySellModal extends React.Component {
3238
isProcessingTransaction: true
3339
});
3440

35-
const request = new Request().getRequestInstance();
41+
const request = new Request().getRequestInstance(null, this.props.token);
3642
request.post(URL_MAKETRANSACTION,
3743
{
38-
username: this.props.username,
44+
username: this.props.loggedInUsername,
3945
buying: this.props.isBuying,
4046
currency: this.props.currency,
4147
amount: this.state.inputAmount
@@ -82,4 +88,4 @@ class BuySellModal extends React.Component {
8288

8389
}
8490

85-
export default BuySellModal;
91+
export default connect(mapStateToProps, null)(BuySellModal)

‎BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyList/Currency/Currency.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ import { showDialog, currenciesObsolete } from '../../../../../actions';
55

66
import BuySellModal from './BuySellModal/BuySellModal'
77

8-
const mapStateToProps = state => ({
9-
loggedInUsername: state.login
10-
})
11-
128
const mapDispatchToProps = dispatch => ({
139
currenciesNeedUpdate: () => dispatch(currenciesObsolete),
1410
showPopup: (title, message) => dispatch(showDialog(title, message))
@@ -43,7 +39,7 @@ class Currency extends React.Component {
4339
render() {
4440

4541
const popupDialog = this.state.isShowingBuyPopup ?
46-
<BuySellModal isBuying={this.state.isBuying} currency={this.props.currency} rate={this.props.rate} callback={this.onBuyingPopupClosed} username={this.props.loggedInUsername} />
42+
<BuySellModal isBuying={this.state.isBuying} currency={this.props.currency} rate={this.props.rate} callback={this.onBuyingPopupClosed} />
4743
: null;
4844

4945
return (
@@ -68,4 +64,4 @@ class Currency extends React.Component {
6864
}
6965
}
7066

71-
export default connect(mapStateToProps, mapDispatchToProps)(Currency)
67+
export default connect(null, mapDispatchToProps)(Currency)

‎BankApplicationFrontend/src/components/pages/HistoryPage/HistoryPage.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import EmptyListWrapper from './EmptyListWrapper/EmptyListWrapper'
77
import HistoryList from './HistoryList/HistoryList'
88

99
const mapStateToProps = state => ({
10-
loggedInUsername: state.login
10+
loggedInUsername: state.login != null ? state.login.username : null,
11+
token: state.login != null ? state.login.token : null
1112
})
1213

1314
const mapDispatchToProps = dispatch => ({
@@ -19,7 +20,7 @@ class HistoryPage extends React.Component {
1920
constructor(props) {
2021
super(props);
2122
this.state = {
22-
histories: [],
23+
histories: null,
2324
isRetrievingRecords: false
2425
};
2526

@@ -30,7 +31,7 @@ class HistoryPage extends React.Component {
3031
if (!this.state.isRetrievingRecords) {
3132
this.setState({ isRetrievingRecords: true });
3233

33-
const request = new Request().getRequestInstance();
34+
const request = new Request().getRequestInstance(null, this.props.token);
3435
request.post(URL_RETRIEVEHISTORY, {
3536
username: this.props.loggedInUsername
3637
}).then((response) => {

‎BankApplicationFrontend/src/components/pages/HomePage/HomePage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import MainButtonGroup from './MainButtonGroup/MainButtonGroup'
44
import WelcomeText from './WelcomeText/WelcomeText'
55

66
const mapStateToProps = state => ({
7-
loggedInUsername: state.login
7+
loggedInUsername: state.login != null ? state.login.username : null
88
})
99

1010
class HomePage extends React.Component {

‎BankApplicationFrontend/src/components/pages/LoginPage/LoginPage.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { connect } from 'react-redux'
55
import FormElement from '../../FormElement/FormElement'
66
import Request from '../../../services/Request'
77
import { login, showDialog } from '../../../actions'
8-
import { ERROR_ALLFIELDSMANDATORY, URL_LOGIN, LSKEY_USERNAME } from '../../../config/constants'
8+
import { ERROR_ALLFIELDSMANDATORY, URL_LOGIN, LSKEY_USERNAME, LSKEY_TOKEN } from '../../../config/constants'
99

1010
const mapStateToProps = state => ({
1111
isLoggedIn: state.login != null
1212
})
1313

1414
const mapDispatchToProps = dispatch => ({
15-
login: (username) => dispatch(login(username)),
15+
login: (username, token) => dispatch(login(username, token)),
1616
showPopup: (title, message) => dispatch(showDialog(title, message))
1717
})
1818

@@ -53,11 +53,13 @@ class LoginPage extends React.Component {
5353
username: this.state.username,
5454
password: this.state.password
5555
}).then((response) => {
56-
console.log(response);
57-
localStorage.setItem(LSKEY_USERNAME, response.data.username);
58-
this.setState({ isLoggedIn: true });
56+
if(response != null && response.data != null) {
57+
localStorage.setItem(LSKEY_USERNAME, this.state.username);
58+
localStorage.setItem(LSKEY_TOKEN, response.data);
59+
this.props.login(this.state.username, response.data);
60+
}
5961
}).catch((error) => {
60-
console.log(error);
62+
console.log(error.response);
6163
var errorMessage = 'Network error';
6264
if (error != null && error.response != null && error.response.data != null && error.response.data.message != null) {
6365
errorMessage = error.response.data.message;

‎BankApplicationFrontend/src/components/pages/MainPage/MainPage.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ import RegisterPage from '../RegisterPage/RegisterPage'
1717
import LoginPage from '../LoginPage/LoginPage'
1818

1919
import { login } from '../../../actions'
20-
import { LSKEY_USERNAME } from '../../../config/constants'
20+
import { LSKEY_USERNAME, LSKEY_TOKEN } from '../../../config/constants'
2121

2222
const mapDispatchToProps = dispatch => ({
23-
login: (username) => dispatch(login(username))
23+
login: (username, token) => dispatch(login(username, token))
2424
})
2525

2626
class MainPage extends React.Component {
@@ -30,7 +30,7 @@ class MainPage extends React.Component {
3030

3131
const storedUsername = localStorage.getItem(LSKEY_USERNAME);
3232
if (storedUsername != null) {
33-
this.props.login(storedUsername);
33+
this.props.login(storedUsername, localStorage.getItem(LSKEY_TOKEN));
3434
}
3535
}
3636

‎BankApplicationFrontend/src/components/pages/RegisterPage/RegisterPage.js

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,9 @@ import { connect } from 'react-redux'
55
import FormElement from '../../FormElement/FormElement';
66
import Request from '../../../services/Request';
77
import { ERROR_ALLFIELDSMANDATORY, ERROR_DIFFPASS, ERROR_TCNOLENGTH, URL_REGISTER, LSKEY_USERNAME } from '../../../config/constants'
8-
import { login, showDialog } from '../../../actions';
9-
10-
const mapStateToProps = state => ({
11-
isLoggedIn: state.login != null
12-
})
8+
import { showDialog } from '../../../actions';
139

1410
const mapDispatchToProps = dispatch => ({
15-
login: (username) => dispatch(login(username)),
1611
showPopup: (title, message) => dispatch(showDialog(title, message))
1712
})
1813

@@ -26,7 +21,8 @@ class RegisterPage extends React.Component {
2621
tcno: '',
2722
firstPass: '',
2823
secondPass: '',
29-
isProcessingRegister: false
24+
isProcessingRegister: false,
25+
isRegistered: false
3026
};
3127

3228
this.handleClick = this.handleClick.bind(this);
@@ -61,7 +57,6 @@ class RegisterPage extends React.Component {
6157
} else if (this.state.tcno.length != 11) {
6258
this.props.showPopup(1, ERROR_TCNOLENGTH + this.state.tcno.length);
6359
} else {
64-
6560
this.setState({
6661
isProcessingRegister: true
6762
});
@@ -73,8 +68,7 @@ class RegisterPage extends React.Component {
7368
tcno: this.state.tcno
7469
}).then((response) => {
7570
console.log(response);
76-
localStorage.setItem(LSKEY_USERNAME, response.data.username);
77-
this.props.login(localStorage.getItem(LSKEY_USERNAME));
71+
this.setState({ isRegistered: true });
7872
}).catch((error) => {
7973
console.log(error);
8074
var errorMessage = 'Network error';
@@ -95,8 +89,8 @@ class RegisterPage extends React.Component {
9589
marginTop: '7%'
9690
};
9791

98-
if (!this.state.isProcessingRegister && this.props.isLoggedIn) {
99-
return <Redirect to='/' />;
92+
if (!this.state.isProcessingRegister && this.state.isRegistered) {
93+
return <Redirect to='/login' />;
10094
}
10195

10296
return (
@@ -114,4 +108,4 @@ class RegisterPage extends React.Component {
114108
}
115109
}
116110

117-
export default connect(mapStateToProps, mapDispatchToProps)(RegisterPage)
111+
export default connect(null, mapDispatchToProps)(RegisterPage)

‎BankApplicationFrontend/src/components/pages/TransferPage/TransferPage.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { showDialog, currenciesObsolete } from '../../../actions';
77
import CurrencyDropdown from './CurrencyDropdown/CurrencyDropdown'
88

99
const mapStateToProps = state => ({
10-
loggedInUsername: state.login
10+
loggedInUsername: state.login != null ? state.login.username : null,
11+
token: state.login != null ? state.login.token : null
1112
})
1213

1314
const mapDispatchToProps = dispatch => ({
@@ -55,7 +56,7 @@ class TransferPage extends React.Component {
5556
isProcessingTransfer: true
5657
});
5758

58-
const request = new Request().getRequestInstance();
59+
const request = new Request().getRequestInstance(null, this.props.token);
5960
request.post(URL_MAKETRANSFER,
6061
{
6162
senderUsername: this.props.loggedInUsername,

‎BankApplicationFrontend/src/components/pages/UsersPage/UsersPage.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import UserList from './UserList/UserList'
55
import Request from '../../../services/Request';
66
import { URL_RETRIEVEALLUSERS } from '../../../config/constants'
77

8+
const mapStateToProps = state => ({
9+
token: state.login != null ? state.login.token : null
10+
})
11+
812
const mapDispatchToProps = dispatch => ({
913
showPopup: (title, message) => dispatch(showDialog(title, message))
1014
})
@@ -19,7 +23,7 @@ class UsersPage extends React.Component {
1923
}
2024

2125
componentDidMount() {
22-
const request = new Request().getRequestInstance();
26+
const request = new Request().getRequestInstance(null, this.props.token);
2327
request.get(URL_RETRIEVEALLUSERS)
2428
.then((response) => {
2529
console.log(response);
@@ -41,4 +45,4 @@ class UsersPage extends React.Component {
4145
}
4246
}
4347

44-
export default connect(null, mapDispatchToProps)(UsersPage)
48+
export default connect(mapStateToProps, mapDispatchToProps)(UsersPage)

‎BankApplicationFrontend/src/config/constants.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const ERROR_TCNOLENGTH = 'Length of TC No must be 11. Currently it is: ';
1515
export const BASEURL_EXCHANGERATES = 'https://api.exchangeratesapi.io';
1616
export const URL_EXCHANGERATES = '/latest?base=TRY';
1717
// User
18-
export const URL_LOGIN = 'user/login';
18+
export const URL_LOGIN = 'login';
1919
export const URL_REGISTER = 'user/create';
2020
export const URL_RETRIEVEALLUSERS = 'user/find/all';
2121
// Transaction
@@ -27,4 +27,5 @@ export const URL_MAKETRANSFER = 'transfer/create';
2727
export const URL_RETRIEVEWEALTH = 'wealth/retrieve';
2828

2929
// Local storage keys
30-
export const LSKEY_USERNAME = 'username';
30+
export const LSKEY_USERNAME = 'username';
31+
export const LSKEY_TOKEN = 'token';

‎BankApplicationFrontend/src/reducers/login.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { ACTIONTYPE_LOGIN, ACTIONTYPE_LOGOUT } from '../config/constants'
33
const login = (state = null, action) => {
44
switch (action.type) {
55
case ACTIONTYPE_LOGIN:
6-
return action.username;
6+
return Object.assign({}, state, {
7+
username: action.username,
8+
token: action.token
9+
})
710
case ACTIONTYPE_LOGOUT:
811
return null;
912
default:

0 commit comments

Comments
 (0)