mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
updated account page
Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>
This commit is contained in:
Andrii Podriez
al3xa23
parent
0a17780602
commit
8d5076df1f
2 changed files with 226 additions and 0 deletions
113
src/pages/account/account.js
Normal file
113
src/pages/account/account.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* 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 { useState } from "react";
|
||||
import IconButton from "../../common/buttons/icon-button";
|
||||
import { Form, Row, Col } from 'react-bootstrap';
|
||||
import EditOwnUserDialog from "./edit-own-user";
|
||||
import { currentUser } from "../../localStorage";
|
||||
import NotificationsFactory from "../../common/data-managers/notifications-factory";
|
||||
import notificationsDataManager from "../../common/data-managers/notifications-data-manager";
|
||||
import { useUpdateUserMutation } from "../../store/apiSlice";
|
||||
|
||||
const Account = () => {
|
||||
|
||||
const [isEditModalOpened, setIsEditModalOpened] = useState(false);
|
||||
const [updateUser] = useUpdateUserMutation();
|
||||
|
||||
const buttonStyle = {
|
||||
marginLeft: '10px',
|
||||
}
|
||||
|
||||
const iconStyle = {
|
||||
height: '30px',
|
||||
width: '30px'
|
||||
}
|
||||
|
||||
const handleEdit = async (data) => {
|
||||
if(data){
|
||||
try {
|
||||
await updateUser(data);
|
||||
} catch (err) {
|
||||
if(err.data){
|
||||
notificationsDataManager.addNotification(NotificationsFactory.UPDATE_ERROR(err.data.message));
|
||||
} else {
|
||||
console.log('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
setIsEditModalOpened(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Account
|
||||
<span className='icon-button'>
|
||||
<IconButton
|
||||
childKey={0}
|
||||
tooltip='Edit Account'
|
||||
onClick={() => setIsEditModalOpened(true)}
|
||||
icon='edit'
|
||||
buttonStyle={buttonStyle}
|
||||
iconStyle={iconStyle}
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{currentUser ?
|
||||
<>
|
||||
<Form>
|
||||
<Form.Group as={Row} controlId="username">
|
||||
<Form.Label column sm={2}>Username</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly value={currentUser.username} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="mail">
|
||||
<Form.Label column sm={2}>E-mail</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly value={currentUser.mail} type="email" />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="role">
|
||||
<Form.Label column sm={2}>Role</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly value={currentUser.role} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
<Form.Group as={Row} controlId="formBasicEmail">
|
||||
<Form.Label column sm={2}>Created at</Form.Label>
|
||||
<Col sm={10}>
|
||||
<Form.Control plaintext readOnly value={currentUser.createdAt} />
|
||||
</Col>
|
||||
</Form.Group>
|
||||
|
||||
</Form>
|
||||
|
||||
<EditOwnUserDialog
|
||||
show={isEditModalOpened}
|
||||
onClose={(data) => handleEdit(data)}
|
||||
user={currentUser}
|
||||
/>
|
||||
</>
|
||||
: <div/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Account;
|
||||
113
src/pages/account/edit-own-user.js
Normal file
113
src/pages/account/edit-own-user.js
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* 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 { 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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
username: "",
|
||||
mail: this.props.user.mail,
|
||||
password: '',
|
||||
oldPassword: '',
|
||||
confirmPassword: ''
|
||||
}
|
||||
}
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({ [e.target.id]: e.target.value });
|
||||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({
|
||||
username: this.props.user.username,
|
||||
mail: this.props.user.mail,
|
||||
oldPassword: '',
|
||||
confirmPassword: '',
|
||||
password: '',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Dialog show={this.props.show} title="Edit user" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={true}>
|
||||
<Form>
|
||||
<Form.Group as={Col} controlId="username" style={{marginBottom: '15px'}}>
|
||||
<Form.Label>Username</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.user.username} value={this.state.username} onChange={(e) => this.handleChange(e)} autoComplete="username" />
|
||||
<Form.Control.Feedback />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="mail" style={{marginBottom: '15px'}}>
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="text" placeholder={this.props.user.mail} value={this.state.mail} onChange={(e) => this.handleChange(e)} autoComplete="email" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="oldPassword" style={{marginBottom: '15px'}}>
|
||||
<Form.Label>Old Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter current password" value={this.state.oldPassword} onChange={(e) => this.handleChange(e)} autoComplete="current-password" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="password" style={{marginBottom: '15px'}}>
|
||||
<Form.Label>New Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Enter new password" value={this.state.password} onChange={(e) => this.handleChange(e)} autoComplete="new-password" />
|
||||
</Form.Group>
|
||||
<Form.Group as={Col} controlId="confirmPassword">
|
||||
<Form.Label>Confirm New Password</Form.Label>
|
||||
<Form.Control type="password" placeholder="Repeat new password" value={this.state.confirmPassword} onChange={(e) => this.handleChange(e)} autoComplete="new-password" />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default EditOwnUserDialog;
|
||||
Loading…
Add table
Reference in a new issue