2023-01-10 12:45:11 +01:00
|
|
|
//Lib
|
|
|
|
import 'react-toastify/dist/ReactToastify.css';
|
2023-01-11 15:00:37 +01:00
|
|
|
import classes from './UserSettings.module.css';
|
2023-03-06 19:19:28 +01:00
|
|
|
import { useState } from 'react';
|
2023-01-10 12:45:11 +01:00
|
|
|
|
|
|
|
//Components
|
2023-01-12 12:46:36 +01:00
|
|
|
import EmailSettings from './EmailSettings/EmailSettings';
|
|
|
|
import PasswordSettings from './PasswordSettings/PasswordSettings';
|
|
|
|
import UsernameSettings from './UsernameSettings/UsernameSettings';
|
2023-01-16 18:28:54 +01:00
|
|
|
import EmailAlertSettings from './EmailAlertSettings/EmailAlertSettings';
|
2023-03-03 12:25:54 +01:00
|
|
|
import AppriseAlertSettings from './AppriseAlertSettings/AppriseAlertSettings';
|
2023-01-10 12:45:11 +01:00
|
|
|
|
2023-01-11 15:00:37 +01:00
|
|
|
export default function UserSettings(props) {
|
2023-03-06 19:19:28 +01:00
|
|
|
//States
|
|
|
|
const [tab, setTab] = useState('General');
|
|
|
|
|
2023-01-10 12:45:11 +01:00
|
|
|
return (
|
2023-01-11 15:00:37 +01:00
|
|
|
<div className={classes.containerSettings}>
|
|
|
|
<div>
|
2023-03-06 19:19:28 +01:00
|
|
|
<h1
|
|
|
|
style={{
|
|
|
|
color: '#494b7a',
|
|
|
|
textAlign: 'left',
|
|
|
|
marginLeft: '30px',
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Account{' '}
|
2023-01-11 15:00:37 +01:00
|
|
|
</h1>
|
|
|
|
</div>
|
2023-03-06 19:19:28 +01:00
|
|
|
<div className={classes.tabList}>
|
|
|
|
<button
|
|
|
|
className={
|
|
|
|
tab == 'General'
|
|
|
|
? classes.tabListButtonActive
|
|
|
|
: classes.tabListButton
|
|
|
|
}
|
|
|
|
onClick={() => setTab('General')}
|
|
|
|
>
|
|
|
|
General
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
className={
|
|
|
|
tab == 'Notifications'
|
|
|
|
? classes.tabListButtonActive
|
|
|
|
: classes.tabListButton
|
|
|
|
}
|
|
|
|
onClick={() => setTab('Notifications')}
|
|
|
|
>
|
|
|
|
Notifications
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
{tab == 'General' && (
|
|
|
|
<>
|
|
|
|
<PasswordSettings username={props.data.user.name} />
|
|
|
|
<EmailSettings email={props.data.user.email} />
|
|
|
|
<UsernameSettings username={props.data.user.name} />{' '}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{tab == 'Notifications' && (
|
|
|
|
<>
|
|
|
|
<EmailAlertSettings />
|
|
|
|
<AppriseAlertSettings />
|
|
|
|
</>
|
|
|
|
)}
|
2023-01-11 15:00:37 +01:00
|
|
|
</div>
|
2023-01-10 12:45:11 +01:00
|
|
|
);
|
|
|
|
}
|