RestaurantDash/src/components/Authentication/ForgetPassword/NewPassword.js

// 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&nbsp;
                <a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Terms of Service</a> and&nbsp;
                <a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Privacy Policy</a>
            </Typography>
        </>
    );
};

export default EmailInputSection;