49 lines
2.7 KiB
React
49 lines
2.7 KiB
React
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import './Profile.css';
|
||
|
|
import { Avatar, Button, Layout, Space, Typography } from 'antd';
|
||
|
|
import { UploadOutlined, UserOutlined } from '@ant-design/icons';
|
||
|
|
import { authenticationService } from '../_services';
|
||
|
|
|
||
|
|
const Profile = () => {
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
let user = authenticationService.currentUserValue;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Layout style={{padding: '0 2rem 2rem'}}>
|
||
|
|
<Layout.Content prefixCls='profile-page'>
|
||
|
|
<div className='mb-1-0'>
|
||
|
|
<Typography.Text type='secondary'>Manage your personal and account details here</Typography.Text>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Typography.Paragraph strong>Account Details</Typography.Paragraph>
|
||
|
|
|
||
|
|
<Space className='avatar-container'>
|
||
|
|
<Avatar shape="square" src={null} size={80} icon={<UserOutlined />} />
|
||
|
|
<Button onClick={() => {}} type='ghost' icon={<UploadOutlined/>}>Change Picture</Button>
|
||
|
|
</Space>
|
||
|
|
|
||
|
|
<div className='user-info'>
|
||
|
|
<Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Full Name</Typography.Paragraph>
|
||
|
|
<span>{user.first_name || user.last_name? <>{user.first_name} {user.last_name}</> : <Typography.Text type='warning'>No name entered</Typography.Text>}</span>
|
||
|
|
<Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Email ID</Typography.Paragraph>
|
||
|
|
<span>{user.email_id}</span>
|
||
|
|
<Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Phone Number</Typography.Paragraph>
|
||
|
|
<span>{user.mobile_num? user.mobile_num : <Typography.Text type='warning'>No number entered</Typography.Text>}</span>
|
||
|
|
<Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Affiliated Institute</Typography.Paragraph>
|
||
|
|
<span>{user.institute_name? user.institute_name : <Typography.Text type='warning'>No institute associated</Typography.Text>}</span>
|
||
|
|
<Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Role</Typography.Paragraph>
|
||
|
|
<span>{user.role_name? user.role_name : <Typography.Text type='warning'>No role assigned</Typography.Text>}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className='button-container'>
|
||
|
|
<Button type='primary'>Change Password</Button>
|
||
|
|
<Button type='danger'>Deactivate Account</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</Layout.Content>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Profile;
|