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,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}>
             <img className={styles.titleIcon} src={logo} />
             <h1 className={styles.titleText}>纽曼AI语记</h1>
@@ -108,16 +113,22 @@ export default function () {
                         </Box>
 
                         <TabPanel value="1" >
-                                <DynamicCodeForm udid={yzs.uniqueDeviceIdentifier()} />
+                            <DynamicCodeForm udid={yzs.uniqueDeviceIdentifier()} agreeAgreement={agreeAgreement} onAgreeChange={onAgreeChange} />
                         </TabPanel>
                         <TabPanel value="2" >
-                                <PasswordForm />
+                            <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>
 }