\n
\n \n
\n );\n\n return (\n {step}
\n {title}\n {subTitle}\n \n \n
\n
\n \n );\n}\n\nexport default OtpModal;\n","import { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Route, Redirect } from \"react-router-dom\";\nimport { Typography, Button, Form, Input, Checkbox } from \"antd\";\nimport { UserOutlined, LockOutlined } from \"@ant-design/icons\";\nimport { login, selectAuth, getOptStatus, setUser } from \"@/store/slice/auth\";\nimport OtpModal from \"@/components/OtpModal\";\n\nconst { Title } = Typography;\nconst Login = () => {\n const { user, isOtp } = useSelector(selectAuth);\n const dispatch = useDispatch();\n const [form] = Form.useForm();\n\n const [userData, setUserData] = useState(null);\n const handleUserData = data => {\n localStorage.setItem(\"user\", JSON.stringify(data));\n dispatch(setUser(data));\n };\n\n const [otpVisible, setOtpVisible] = useState(false);\n const [otpData, setOtpData] = useState({});\n const [loading, setLoading] = useState(false);\n const handleLogin = async () => {\n setLoading(true);\n const { status, data } = await login({ ...form.getFieldValue() });\n setLoading(false);\n if (status !== 200) return;\n setUserData(data);\n\n // opt 未綁定\n if (data.next) {\n setOtpVisible(true);\n setOtpData(data.next?.otp);\n return;\n }\n handleUserData(data);\n };\n useEffect(() => {\n dispatch(getOptStatus());\n });\n\n return (\n \n
\n \n \n 
\n
\n \n \n QR code \n Setup key \n
\n
\n \n {secret}
\n \n \n
\n \n \n setVerifyOtp(e.target.value)}\n style={{ maxWidth: \"200px\" }}\n />\n \n 测试\n \n
\n \n
\n \n \n {process.env.REACT_APP_TITLE}\n \n \n \n \n \n \n \n 記住密碼 \n \n \n 忘記密碼\n \n \n \n \n 登入\n \n \n \n
\n