#

vincentlu

2026-02-07 c65a357fc8b907af755e1ef6a2c201e31eb71e94

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useState, useRef, useEffect, useMemo } from "react";
import {
    Box,
    AppBar,
    Card,
    Toolbar,
    CircularProgress,
    Typography,
    Tabs,
    Tab,
    useTheme,
    useMediaQuery,
    Button,
} from '@mui/material';
import {
    useTranslate,
    useLogin,
    useNotify,
} from 'react-admin';
import { LOGIN_BACKGROUND, DEFAULT_THEME_MODE } from '@/config/setting';
import Login from "./Login";
 
const Index = () => {
    const translate = useTranslate();
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
    const [tab, setTab] = useState(0)
 
    const formPosition = isSmallScreen ? 'middle' : 'right'
 
 
    return (
        <Box
            sx={{
                display: 'flex',
                flexDirection: 'column',
                minHeight: '100vh',
                alignItems: formPosition === 'middle' ? 'center' : 'flex-end',
                paddingRight: formPosition === 'middle' ? 0 : '6em',
                justifyContent: formPosition === 'middle' ? 'center' : 'center',
                background: `url(/login_bg1.jpg)`, // https://unsplash.com/
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                position: 'relative',
            }}
        >
            <video
                autoPlay
                loop
                muted
                style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    // objectFit: 'cover',
                    // objectFit: 'contain',
                    objectFit: 'fill',
                    // objectFit: 'scale-down',
                    zIndex: 0,
                }}
            >
                {LOGIN_BACKGROUND === 'media' && (
                    <source src="/login_bg.mp4" type="video/mp4" />
                )}
            </video>
 
            <Box
                component="img"
                src="/logo.png"
                alt="RCS logo"
                sx={{
                    position: 'absolute',
                    top: '1rem',
                    left: '0.8rem',
                    height: 26,
                    width: 'auto',
                    zIndex: 2,
                }}
            />
 
            <Card sx={{
                width: 380,
                marginTop: formPosition === 'middle' ? '6em' : 0,
                zIndex: 1,
                bgcolor: DEFAULT_THEME_MODE === 'light' ? '#fff' : '#121212',
                border: 'inherit'
            }}>
                <div>
                    <AppBar position="static" sx={{
                        backgroundColor: '#3D4BA7',
                        border: 'inherit',
                    }}>
                        <Toolbar sx={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}>
                            <Typography variant="h6" color="inherit">{translate("page.login.title")} {"RCS"}</Typography>
                        </Toolbar>
                    </AppBar>
                </div>
 
                <Login />
                <Box mb={1} sx={{ textAlign: 'center' }}>
                    <Typography variant="caption" align="center">{translate("page.login.footer")}</Typography>
                </Box>
            </Card>
        </Box >
    );
};
 
export default Index;