deleting token 10 days after from local storage.

Author: mertakdut

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

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import FormElement from '../../FormElement/FormElement'
 import Request from '../../../services/Request'
 import { login, showDialog } from '../../../actions'
-import { ERROR_ALLFIELDSMANDATORY, URL_LOGIN, LSKEY_USERNAME, LSKEY_TOKEN } from '../../../config/constants'
+import { ERROR_ALLFIELDSMANDATORY, URL_LOGIN, LSKEY_USERNAME, LSKEY_TOKEN, LSKEY_TOKEN_EXPIRATIONTIME, TOKEN_EXPIRATION_TIME } from '../../../config/constants'
 
 const mapStateToProps = state => ({
     isLoggedIn: state.login != null
@@ -54,9 +54,16 @@ class LoginPage extends React.Component {
                 password: this.state.password
             }).then((response) => {
                 if(response != null && response.data != null) {
-                    localStorage.setItem(LSKEY_USERNAME, this.state.username);
+                    const username = this.state.username;
+
+                    localStorage.setItem(LSKEY_USERNAME, username);
                     localStorage.setItem(LSKEY_TOKEN, response.data);
-                    this.props.login(this.state.username, response.data);
+
+                    var tokenExpirationTime = new Date();
+                    tokenExpirationTime.setHours(tokenExpirationTime.getHours() + TOKEN_EXPIRATION_TIME);
+                    localStorage.setItem(LSKEY_TOKEN_EXPIRATIONTIME, tokenExpirationTime);
+
+                    this.props.login(username, response.data);
                 }
             }).catch((error) => {
                 console.log(error.response);

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

@@ -17,7 +17,7 @@ import RegisterPage from '../RegisterPage/RegisterPage'
 import LoginPage from '../LoginPage/LoginPage'
 
 import { login } from '../../../actions'
-import { LSKEY_USERNAME, LSKEY_TOKEN } from '../../../config/constants'
+import { LSKEY_USERNAME, LSKEY_TOKEN, LSKEY_TOKEN_EXPIRATIONTIME } from '../../../config/constants'
 
 const mapDispatchToProps = dispatch => ({
     login: (username, token) => dispatch(login(username, token))
@@ -30,7 +30,14 @@ class MainPage extends React.Component {
 
         const storedUsername = localStorage.getItem(LSKEY_USERNAME);
         if (storedUsername != null) {
-            this.props.login(storedUsername, localStorage.getItem(LSKEY_TOKEN));
+            const tokenExpirationTime = localStorage.getItem(LSKEY_TOKEN_EXPIRATIONTIME);
+            if (new Date() > tokenExpirationTime) {
+                localStorage.removeItem(LSKEY_USERNAME);
+                localStorage.removeItem(LSKEY_TOKEN);
+                localStorage.removeItem(LSKEY_TOKEN_EXPIRATIONTIME);
+            } else {
+                this.props.login(storedUsername, localStorage.getItem(LSKEY_TOKEN));
+            }
         }
     }
 

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

@@ -29,7 +29,7 @@ class UsersPage extends React.Component {
                 console.log(response);
                 this.setState({ users: response.data });
             }).catch((error) => {
-                console.log(error);
+                console.log(error.response);
                 var errorMessage = 'Network error.';
                 if (error != null && error.response != null && error.response.data != null && error.response.data.message != null) {
                     errorMessage = error.response.data.message;

BankApplicationFrontend/src/config/constants.js

@@ -28,4 +28,7 @@ export const URL_RETRIEVEWEALTH = 'wealth/retrieve';
 
 // Local storage keys
 export const LSKEY_USERNAME = 'username';
-export const LSKEY_TOKEN = 'token';
+export const LSKEY_TOKEN = 'token';
+export const LSKEY_TOKEN_EXPIRATIONTIME = 'tokenExpirationTime';
+
+export const TOKEN_EXPIRATION_TIME = 24 * 10; // 10 days.