vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
zzlgreat
2025-10-11 12:10:00 +08:00
parent 8107dee8d3
commit 4d0dc109bc
109 changed files with 152150 additions and 8037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
src/views/Authentication/SignUp/SignUpIllustration.js
View File

@@ -25,23 +25,19 @@ import {
Spinner,
FormLabel,
FormErrorMessage,
Divider,
useDisclosure,
Checkbox
Divider
} from "@chakra-ui/react";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { FaWeixin, FaMobile, FaEnvelope, FaUser, FaLock } from "react-icons/fa";
import { useNavigate, Link } from "react-router-dom";
import axios from "axios";
import { useAuth } from '../../../contexts/AuthContext'; // 假设AuthContext在这个路径
import PrivacyPolicyModal from '../../../components/PrivacyPolicyModal';
import UserAgreementModal from '../../../components/UserAgreementModal';
const isProduction = process.env.NODE_ENV === 'production';
const API_BASE_URL = isProduction ? "" : process.env.REACT_APP_API_URL;
export default function SignUpPage() {
const [registerType, setRegisterType] = useState(0); // 0: 微信, 1: 手机号
const [registerType, setRegisterType] = useState(0); // 0: 微信, 1: 手机号, 2: 邮箱
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [countdown, setCountdown] = useState(0);
@@ -50,7 +46,6 @@ export default function SignUpPage() {
const [wechatStatus, setWechatStatus] = useState("waiting");
const [errors, setErrors] = useState({});
const [checkInterval, setCheckInterval] = useState(null);
const [agreeToTerms, setAgreeToTerms] = useState(false);
const [formData, setFormData] = useState({
username: "",
@@ -61,20 +56,6 @@ export default function SignUpPage() {
verificationCode: ""
});
// 隐私政策弹窗状态
const {
isOpen: isPrivacyModalOpen,
onOpen: onPrivacyModalOpen,
onClose: onPrivacyModalClose
} = useDisclosure();
// 用户协议弹窗状态
const {
isOpen: isUserAgreementModalOpen,
onOpen: onUserAgreementModalOpen,
onClose: onUserAgreementModalClose
} = useDisclosure();
const navigate = useNavigate();
const toast = useToast();
const { loginWithWechat } = useAuth(); // 使用认证上下文
@@ -335,27 +316,28 @@ export default function SignUpPage() {
// 初始化时如果选择了微信登录，获取授权URL
useEffect(() => {
if (registerType === 0 && agreeToTerms) {
if (registerType === 0) {
getWechatQRCode();
}
}, [registerType, agreeToTerms]);
}, []);
// 发送验证码
const sendVerificationCode = async () => {
const contact = formData.phone;
const endpoint = "send-sms-code";
const fieldName = "phone";
const isPhone = registerType === 1;
const contact = isPhone ? formData.phone : formData.email;
const endpoint = isPhone ? "send-sms-code" : "send-email-code";
const fieldName = isPhone ? "phone" : "email";
if (!contact) {
toast({
title: "请输入手机号",
title: `请输入${isPhone ? "手机号" : "邮箱"}`,
status: "warning",
duration: 2000,
});
return;
}
if (!/^1[3-9]\d{9}$/.test(contact)) {
if (isPhone && !/^1[3-9]\d{9}$/.test(contact)) {
toast({
title: "请输入正确的手机号",
status: "warning",
@@ -364,6 +346,15 @@ export default function SignUpPage() {
return;
}
if (!isPhone && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contact)) {
toast({
title: "请输入正确的邮箱格式",
status: "warning",
duration: 2000,
});
return;
}
try {
setIsLoading(true);
await axios.post(`${API_BASE_URL}/api/auth/${endpoint}`, {
@@ -372,7 +363,7 @@ export default function SignUpPage() {
toast({
title: "验证码已发送",
description: "请查收短信",
description: `请查收${isPhone ? "短信" : "邮件"}`,
status: "success",
duration: 3000,
});
@@ -424,12 +415,20 @@ export default function SignUpPage() {
} else if (!/^1[3-9]\d{9}$/.test(formData.phone)) {
newErrors.phone = "请输入正确的手机号";
}
}
if (!formData.verificationCode) {
newErrors.verificationCode = "请输入验证码";
if (registerType === 2) {
if (!formData.email) {
newErrors.email = "请输入邮箱";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "请输入正确的邮箱格式";
}
}
if ((registerType === 1 || registerType === 2) && !formData.verificationCode) {
newErrors.verificationCode = "请输入验证码";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
@@ -438,17 +437,6 @@ export default function SignUpPage() {
const handleSubmit = async (e) => {
e.preventDefault();
if (!agreeToTerms) {
toast({
title: "请先同意协议",
description: "请勾选同意用户协议和隐私政策后再注册",
status: "warning",
duration: 3000,
isClosable: true,
});
return;
}
if (!validateForm()) {
return;
}
@@ -456,13 +444,25 @@ export default function SignUpPage() {
setIsLoading(true);
try {
const endpoint = "/api/auth/register/phone";
const data = {
phone: formData.phone,
code: formData.verificationCode,
username: formData.username,
password: formData.password
};
let endpoint, data;
if (registerType === 1) {
endpoint = "/api/auth/register/phone";
data = {
phone: formData.phone,
code: formData.verificationCode,
username: formData.username,
password: formData.password
};
} else {
endpoint = "/api/auth/register/email";
data = {
email: formData.email,
code: formData.verificationCode,
username: formData.username,
password: formData.password
};
}
await axios.post(`${API_BASE_URL}${endpoint}`, data);
@@ -505,7 +505,6 @@ export default function SignUpPage() {
setRegisterType(newType);
setErrors({});
setAgreeToTerms(false); // 切换注册方式时重置协议同意状态
setFormData({
username: "",
email: "",
@@ -519,7 +518,7 @@ export default function SignUpPage() {
setWechatStatus("waiting");
setWechatAuthUrl("");
setWechatSessionId("");
// 不自动获取二维码，等用户同意协议后再获取
getWechatQRCode();
}
};
@@ -628,6 +627,9 @@ export default function SignUpPage() {
<Tab borderRadius="lg" _selected={{ bg: "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)", color: "white", transform: "scale(1.02)" }} transition="all 0.2s">
<Icon as={FaMobile} mr={2} /><Text fontSize="sm">手机号</Text>
</Tab>
<Tab borderRadius="lg" _selected={{ bg: "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)", color: "white", transform: "scale(1.02)" }} transition="all 0.2s">
<Icon as={FaEnvelope} mr={2} /><Text fontSize="sm">邮箱</Text>
</Tab>
</TabList>
</Tabs>
</Box>
@@ -638,112 +640,49 @@ export default function SignUpPage() {
{/* 微信注册 */}
{registerType === 0 && (
<>
{/* 协议同意勾选框 - 微信注册 */}
<Box width="100%" mb={4}>
<Checkbox
isChecked={agreeToTerms}
onChange={(e) => setAgreeToTerms(e.target.checked)}
colorScheme="orange"
size="sm"
>
<Text fontSize="sm" color="gray.600">
我已阅读并同意{" "}
<ChakraLink
color="orange.500"
fontSize="sm"
onClick={onUserAgreementModalOpen}
textDecoration="underline"
_hover={{ color: "orange.600" }}
>
《用户协议》
</ChakraLink>
{" "}和{" "}
<ChakraLink
color="orange.500"
fontSize="sm"
onClick={onPrivacyModalOpen}
textDecoration="underline"
_hover={{ color: "orange.600" }}
>
《隐私政策》
</ChakraLink>
</Text>
</Checkbox>
{!agreeToTerms && (
<Text fontSize="xs" color="red.500" mt={1} ml={6}>
请先同意用户协议和隐私政策
</Text>
)}
</Box>
<Center width="100%" height="420px" bg="gray.50" borderRadius="lg" p={4} mb={4}>
{agreeToTerms ? (
wechatAuthUrl && wechatStatus !== "expired" ? (
<Box position="relative" width="100%" height="100%">
<iframe
src={wechatAuthUrl}
width="100%"
height="100%"
frameBorder="0"
scrolling="no"
style={{ borderRadius: '8px' }}
/>
{(wechatStatus === "login_success" || wechatStatus === "register_success") && (
<Box position="absolute" top={0} left={0} right={0} bottom={0}
bg="rgba(0,0,0,0.7)" display="flex" alignItems="center"
justifyContent="center" borderRadius="lg">
<VStack>
<Spinner color="white" />
<Text color="white" fontWeight="bold">
{wechatStatus === "login_success" ? "正在登录..." : "正在创建账号..."}
</Text>
</VStack>
</Box>
)}
</Box>
) : wechatStatus === "expired" ? (
<VStack>
<Text color="gray.500" fontWeight="bold" mb={4}>授权已过期</Text>
<Button colorScheme="orange" size="sm" onClick={getWechatQRCode}
isLoading={isLoading}>重新获取</Button>
</VStack>
) : (
<VStack>
<Spinner size="xl" color="orange.500" />
<Text color="gray.500" fontSize="sm">加载中...</Text>
</VStack>
)
) : (
<VStack spacing={4}>
<Icon as={FaWeixin} w={20} h={20} color="gray.400" />
<VStack spacing={2}>
<Text fontSize="lg" fontWeight="bold" color="gray.400">
微信扫码注册
</Text>
<Text fontSize="sm" color="gray.400" textAlign="center">
请先同意用户协议和隐私政策
</Text>
{wechatAuthUrl && wechatStatus !== "expired" ? (
<Box position="relative" width="100%" height="100%">
<iframe
src={wechatAuthUrl}
width="100%"
height="100%"
frameBorder="0"
scrolling="no"
style={{ borderRadius: '8px' }}
/>
{(wechatStatus === "login_success" || wechatStatus === "register_success") && (
<Box position="absolute" top={0} left={0} right={0} bottom={0}
bg="rgba(0,0,0,0.7)" display="flex" alignItems="center"
justifyContent="center" borderRadius="lg">
<VStack>
<Spinner color="white" />
<Text color="white" fontWeight="bold">
{wechatStatus === "login_success" ? "正在登录..." : "正在创建账号..."}
</Text>
</VStack>
</Box>
)}
</Box>
) : wechatStatus === "expired" ? (
<VStack>
<Text color="gray.500" fontWeight="bold" mb={4}>授权已过期</Text>
<Button colorScheme="orange" size="sm" onClick={getWechatQRCode}
isLoading={isLoading}>重新获取</Button>
</VStack>
) : (
<VStack>
<Spinner size="xl" color="orange.500" />
<Text color="gray.500" fontSize="sm">加载中...</Text>
</VStack>
<Button
colorScheme="orange"
variant="outline"
size="lg"
isDisabled
opacity={0.6}
>
同意协议后显示二维码
</Button>
</VStack>
)}
</Center>
<Text textAlign="center" color={getWechatStatusColor()} fontSize="sm"
fontWeight={wechatStatus === "login_success" || wechatStatus === "register_success" ? "bold" : "normal"}>
{agreeToTerms ? getWechatStatusText() : "请先同意用户协议和隐私政策"}
{getWechatStatusText()}
</Text>
<Text fontSize="xs" color="gray.500" textAlign="center">
{agreeToTerms
? "扫码即表示同意创建账号，系统将使用您的微信昵称作为初始用户名"
: "同意协议后即可使用微信快速注册"}
扫码即表示同意创建账号，系统将使用您的微信昵称作为初始用户名
</Text>
</>
)}
@@ -771,71 +710,48 @@ export default function SignUpPage() {
</FormControl>
<Divider my={2} />
{commonAuthFields}
{/* 协议同意勾选框 - 手机号注册 */}
<Box width="100%" py={3}>
<Checkbox
isChecked={agreeToTerms}
onChange={(e) => setAgreeToTerms(e.target.checked)}
colorScheme="orange"
size="sm"
>
<Text fontSize="sm" color="gray.600">
我已阅读并同意{" "}
<ChakraLink
color="orange.500"
fontSize="sm"
onClick={onUserAgreementModalOpen}
textDecoration="underline"
_hover={{ color: "orange.600" }}
>
《用户协议》
</ChakraLink>
{" "}和{" "}
<ChakraLink
color="orange.500"
fontSize="sm"
onClick={onPrivacyModalOpen}
textDecoration="underline"
_hover={{ color: "orange.600" }}
>
《隐私政策》
</ChakraLink>
</Text>
</Checkbox>
{!agreeToTerms && (
<Text fontSize="xs" color="red.500" mt={1} ml={6}>
请先同意用户协议和隐私政策
</Text>
)}
</Box>
</>
)}
{/* 邮箱注册 */}
{registerType === 2 && (
<>
<FormControl isRequired isInvalid={!!errors.email}>
<FormLabel fontSize="sm">邮箱</FormLabel>
<InputGroup>
<InputRightElement pointerEvents="none"><Icon as={FaEnvelope} color="gray.400" /></InputRightElement>
<Input name="email" type="email" value={formData.email} onChange={handleInputChange} placeholder="请输入邮箱地址" pr="2.5rem" />
</InputGroup>
<FormErrorMessage>{errors.email}</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={!!errors.verificationCode}>
<FormLabel fontSize="sm">验证码</FormLabel>
<HStack>
<Input name="verificationCode" value={formData.verificationCode} onChange={handleInputChange} placeholder="请输入6位验证码" />
<Button colorScheme="orange" onClick={sendVerificationCode} isDisabled={countdown > 0 || isLoading} isLoading={isLoading && countdown === 0} minW="120px">
{countdown > 0 ? `${countdown}秒后重试` : "获取验证码"}
</Button>
</HStack>
<FormErrorMessage>{errors.verificationCode}</FormErrorMessage>
</FormControl>
<Divider my={2} />
{commonAuthFields}
</>
)}
{registerType !== 0 && (
<Button
type="submit"
width="100%"
size="lg"
background={agreeToTerms
? "linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)"
: "gray.300"
}
background="linear-gradient(135deg, #ff8c00 0%, #ff6347 100%)"
color="white"
borderRadius="lg"
_hover={agreeToTerms ? {
transform: "translateY(-2px)",
boxShadow: "lg"
} : {}}
_active={agreeToTerms ? {
transform: "translateY(0)"
} : {}}
_hover={{ transform: "translateY(-2px)", boxShadow: "lg" }}
_active={{ transform: "translateY(0)" }}
isLoading={isLoading}
loadingText="注册中..."
fontWeight="bold"
isDisabled={!agreeToTerms}
cursor={agreeToTerms ? "pointer" : "not-allowed"}
>
完成注册
</Button>
@@ -854,38 +770,14 @@ export default function SignUpPage() {
<Box position="absolute" bottom={8} left="50%" transform="translateX(-50%)" zIndex={1}>
<HStack spacing={6}>
<ChakraLink
color="white"
fontSize="sm"
opacity={0.8}
_hover={{ opacity: 1 }}
onClick={onUserAgreementModalOpen}
>
用户协议
</ChakraLink>
<ChakraLink
color="white"
fontSize="sm"
opacity={0.8}
_hover={{ opacity: 1 }}
onClick={onPrivacyModalOpen}
>
隐私政策
</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>Company</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>About Us</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>Team</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>Products</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>Blog</ChakraLink>
<ChakraLink href="#" color="white" fontSize="sm" opacity={0.8} _hover={{ opacity: 1 }}>Pricing</ChakraLink>
</HStack>
</Box>
{/* 隐私政策弹窗 */}
<PrivacyPolicyModal
isOpen={isPrivacyModalOpen}
onClose={onPrivacyModalClose}
/>
{/* 用户协议弹窗 */}
<UserAgreementModal
isOpen={isUserAgreementModalOpen}
onClose={onUserAgreementModalClose}
/>
</Flex>
);
}