#

luxiaotao1123

2024-09-19 c993b0005df6cccdc8d701a16493eb40fb4f4c73

#

 zy-acs-flow/public/login_bg.jpg

 zy-acs-flow/public/login_bg1.jpg

 zy-acs-flow/public/login_bg11.jpg

 zy-acs-flow/public/login_bg12.jpg

 zy-acs-flow/public/login_bg223.jpg

 zy-acs-flow/public/login_bg3.jpg

 zy-acs-flow/public/login_bg66.jpg

 zy-acs-flow/public/login_bg788.jpg

 zy-acs-flow/src/App.jsx

@@ -56,7 +56,7 @@
        defaultTheme={DEFAULT_THEME_MODE}
        i18nProvider={i18nProvider}
        dataProvider={DataProvider(DATA_PROVIDER_SPRING)}
        // loginPage={Login}
        loginPage={Login}
        dashboard={Dashboard}
      >
        {permissions => (

 zy-acs-flow/src/page/login/Login.jsx

@@ -1,10 +1,136 @@
import * as React from 'react';
import { useState } from 'react';
import { useLocation } from 'react-router-dom';

import {
    Avatar,
    Box,
    Button,
    Card,
    CardActions,
    CircularProgress,
} from '@mui/material';
import LockIcon from '@mui/icons-material/Lock';
import {
    Form,
    required,
    TextInput,
    useTranslate,
    useLogin,
    useNotify,
} from 'react-admin';

const Login = () => {
    return (
        <>
            <h1>Login</h1>
        </>
    )
}
    const [loading, setLoading] = useState(false);
    const translate = useTranslate();

export default Login;
    const notify = useNotify();
    const login = useLogin();
    const location = useLocation();

    const handleSubmit = (auth) => {
        setLoading(true);
        login(
            auth,
            location.state ? (location.state).nextPathname : '/'
        ).catch((error) => {
            setLoading(false);
            notify(
                typeof error === 'string'
                    ? error
                    : typeof error === 'undefined' || !error.message
                      ? 'ra.auth.sign_in_error'
                      : error.message,
                {
                    type: 'error',
                    messageArgs: {
                        _:
                            typeof error === 'string'
                                ? error
                                : error && error.message
                                  ? error.message
                                  : undefined,
                    },
                }
            );
        });
    };

    return (
        <Form onSubmit={handleSubmit} noValidate>
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    minHeight: '100vh',
                    alignItems: 'center',
                    justifyContent: 'flex-start',
                    background: `url(/login_bg.jpg)`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                }}
            >
                {/* https://unsplash.com/ */}
                <Card sx={{ minWidth: 300, marginTop: '6em', backgroundColor: '#fff' }}>
                    <Box
                        sx={{
                            margin: '1em',
                            display: 'flex',
                            justifyContent: 'center',
                        }}
                    >
                        <Avatar sx={{ bgcolor: 'secondary.main' }}>
                            <LockIcon />
                        </Avatar>
                    </Box>
                    <Box
                        sx={{
                            marginTop: '1em',
                            display: 'flex',
                            justifyContent: 'center',
                            color: theme => theme.palette.grey[500],
                        }}
                    >
                        Hint: root / 123456
                    </Box>
                    <Box sx={{ padding: '0 1em 1em 1em' }}>
                        <Box sx={{ marginTop: '1em' }}>
                            <TextInput
                                autoFocus
                                source="username"
                                label={translate('ra.auth.username')}
                                disabled={loading}
                                validate={required()}
                            />
                        </Box>
                        <Box sx={{ marginTop: '1em' }}>
                            <TextInput
                                source="password"
                                label={translate('ra.auth.password')}
                                type="password"
                                disabled={loading}
                                validate={required()}
                            />
                        </Box>
                    </Box>
                    <CardActions sx={{ padding: '0 1em 1em 1em' }}>
                        <Button
                            variant="contained"
                            type="submit"
                            color="primary"
                            disabled={loading}
                            fullWidth
                        >
                            {loading && (
                                <CircularProgress size={25} thickness={2} />
                            )}
                            {translate('ra.auth.sign_in')}
                        </Button>
                    </CardActions>
                </Card>
            </Box>
        </Form>
    );
};

export default Login;