132 lines
4.4 KiB
JavaScript
132 lines
4.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate } from "react-router-dom";
|
|
import Button from '@mui/material/Button';
|
|
import yzs from "./business/request.js";
|
|
import styles from './LoginPage.module.css';
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
|
|
import logo from './assets/logo.png';
|
|
import { Container, Tab, Box } from '@mui/material';
|
|
import TabPanel from '@mui/lab/TabPanel';
|
|
import { TabList } from '@mui/lab';
|
|
import TabContext from '@mui/lab/TabContext';
|
|
import DynamicCodeForm from './components/DynamicCodeForm.js';
|
|
import PasswordForm from './components/PasswordForm.js';
|
|
import { useCookies } from 'react-cookie';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
|
|
const theme = createTheme({
|
|
status: {
|
|
danger: '#e53e3e',
|
|
},
|
|
palette: {
|
|
primary: {
|
|
main: '#FF595A',
|
|
darker: '#FF595A',
|
|
},
|
|
neutral: {
|
|
main: '#64748B',
|
|
contrastText: '#fff',
|
|
},
|
|
},
|
|
});
|
|
|
|
export default function () {
|
|
const navigate = useNavigate();
|
|
const [cookies, setCookie] = useCookies(['accessToken']);
|
|
const [value, setValue] = useState("1");
|
|
const account = useSelector(state => state.user.account)
|
|
const password = useSelector(state => state.user.password)
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
const accessToken = useSelector(state => state.user.accessToken)
|
|
const flushToken = useSelector(state => state.user.flushToken)
|
|
const udid = useSelector(state => state.user.udid)
|
|
|
|
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
|
|
const debug_test = () => {
|
|
console.log("accessToken", accessToken);
|
|
}
|
|
const handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
console.log(`account: ${account}\nPassword: ${password} udid: ${udid}`);
|
|
|
|
yzs.login(udid, account, password).then(token => {
|
|
dispatch(setFlushToken(token));
|
|
yzs.get_access_token(udid, token).then(token => {
|
|
// yzs.update_access_token(ip.payload, token);
|
|
dispatch(setAccessToken(token));
|
|
setCookie("accessToken", token)
|
|
yzs.get_user_info(udid, token).then(info => {
|
|
dispatch(setUserInfo(info));
|
|
yzs.user_select(udid, token).then(info => {
|
|
navigate("/");
|
|
})
|
|
|
|
});
|
|
})
|
|
});
|
|
|
|
|
|
};
|
|
|
|
return (
|
|
<div className={styles.loginPage}>
|
|
<div className={styles.title}>
|
|
<img className={styles.titleIcon} src={logo} />
|
|
<h1 className={styles.titleText}>纽曼AI语记</h1>
|
|
</div>
|
|
|
|
<div className={styles.loginFrame}>
|
|
<ThemeProvider theme={theme}>
|
|
<Container component="form" className={styles.form} onSubmit={handleSubmit}
|
|
sx={{
|
|
width: 360,
|
|
height: 418,
|
|
backgroundColor: 'white',
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
boxShadow: "0px 5px 20px 0px rgba(146,0,1,0.1)",
|
|
borderRadius: 4,
|
|
|
|
}}
|
|
>
|
|
<TabContext value={value}>
|
|
<Box>
|
|
|
|
<TabList
|
|
|
|
aria-label="basic tabs example" value={value} onChange={handleChange} >
|
|
<Tab label="手机动态码登录" value="1" />
|
|
<Tab label="账号密码登录" value="2" />
|
|
</TabList>
|
|
</Box>
|
|
|
|
<TabPanel value="1" >
|
|
<DynamicCodeForm />
|
|
</TabPanel>
|
|
<TabPanel value="2" >
|
|
<PasswordForm />
|
|
</TabPanel>
|
|
</TabContext>
|
|
|
|
|
|
|
|
</Container>
|
|
</ThemeProvider >
|
|
<Button variant="contained" onClick={debug_test}>测试</Button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |