Initial commit
This commit is contained in:
212
src/pages/auth/Login.jsx
Normal file
212
src/pages/auth/Login.jsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Stack,
|
||||
Typography,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
Link
|
||||
} from '@mui/material';
|
||||
import Visibility from '@mui/icons-material/Visibility';
|
||||
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
||||
import BoltIcon from '@mui/icons-material/Bolt';
|
||||
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
|
||||
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
|
||||
|
||||
import Logo from '@/components/Logo';
|
||||
|
||||
export default function Login() {
|
||||
const navigate = useNavigate();
|
||||
const [show, setShow] = useState(false);
|
||||
const [auth, setAuth] = useState('hub.delhi@doormile.in');
|
||||
const [pwd, setPwd] = useState('password123');
|
||||
|
||||
const handleSignIn = () => {
|
||||
navigate('/dashboard');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', minHeight: '100vh', width: '100vw', bgcolor: '#ffffff', overflow: 'hidden' }}>
|
||||
|
||||
{/* Brand Side Panel */}
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
width: { md: '28%', lg: '27%', xl: '25%' },
|
||||
minWidth: '360px',
|
||||
p: 5,
|
||||
color: '#fff',
|
||||
background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
{/* Background Decorative Circles */}
|
||||
<Box sx={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
|
||||
<Box sx={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
|
||||
|
||||
{/* BLACK LOGO REPLACEMENT (Sidebar) */}
|
||||
<Box sx={{ filter: 'brightness(0) invert(0)', display: 'inline-flex' }}>
|
||||
<Logo height={24} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ position: 'relative', my: 'auto' }}>
|
||||
<Typography variant="overline" sx={{ color: 'rgba(255,255,255,0.65)', letterSpacing: '0.12em', fontWeight: 600 }}>
|
||||
Doormile Hub Console
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2, mt: 1, mb: 2, fontSize: { md: '1.8rem', lg: '2.2rem' } }}>
|
||||
Every parcel,
|
||||
<br /> handled with ease.
|
||||
</Typography>
|
||||
<Typography sx={{ color: 'rgba(255,255,255,0.8)', mb: 4, fontSize: '0.9rem', lineHeight: 1.5 }}>
|
||||
Receive parcels, sort them, and send them out for delivery or transfer to another city — all from one simple screen.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={2.5}>
|
||||
{[
|
||||
{ icon: BoltIcon, t: 'We tell you which shelf each parcel goes on' },
|
||||
{ icon: LocalShippingOutlinedIcon, t: 'Scan parcels in as trucks arrive' },
|
||||
{ icon: VerifiedOutlinedIcon, t: 'Keep an eye on cold-storage parcels' }
|
||||
].map((f) => (
|
||||
<Stack key={f.t} direction="row" spacing={1.5} alignItems="center">
|
||||
<Box sx={{ width: 34, height: 34, borderRadius: 2, bgcolor: 'rgba(255,255,255,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<f.icon fontSize="small" />
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontWeight: 500, fontSize: '0.85rem' }}>{f.t}</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', mt: 3 }}>
|
||||
© 2026 Doormile Logistics Pvt. Ltd.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Form Panel */}
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
p: { xs: 3, sm: 6 },
|
||||
bgcolor: '#ffffff'
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth: 420,
|
||||
p: { xs: 3, sm: 4.5 },
|
||||
border: '1px solid #eaeaea',
|
||||
borderRadius: 3,
|
||||
boxShadow: '0px 4px 24px rgba(0, 0, 0, 0.02)'
|
||||
}}
|
||||
>
|
||||
{/* BLACK LOGO REPLACEMENT (Mobile View) */}
|
||||
<Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 3, filter: 'brightness(0)' }}>
|
||||
<Logo />
|
||||
</Box>
|
||||
|
||||
<Typography variant="h4" sx={{ fontWeight: 700, color: '#111111', fontSize: '1.75rem' }}>Hub Sign In</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 4 }}>
|
||||
Sign in to your Doormile Hub operations account.
|
||||
</Typography>
|
||||
|
||||
<Stack spacing={3}>
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
|
||||
Username / Email
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Enter your email"
|
||||
value={auth}
|
||||
onChange={(e) => setAuth(e.target.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600, color: '#444' }}>
|
||||
Password
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
type={show ? 'text' : 'password'}
|
||||
placeholder="Enter your password"
|
||||
value={pwd}
|
||||
onChange={(e) => setPwd(e.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
|
||||
{show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<FormControlLabel
|
||||
control={<Checkbox defaultChecked size="small" sx={{ color: '#C01227', '&.Mui-checked': { color: '#C01227' } }} />}
|
||||
label={<Typography variant="body2" sx={{ color: '#555' }}>Remember me</Typography>}
|
||||
/>
|
||||
<Link href="#" underline="hover" variant="body2" sx={{ color: '#C01227', fontWeight: 600 }}>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
size="large"
|
||||
variant="contained"
|
||||
onClick={handleSignIn}
|
||||
sx={{
|
||||
bgcolor: '#C01227',
|
||||
color: '#fff',
|
||||
py: 1.5,
|
||||
fontWeight: 600,
|
||||
borderRadius: 2,
|
||||
textTransform: 'none',
|
||||
boxShadow: 'none',
|
||||
'&:hover': {
|
||||
bgcolor: '#9E0E20',
|
||||
boxShadow: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
|
||||
<Box sx={{ textAlign: 'center', mt: 1 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
New to Hub Operations?{' '}
|
||||
<Link
|
||||
href="#"
|
||||
onClick={(e) => { e.preventDefault(); navigate('/signup'); }}
|
||||
underline="hover"
|
||||
sx={{ color: '#C01227', fontWeight: 600 }}
|
||||
>
|
||||
Create an account
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user