Commit c9d678d8 authored by Sonja Happ's avatar Sonja Happ
Browse files

add user component and menu item for account management, WIP

parent beca550a
......@@ -50,6 +50,7 @@ import Scenarios from './scenario/scenarios';
import Scenario from './scenario/scenario';
import SimulationModel from './simulationmodel/simulation-model';
import Users from './user/users';
import User from './user/user';
import './styles/app.css';
......@@ -108,11 +109,11 @@ class App extends React.Component {
showSidebarMenu = () => {
this.setState({ showSidebarMenu: true });
}
};
hideSidebarMenu = () => {
this.setState({ showSidebarMenu: false });
}
};
render() {
if (this.state.token == null) {
......@@ -149,6 +150,7 @@ class App extends React.Component {
<Route path="/scenarios/:scenario" component={Scenario} />
<Route path="/simulationModel/:simulationModel" component={SimulationModel} />
<Route path="/simulators" component={Simulators} />
<Route path="/user" component={User} />
<Route path="/users" component={Users} />
</div>
</div>
......
......@@ -38,6 +38,7 @@ class SidebarMenu extends React.Component {
{ this.props.currentRole === 'Admin' ?
<li><NavLink to="/users" activeClassName="active" title="User Management">User Management</NavLink></li> : ''
}
<li><NavLink to="/user" title="Account">Account</NavLink></li>
<li><NavLink to="/logout" title="Logout">Logout</NavLink></li>
</ul>
</div>
......
/**
* File: user.js
* Author: Sonja Happ
* Date: 18.09.2019
*
* 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 { Container } from 'flux/utils';
import {Button, Col, Row, FormGroup, FormLabel} from 'react-bootstrap';
import AppDispatcher from '../common/app-dispatcher';
import UserStore from './user-store';
import Icon from '../common/icon';
import EditUserDialog from './edit-user';
import DeleteDialog from '../common/dialogs/delete-dialog';
import ParametersEditor from "../common/parameters-editor";
class User extends Component {
static getStores() {
return [ UserStore ];
}
static calculateState(prevState, props) {
prevState = prevState || {};
const sessionToken = UserStore.getState().token;
let user = UserStore.getState().currentUser;
if(user === null) {
AppDispatcher.dispatch({
type: 'users/start-load',
data: UserStore.getState().userid,
token: sessionToken
});
user = {};
}
console.log("extracted user 2: " + user.username);
return {
user,
token: sessionToken,
editModal: prevState.editModal || false,
deleteModal: prevState.deleteModal || false,
modalData: prevState.modalData || {}
};
}
closeDeleteModal(confirmDelete) {
this.setState({ deleteModal: false });
if (confirmDelete === false) {
return;
}
AppDispatcher.dispatch({
type: 'users/start-remove',
data: this.state.modalData,
token: this.state.token
});
}
closeEditModal(data) {
this.setState({ editModal: false });
if (data) {
AppDispatcher.dispatch({
type: 'users/start-edit',
data: data,
token: this.state.token
});
}
}
getHumanRoleName(role_key) {
const HUMAN_ROLE_NAMES = {Admin: 'Administrator', User: 'User', Guest: 'Guest'};
return HUMAN_ROLE_NAMES.hasOwnProperty(role_key)? HUMAN_ROLE_NAMES[role_key] : '';
}
onModalKeyPress = (event) => {
if (event.key === 'Enter') {
event.preventDefault();
this.confirmDeleteModal();
}
};
render() {
return (
<div>
<h1>Your User Account</h1>
<form>
<Row>
<Col xs={3}>Username: </Col>
<Col xs={3}> {this.state.user.username} </Col>
</Row>
<Row as={Col} >
<Col xs={3}>E-mail: </Col>
<Col xs={3}> {this.state.user.mail} </Col>
</Row>
<Row as={Col} >
<Col xs={3}>Role: </Col>
<Col xs={3}> {this.state.user.role} </Col>
</Row>
</form>
</div>
);
}
}
{/*<Button onClick={() => this.setState({ editModal: true })}><Icon icon='edit' /> Edit</Button>*/}
{/*<Button onClick={() => this.setState({ deleteModal: true })}><Icon icon='trash' /> Delete</Button>*/}
{/*<EditUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />*/}
{/*<DeleteDialog title="user" name={this.state.modalData.username} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />*/}
{/*<Table data={this.state.user}>*/}
{/* <TableColumn title='Username' width='150' dataKey='username' />*/}
{/* <TableColumn title='ID' width='150' dataKey='id' />*/}
{/* <TableColumn title='E-mail' dataKey='mail' />*/}
{/* <TableColumn title='Role' dataKey='role' modifier={(role) => this.getHumanRoleName(role)} />*/}
{/* <TableColumn title='Active' dataKey='active'/>*/}
{/*</Table>*/}
let fluxContainerConverter = require('../common/FluxContainerConverter');
export default Container.create(fluxContainerConverter.convert(User));
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment