- 初始化项目
- 添加登录注册功能
Change-Id: I4ceb5400dca3042f2f31232eaf246df83d57b9be
登录注册
Change-Id: Ibd4868d02f2f2b51b9cf645c5b56cb31adae6a1d
登录注册
Change-Id: Iee4aca2a0871ab46a95208ece13053e92b615b2e
login and register
Change-Id: Idb1ca43081e39c982a508b36ab1d80907b63a412
diff --git a/src/components/Auth/Register.jsx b/src/components/Auth/Register.jsx
new file mode 100644
index 0000000..417864f
--- /dev/null
+++ b/src/components/Auth/Register.jsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import './Auth.css';
+import image from './logo.svg'; // 引入图片
+
+const Register = ({ onLoginClick }) => {
+ const [formData, setFormData] = useState({
+ username: '',
+ password: '',
+ email: ''
+ });
+ const [verificationCode, setVerificationCode] = useState('');
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ // 注册逻辑
+ };
+
+ const verifyEmailCode = async () => {
+ try {
+ const response = await fetch('http://localhost:8080/user/verify-code', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ email: formData.email,
+ code: verificationCode,
+ }),
+ });
+
+ const result = await response.json();
+ if (response.ok && result.code === "0") {
+ console.log('邮箱验证成功:', result.msg);
+ // 处理成功逻辑
+ } else {
+ console.error('邮箱验证失败:', result.msg);
+ // 处理失败逻辑
+ }
+ } catch (error) {
+ console.error('请求错误:', error);
+ // 处理请求错误
+ }
+ };
+
+
+ return (
+ <div className="auth-container">
+ <img
+ src={image}
+ alt="描述"
+ style={{ width: '30%', height: 'auto'}}
+ />
+ <div className="auth-form-section">
+ <h3>用户注册</h3>
+ <form onSubmit={handleSubmit}>
+ <div className="form-group">
+ <label>用户名</label>
+ <input
+ type="text"
+ className="form-input"
+ placeholder="请输入用户名"
+ value={formData.username}
+ onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+ required
+ />
+ </div>
+ <div className="form-group">
+ <label>密码</label>
+ <input
+ type="password"
+ className="form-input"
+ placeholder="请输入密码"
+ value={formData.password}
+ onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+ required
+ />
+ </div>
+ <div className="form-group">
+ <label>邮箱</label>
+ <div style={{ display: 'flex', alignItems: 'center' }}>
+ <input
+ type="email"
+ className="form-input"
+ placeholder="请输入邮箱"
+ value={formData.email}
+ onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+ required
+ style={{ flex: 1, marginRight: '10px' }}
+ />
+ <button type="button" onClick={verifyEmailCode} className="verify-button">
+ 验证邮箱
+ </button>
+ </div>
+ </div>
+ <div className="form-group">
+ <label>验证码</label>
+ <input
+ type="text"
+ className="form-input"
+ placeholder="请输入邮箱验证码"
+ value={verificationCode}
+ onChange={(e) => setVerificationCode(e.target.value)}
+ required
+ />
+ </div>
+ <button type="submit" className="auth-button">
+ 注册
+ </button>
+ <p className="login-link">
+ 已有账号?
+ <button onClick={onLoginClick} className="link-button">
+ 点击登录
+ </button>
+ </p>
+ </form>
+ </div>
+ </div>
+ );
+};
+
+export default Register;
\ No newline at end of file