1.登录界面用户隐私协议跳转 2.勾选框样式

This commit is contained in:
amass 2023-06-21 15:02:06 +08:00
parent 69b07afc78
commit 16bc07d970
5 changed files with 92 additions and 71 deletions

View File

@ -1,12 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState } from 'react';
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Button from '@mui/material/Button';
import yzs from "./business/request.js"; import yzs from "./business/request.js";
import styles from './LoginPage.module.css'; import styles from './LoginPage.module.css';
import { useSelector, useDispatch } from 'react-redux' 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 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 TabPanel from '@mui/lab/TabPanel';
import { TabList } from '@mui/lab'; import { TabList } from '@mui/lab';
import TabContext from '@mui/lab/TabContext'; import TabContext from '@mui/lab/TabContext';
@ -39,11 +38,16 @@ export default function () {
const account = useSelector(state => state.user.account) const account = useSelector(state => state.user.account)
const password = useSelector(state => state.user.password) const password = useSelector(state => state.user.password)
const verificationCode = useSelector(state => state.user.verificationCode) const verificationCode = useSelector(state => state.user.verificationCode)
const agreeAgreement = useSelector(state => state.user.agreeAgreement)
const handleChange = (event, newValue) => { const handleChange = (event, newValue) => {
setValue(newValue); setValue(newValue);
}; };
const onAgreeChange = (event) => {
dispatch(setAgreeAgreement(!agreeAgreement));
}
const accessToken = useSelector(state => state.user.accessToken) const accessToken = useSelector(state => state.user.accessToken)
const flushToken = useSelector(state => state.user.flushToken) const flushToken = useSelector(state => state.user.flushToken)
@ -72,11 +76,12 @@ export default function () {
}); });
}) })
}).catch(error => {
console.log(error)
}); });
}; };
return ( return <div className={styles.loginPage}>
<div className={styles.loginPage}>
<div className={styles.title}> <div className={styles.title}>
<img className={styles.titleIcon} src={logo} /> <img className={styles.titleIcon} src={logo} />
<h1 className={styles.titleText}>纽曼AI语记</h1> <h1 className={styles.titleText}>纽曼AI语记</h1>
@ -108,16 +113,22 @@ export default function () {
</Box> </Box>
<TabPanel value="1" > <TabPanel value="1" >
<DynamicCodeForm udid={yzs.uniqueDeviceIdentifier()} /> <DynamicCodeForm udid={yzs.uniqueDeviceIdentifier()} agreeAgreement={agreeAgreement} onAgreeChange={onAgreeChange} />
</TabPanel> </TabPanel>
<TabPanel value="2" > <TabPanel value="2" >
<PasswordForm /> <PasswordForm agreeAgreement={agreeAgreement} onAgreeChange={onAgreeChange} />
</TabPanel> </TabPanel>
</TabContext> </TabContext>
</Container> </Container>
</ThemeProvider > </ThemeProvider >
{/* <Button variant="contained" onClick={debug_test}>测试</Button> */} {/* <Button variant="contained" onClick={debug_test}>测试</Button> */}
</div> </div>
{/* <Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={handleClose}
message="I love snacks"
key={vertical + horizontal}
/> */}
</div> </div>
);
} }

View File

@ -10,9 +10,9 @@ export const userSlice = createSlice({
userName: "", userName: "",
nickName: "", nickName: "",
avatarUrl: "", avatarUrl: "",
agreeAgreement: true, agreeAgreement: false,
account: "13682423271", account: "",
password: "yzs123456", password: "",
verificationCode: "", verificationCode: "",
}, },
reducers: { reducers: {
@ -40,10 +40,13 @@ export const userSlice = createSlice({
setVerificationCode: (state, action) => { setVerificationCode: (state, action) => {
state.verificationCode = action.payload; state.verificationCode = action.payload;
}, },
setAgreeAgreement: (state, action) => {
state.agreeAgreement = action.payload;
},
} }
}) })
// Action creators are generated for each case reducer function // 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 export default userSlice.reducer

View 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>
}

View File

@ -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 React, { useState, useEffect, useRef } from 'react';
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone'; import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { setAccount, setVerificationCode } from "../business/userSlice.js" import { setAccount, setVerificationCode } from "../business/userSlice.js"
import yzs from "../business/request.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 dispatch = useDispatch();
const code = useRef(null); const code = useRef(null);
const [checked, setChecked] = useState(true);
const [seconds, setSeconds] = useState(0); // 倒计时 const [seconds, setSeconds] = useState(0); // 倒计时
const account = useSelector(state => state.user.account) const account = useSelector(state => state.user.account)
@ -41,10 +41,6 @@ export default function ({ udid }) {
setSeconds(60); setSeconds(60);
}; };
const onAgreeChange = (event) => {
setChecked(!checked);
}
return <Container disableGutters={true} return <Container disableGutters={true}
sx={{ sx={{
width: 300, width: 300,
@ -98,7 +94,7 @@ export default function ({ udid }) {
variant="contained" variant="contained"
color="primary" color="primary"
fullWidth fullWidth
disabled={!checked} disabled={!agreeAgreement}
sx={{ sx={{
backgroundColor: "#FF595A", backgroundColor: "#FF595A",
'&:hover': { '&:hover': {
@ -111,14 +107,6 @@ export default function ({ udid }) {
> >
注册/登录 注册/登录
</Button> </Button>
<Container> <Agreement agree={agreeAgreement} onChange={onAgreeChange} />
<Stack direction="row" spacing={1}
sx={{ paddingTop: 2 }}
>
<input type="checkbox" checked={checked} onChange={onAgreeChange} />
<Typography>同意 <Link>纽曼隐私协议</Link></Typography>
</Stack>
</Container>
</Container> </Container>
} }

View File

@ -1,11 +1,12 @@
import React, { useState } from 'react'; import React from 'react';
import { Container, TextField, Button, InputAdornment } from "@mui/material"; import { Container, TextField, Button, InputAdornment } from "@mui/material";
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone'; import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { setAccount, setPassword } from "../business/userSlice.js" import { setAccount, setPassword } from "../business/userSlice.js"
import Agreement from './Agreement.js';
export default function () { export default function ({ agreeAgreement, onAgreeChange }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const account = useSelector(state => state.user.account) const account = useSelector(state => state.user.account)
const password = useSelector(state => state.user.password) const password = useSelector(state => state.user.password)
@ -61,6 +62,7 @@ export default function () {
variant="contained" variant="contained"
color="primary" color="primary"
fullWidth fullWidth
disabled={!agreeAgreement}
sx={{ sx={{
backgroundColor: "#FF595A", backgroundColor: "#FF595A",
'&:hover': { '&:hover': {
@ -73,5 +75,6 @@ export default function () {
> >
登录 登录
</Button> </Button>
<Agreement agree={agreeAgreement} onChange={onAgreeChange} />
</Container> </Container>
} }