1
0
Fork 0
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:
Laura Fuentes Grau 2019-10-22 15:43:44 +02:00
parent 2b5df63b34
commit 6cfe8e4d82
3 changed files with 167 additions and 44 deletions

View file

@ -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
View 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;

View file

@ -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');