first commit
This commit is contained in:
@@ -0,0 +1,147 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
export default function ChangePassword() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get('email'),
|
||||
password: data.get('password'),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: '1px solid #eee',
|
||||
paddingBottom: '10px'
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography component="h1" fontWeight="500" fontSize="18px">
|
||||
Security
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Update your password here.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Old Password
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="old-password*"
|
||||
name="oldPassword*"
|
||||
fullWidth
|
||||
id="oldPassword"
|
||||
type="password"
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
New Password
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="new-password*"
|
||||
name="newPassword*"
|
||||
fullWidth
|
||||
id="newPassword"
|
||||
type="password"
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Confirm Password
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="confirm-password*"
|
||||
name="confirmPassword*"
|
||||
fullWidth
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Email Address
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 2,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
padding: "12px 30px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Change Password
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Button from '@mui/material/Button';
|
||||
|
||||
export default function PrivacyPolicyContent() {
|
||||
return (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: '1px solid #eee',
|
||||
paddingBottom: '10px',
|
||||
marginBottom: '15px'
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography component="h1" fontWeight="500" fontSize="18px">
|
||||
Security:
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography component="h1" fontWeight="500" fontSize="15px" mb="5px">
|
||||
Two-factor Authentication
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box mb={2}>
|
||||
<Typography component="h1" fontWeight="500" fontSize="15px" mb="5px">
|
||||
Secondary Verification
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box mb={2}>
|
||||
<Typography component="h1" fontWeight="500" fontSize="15px" mb="5px">
|
||||
Backup Codes
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box mb={2}>
|
||||
<Typography component="h1" fontWeight="500" fontSize="15px" mb="5px">
|
||||
Desktop, email, chat, purchase notifications
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box mb={2}>
|
||||
<Typography component="h1" fontWeight="500" fontSize="15px" mb="5px">
|
||||
Delete this account :
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Two-factor authentication is an enhanced security meansur. Once enabled, you'll be required to give two types of identification when you log into Google Authentication and SMS are Supported.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box mt={3}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
size="large"
|
||||
sx={{
|
||||
background: 'rgba(238, 54, 140, 0.1)',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
className="mr-15px"
|
||||
>
|
||||
close & delete this account
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
color="danger"
|
||||
size="large"
|
||||
sx={{
|
||||
background: 'rgba(117, 127, 239, 0.1)',
|
||||
borderRadius: '8px',
|
||||
textTransform: 'capitalize'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import * as React from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
export default function Profile() {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get('email'),
|
||||
password: data.get('password'),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: '1px solid #eee',
|
||||
paddingBottom: '10px'
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography component="h1" fontWeight="500" fontSize="18px">
|
||||
Profile
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
Update your photo and personal details here.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
First Name
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="given-name"
|
||||
name="firstName"
|
||||
fullWidth
|
||||
id="firstName"
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Last Name
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
autoComplete="family-name"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Email Address
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
id="email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Typography
|
||||
component="label"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "10px",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
Upload Image
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
required
|
||||
fullWidth
|
||||
name="file"
|
||||
type="file"
|
||||
id="file"
|
||||
autoComplete="file"
|
||||
/>
|
||||
|
||||
<Box mt={1}>
|
||||
<img
|
||||
src="/images/user1.png"
|
||||
alt="profile"
|
||||
className="borRadius100"
|
||||
width="50px"
|
||||
height="50px"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 2,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
padding: "12px 30px",
|
||||
color: "#fff !important"
|
||||
}}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user