122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
// React Imports
|
|
import { useState } from 'react'
|
|
|
|
// Next Imports
|
|
import Link from 'next/link'
|
|
|
|
// MUI Imports
|
|
import Card from '@mui/material/Card'
|
|
import Grid from '@mui/material/Grid2'
|
|
import Button from '@mui/material/Button'
|
|
import Typography from '@mui/material/Typography'
|
|
import CardHeader from '@mui/material/CardHeader'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import InputAdornment from '@mui/material/InputAdornment'
|
|
|
|
// Components Imports
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
const FormLayoutsBasic = () => {
|
|
// States
|
|
const [isPasswordShown, setIsPasswordShown] = useState(false)
|
|
const [isConfirmPasswordShown, setIsConfirmPasswordShown] = useState(false)
|
|
|
|
const handleClickShowPassword = () => setIsPasswordShown(show => !show)
|
|
|
|
const handleClickShowConfirmPassword = () => setIsConfirmPasswordShown(show => !show)
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader title='Basic' />
|
|
<CardContent>
|
|
<form onSubmit={e => e.preventDefault()}>
|
|
<Grid container spacing={6}>
|
|
<Grid size={{ xs: 12 }}>
|
|
<CustomTextField fullWidth label='Name' placeholder='John Doe' />
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
type='email'
|
|
label='Email'
|
|
placeholder='johndoe@gmail.com'
|
|
helperText='You can use letters, numbers & periods'
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
label='Password'
|
|
placeholder='············'
|
|
id='form-layout-basic-password'
|
|
type={isPasswordShown ? 'text' : 'password'}
|
|
helperText='Use 8 or more characters with a mix of letters, numbers & symbols'
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: (
|
|
<InputAdornment position='end'>
|
|
<IconButton
|
|
edge='end'
|
|
onClick={handleClickShowPassword}
|
|
onMouseDown={e => e.preventDefault()}
|
|
aria-label='toggle password visibility'
|
|
>
|
|
<i className={isPasswordShown ? 'tabler-eye-off' : 'tabler-eye'} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
)
|
|
}
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
label='Confirm Password'
|
|
placeholder='············'
|
|
id='form-layout-basic-confirm-password'
|
|
type={isConfirmPasswordShown ? 'text' : 'password'}
|
|
helperText='Make sure to type the same password as above'
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: (
|
|
<InputAdornment position='end'>
|
|
<IconButton
|
|
edge='end'
|
|
onClick={handleClickShowConfirmPassword}
|
|
onMouseDown={e => e.preventDefault()}
|
|
aria-label='toggle confirm password visibility'
|
|
>
|
|
<i className={isConfirmPasswordShown ? 'tabler-eye-off' : 'tabler-eye'} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
)
|
|
}
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid size={{ xs: 12 }}>
|
|
<div className='flex items-center justify-between flex-wrap gap-5'>
|
|
<Button variant='contained' type='submit'>
|
|
Get Started!
|
|
</Button>
|
|
<div className='flex items-center justify-center gap-2'>
|
|
<Typography>Already have an account?</Typography>
|
|
<Link href='/' onClick={e => e.preventDefault()} className='text-primary'>
|
|
Log In
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default FormLayoutsBasic
|