1.登录界面用户隐私协议跳转 2.勾选框样式
This commit is contained in:
parent
69b07afc78
commit
16bc07d970
107
src/LoginPage.js
107
src/LoginPage.js
@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState } 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 { setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
|
||||
import { setFlushToken, setAccessToken, setUserInfo, setAgreeAgreement } from "./business/userSlice.js"
|
||||
import logo from './assets/logo.png';
|
||||
import { Container, Tab, Box } from '@mui/material';
|
||||
import { Container, Tab, Box, Snackbar, Button } from '@mui/material';
|
||||
import TabPanel from '@mui/lab/TabPanel';
|
||||
import { TabList } from '@mui/lab';
|
||||
import TabContext from '@mui/lab/TabContext';
|
||||
@ -39,11 +38,16 @@ export default function () {
|
||||
const account = useSelector(state => state.user.account)
|
||||
const password = useSelector(state => state.user.password)
|
||||
const verificationCode = useSelector(state => state.user.verificationCode)
|
||||
const agreeAgreement = useSelector(state => state.user.agreeAgreement)
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const onAgreeChange = (event) => {
|
||||
dispatch(setAgreeAgreement(!agreeAgreement));
|
||||
}
|
||||
|
||||
const accessToken = useSelector(state => state.user.accessToken)
|
||||
const flushToken = useSelector(state => state.user.flushToken)
|
||||
|
||||
@ -72,52 +76,59 @@ export default function () {
|
||||
|
||||
});
|
||||
})
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
});
|
||||
};
|
||||
|
||||
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 udid={yzs.uniqueDeviceIdentifier()} />
|
||||
</TabPanel>
|
||||
<TabPanel value="2" >
|
||||
<PasswordForm />
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
</Container>
|
||||
</ThemeProvider >
|
||||
{/* <Button variant="contained" onClick={debug_test}>测试</Button> */}
|
||||
</div>
|
||||
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 udid={yzs.uniqueDeviceIdentifier()} agreeAgreement={agreeAgreement} onAgreeChange={onAgreeChange} />
|
||||
</TabPanel>
|
||||
<TabPanel value="2" >
|
||||
<PasswordForm agreeAgreement={agreeAgreement} onAgreeChange={onAgreeChange} />
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
</Container>
|
||||
</ThemeProvider >
|
||||
{/* <Button variant="contained" onClick={debug_test}>测试</Button> */}
|
||||
</div>
|
||||
{/* <Snackbar
|
||||
anchorOrigin={{ vertical, horizontal }}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
message="I love snacks"
|
||||
key={vertical + horizontal}
|
||||
/> */}
|
||||
</div>
|
||||
}
|
||||
@ -10,9 +10,9 @@ export const userSlice = createSlice({
|
||||
userName: "",
|
||||
nickName: "",
|
||||
avatarUrl: "",
|
||||
agreeAgreement: true,
|
||||
account: "13682423271",
|
||||
password: "yzs123456",
|
||||
agreeAgreement: false,
|
||||
account: "",
|
||||
password: "",
|
||||
verificationCode: "",
|
||||
},
|
||||
reducers: {
|
||||
@ -40,10 +40,13 @@ export const userSlice = createSlice({
|
||||
setVerificationCode: (state, action) => {
|
||||
state.verificationCode = action.payload;
|
||||
},
|
||||
setAgreeAgreement: (state, action) => {
|
||||
state.agreeAgreement = action.payload;
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// Action creators are generated for each case reducer function
|
||||
export const { setFlushToken, setAccessToken, setUserInfo, setSelectInfo, setAccount, setPassword, setVerificationCode } = userSlice.actions
|
||||
export const { setFlushToken, setAccessToken, setUserInfo, setSelectInfo, setAccount, setPassword, setVerificationCode, setAgreeAgreement } = userSlice.actions
|
||||
|
||||
export default userSlice.reducer
|
||||
16
src/components/Agreement.js
Normal file
16
src/components/Agreement.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { Container, Checkbox, Link, Stack, Typography } from "@mui/material";
|
||||
|
||||
export default function ({ agree, onChange }) {
|
||||
return <Container>
|
||||
<Stack direction="row" spacing={1}
|
||||
sx={{ paddingTop: 2, alignItems: "center" }}
|
||||
>
|
||||
<Checkbox checked={agree} onChange={onChange} />
|
||||
<Typography align="justify">同意
|
||||
<Link target="_blank"
|
||||
href="https://ai-api.hivoice.cn/api/app/app-voice-recorder/html/app_privacy.html/">
|
||||
《纽曼隐私协议》</Link>
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Container>
|
||||
}
|
||||
@ -1,15 +1,15 @@
|
||||
import { Container, TextField, InputAdornment, Link, Button, Stack, Typography } from "@mui/material";
|
||||
import { Container, TextField, InputAdornment, Link, Button } from "@mui/material";
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { setAccount, setVerificationCode } from "../business/userSlice.js"
|
||||
import yzs from "../business/request.js";
|
||||
import Agreement from "./Agreement.js";
|
||||
|
||||
export default function ({ udid }) {
|
||||
export default function ({ udid, agreeAgreement, onAgreeChange }) {
|
||||
const dispatch = useDispatch();
|
||||
const code = useRef(null);
|
||||
const [checked, setChecked] = useState(true);
|
||||
const [seconds, setSeconds] = useState(0); // 倒计时
|
||||
|
||||
const account = useSelector(state => state.user.account)
|
||||
@ -41,10 +41,6 @@ export default function ({ udid }) {
|
||||
setSeconds(60);
|
||||
};
|
||||
|
||||
const onAgreeChange = (event) => {
|
||||
setChecked(!checked);
|
||||
}
|
||||
|
||||
return <Container disableGutters={true}
|
||||
sx={{
|
||||
width: 300,
|
||||
@ -98,7 +94,7 @@ export default function ({ udid }) {
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
disabled={!checked}
|
||||
disabled={!agreeAgreement}
|
||||
sx={{
|
||||
backgroundColor: "#FF595A",
|
||||
'&:hover': {
|
||||
@ -111,14 +107,6 @@ export default function ({ udid }) {
|
||||
>
|
||||
注册/登录
|
||||
</Button>
|
||||
<Container>
|
||||
<Stack direction="row" spacing={1}
|
||||
sx={{ paddingTop: 2 }}
|
||||
>
|
||||
<input type="checkbox" checked={checked} onChange={onAgreeChange} />
|
||||
<Typography>同意 <Link>《纽曼隐私协议》</Link></Typography>
|
||||
</Stack>
|
||||
</Container>
|
||||
|
||||
<Agreement agree={agreeAgreement} onChange={onAgreeChange} />
|
||||
</Container>
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { Container, TextField, Button, InputAdornment } from "@mui/material";
|
||||
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
|
||||
import LockIcon from '@mui/icons-material/Lock';
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { setAccount, setPassword } from "../business/userSlice.js"
|
||||
import Agreement from './Agreement.js';
|
||||
|
||||
export default function () {
|
||||
export default function ({ agreeAgreement, onAgreeChange }) {
|
||||
const dispatch = useDispatch();
|
||||
const account = useSelector(state => state.user.account)
|
||||
const password = useSelector(state => state.user.password)
|
||||
@ -61,6 +62,7 @@ export default function () {
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
disabled={!agreeAgreement}
|
||||
sx={{
|
||||
backgroundColor: "#FF595A",
|
||||
'&:hover': {
|
||||
@ -73,5 +75,6 @@ export default function () {
|
||||
>
|
||||
登录
|
||||
</Button>
|
||||
<Agreement agree={agreeAgreement} onChange={onAgreeChange} />
|
||||
</Container>
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user