1
0
Fork 0
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 2024-07-25 13:52:31 +02:00 committed by al3xa23
parent 0a17780602
commit 8d5076df1f
2 changed files with 226 additions and 0 deletions

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

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