Created userSlice to manage user authentication. Changed components related to login into function components. Organized all changed files that are related to authentication in src\pages\login\ .

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>

package.json

@@ -8,7 +8,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.2.3",
     "@rjsf/core": "^4.1.1",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^5.1.3",
@@ -48,6 +48,7 @@
     "react-fullscreenable": "^2.5.1-0",
     "react-json-view": "^1.21.3",
     "react-notification-system": "^0.4.0",
+    "react-redux": "^7.2.8",
     "react-rnd": "^10.3.7",
     "react-router-dom": "^5.3.1",
     "react-svg-pan-zoom": "^3.11.0",

src/index.js

@@ -22,7 +22,7 @@ import Router from "./router";
 
 // Redux
 import { Provider } from "react-redux";
-import store from "./redux/store";
+import {store} from "./store/index";
 
 import "bootstrap/dist/css/bootstrap.css";
 import "./styles/index.css";

src/pages/login/login-form.js

@@ -0,0 +1,110 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React, { useState, useEffect } from 'react';
+import { Form, Button, Col } from 'react-bootstrap';
+import RecoverPassword from '../../user/recover-password'
+import { useDispatch } from 'react-redux'
+import { login } from '../../store/userSlice';
+import _ from 'lodash';
+
+import "./login.css";
+
+const LoginForm = (props) => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [forgottenPassword, setForgottenPassword] = useState(false)
+
+  //this variable is used to disable login button if either username or password is empty
+  const isInputValid = username !== '' && password !== '';
+
+  const dispatch = useDispatch();
+
+  const loginEvent = (event) => {
+    event.preventDefault();
+    dispatch(login({username, password}))
+  }
+
+  const villasLogin = (
+    <Form key="login_a">
+      <Form.Group controlId="username">
+        <Form.Label column={true}>Username</Form.Label>
+        <Col>
+          <Form.Control 
+            type="text" 
+            placeholder="Username" 
+            autoComplete="username" 
+            onChange={(e) => {
+              setUsername(e.target.value)
+            }
+          } />
+        </Col>
+      </Form.Group>
+
+      <Form.Group controlId="password">
+        <Form.Label column={true}>Password</Form.Label>
+        <Col >
+          <Form.Control 
+            type="password" 
+            placeholder="Password" 
+            autoComplete="current-password" 
+            onChange={(e) => {
+              setPassword(e.target.value)
+              }} 
+            />
+        </Col>
+      </Form.Group>
+
+      {props.loginMessage &&
+        <div style={{ marginBottom: '20px', color: 'red', fontSize: 'small' }}>
+          <Col sm={{ span: 10, offset: 2 }} style={{ paddingLeft: '5px' }}>
+            <i>Error: </i>{props.loginMessage}
+          </Col>
+        </div>
+      }
+
+      <Form.Group style={{ paddingTop: 15, paddingBottom: 5 }}>
+        <Col>
+        <span className='solid-button'>
+          <Button variant='secondary' style={{width: 90}} type="submit" disabled={!isInputValid} onClick={e => loginEvent(e)}>Login</Button>
+        </span>
+          <Button variant="link" size="sm" style={{marginLeft: 85, textDecoration: "none"}} onClick={() => setForgottenPassword(true)}>Forgot your password?</Button>
+        </Col>
+      </Form.Group>
+
+      <RecoverPassword show={forgottenPassword} onClose={() => setForgottenPassword(false)} sessionToken={props.sessionToken} />
+    </Form>
+  );
+
+  if (props.config) {
+    let externalLogin = _.get(props.config, ['authentication', 'external', 'enabled'])
+    let provider = _.get(props.config, ['authentication', 'external', 'provider_name'])
+    let url = _.get(props.config, ['authentication', 'external', 'authorize_url']) + "?rd=/login/complete"
+
+    if (externalLogin && provider && url) {
+      return [
+        villasLogin,
+        <hr key="login_b"/>,
+        <Button key="login_c" onClick={e => window.location = url } block>Sign in with {provider}</Button>
+      ];
+    }
+  }
+
+  return villasLogin;
+}
+
+export default LoginForm;

src/pages/login/login.css

@@ -0,0 +1,42 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+.login-parent {
+    display: flex;
+    max-width: 800px;
+    margin: 30px auto;
+}
+
+.login-welcome {
+    float: right;
+    max-width: 400px;
+    padding: 15px 20px;
+    border-radius: var(--borderradius) 0px 0px var(--borderradius); 
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+                0 9px 18px 0 rgba(0, 0, 0, 0.1);
+}
+
+.login-container {
+    float: left;
+    max-width: 400px;
+    border-radius: 0px var(--borderradius) var(--borderradius) 0px;
+    padding: 15px 20px; 
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+                0 9px 18px 0 rgba(0, 0, 0, 0.1);
+}

src/pages/login/login.js

@@ -0,0 +1,80 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React, {useEffect, useRef} from 'react';
+import { NavbarBrand } from 'react-bootstrap';
+import NotificationSystem from 'react-notification-system';
+import { Redirect } from 'react-router-dom';
+
+import { useSelector } from 'react-redux';
+
+import LoginForm from './login-form';
+import Header from '../../common/header';
+import NotificationsDataManager from '../../common/data-managers/notifications-data-manager';
+import AppDispatcher from '../../common/app-dispatcher';
+import branding from '../../branding/branding';
+
+import './login.css';
+
+const Login = (props) => {
+
+  const notificationSystem = useRef()
+
+
+  useEffect(() => {
+    NotificationsDataManager.setSystem(notificationSystem);
+
+    console.log("redirected to login", currentUser)
+
+    // load config in case the user goes directly to /login
+    // otherwise it will be loaded in app constructor
+    AppDispatcher.dispatch({
+      type: 'config/load',
+    });
+  }, []);
+
+  const config = null
+
+  const currentUser = useSelector(state => state.user.currentUser);
+  const loginMessage = useSelector(state => state.user.loginMessage);
+
+  return currentUser == null ? 
+    (
+      <div>
+        <NotificationSystem ref={notificationSystem} />
+    
+        <Header />
+        <div className="login-parent">
+          <div className="login-welcome">
+            {branding.getWelcome()}
+          </div>
+    
+          <div className="login-container">
+            <NavbarBrand>Login</NavbarBrand>
+    
+            <LoginForm loginMessage={loginMessage} config={config} />
+          </div>
+        </div>
+    
+        {branding.getFooter()}
+      </div>
+    )
+    :
+    (<Redirect to="/home" />);
+}
+
+export default Login

src/pages/login/logout.js

@@ -15,25 +15,26 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Redirect } from 'react-router-dom';
-import AppDispatcher from '../common/app-dispatcher';
 
-class Logout extends React.Component {
+import { useDispatch } from 'react-redux'
+import { logout } from '../../store/userSlice';
 
-  componentDidMount() {
-    AppDispatcher.dispatch({
-      type: 'users/logout'
-    });
+const Logout = () => {
 
-    // The Login Store and local storage are deleted automatically
-  }
+  const dispatch = useDispatch();
 
-  render() {
-    return (
-      <Redirect to="/login" />
-    );
-  }
+  useEffect(() => {
+    let isMounted = true;
+    if(isMounted) dispatch(logout());
+
+    return () => {isMounted = false};
+  }, []);
+
+  return (
+    <Redirect to="/login" />
+  )
 }
 
 export default Logout;

src/router.js

@@ -18,23 +18,25 @@
 import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import App from "./app";
-import Login from "./user/login";
-import Logout from "./user/logout";
+import Login from "./pages/login/login";
+import Logout from "./pages/login/logout";
 import LoginComplete from "./user/login-complete";
 
 class Root extends React.Component {
   render() {
     return (
-      
         <BrowserRouter>
           <Switch>
             <Route path="/login/complete" component={LoginComplete} />
-            <Route path="/login" component={Login} />
-            <Route path="/logout" component={Logout} />
+            <Route path='/login'>
+              <Login />
+            </Route>
+            <Route path='/logout'>
+              <Logout />
+            </Route>
             <Route path="/" component={App} />
           </Switch>
         </BrowserRouter>
-      
     );
   }
 }

src/store/index.js

@@ -0,0 +1,26 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { configureStore } from "@reduxjs/toolkit"
+import userReducer from './userSlice'
+
+export const store = configureStore({
+    reducer: {
+        user: userReducer
+    },
+    devTools: true
+})

src/store/userSlice.js

@@ -0,0 +1,100 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import {createSlice, createAsyncThunk} from '@reduxjs/toolkit'
+
+import RestAPI from '../common/api/rest-api';
+import ICDataDataManager from '../ic/ic-data-data-manager';
+
+const userSlice = createSlice({
+    name: 'login',
+    initialState: {currentUser: null, currentToken: null, isLoading: false, loginMessage: ''},
+    extraReducers: (builder) => {
+        builder
+        .addCase(login.pending, (state, action) => {
+            state.isLoading = true
+        })
+        .addCase(login.fulfilled, (state, action) => {
+            state.isLoading = false
+            state.currentUser = action.payload.user
+            state.currentToken = action.payload.token
+
+            localStorage.setItem('currentUser', JSON.stringify(action.payload.user));
+            localStorage.setItem('token', action.payload.token);
+        })
+        .addCase(login.rejected, (state, action) => {
+            state.loginMessage = 'Wrong credentials! Please try again.'
+        })
+        .addCase(logout.pending, (state) => {
+            state.currentUser = null
+            state.currentToken = null
+        })
+        .addCase(loginExternal.pending, (state, action) => {
+            state.isLoading = true
+        })
+        .addCase(loginExternal.fulfilled, (state, action) => {
+            state.isLoading = false
+            state.currentUser = action.payload.user
+            state.currentToken = action.payload.token
+
+            localStorage.setItem('currentUser', JSON.stringify(action.payload.user));
+            localStorage.setItem('token', action.payload.token);
+        })
+    }
+})
+
+export const login = createAsyncThunk(
+    'user/login',
+    async (userData, thunkAPI) => {
+        try {
+            const res = await RestAPI.post('/api/v2/authenticate/internal', userData)
+            
+            return {user: res.user, token: res.token}
+        } catch(error) {
+            console.log('Error while trying to log in: ', error)
+            return thunkAPI.rejectWithValue(error)
+        }
+    }
+)
+
+export const loginExternal = createAsyncThunk(
+    'user/loginExternal',
+    async (data, thunkAPI) => {
+        try {
+            const res = await RestAPI.post(this.makeURL('/authenticate/external'), null, null, 60000) 
+            
+            return {user: res.user, token: res.token}
+        } catch(error) {
+            console.log('Error while trying to log in externally: ', error)
+            return thunkAPI.rejectWithValue(error)
+        }
+    }
+)
+
+export const logout = createAsyncThunk(
+    'user/logout',
+    async () => {
+        // disconnect from all infrastructure components
+        ICDataDataManager.closeAll();
+        //remove token and current user from local storage
+        localStorage.clear();
+
+        console.log("logged out")
+    }
+)
+
+export default userSlice.reducer

src/styles/app.css

@@ -266,38 +266,6 @@ a:active {
   background-color: white;
 }
 
-/**
- * Login form
- */
- .login-parent {
-   display: flex;
-   max-width: 800px;
-
-   margin: 30px auto;
- }
-
- .login-welcome {
-  float: right;
-  max-width: 400px;
-  padding: 15px 20px;
-  border-radius: var(--borderradius) 0px 0px var(--borderradius);
-
-  background-color: #fff;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-              0 9px 18px 0 rgba(0, 0, 0, 0.1);
-}
-
-.login-container {
-  float: left;
-  max-width: 400px;
-  border-radius: 0px var(--borderradius) var(--borderradius) 0px;
-  padding: 15px 20px;
-
-  background-color: #fff;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-              0 9px 18px 0 rgba(0, 0, 0, 0.1);
-}
-
 hr {
   margin-top: 1rem;
   margin-bottom: 1rem;

src/user/login-form.js

@@ -1,129 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-import React, { Component } from 'react';
-import { Form, Button, Col } from 'react-bootstrap';
-import RecoverPassword from './recover-password'
-import AppDispatcher from '../common/app-dispatcher';
-import _ from 'lodash';
-
-
-class LoginForm extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      username: '',
-      password: '',
-      forgottenPassword: false,
-      disableLogin: true
-    }
-  }
-
-  login(event) {
-    // prevent from submitting the form since we send an action
-    event.preventDefault();
-
-    // send login action
-    AppDispatcher.dispatch({
-      type: 'users/login',
-      username: this.state.username,
-      password: this.state.password
-    });
-  }
-
-  handleChange(event) {
-    let disableLogin = this.state.disableLogin;
-
-    if (event.target.id === 'username') {
-      disableLogin = this.state.password.length === 0 || event.target.value.length === 0;
-    } else if (event.target.id === 'password') {
-      disableLogin = this.state.username.length === 0 || event.target.value.length === 0;
-    }
-
-    this.setState({ [event.target.id]: event.target.value, disableLogin });
-  }
-
-  openRecoverPassword() {
-    this.setState({ forgottenPassword: true });
-  }
-
-  closeRecoverPassword() {
-    this.setState({ forgottenPassword: false });
-  }
-
-  villaslogin() {
-    return (
-      <Form key="login_a">
-        <Form.Group controlId="username">
-          <Form.Label column={true}>Username</Form.Label>
-          <Col>
-            <Form.Control type="text" placeholder="Username" autoComplete="username" onChange={(e) => this.handleChange(e)} />
-          </Col>
-        </Form.Group>
-
-        <Form.Group controlId="password">
-          <Form.Label column={true}>Password</Form.Label>
-          <Col >
-            <Form.Control type="password" placeholder="Password" autoComplete="current-password" onChange={(e) => this.handleChange(e)} />
-          </Col>
-        </Form.Group>
-
-        {this.props.loginMessage &&
-          <div style={{ marginBottom: '20px', color: 'red', fontSize: 'small' }}>
-            <Col sm={{ span: 10, offset: 2 }} style={{ paddingLeft: '5px' }}>
-              <i>Error: </i>{this.props.loginMessage}
-            </Col>
-          </div>
-        }
-
-        <Form.Group style={{ paddingTop: 15, paddingBottom: 5 }}>
-          <Col>
-          <span className='solid-button'>
-            <Button variant='secondary' style={{width: 90}} type="submit" disabled={this.state.disableLogin} onClick={e => this.login(e)}>Login</Button>
-          </span>
-            <Button variant="link" size="sm" style={{marginLeft: 85, textDecoration: "none"}} onClick={() => this.openRecoverPassword()}>Forgot your password?</Button>
-          </Col>
-        </Form.Group>
-
-        <RecoverPassword show={this.state.forgottenPassword} onClose={() => this.closeRecoverPassword()} sessionToken={this.props.sessionToken} />
-      </Form>
-    );
-  }
-
-  render() {
-    let villasLogin = this.villaslogin();
-
-    if (this.props.config) {
-      let externalLogin = _.get(this.props.config, ['authentication', 'external', 'enabled'])
-      let provider = _.get(this.props.config, ['authentication', 'external', 'provider_name'])
-      let url = _.get(this.props.config, ['authentication', 'external', 'authorize_url']) + "?rd=/login/complete"
-
-      if (externalLogin && provider && url) {
-        return [
-          villasLogin,
-          <hr key="login_b"/>,
-          <Button key="login_c" onClick={e => window.location = url } block>Sign in with {provider}</Button>
-        ];
-      }
-    }
-
-    return villasLogin;
-  }
-}
-
-export default LoginForm;

src/user/login.js

@@ -1,93 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-import React from 'react';
-import { Container } from 'flux/utils';
-import { NavbarBrand } from 'react-bootstrap';
-import NotificationSystem from 'react-notification-system';
-import { Redirect } from 'react-router-dom';
-
-import LoginForm from './login-form';
-import Header from '../common/header';
-import NotificationsDataManager from '../common/data-managers/notifications-data-manager';
-import LoginStore from './login-store'
-import AppDispatcher from '../common/app-dispatcher';
-import branding from '../branding/branding';
-
-
-class Login extends React.Component {
-  constructor(props) {
-    super(props);
-
-  }
-
-  static getStores() {
-    return [LoginStore]
-  }
-
-  static calculateState(prevState, props) {
-    // We need to work with the login store here to trigger the re-render upon state change after login
-    // Upon successful login, the token and currentUser are stored in the local storage as strings
-    return {
-      loginMessage: LoginStore.getState().loginMessage,
-      token: LoginStore.getState().token,
-      currentUser: LoginStore.getState().currentUser,
-      config: LoginStore.getState().config,
-    }
-  }
-
-  componentDidMount() {
-    NotificationsDataManager.setSystem(this.refs.notificationSystem);
-
-    // load config in case the user goes directly to /login
-    // otherwise it will be loaded in app constructor
-    AppDispatcher.dispatch({
-      type: 'config/load',
-    });
-  }
-
-  render() {
-
-    if (this.state.currentUser !== null && this.state.currentUser !== "") {
-      return (<Redirect to="/home" />);
-    }
-
-    return (
-      <div>
-        <NotificationSystem ref="notificationSystem" />
-
-        <Header />
-        <div className="login-parent">
-          <div className="login-welcome">
-            {branding.getWelcome()}
-          </div>
-
-          <div className="login-container">
-            <NavbarBrand>Login</NavbarBrand>
-
-            <LoginForm loginMessage={this.state.loginMessage} config={this.state.config} />
-          </div>
-        </div>
-
-        {branding.getFooter()}
-      </div>
-    );
-  }
-}
-
-let fluxContainerConverter = require('../common/FluxContainerConverter');
-export default Container.create(fluxContainerConverter.convert(Login));