// ** React Imports import { ChangeEvent, useState } from 'react' // ** Next Import import Link from 'next/link' // ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Grid from '@mui/material/Grid' import Alert from '@mui/material/Alert' import Table from '@mui/material/Table' import Button from '@mui/material/Button' import Dialog from '@mui/material/Dialog' import Divider from '@mui/material/Divider' import TableRow from '@mui/material/TableRow' import TableHead from '@mui/material/TableHead' import TableCell from '@mui/material/TableCell' import TableBody from '@mui/material/TableBody' import TextField from '@mui/material/TextField' import CardHeader from '@mui/material/CardHeader' import AlertTitle from '@mui/material/AlertTitle' import InputLabel from '@mui/material/InputLabel' import IconButton from '@mui/material/IconButton' import Typography from '@mui/material/Typography' import CardContent from '@mui/material/CardContent' import FormControl from '@mui/material/FormControl' import DialogTitle from '@mui/material/DialogTitle' import OutlinedInput from '@mui/material/OutlinedInput' import DialogContent from '@mui/material/DialogContent' import InputAdornment from '@mui/material/InputAdornment' import TableContainer from '@mui/material/TableContainer' // ** Icon Imports import Icon from 'src/@core/components/icon' import Image from 'next/image' interface State { newPassword: string showNewPassword: boolean confirmNewPassword: string showConfirmNewPassword: boolean } interface DataType { device: string browser: string location: string recentActivity: string } const data: DataType[] = [ { device: 'Dell XPS 15', location: 'United States', browser: 'Chrome on Windows', recentActivity: '10, Jan 2020 20:07' }, { location: 'Ghana', device: 'Google Pixel 3a', browser: 'Chrome on Android', recentActivity: '11, Jan 2020 10:16' }, { location: 'Mayotte', device: 'Apple iMac', browser: 'Chrome on MacOS', recentActivity: '11, Jan 2020 12:10' }, { location: 'Mauritania', device: 'Apple iPhone XR', browser: 'Chrome on iPhone', recentActivity: '12, Jan 2020 8:29' } ] const UserViewSecurity = () => { // ** States const [defaultValues, setDefaultValues] = useState({ mobile: '+1(968) 819-2547' }) const [mobileNumber, setMobileNumber] = useState(defaultValues.mobile) const [openEditMobileNumber, setOpenEditMobileNumber] = useState(false) const [values, setValues] = useState({ newPassword: '', showNewPassword: false, confirmNewPassword: '', showConfirmNewPassword: false }) // Handle Password const handleNewPasswordChange = (prop: keyof State) => (event: ChangeEvent) => { setValues({ ...values, [prop]: event.target.value }) } const handleClickShowNewPassword = () => { setValues({ ...values, showNewPassword: !values.showNewPassword }) } // Handle Confirm Password const handleConfirmNewPasswordChange = (prop: keyof State) => (event: ChangeEvent) => { setValues({ ...values, [prop]: event.target.value }) } const handleClickShowConfirmNewPassword = () => { setValues({ ...values, showConfirmNewPassword: !values.showConfirmNewPassword }) } // Handle edit mobile number dialog const handleEditMobileNumberClickOpen = () => setOpenEditMobileNumber(true) const handleEditMobileNumberClose = () => setOpenEditMobileNumber(false) // Handle button click inside the dialog const handleCancelClick = () => { setMobileNumber(defaultValues.mobile) handleEditMobileNumberClose() } const handleSubmitClick = () => { setDefaultValues({ ...defaultValues, mobile: mobileNumber }) handleEditMobileNumberClose() } return ( `${theme.spacing(1)} !important` }}> Ensure that these requirements are met Minimum 8 characters long, uppercase & symbol
e.preventDefault()}> New Password e.preventDefault()} aria-label='toggle password visibility' > } /> Confirm New Password e.preventDefault()} aria-label='toggle password visibility' onClick={handleClickShowConfirmNewPassword} > } />
SMS {mobileNumber}
`${theme.spacing(4)} !important` }} /> Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.{' '} e.preventDefault()}> Learn more .
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Enable One Time Password [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Verify Your Mobile Number for SMS Enter your mobile phone number with country code and we will send you a verification code.
e.preventDefault()}> setMobileNumber(e.target.value)} />
(theme.palette.mode === 'light' ? 'grey.50' : 'background.default') }} > Browser Device Location Recent Activity {data.map((item: DataType, index: number) => ( {item.browser} {item.device} {item.location} {item.recentActivity} ))}
) } export default UserViewSecurity