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

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 (
+    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>
-            </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>
         </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>
 }

src/business/userSlice.js

@@ -10,9 +10,9 @@ export const userSlice = createSlice({
         userName: "",
         nickName: "",
         avatarUrl: "",
-        agreeAgreement: true,
+        agreeAgreement: false,
-        account: "13682423271",
+        account: "",
-        password: "yzs123456",
+        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

src/components/Agreement.js

@@ -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>
+}

src/components/DynamicCodeForm.js

@@ -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>
+        <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>
 }

src/components/PasswordForm.js

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