نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
132
src/components/Authentication/ForgetPassword/Congratulations.js
Normal file
132
src/components/Authentication/ForgetPassword/Congratulations.js
Normal file
@@ -0,0 +1,132 @@
|
||||
import React from 'react';
|
||||
import { Box, TextField, Typography, Button, useTheme } from '@mui/material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Congratulations = ({ emailOrPhone, setEmailOrPhone }) => {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
mt: { xs: 4, sm: 8, md: 2 } // هامش علوي متجاوب
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: '90px',
|
||||
position: 'relative',
|
||||
width: 132,
|
||||
height: 132,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: 139,
|
||||
height: 139,
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 0,
|
||||
backgroundColor: '#FAFAFA'
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
width: 120,
|
||||
height: 120,
|
||||
backgroundColor: '#E9EFFF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/images/hand.png"
|
||||
style={{ width: 60, height: 60, objectFit: 'contain' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
marginTop={3}
|
||||
marginBottom={2}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Congratulations!
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={400}
|
||||
width='390px'
|
||||
marginLeft='20px'
|
||||
sx={{
|
||||
color: '#5F6868',
|
||||
fontSize: {
|
||||
xs: '0.8rem',
|
||||
md: '1.1rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Your password has been successfully updated. Thank you for choosing our service
|
||||
</Typography>
|
||||
|
||||
|
||||
{/* زر التنقل إلى صفحة تسجيل الدخول */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={() => navigate('/login')}
|
||||
sx={{
|
||||
marginTop: '20px',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderRadius: '30px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
height: '52px',
|
||||
padding: '12px',
|
||||
maxWidth: '390px',
|
||||
px: 2,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Congratulations;
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
// EmailInputSection.js
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, TextField, Typography ,useTheme} from '@mui/material';
|
||||
|
||||
const EmailInputSection = ({ emailOrPhone, setEmailOrPhone }) => {
|
||||
const theme = useTheme();
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const slides = [0, 1, 2, 3];
|
||||
|
||||
const handleSend = () => {
|
||||
// عملية الإرسال
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentSlide < slides.length - 1) {
|
||||
setCurrentSlide(prev => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentSlide > 0) {
|
||||
setCurrentSlide(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Box
|
||||
component="img"
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
sx={{
|
||||
width: { xs: '5vh', sm: '7vh' },
|
||||
maxWidth: { xs: '40px', sm: '80px' },
|
||||
height: 'auto',
|
||||
objectFit: 'contain',
|
||||
overflow: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Forget Password
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Enter your email to reset it and regain access to your account.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Email/Phone
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={emailOrPhone}
|
||||
onChange={(e) => setEmailOrPhone(e.target.value)}
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: '#FF914D',
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* send */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleSend}
|
||||
sx={{
|
||||
color:'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderRadius: '30px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
height: '48px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover ,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
|
||||
<Typography
|
||||
textAlign="center"
|
||||
fontWeight={500}
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
mx: 'auto',
|
||||
color: '#969BA7'
|
||||
}}
|
||||
>
|
||||
By log in, I agree to the
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Terms of Service</a> and
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Privacy Policy</a>
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailInputSection;
|
||||
125
src/components/Authentication/ForgetPassword/ForgetFormMain.js
Normal file
125
src/components/Authentication/ForgetPassword/ForgetFormMain.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Stack ,useTheme} from '@mui/material';
|
||||
import Side from './Side';
|
||||
import EmailInputSection from './EmailInputSection';
|
||||
import OtpVerification from './OtpVerification';
|
||||
import NewPassword from './NewPassword';
|
||||
import Congratulations from './Congratulations';
|
||||
|
||||
|
||||
|
||||
const ForgetForm = () => {
|
||||
const [emailOrPhone, setEmailOrPhone] = useState('');
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const theme = useTheme();
|
||||
const slides = [
|
||||
{ component: EmailInputSection, title: "Email Verification" },
|
||||
{ component: OtpVerification, title: "OTP Verification" },
|
||||
{ component: NewPassword, title: "New Password" },
|
||||
{ component: Congratulations, title: "Congratulations" }
|
||||
];
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentSlide < slides.length - 1) {
|
||||
setCurrentSlide(prev => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentSlide > 0) {
|
||||
setCurrentSlide(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const CurrentComponent = slides[currentSlide].component;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#fff',
|
||||
|
||||
}}
|
||||
>
|
||||
{/* ✅ Sidebar يظهر فقط من sm+ */}
|
||||
<Box sx={{ width: { sm: '40%', xs: '0%' }, display: { xs: 'none', sm: 'block' } }}>
|
||||
<Side currentStepIndex={currentSlide} onNext={handleNext} onBack={handleBack} />
|
||||
</Box>
|
||||
|
||||
{/* ✅ Form */}
|
||||
<Box
|
||||
sx={{
|
||||
width: { sm: '60%' },
|
||||
minHeight: { xs: '100vh', sm: '130vh', md: '90vh' },
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
paddingTop: { xs: 2, sm: 4 },
|
||||
paddingLeft: { xs: 2, sm: 4 },
|
||||
backgroundColor: '#fff',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 686,
|
||||
pr: { xs: 3, sm: 2, md: 1 },
|
||||
pt: { xs: 2, sm: 4, md: 1 },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2} alignItems="flex-start">
|
||||
|
||||
|
||||
{/* إظهار المكون الحالي فقط */}
|
||||
<CurrentComponent
|
||||
emailOrPhone={emailOrPhone}
|
||||
setEmailOrPhone={setEmailOrPhone}
|
||||
/>
|
||||
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* ✅ مؤشر الشرائح السفلي */}
|
||||
<Box
|
||||
sx={{
|
||||
position: { xs: 'absolute', sm: 'absolute' },
|
||||
bottom: { xs: '5%', sm: '-1%', md: '2%' },
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
width: '80%',
|
||||
maxWidth: 600,
|
||||
justifyContent: 'center',
|
||||
height: {
|
||||
xs: 3,
|
||||
sm: 5,
|
||||
md: 6,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{slides.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
width: '100vh',
|
||||
height: 5,
|
||||
bgcolor: index === currentSlide ? theme.palette.primary.main : 'rgba(0, 0, 0, 0.2)',
|
||||
borderRadius: 2,
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.3s',
|
||||
}}
|
||||
// onClick={() => setCurrentSlide(index)} // يمكنك تفعيلها لاحقًا
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgetForm;
|
||||
217
src/components/Authentication/ForgetPassword/NewPassword.js
Normal file
217
src/components/Authentication/ForgetPassword/NewPassword.js
Normal file
@@ -0,0 +1,217 @@
|
||||
// EmailInputSection.js
|
||||
import React, { useState } from 'react';
|
||||
import { Box, Button, TextField, Typography } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { IconButton, InputAdornment } from '@mui/material';
|
||||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
||||
import { VisibilityOutlined } from '@mui/icons-material';
|
||||
|
||||
const EmailInputSection = ({ emailOrPhone, setEmailOrPhone }) => {
|
||||
const theme = useTheme();
|
||||
const handleTogglePassword = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const slides = [0, 1, 2, 3];
|
||||
|
||||
const handleSend = () => {
|
||||
// عملية الإرسال
|
||||
};
|
||||
const handleToggleConfirmPassword = () => {
|
||||
setShowConfirmPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentSlide < slides.length - 1) {
|
||||
setCurrentSlide(prev => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentSlide > 0) {
|
||||
setCurrentSlide(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Box
|
||||
component="img"
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
sx={{
|
||||
width: { xs: '5vh', sm: '7vh' },
|
||||
maxWidth: { xs: '40px', sm: '80px' },
|
||||
height: 'auto',
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Create a New Password
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Enter your email to reset it and regai access to your account.
|
||||
</Typography>
|
||||
|
||||
{/* Password Input */}
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleTogglePassword} edge="end">
|
||||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Confirm Password Input */}
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Confirm Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
placeholder="Confirm your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: '#FF914D',
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleToggleConfirmPassword} edge="end">
|
||||
{showConfirmPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* send */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleSend}
|
||||
sx={{
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderRadius: '30px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
height: '48px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover ,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
<Typography
|
||||
textAlign="center"
|
||||
fontWeight={500}
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
mx: 'auto',
|
||||
color: '#969BA7'
|
||||
}}
|
||||
>
|
||||
By log in, I agree to the
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Terms of Service</a> and
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Privacy Policy</a>
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailInputSection;
|
||||
183
src/components/Authentication/ForgetPassword/OtpVerification.js
Normal file
183
src/components/Authentication/ForgetPassword/OtpVerification.js
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Box, TextField, Typography, Button, Stack ,useTheme} from '@mui/material';
|
||||
|
||||
const OtpVerification = () => {
|
||||
const [emailOrPhone, setEmailOrPhone] = useState('');
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const slides = [0, 1, 2, 3];
|
||||
|
||||
const [otp, setOtp] = useState(Array(7).fill(''));
|
||||
const inputRefs = useRef(Array(7).fill().map(() => React.createRef()));
|
||||
|
||||
const handleSend = () => {
|
||||
const otpCode = otp.join('');
|
||||
console.log('Submitted OTP:', otpCode);
|
||||
// عملية التحقق من الكود
|
||||
};
|
||||
|
||||
const handleOtpChange = (e, index) => {
|
||||
const value = e.target.value;
|
||||
if (!/^[0-9]?$/.test(value)) return;
|
||||
|
||||
const newOtp = [...otp];
|
||||
newOtp[index] = value;
|
||||
setOtp(newOtp);
|
||||
|
||||
if (value && index < 6) {
|
||||
inputRefs.current[index + 1].current.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e, index) => {
|
||||
if (e.key === 'Backspace' && !otp[index] && index > 0) {
|
||||
inputRefs.current[index - 1].current.focus();
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentSlide < slides.length - 1) {
|
||||
setCurrentSlide(prev => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentSlide > 0) {
|
||||
setCurrentSlide(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<Box
|
||||
component="img"
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
sx={{
|
||||
width: { xs: '5vh', sm: '7vh' },
|
||||
maxWidth: { xs: '40px', sm: '80px' },
|
||||
height: 'auto',
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Enter OTP Verification
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Kindly enter the OTP code sent to your registered email/phone for account verification.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={{ xs: 0, sm: 1, md: 1.5 }}
|
||||
justifyContent={{ xs: 'center', sm: 'center', md: 'flex-start' }}
|
||||
flexWrap="wrap"
|
||||
sx={{
|
||||
width: '100%',
|
||||
px: { xs: 0, sm: '0.5rem', md: '1.5rem' },
|
||||
gap: { xs: '1.5rem', sm: '1.5rem', md: '1rem' }
|
||||
}}
|
||||
>
|
||||
{otp.map((digit, index) => (
|
||||
<TextField
|
||||
key={index}
|
||||
inputRef={inputRefs.current[index]}
|
||||
value={digit}
|
||||
onChange={(e) => handleOtpChange(e, index)}
|
||||
onKeyDown={(e) => handleKeyDown(e, index)}
|
||||
inputProps={{
|
||||
maxLength: 1,
|
||||
style: {
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
width: { xs: '3rem', sm: '3.25rem', md: '4rem' },
|
||||
height: { xs: '3rem', sm: '3.25rem', md: '4rem' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '0.5rem',
|
||||
height: '100%', // تأكيد تطابق الطول
|
||||
'& fieldset': {
|
||||
borderColor: '#ccc',
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
'& .MuiInputBase-input': {
|
||||
color: theme.palette.primary.main,
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
padding: 0,
|
||||
height: '100%',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleSend}
|
||||
sx={{
|
||||
color:'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderRadius: '30px',
|
||||
textTransform: 'none',
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
width: '95%',
|
||||
height: '48px',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover ,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
|
||||
|
||||
<Typography
|
||||
textAlign="center"
|
||||
fontWeight={500}
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
mx: 'auto',
|
||||
color: '#969BA7'
|
||||
}}
|
||||
>
|
||||
By log in, I agree to the
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Terms of Service</a> and
|
||||
<a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Privacy Policy</a>
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtpVerification;
|
||||
187
src/components/Authentication/ForgetPassword/Side.js
Normal file
187
src/components/Authentication/ForgetPassword/Side.js
Normal file
@@ -0,0 +1,187 @@
|
||||
import React from 'react';
|
||||
import { Box, Typography, Stack, Button ,useTheme } from '@mui/material';
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
||||
|
||||
const steps = [
|
||||
{
|
||||
title: 'Forget Password',
|
||||
description: 'Provide an email to change your password',
|
||||
icon: '/images/icons/key.png',
|
||||
},
|
||||
{
|
||||
title: 'Verify your email',
|
||||
description: 'Enter your otp verification',
|
||||
icon: '/images/icons/email.png',
|
||||
},
|
||||
{
|
||||
title: 'Create a new password',
|
||||
description: 'Create your a new password',
|
||||
icon: '/images/icons/pen.png',
|
||||
},
|
||||
{
|
||||
title: 'Welcome to KitchPlus app',
|
||||
description: 'Get up and running in 3 minutes',
|
||||
icon: '/images/icons/rocket.png',
|
||||
},
|
||||
];
|
||||
|
||||
const Side = ({ currentStepIndex, onNext, onBack }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: '100vh', sm: '130vh', md: '87.5vh' },
|
||||
backgroundColor: '#FAFAFA',
|
||||
px: { xs: 2, sm: 4 },
|
||||
py: 5,
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" fontWeight={700} mb={2}>
|
||||
Step for change your password
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={4}>
|
||||
Instructions for secure password modification. Follow simple steps for password change.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={6} position="relative" sx={{ ml: 3 }}>
|
||||
{steps.map((step, index) => (
|
||||
<Box key={index} display="flex" alignItems="flex-start" gap={2} position="relative">
|
||||
{index !== steps.length - 1 && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '3.8vh',
|
||||
top: '6vh',
|
||||
width: '2px',
|
||||
height: 'calc(100% + 24px)',
|
||||
backgroundColor: '#e0e0e0',
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: 50,
|
||||
height: 53,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
width: 60,
|
||||
height: 63,
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
zIndex: 0,
|
||||
backgroundImage:
|
||||
index === currentStepIndex
|
||||
? 'linear-gradient(0deg, #FF914D, #F3F3F3 )'
|
||||
: 'none',
|
||||
backgroundColor: index === currentStepIndex ? 'transparent' : '#F3F3F3',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: 50,
|
||||
height: 53,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={step.icon}
|
||||
alt={step.title}
|
||||
style={{ width: 24, height: 24, objectFit: 'contain' }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle1" sx={{ fontSize: '16px', fontWeight: 600 }}>
|
||||
{step.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ color: '#A0A0A0', fontSize: '12px', fontWeight: 500 }}>
|
||||
{step.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
{/* ... (بقية محتوى الـ Side كما هو بدون تغيير) ... */}
|
||||
|
||||
{/* أزرار التنقل */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 2,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
width: '90%',
|
||||
maxWidth: 600,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Back */}
|
||||
<Button
|
||||
variant="text"
|
||||
startIcon={<ArrowBackIosIcon sx={{ fontSize: '16px' }} />}
|
||||
onClick={onBack}
|
||||
disabled={currentStepIndex === 0}
|
||||
sx={{
|
||||
color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
|
||||
minWidth: '100px',
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
textTransform: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.primary.main
|
||||
}
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
{/* Next */}
|
||||
<Button
|
||||
variant="text"
|
||||
endIcon={<ArrowForwardIosIcon sx={{ fontSize: '16px' }} />}
|
||||
onClick={onNext}
|
||||
disabled={currentStepIndex === steps.length - 1}
|
||||
sx={{
|
||||
color: currentStepIndex === steps.length - 1 ? '#C2C2C2' : '#6B7283',
|
||||
minWidth: '100px',
|
||||
fontWeight: 400,
|
||||
fontSize: '16px',
|
||||
textTransform: 'none',
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.primary.main,
|
||||
transition: 'all 0.4s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Side;
|
||||
349
src/components/Authentication/SignUp_In/LoginForm.js
Normal file
349
src/components/Authentication/SignUp_In/LoginForm.js
Normal file
@@ -0,0 +1,349 @@
|
||||
import React, { useState } from 'react';
|
||||
import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
||||
import { VisibilityOutlined } from '@mui/icons-material';
|
||||
import SidePanel from './SidePanel'; // استدعاء SidePanel من نفس المجلد أو حسب المسار المناسب
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
const LoginForm = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const handleTogglePassword = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
const handleLogin = () => {
|
||||
// بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه
|
||||
navigate('/dashboard');
|
||||
};
|
||||
return (
|
||||
|
||||
|
||||
<Box
|
||||
bgcolor={"background.default"}
|
||||
color={"text.primary"}
|
||||
display="flex"
|
||||
sx={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* SidePanel ثابت */}
|
||||
<SidePanel />
|
||||
|
||||
{/* Login Content */}
|
||||
<Box
|
||||
sx={{
|
||||
marginLeft: { xs: 0, sm: '50%' },
|
||||
width: { xs: '100%', sm: '50%' ,md:'70%'},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
sx={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
minHeight: '10vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'sticky',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: {
|
||||
xs: '120%',
|
||||
sm: '100%',
|
||||
md: '150%',
|
||||
lg: '150%'
|
||||
},
|
||||
maxWidth: '600px'
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2}>
|
||||
|
||||
{/* Logo */}
|
||||
<Box>
|
||||
<img
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
style={{
|
||||
width: '4vw',
|
||||
maxWidth: '80px',
|
||||
height: 'auto',
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Enter your username and password to access your account securely. Welcome back to our service!
|
||||
</Typography>
|
||||
|
||||
{/* Email Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Email
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Password Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||||
Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||||
'& input::placeholder': { color: '#969BA7' },
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleTogglePassword} edge="end">
|
||||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Login Button */}
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={handleLogin}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '14px', sm: '16px' },
|
||||
height: { xs: '45px', sm: '52px' },
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover
|
||||
}
|
||||
}}
|
||||
>
|
||||
Log in
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Divider */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
<Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
|
||||
Or
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
</Box>
|
||||
|
||||
{/* Google Button */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
textTransform: 'none',
|
||||
gap: 1,
|
||||
borderColor: '#E6E6E6',
|
||||
color: 'black',
|
||||
'&:hover': {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
|
||||
alt="Google"
|
||||
style={{ width: 25, height: 25 }}
|
||||
/>
|
||||
</Box>
|
||||
Login with Google
|
||||
</Button>
|
||||
|
||||
{/* Facebook Button */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
textTransform: 'none',
|
||||
gap: 1,
|
||||
borderColor: '#E6E6E6',
|
||||
color: 'black',
|
||||
'&:hover': {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
|
||||
alt="Facebook"
|
||||
style={{ width: 25, height: 25 }}
|
||||
/>
|
||||
</Box>
|
||||
Login with Facebook
|
||||
</Button>
|
||||
|
||||
|
||||
{/* Register Link */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
Don’t have an account?{' '}
|
||||
<Link
|
||||
to="/register"
|
||||
style={{
|
||||
color: '#2261FF',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</Link>
|
||||
</Typography>
|
||||
|
||||
{/* ForgetPassword Link */}
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
Did you forget the password?{' '}
|
||||
<Link
|
||||
to="/forget"
|
||||
style={{
|
||||
color: '#2261FF',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Forget Password
|
||||
</Link>
|
||||
</Typography>
|
||||
|
||||
{/* Terms */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 5
|
||||
}}
|
||||
>
|
||||
By logging in, I agree to the{' '}
|
||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
||||
Terms of Service
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
||||
Privacy Policy
|
||||
</a>.
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
409
src/components/Authentication/SignUp_In/RegisterForm.js
Normal file
409
src/components/Authentication/SignUp_In/RegisterForm.js
Normal file
@@ -0,0 +1,409 @@
|
||||
import React, { useState } from 'react';
|
||||
import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
||||
import { VisibilityOutlined } from '@mui/icons-material';
|
||||
import SidePanel from './SidePanel';
|
||||
import { Link } from 'react-router-dom';
|
||||
const Register = () => {
|
||||
const theme = useTheme();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
const handleTogglePassword = () => {
|
||||
setShowPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleToggleConfirmPassword = () => {
|
||||
setShowConfirmPassword((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box bgcolor={"background.default"} color={"text.primary"} display="flex" sx={{
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': {
|
||||
display: 'none',
|
||||
},
|
||||
}}>
|
||||
{/* SidePanel ثابت */}
|
||||
|
||||
<SidePanel />
|
||||
|
||||
{/* Login Content */}
|
||||
<Box
|
||||
sx={{
|
||||
marginLeft: { xs: 0, sm: '50%' },
|
||||
width: { xs: '100%', sm: '50%' },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
paddingTop={4}
|
||||
paddingBottom={4}
|
||||
paddingLeft={2}
|
||||
paddingRight={2}
|
||||
sx={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
minHeight: '10vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'sticky',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: {
|
||||
xs: '120%',
|
||||
sm: '100%',
|
||||
md: '120%',
|
||||
lg: '120%'
|
||||
},
|
||||
maxWidth: '600px'
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2}>
|
||||
|
||||
{/* Logo */}
|
||||
<Box>
|
||||
<img
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
style={{
|
||||
width: '4vw',
|
||||
maxWidth: '80px',
|
||||
height: 'auto',
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="h4"
|
||||
fontWeight={700}
|
||||
sx={{
|
||||
fontSize: {
|
||||
xs: '1.8rem',
|
||||
sm: '2rem',
|
||||
md: '2.2rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Register
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
fontWeight={500}
|
||||
sx={{ pb: 1 }}
|
||||
>
|
||||
Please fill out the registration form with accurate information to
|
||||
create your account successfully.
|
||||
</Typography>
|
||||
|
||||
{/* Email Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</Typography>
|
||||
<TextField
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Password Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: theme.palette.primary.main,
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleTogglePassword} edge="end">
|
||||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Confirm Password Input */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="black"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: '16px'
|
||||
}}
|
||||
>
|
||||
Confirm Password
|
||||
</Typography>
|
||||
<TextField
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
placeholder="Confirm your password"
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
autoComplete="new-password"
|
||||
sx={{
|
||||
'& input': {
|
||||
fontWeight: 500,
|
||||
fontSize: '15px'
|
||||
},
|
||||
'& input::placeholder': {
|
||||
color: '#969BA7'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: '10px',
|
||||
transition: '0.3s',
|
||||
'&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
|
||||
borderColor: '#FF914D',
|
||||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||||
borderColor: '#3f51b5',
|
||||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||||
},
|
||||
'& input::-ms-reveal, & input::-ms-clear': {
|
||||
display: 'none',
|
||||
},
|
||||
}}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={handleToggleConfirmPassword} edge="end">
|
||||
{showConfirmPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Login Button */}
|
||||
<Box sx={{ pt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontSize: {
|
||||
xs: '14px',
|
||||
sm: '16px'
|
||||
},
|
||||
height: {
|
||||
xs: '45px',
|
||||
sm: '52px'
|
||||
},
|
||||
borderRadius: '50px',
|
||||
textTransform: 'none',
|
||||
color: 'white',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.hover
|
||||
}
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Divider */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
color: 'black'
|
||||
}}
|
||||
>
|
||||
Or
|
||||
</Typography>
|
||||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||||
</Box>
|
||||
|
||||
{/* Google Button */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
textTransform: 'none',
|
||||
gap: 1,
|
||||
borderColor: '#E6E6E6',
|
||||
color: 'black',
|
||||
'&:hover': {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
|
||||
alt="Google"
|
||||
style={{ width: 25, height: 25 }}
|
||||
/>
|
||||
</Box>
|
||||
Login with Google
|
||||
</Button>
|
||||
|
||||
{/* Facebook Button */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
borderRadius: '50px',
|
||||
height: '50px',
|
||||
textTransform: 'none',
|
||||
gap: 1,
|
||||
borderColor: '#E6E6E6',
|
||||
color: 'black',
|
||||
'&:hover': {
|
||||
borderColor: 'black',
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
|
||||
alt="Facebook"
|
||||
style={{ width: 25, height: 25 }}
|
||||
/>
|
||||
</Box>
|
||||
Login with Facebook
|
||||
</Button>
|
||||
|
||||
{/* login Link */}
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontSize: '16px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 3
|
||||
}}
|
||||
>
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
to="/login"
|
||||
style={{
|
||||
color: '#2261FF',
|
||||
textDecoration: 'none'
|
||||
}}
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</Typography>
|
||||
|
||||
{/* Terms */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
textAlign: 'center',
|
||||
color: '#969BA7',
|
||||
pt: 5
|
||||
}}
|
||||
>
|
||||
By log in, I agree to the and {' '}
|
||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
||||
Terms of Service
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
<a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
|
||||
Privacy Policy
|
||||
</a>.
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
194
src/components/Authentication/SignUp_In/SidePanel.js
Normal file
194
src/components/Authentication/SignUp_In/SidePanel.js
Normal file
@@ -0,0 +1,194 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
|
||||
import {
|
||||
Button,
|
||||
Typography,
|
||||
Stack,
|
||||
Box
|
||||
} from '@mui/material';
|
||||
|
||||
import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; // استيراد أيقونة السهم
|
||||
|
||||
const SidePanel = ({ setMode, mode }) => {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
image: '/images/waitress3.png',
|
||||
title: "Welcome to our cutting-edge postal application,",
|
||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
||||
},
|
||||
{
|
||||
image: '/images/waitress3.png',
|
||||
title: "Second Slide Title",
|
||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
||||
},
|
||||
{
|
||||
image: '/images/waitress3.png',
|
||||
title: "Third Slide Title",
|
||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
||||
},
|
||||
{
|
||||
image: '/images/waitress3.png',
|
||||
title: "Fourth Slide Title",
|
||||
description: "Welcome to our cutting-edge postal application, where sending and receiving mail has never been more convenient and efficient."
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [slides.length]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
width: { sm: '50%' },
|
||||
position: 'fixed',
|
||||
height: '100vh',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
padding={2}
|
||||
sx={{
|
||||
display: { xs: "none", sm: "block" },
|
||||
position: 'sticky',
|
||||
height: 'calc(102vh - 40px)', // لضمان ملاءمته للشاشة
|
||||
}}
|
||||
>
|
||||
|
||||
<Stack spacing={2} sx={{ width: '100%', height: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '20px',
|
||||
|
||||
}}
|
||||
>
|
||||
{/* الصورة الحالية */}
|
||||
<img
|
||||
src={slides[currentSlide].image}
|
||||
alt={`Slide ${currentSlide + 1}`}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* مربع النص في الأسفل */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: {
|
||||
md: '37vh', // الافتراضي للشاشات الصغيرة
|
||||
// xs: '5vh',
|
||||
sm: '42vh',// عندما تكون الشاشة متوسطة أو أكبر
|
||||
lg: '31vh', // من 1200px إلى أقل من 1536px
|
||||
|
||||
},
|
||||
|
||||
bgcolor: 'rgba(0, 0, 0, 0.2)',
|
||||
color: 'white',
|
||||
borderBottomLeftRadius: '20px',
|
||||
borderBottomRightRadius: '20px',
|
||||
p: 3,
|
||||
boxSizing: 'border-box',
|
||||
boxShadow: '0px -40px 20px rgba(0, 0, 0, 0.2)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
onClick={() => window.open('https://www.google.com', '_blank')}
|
||||
sx={{
|
||||
|
||||
mb: 1,
|
||||
bgcolor: 'rgba(255, 255, 255, 0.24)',
|
||||
color: 'white',
|
||||
textTransform: 'none',
|
||||
borderRadius: '12px', // زاوية منحنية
|
||||
display: 'flex', // لتوزيع الأيقونة والنص بشكل أفقي
|
||||
alignItems: 'center', // لضبط الأيقونة والنص في المنتصف
|
||||
padding: '6px 20px', // يمكن تعديل المسافة حول النص والأيقونة
|
||||
borderRadius: '50px',
|
||||
fontSize: '16px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
|
||||
>
|
||||
KITCHPLUS
|
||||
{/* إضافة أيقونة السهم مع تعديل زاوية الدوران */}
|
||||
<ArrowForwardIcon sx={{ ml: 1, transform: 'rotate(-45deg)' }} /> {/* تعديل زاوية السهم */}
|
||||
</Button>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
wordBreak: 'break-word',
|
||||
fontSize: '120%',
|
||||
fontWeight: 400,
|
||||
}}
|
||||
>
|
||||
{slides[currentSlide].description}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* مؤشرات الشرائح */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: '1vh', // جعل المؤشرات تحت النص
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
justifyContent: 'center', // تأكد من أن المؤشرات تأخذ عرض الصورة بالكامل
|
||||
}}
|
||||
>
|
||||
{slides.map((_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
width: '20%',
|
||||
height: 5,
|
||||
bgcolor: index === currentSlide ? 'white' : 'rgba(255, 255, 255, 0.5)',
|
||||
borderRadius: 2,
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.3s',
|
||||
}}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box position="fixed">
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default SidePanel;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم