| | |
| | | export const OPERATE_MODE = 'undoable'; // pessimistic | optimistic(tip) | undoable |
| | | |
| | | export const EDIT_MODE = 'pessimistic'; // pessimistic | undoable |
| | | |
| | | export const LOGIN_BACKGROUND = 'image'; // image | media |
| | |
| | | import * as React from 'react'; |
| | | import { useState } from 'react'; |
| | | import { useLocation } from 'react-router-dom'; |
| | | |
| | | import { |
| | | Avatar, |
| | | Box, |
| | |
| | | useLogin, |
| | | useNotify, |
| | | } from 'react-admin'; |
| | | import { LOGIN_BACKGROUND } from '@/config/setting'; |
| | | |
| | | const Login = () => { |
| | | const [loading, setLoading] = useState(false); |
| | |
| | | |
| | | return ( |
| | | <Form onSubmit={handleSubmit} noValidate> |
| | | {/* https://unsplash.com/ */} |
| | | <Box |
| | | sx={{ |
| | | display: 'flex', |
| | |
| | | backgroundSize: 'cover', |
| | | }} |
| | | > |
| | | {/* https://unsplash.com/ */} |
| | | <Card sx={{ minWidth: 300, marginTop: '6em', backgroundColor: '#fff' }}> |
| | | <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> |
| | | <Card sx={{ minWidth: 300, marginTop: '6em', zIndex: 1 }}> |
| | | <Box |
| | | sx={{ |
| | | margin: '1em', |