mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
improved #197 user can now change own name, email and password
This commit is contained in:
parent
2b5df63b34
commit
6cfe8e4d82
3 changed files with 167 additions and 44 deletions
|
@ -115,6 +115,10 @@ class ArrayStore extends ReduceStore {
|
|||
this.dataManager.update(action.data, action.token);
|
||||
return state;
|
||||
|
||||
case this.type + '/start-own-edit':
|
||||
this.dataManager.update(action.data, action.token);
|
||||
return state;
|
||||
|
||||
case this.type + '/edited':
|
||||
return this.updateElements(state, [action.data]);
|
||||
|
||||
|
|
142
src/user/edit-own-user.js
Normal file
142
src/user/edit-own-user.js
Normal file
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
* File: edit-user.js
|
||||
* Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
|
||||
* Date: 02.05.2017
|
||||
*
|
||||
* 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 {FormGroup, FormControl, FormLabel, Col} from 'react-bootstrap';
|
||||
|
||||
import Dialog from '../common/dialogs/dialog';
|
||||
import UserStore from './user-store';
|
||||
|
||||
|
||||
class EditOwnUserDialog extends React.Component {
|
||||
valid: true;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: '',
|
||||
currentpassword: '',
|
||||
mail: '',
|
||||
role: '',
|
||||
id: '',
|
||||
password: '',
|
||||
active: ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
if (this.valid) {
|
||||
this.props.onClose(this.state);
|
||||
}
|
||||
} else {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
handleChange(e) {
|
||||
let user = UserStore.getState().currentUser;
|
||||
console.log("edit-own-user, handlechange methode called");
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
|
||||
// check all controls
|
||||
var username = true;
|
||||
var role = true;
|
||||
var mail = true;
|
||||
var pw = true;
|
||||
var active = true;
|
||||
var currentpassword = true;
|
||||
|
||||
if (this.state.username === '') {
|
||||
username = false;
|
||||
}
|
||||
|
||||
|
||||
if(this.state.mail === ''){
|
||||
mail = false;
|
||||
}
|
||||
|
||||
if(this.state.password === ''){
|
||||
pw = false;
|
||||
}
|
||||
|
||||
if(this.state.active === ''){
|
||||
active = false;
|
||||
}
|
||||
|
||||
if(this.state.currentpassword === ''){
|
||||
currentpassword = false;
|
||||
}
|
||||
|
||||
|
||||
this.setState({
|
||||
role: user.role,
|
||||
id: user.id
|
||||
});
|
||||
|
||||
// form is valid if any of the fields contain somethig
|
||||
this.valid = username || role || active || currentpassword || mail || pw;
|
||||
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({
|
||||
//username: this.props.user.username,
|
||||
//mail: this.props.user.mail,
|
||||
role: this.props.user.role,
|
||||
id: this.props.user.id
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup as={Col} controlId="username">
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter username" value={this.state.username} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="mail">
|
||||
<FormLabel>E-mail</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter e-mail" value={this.state.mail} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
<FormGroup as={Col} controlId="currentpassword">
|
||||
<FormLabel>Old Password</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter current password" value={this.state.currentpassword} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup as={Col} controlId="password">
|
||||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter password" value={this.state.password} onChange={(e) => this.handleChange(e)} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EditOwnUserDialog;
|
|
@ -21,28 +21,28 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import { Container } from 'flux/utils';
|
||||
import {Button, Col, Row, FormGroup, FormLabel} from 'react-bootstrap';
|
||||
import {Button, Col, Row} from 'react-bootstrap';
|
||||
|
||||
import AppDispatcher from '../common/app-dispatcher';
|
||||
import UserStore from './user-store';
|
||||
import UsersStore from './users-store';
|
||||
|
||||
|
||||
import Icon from '../common/icon';
|
||||
import EditUserDialog from './edit-user';
|
||||
import EditOwnUserDialog from './edit-own-user'
|
||||
|
||||
import DeleteDialog from '../common/dialogs/delete-dialog';
|
||||
import ParametersEditor from "../common/parameters-editor";
|
||||
|
||||
class User extends Component {
|
||||
static getStores() {
|
||||
return [ UserStore ];
|
||||
return [ UserStore, UsersStore ];
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
prevState = prevState || {};
|
||||
|
||||
const sessionToken = UserStore.getState().token;
|
||||
//prevState = prevState || {};
|
||||
|
||||
let sessionToken = UserStore.getState().token;
|
||||
let user = UserStore.getState().currentUser;
|
||||
|
||||
|
||||
if(user === null) {
|
||||
AppDispatcher.dispatch({
|
||||
|
@ -60,52 +60,38 @@ class User extends Component {
|
|||
user,
|
||||
|
||||
token: sessionToken,
|
||||
editModal: prevState.editModal || false,
|
||||
deleteModal: prevState.deleteModal || false,
|
||||
modalData: prevState.modalData || {}
|
||||
newModal: false,
|
||||
editModal: false,
|
||||
update: false,
|
||||
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 });
|
||||
console.log(data);
|
||||
|
||||
if (data) {
|
||||
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'users/start-edit',
|
||||
type: 'users/start-own-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() {
|
||||
|
||||
|
@ -129,6 +115,9 @@ class User extends Component {
|
|||
<Col xs={3}>Role: </Col>
|
||||
<Col xs={3}> {this.state.user.role} </Col>
|
||||
</Row>
|
||||
<Button onClick={() => this.setState({ editModal: true })}><Icon icon='edit' /> Edit!</Button>
|
||||
|
||||
<EditOwnUserDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} user={this.state.modalData} />
|
||||
|
||||
</form>
|
||||
|
||||
|
@ -137,19 +126,7 @@ class User extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
{/*<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');
|
||||
|
|
Loading…
Add table
Reference in a new issue