feat: add sidebar and change the style of that
This commit is contained in:
@@ -13,7 +13,7 @@ import {
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CloseCircle, Refresh } from 'iconsax-react';
|
||||
import { CloseSquare, Refresh } from 'iconsax-react';
|
||||
import { PasswordValidationItem } from './PasswordValidation';
|
||||
import { Toast } from '@/components/Toast';
|
||||
import Logo from '@/components/Logo';
|
||||
@@ -67,187 +67,183 @@ export function PasswordSecurity() {
|
||||
}, [password, validPassword]);
|
||||
|
||||
return (
|
||||
<Box sx={{ overflowX: 'hidden', px: { xs: 2, sm: 3 } }}>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'background.paper',
|
||||
width: '100%',
|
||||
maxWidth: '796px',
|
||||
mx: 'auto',
|
||||
px: { xs: 1, sm: 2 },
|
||||
}}
|
||||
<Box
|
||||
sx={{
|
||||
mx: 'auto',
|
||||
backgroundColor: 'background.paper',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box sx={{ width: '100%', height: 1, bgcolor: 'divider' }} />
|
||||
<CardContainer
|
||||
title={t('securityForm.password')}
|
||||
subtitle={t('securityForm.determinePassword')}
|
||||
action={
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleOpen}
|
||||
sx={{
|
||||
mt: { xs: 2, sm: 0 },
|
||||
backgroundColor: 'primary.main',
|
||||
color: 'background.paper',
|
||||
width: { xs: '100%', sm: '142px' },
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{t('securityForm.addPassword')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
px: { xs: 2, sm: 3, md: 4 },
|
||||
py: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
bgcolor: 'background.paper',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Logo />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{ width: '100%', height: '1px', backgroundColor: 'divider' }}
|
||||
/>
|
||||
<Box>
|
||||
<CardContainer
|
||||
title={t('securityForm.password')}
|
||||
subtitle={t('securityForm.determinePassword')}
|
||||
action={
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleOpen}
|
||||
sx={{
|
||||
mt: { xs: 2, sm: 0 },
|
||||
backgroundColor: 'primary.main',
|
||||
color: 'background.paper',
|
||||
width: { xs: '100%', sm: '142px' },
|
||||
textTransform: 'none',
|
||||
}}
|
||||
>
|
||||
{t('securityForm.addPassword')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
|
||||
{changePassword ? (
|
||||
<Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
|
||||
<Typography variant="h6">
|
||||
{t('securityForm.activePassword')}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('securityForm.lastChange')}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
|
||||
>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
<Box sx={{ height: 'auto', py: { xs: 3, sm: 4 } }}>
|
||||
{changePassword ? (
|
||||
<Box sx={{ flexDirection: 'column', px: 2, py: 2 }}>
|
||||
<Typography variant="h6">
|
||||
{t('securityForm.activePassword')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
fullScreen={fullScreen}
|
||||
maxWidth="xs"
|
||||
scroll="body"
|
||||
PaperProps={{ sx: { mx: 1 } }}
|
||||
>
|
||||
<DialogTitle sx={{ p: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseCircle size={24} color="#82B1FF" />
|
||||
</IconButton>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
{t('securityForm.addPassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 3 },
|
||||
}}
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{t('securityForm.lastChange')}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', py: { xs: 4, sm: '43.5px' } }}
|
||||
>
|
||||
<TextField
|
||||
label={t('securityForm.newPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
{t('securityForm.notDeterminedPassword')}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{password && showValidation && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Box sx={{ maxWidth: '364px', width: '100%' }}>
|
||||
<PasswordValidationItem
|
||||
isValid={hasNumber}
|
||||
label={t('securityForm.hasNumber')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasMinLength}
|
||||
label={t('securityForm.hasMinLength')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasUpperAndLower}
|
||||
label={t('securityForm.hasUpperAndLower')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasSpecialChar}
|
||||
label={t('securityForm.hasSpecialChar')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
fullWidth
|
||||
fullScreen={fullScreen}
|
||||
maxWidth="xs"
|
||||
scroll="body"
|
||||
PaperProps={{ sx: { mx: 1 } }}
|
||||
>
|
||||
<DialogTitle sx={{ p: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<IconButton onClick={handleClose}>
|
||||
<CloseSquare size={24} color="#82B1FF" />
|
||||
</IconButton>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
{t('securityForm.addPassword')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
|
||||
<TextField
|
||||
label={t('securityForm.confirmPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
|
||||
variant="contained"
|
||||
onClick={handleShowAlert}
|
||||
disabled={
|
||||
!password || password !== confirmPassword || loading
|
||||
}
|
||||
>
|
||||
{loading ? (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
animation: 'spin 1s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Refresh size="20" color="#fff" />
|
||||
</Box>
|
||||
) : (
|
||||
t('securityForm.confirm')
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Toast
|
||||
color="success"
|
||||
open={showPasswordAlert}
|
||||
onClose={() => setShowPasswordAlert(false)}
|
||||
<DialogContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
px: { xs: 2, sm: 3 },
|
||||
}}
|
||||
>
|
||||
{t('securityForm.alertSuccess')}
|
||||
</Toast>
|
||||
</CardContainer>
|
||||
<TextField
|
||||
label={t('securityForm.newPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
|
||||
{password && showValidation && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Box sx={{ maxWidth: '364px', width: '100%' }}>
|
||||
<PasswordValidationItem
|
||||
isValid={hasNumber}
|
||||
label={t('securityForm.hasNumber')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasMinLength}
|
||||
label={t('securityForm.hasMinLength')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasUpperAndLower}
|
||||
label={t('securityForm.hasUpperAndLower')}
|
||||
/>
|
||||
<PasswordValidationItem
|
||||
isValid={hasSpecialChar}
|
||||
label={t('securityForm.hasSpecialChar')}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
label={t('securityForm.confirmPassword')}
|
||||
type="password"
|
||||
fullWidth
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
error={confirmPassword.length > 0 && !matchPassword}
|
||||
helperText={
|
||||
confirmPassword.length > 0 && !matchPassword
|
||||
? t('securityForm.notCompatibility')
|
||||
: ' '
|
||||
}
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
|
||||
<Button
|
||||
fullWidth
|
||||
sx={{ maxWidth: '364px', height: 48, textTransform: 'none' }}
|
||||
variant="contained"
|
||||
onClick={handleShowAlert}
|
||||
disabled={!password || password !== confirmPassword || loading}
|
||||
>
|
||||
{loading ? (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
animation: 'spin 1s linear infinite',
|
||||
'@keyframes spin': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Refresh size="20" color="#fff" />
|
||||
</Box>
|
||||
) : (
|
||||
t('securityForm.confirm')
|
||||
)}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Toast
|
||||
color="success"
|
||||
open={showPasswordAlert}
|
||||
onClose={() => setShowPasswordAlert(false)}
|
||||
>
|
||||
{t('securityForm.alertSuccess')}
|
||||
</Toast>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContainer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user