mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
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>
This commit is contained in:
parent
1ab89459ab
commit
fca8ab9d2f
12 changed files with 384 additions and 276 deletions
|
@ -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",
|
||||
|
|
|
@ -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";
|
||||
|
|
110
src/pages/login/login-form.js
Normal file
110
src/pages/login/login-form.js
Normal file
|
@ -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;
|
42
src/pages/login/login.css
Normal file
42
src/pages/login/login.css
Normal file
|
@ -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);
|
||||
}
|
80
src/pages/login/login.js
Normal file
80
src/pages/login/login.js
Normal file
|
@ -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
|
|
@ -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;
|
|
@ -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>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
26
src/store/index.js
Normal file
26
src/store/index.js
Normal file
|
@ -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
|
||||
})
|
100
src/store/userSlice.js
Normal file
100
src/store/userSlice.js
Normal file
|
@ -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
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
|
@ -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));
|
Loading…
Add table
Reference in a new issue