diff --git a/src/user/edit-own-user.js b/src/user/edit-own-user.js index a5b7756..8b49221 100644 --- a/src/user/edit-own-user.js +++ b/src/user/edit-own-user.js @@ -19,17 +19,16 @@ import React from 'react'; import { Form, Col } from 'react-bootstrap'; import Dialog from '../common/dialogs/dialog'; +import NotificationsDataManager from "../common/data-managers/notifications-data-manager"; +import NotificationsFactory from "../common/data-managers/notifications-factory"; class EditOwnUserDialog extends React.Component { - valid: true; - constructor(props) { super(props); this.state = { - username: this.props.user.username, - id: this.props.user.id, + username: "", mail: this.props.user.mail, password: '', oldPassword: '', @@ -39,9 +38,29 @@ class EditOwnUserDialog extends React.Component { onClose(canceled) { if (canceled === false) { - if (this.valid) { - this.props.onClose(this.state); + + let user = {}; + user.id = this.props.user.id; + user.password = this.state.password; + user.oldPassword = this.state.oldPassword; + user.confirmPassword = this.state.confirmPassword + + if (this.state.username != null && this.state.username !== this.props.user.username){ + user.username = this.state.username; } + + if (this.state.mail != null && this.state.mail !== this.props.user.mail){ + user.mail = this.state.mail; + } + + if (this.state.password !== '' && this.state.oldPassword !== '' && this.state.password === this.state.confirmPassword ) { + user.password = this.state.password; + user.oldPassword = this.state.oldPassword; + } else if (this.state.password !== '' && this.state.password !== this.state.confirmPassword) { + NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR('New password not correctly confirmed')); + } + + this.props.onClose(user); } else { this.props.onClose(); } @@ -49,42 +68,11 @@ class EditOwnUserDialog extends React.Component { handleChange(e) { this.setState({ [e.target.id]: e.target.value }); - - // check all controls - let username = true; - let mail = true; - let pw = true; - let oldPassword = true; - let confirmPassword = true; - - if (this.state.username === '') { - username = false; - } - - if (this.state.mail === '') { - mail = false; - } - - if (this.state.password === '') { - pw = false; - } - - if (this.state.oldPassword === '') { - oldPassword = false; - } - - if (this.state.confirmPassword === '') { - confirmPassword = false; - } - - // form is valid if the following condition is met - this.valid = username || mail || (oldPassword && pw && confirmPassword); } resetState() { this.setState({ username: this.props.user.username, - id: this.props.user.id, mail: this.props.user.mail, oldPassword: '', confirmPassword: '', @@ -94,28 +82,28 @@ class EditOwnUserDialog extends React.Component { render() { return ( - this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}> + this.onClose(c)} onReset={() => this.resetState()} valid={true}>
Username - this.handleChange(e)} autocomplete="username" /> + this.handleChange(e)} autoComplete="username" /> E-mail - this.handleChange(e)} autocomplete="email" /> + this.handleChange(e)} autoComplete="email" /> Old Password - this.handleChange(e)} autocomplete="current-password" /> + this.handleChange(e)} autoComplete="current-password" /> New Password - this.handleChange(e)} autocomplete="new-password" /> + this.handleChange(e)} autoComplete="new-password" /> Confirm New Password - this.handleChange(e)} autocomplete="new-password" /> + this.handleChange(e)} autoComplete="new-password" />
diff --git a/src/user/edit-user.js b/src/user/edit-user.js index 4925d57..e5cc143 100644 --- a/src/user/edit-user.js +++ b/src/user/edit-user.js @@ -77,6 +77,9 @@ class EditUserDialog extends React.Component { username: this.props.user.username, mail: this.props.user.mail, role: this.props.user.role, + password: "", + confirmPassword: "", + oldPassword: "", }); } diff --git a/src/user/login-store.js b/src/user/login-store.js index 3e0eba6..f5cea52 100644 --- a/src/user/login-store.js +++ b/src/user/login-store.js @@ -66,11 +66,14 @@ class LoginStore extends ReduceStore { return Object.assign({}, state, { token: null, currentUser: null, loginMessage: null}); case 'users/logged-in': - // save login in local storage - localStorage.setItem('token', action.token); + // save login data in local storage and loginStore + let newState = state + if (action.token != null){ + localStorage.setItem('token', action.token); + newState = Object.assign({}, state, {token: action.token}) + } localStorage.setItem('currentUser', JSON.stringify(action.currentUser)); - - return Object.assign({}, state, { token: action.token, currentUser: action.currentUser}); + return Object.assign({}, newState, { currentUser: action.currentUser}); case 'users/login-error': if (action.error && !action.error.handled) { diff --git a/src/user/user.js b/src/user/user.js index 26bd161..a4cdfd6 100644 --- a/src/user/user.js +++ b/src/user/user.js @@ -15,100 +15,74 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import { Container } from 'flux/utils'; -import { Button, Form, Row, Col } from 'react-bootstrap'; - +import { Form, Row, Col } from 'react-bootstrap'; import AppDispatcher from '../common/app-dispatcher'; -import UsersStore from './users-store'; - -import Icon from '../common/icon'; import EditOwnUserDialog from './edit-own-user' -import NotificationsDataManager from "../common/data-managers/notifications-data-manager" -import NotificationsFactory from "../common/data-managers/notifications-factory"; +import IconButton from "../common/icon-button"; +import LoginStore from './login-store' + +class User extends React.Component { + constructor() { + super(); + + this.state = { + token: LoginStore.getState().token, + editModal: false, + } + } -class User extends Component { static getStores() { - return [ UsersStore ]; + return [ LoginStore ]; } static calculateState(prevState, props) { - prevState = prevState || {}; - - let currentUserID = JSON.parse(localStorage.getItem("currentUser")).id; - let currentUser = UsersStore.getState().find(user => user.id === parseInt(currentUserID, 10)); - return { - currentUser, - token: localStorage.getItem("token"), - editModal: false, - }; - } - - componentDidMount() { - let currentUserID = JSON.parse(localStorage.getItem("currentUser")).id; - - AppDispatcher.dispatch({ - type: 'users/start-load', - data: parseInt(currentUserID, 10), - token: this.state.token - }); + currentUser: LoginStore.getState().currentUser + } } closeEditModal(data) { this.setState({ editModal: false }); - let updatedData = {} - let updatedUser = this.state.currentUser; - let hasChanged = false; - let pwChanged = false; - - updatedData.id = this.state.currentUser.id; - if (data) { - if (data.username !== this.state.currentUser.username) { - hasChanged = true; - updatedData.username = data.username; - updatedUser.username = data.username - } - - if (data.mail !== this.state.currentUser.mail) { - hasChanged = true; - updatedData.mail = data.mail; - updatedUser.mail = data.mail; - } - - if (data.password !== '' && data.oldPassword !== '' && data.password === data.confirmPassword ) { - pwChanged = true; - updatedData.password = data.password; - updatedData.oldPassword = data.oldPassword; - } else if (data.password !== '' && data.password !== data.confirmPassword) { - NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR('New password not correctly confirmed')); - return - } - - if (hasChanged || pwChanged) { - if (hasChanged){ - this.setState({ currentUser: updatedUser }) - } - - AppDispatcher.dispatch({ - type: 'users/start-edit', - data: updatedData, - token: this.state.token - }); - } else { - NotificationsDataManager.addNotification(NotificationsFactory.UPDATE_WARNING('No update requested, no input data')); - } + AppDispatcher.dispatch({ + type: 'users/start-edit', + data: data, + token: this.state.token, + currentUser: this.state.currentUser, + }); } } render() { let user = this.state.currentUser; + const buttonStyle = { + marginLeft: '10px', + } + + const iconStyle = { + height: '30px', + width: '30px' + } + return (
-

Account

+

Account + + + this.setState({ editModal: true })} + icon='edit' + buttonStyle={buttonStyle} + iconStyle={iconStyle} + /> + +

{user ? <> @@ -116,30 +90,28 @@ class User extends Component { Username - + E-mail - + Role - + Created at - + - +