From 5db7ca2bfe4b3093121a2dca4a9366a75015961f Mon Sep 17 00:00:00 2001
From: vincentlu <t1341870251@gmail.com>
Date: 星期五, 07 二月 2025 15:58:22 +0800
Subject: [PATCH] #
---
/dev/null | 195 ------------------------------------------------
rsf-admin/src/page/login/index.jsx | 18 +++-
rsf-admin/src/config/setting.js | 2
3 files changed, 13 insertions(+), 202 deletions(-)
diff --git a/rsf-admin/src/config/setting.js b/rsf-admin/src/config/setting.js
index 8a8f2a8..e82fd01 100644
--- a/rsf-admin/src/config/setting.js
+++ b/rsf-admin/src/config/setting.js
@@ -35,6 +35,6 @@
export const EDIT_MODE = 'pessimistic'; // pessimistic | undoable
-export const LOGIN_BACKGROUND = 'image'; // image | media
+export const LOGIN_BACKGROUND = 'media'; // image | media
export const CUSTOM_PAGES_DATA_INTERVAL = 1000;
\ No newline at end of file
diff --git a/rsf-admin/src/page/login/index.jsx b/rsf-admin/src/page/login/index.jsx
index 6a70e7a..49f801c 100644
--- a/rsf-admin/src/page/login/index.jsx
+++ b/rsf-admin/src/page/login/index.jsx
@@ -8,6 +8,8 @@
Typography,
Tabs,
Tab,
+ useTheme,
+ useMediaQuery,
} from '@mui/material';
import {
useTranslate,
@@ -21,9 +23,13 @@
const Index = () => {
const translate = useTranslate();
+ const theme = useTheme();
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const [tab, setTab] = useState(0)
const [tenantList, setTenantList] = useState([]);
+
+ const formPosition = isSmallScreen ? 'middle' : 'right'
useEffect(() => {
tenants().then(data => {
@@ -31,20 +37,20 @@
})
}, []);
+
return (
<Box
sx={{
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,7 +76,7 @@
<Card sx={{
width: 400,
- marginTop: '6em',
+ marginTop: formPosition === 'middle' ? '6em' : 0,
zIndex: 1
}}>
<div>
diff --git a/rsf-admin/src/page/login/index2.jsx b/rsf-admin/src/page/login/index2.jsx
deleted file mode 100644
index 634211a..0000000
--- a/rsf-admin/src/page/login/index2.jsx
+++ /dev/null
@@ -1,195 +0,0 @@
-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,
- SelectInput,
-} from 'react-admin';
-import { LOGIN_BACKGROUND } from '@/config/setting';
-import { tenants } from '@/api/auth';
-
-const Login = () => {
- const [loading, setLoading] = useState(false);
- const translate = useTranslate();
-
- const notify = useNotify();
- const login = useLogin();
- const location = useLocation();
-
- const [tenantList, setTenantList] = React.useState([]);
- const [tenantId, setTenantId] = React.useState(null);
-
- React.useEffect(() => {
- tenants().then(data => {
- setTenantList(data);
- if (data.length > 0) {
- setTenantId(data[0].id);
- }
- })
- }, []);
-
- React.useEffect(() => {
- console.log(tenantId);
- }, [tenantId]);
-
- const handleSubmit = (auth) => {
- setLoading(true);
- // js native confirm && root
- 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>
- {/* https://unsplash.com/ */}
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'column',
- minHeight: '100vh',
- alignItems: 'center',
- justifyContent: 'flex-start',
- // justifyContent: 'center',
- background: `url(/login_bg.jpg)`,
- backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover',
- }}
- >
- <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',
- 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' }}>
- <SelectInput
- label="page.login.tenant"
- source="tenantId"
- choices={tenantList.map(item => ({
- id: item.id,
- name: item.name
- }))}
- validate={required()}
- value={tenantId}
- onChange={e => setTenantId(e.target.value)}
- />
- </Box>
- <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;
--
Gitblit v1.9.1