#

vincentlu

2025-02-14 992b4d6c4b964082adfabbef2f44dc50698ce8ed

 rsf-admin/src/page/login/index.jsx

@@ -8,6 +8,8 @@
    Typography,
    Tabs,
    Tab,
    useTheme,
    useMediaQuery,
} from '@mui/material';
import {
    useTranslate,
@@ -15,21 +17,30 @@
    useNotify,
} from 'react-admin';
import { LOGIN_BACKGROUND } from '@/config/setting';
import { tenants } from '@/api/auth';
import { getSystemInfo, tenants } from '@/api/auth';
import Login from "./Login";
import Register from "./Register";

const Index = () => {
    const translate = useTranslate();
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));

    const [tab, setTab] = useState(0)
    const [systemInfo, setSystemInfo] = useState({});
    const [tenantList, setTenantList] = useState([]);

    const formPosition = isSmallScreen ? 'middle' : 'right'

    useEffect(() => {
        getSystemInfo().then(data => {
            setSystemInfo(data);
        })
        tenants().then(data => {
            setTenantList(data);
        })
    }, []);


    return (
        <Box
@@ -37,14 +48,13 @@
                display: 'flex',
                flexDirection: 'column',
                minHeight: '100vh',
                alignItems: 'center',
                justifyContent: 'flex-start',
                // justifyContent: 'center',
                alignItems: formPosition === 'middle' ? 'center' : 'flex-end',
                paddingRight: formPosition === 'middle' ? 0 : '6em',
                justifyContent: formPosition === 'middle' ? 'flex-start' : 'center',
                background: `url(/login_bg.jpg)`, // https://unsplash.com/
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
            }
            }
            }}
        >
            <video
                autoPlay
@@ -70,35 +80,41 @@

            <Card sx={{
                width: 400,
                marginTop: '6em',
                marginTop: formPosition === 'middle' ? '6em' : 0,
                zIndex: 1
            }}>
                <div>
                    <AppBar position="static" sx={{ backgroundColor: '#3D4BA7' }}>
                        <Toolbar>
                            <Typography variant="h6" color="inherit">Welcome</Typography>
                            <Typography variant="h6" color="inherit">{translate("page.login.title")}</Typography>
                        </Toolbar>
                    </AppBar>
                </div>

                <Tabs
                    value={tab}
                    onChange={(event, value) => {
                        setTab(value);
                    }}
                    indicatorColor="primary"
                    textColor="primary"
                    variant="fullWidth"
                >
                    <Tab label="Login" sx={{ fontSize: '.8em' }} />
                    <Tab label="Register" sx={{ fontSize: '.8em' }} />
                </Tabs>
                {systemInfo.mode === 'ONLINE' ? (
                    <>
                        <Tabs
                            value={tab}
                            onChange={(event, value) => {
                                setTab(value);
                            }}
                            indicatorColor="primary"
                            textColor="primary"
                            variant="fullWidth"
                        >
                            <Tab label={translate('page.login.tab.login')} sx={{ fontSize: '.8em' }} />
                            <Tab label={translate('page.login.tab.register')} sx={{ fontSize: '.8em' }} />
                        </Tabs>

                {tab === 0 && <Login tenantList={tenantList} />}
                {tab === 1 && <Register tenantList={tenantList} />}
                        {tab === 0 && <Login systemInfo={systemInfo} tenantList={tenantList} />}
                        {tab === 1 && <Register systemInfo={systemInfo} tenantList={tenantList} />}
                    </>
                ) : (
                    <Login systemInfo={systemInfo} tenantList={tenantList} />
                )}

                <Box mt={1} mb={1} sx={{ textAlign: 'center' }}>
                    <Typography variant="caption" align="center">Footer Goes Here</Typography>
                <Box mb={1} sx={{ textAlign: 'center' }}>
                    <Typography variant="caption" align="center">{translate("page.login.footer")}</Typography>
                </Box>
            </Card>
        </Box >