Register (#1)
Reviewed-on: phoenix/textsender#1 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
This commit is contained in:
phoenix
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
build
|
||||||
|
dist
|
||||||
|
coverage
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"semi": true,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 80,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"endOfLine": "auto"
|
||||||
|
}
|
||||||
@@ -10,3 +10,17 @@ Currently, two official plugins are available:
|
|||||||
## Expanding the ESLint configuration
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||||
|
|
||||||
|
# Getting started
|
||||||
|
|
||||||
|
Loading dependencies
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running app
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|||||||
+6
-6
@@ -1,8 +1,8 @@
|
|||||||
import js from '@eslint/js'
|
import js from '@eslint/js';
|
||||||
import globals from 'globals'
|
import globals from 'globals';
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
import { defineConfig, globalIgnores } from 'eslint/config';
|
||||||
|
|
||||||
export default defineConfig([
|
export default defineConfig([
|
||||||
globalIgnores(['dist']),
|
globalIgnores(['dist']),
|
||||||
@@ -26,4 +26,4 @@ export default defineConfig([
|
|||||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
])
|
]);
|
||||||
|
|||||||
Generated
+483
-387
File diff suppressed because it is too large
Load Diff
+5
-2
@@ -7,11 +7,14 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview",
|
||||||
|
"format": "npx prettier --write .",
|
||||||
|
"format:check": "npx prettier --check ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0",
|
||||||
|
"react-router-dom": "^7.10.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.30.1",
|
"@eslint/js": "^9.30.1",
|
||||||
|
|||||||
+12
-37
@@ -1,42 +1,17 @@
|
|||||||
#root {
|
* {
|
||||||
max-width: 1280px;
|
margin: 0;
|
||||||
margin: 0 auto;
|
padding: 0;
|
||||||
padding: 2rem;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
body {
|
||||||
height: 6em;
|
font-family:
|
||||||
padding: 1.5em;
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||||
will-change: filter;
|
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
transition: filter 300ms;
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
-moz-osx-font-smoothing: grayscale;
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.react:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes logo-spin {
|
.App {
|
||||||
from {
|
min-height: 100vh;
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
a:nth-of-type(2) .logo {
|
|
||||||
animation: logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
}
|
||||||
|
|||||||
+26
-30
@@ -1,35 +1,31 @@
|
|||||||
import { useState } from 'react'
|
import {
|
||||||
import reactLogo from './assets/react.svg'
|
BrowserRouter as Router,
|
||||||
import viteLogo from '/vite.svg'
|
Routes,
|
||||||
import './App.css'
|
Route,
|
||||||
|
Navigate,
|
||||||
|
} from 'react-router-dom';
|
||||||
|
import Register from './components/Register';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Router>
|
||||||
<div>
|
<Routes>
|
||||||
<a href="https://vite.dev" target="_blank">
|
<Route path="/" element={<Navigate to="/register" replace />} />
|
||||||
<img src={viteLogo} className="logo" alt="Vite logo" />
|
<Route path="/register" element={<Register />} />
|
||||||
</a>
|
{/* Add other routes as needed */}
|
||||||
<a href="https://react.dev" target="_blank">
|
<Route
|
||||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
path="/login"
|
||||||
</a>
|
element={
|
||||||
</div>
|
<div className="login-placeholder">
|
||||||
<h1>Vite + React</h1>
|
<h1>Login Page</h1>
|
||||||
<div className="card">
|
<p>This would be your login page</p>
|
||||||
<button onClick={() => setCount((count) => count + 1)}>
|
</div>
|
||||||
count is {count}
|
}
|
||||||
</button>
|
/>
|
||||||
<p>
|
</Routes>
|
||||||
Edit <code>src/App.jsx</code> and save to test HMR
|
</Router>
|
||||||
</p>
|
);
|
||||||
</div>
|
|
||||||
<p className="read-the-docs">
|
|
||||||
Click on the Vite and React logos to learn more
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import './Register.css';
|
||||||
|
|
||||||
|
const PhoneVerification = ({ phoneNumber, onVerify, onResend }) => {
|
||||||
|
const [code, setCode] = useState(['', '', '', '', '', '']);
|
||||||
|
const [timeLeft, setTimeLeft] = useState(60);
|
||||||
|
const [isResending, setIsResending] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (timeLeft > 0) {
|
||||||
|
const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [timeLeft]);
|
||||||
|
|
||||||
|
const handleChange = (index, value) => {
|
||||||
|
if (/^\d$/.test(value) || value === '') {
|
||||||
|
const newCode = [...code];
|
||||||
|
newCode[index] = value;
|
||||||
|
setCode(newCode);
|
||||||
|
|
||||||
|
// Auto-focus next input
|
||||||
|
if (value && index < 5) {
|
||||||
|
document.getElementById(`code-${index + 1}`).focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submit if all fields are filled
|
||||||
|
if (newCode.every((digit) => digit !== '') && index === 5) {
|
||||||
|
handleSubmit(newCode.join(''));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (index, e) => {
|
||||||
|
if (e.key === 'Backspace' && !code[index] && index > 0) {
|
||||||
|
document.getElementById(`code-${index - 1}`).focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (verificationCode) => {
|
||||||
|
onVerify(verificationCode);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResend = async () => {
|
||||||
|
setIsResending(true);
|
||||||
|
await onResend();
|
||||||
|
setTimeLeft(60);
|
||||||
|
setIsResending(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="verification-container">
|
||||||
|
<h3>Verify Your Phone</h3>
|
||||||
|
<p>We've sent a 6-digit code to {phoneNumber}</p>
|
||||||
|
|
||||||
|
<div className="code-inputs">
|
||||||
|
{code.map((digit, index) => (
|
||||||
|
<input
|
||||||
|
key={index}
|
||||||
|
id={`code-${index}`}
|
||||||
|
type="text"
|
||||||
|
maxLength="1"
|
||||||
|
value={digit}
|
||||||
|
onChange={(e) => handleChange(index, e.target.value)}
|
||||||
|
onKeyDown={(e) => handleKeyDown(index, e)}
|
||||||
|
className="code-input"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleSubmit(code.join(''))}
|
||||||
|
className="verify-btn"
|
||||||
|
>
|
||||||
|
Verify Code
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="resend-section">
|
||||||
|
{timeLeft > 0 ? (
|
||||||
|
<p>Resend code in {timeLeft}s</p>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={handleResend}
|
||||||
|
disabled={isResending}
|
||||||
|
className="resend-btn"
|
||||||
|
>
|
||||||
|
{isResending ? 'Sending...' : 'Resend Code'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PhoneVerification;
|
||||||
@@ -0,0 +1,162 @@
|
|||||||
|
.register-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
padding: 40px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-title {
|
||||||
|
color: #333;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
color: #555;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border: 2px solid #e1e5e9;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #667eea;
|
||||||
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input.error {
|
||||||
|
border-color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:disabled {
|
||||||
|
background-color: #f9fafb;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #ef4444;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 5px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-error {
|
||||||
|
background-color: #fee;
|
||||||
|
border: 1px solid #fcc;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-hint {
|
||||||
|
display: block;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:hover:not(:disabled) {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:active:not(:disabled) {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-link {
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-link p {
|
||||||
|
color: #6b7280;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terms {
|
||||||
|
margin-top: 25px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terms-text {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
color: #667eea;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.register-card {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,257 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import './Register.css';
|
||||||
|
|
||||||
|
const Register = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
phoneNumber: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const [errors, setErrors] = useState({});
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value,
|
||||||
|
}));
|
||||||
|
// Clear error when user starts typing
|
||||||
|
if (errors[name]) {
|
||||||
|
setErrors((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: '',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
const newErrors = {};
|
||||||
|
|
||||||
|
// Username validation
|
||||||
|
if (!formData.username.trim()) {
|
||||||
|
newErrors.username = 'Username is required';
|
||||||
|
} else if (formData.username.length < 3) {
|
||||||
|
newErrors.username = 'Username must be at least 3 characters';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Password validation
|
||||||
|
if (!formData.password) {
|
||||||
|
newErrors.password = 'Password is required';
|
||||||
|
} else if (formData.password.length < 6) {
|
||||||
|
newErrors.password = 'Password must be at least 6 characters';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Confirm password validation
|
||||||
|
if (formData.password !== formData.confirmPassword) {
|
||||||
|
newErrors.confirmPassword = 'Passwords do not match';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Phone number validation
|
||||||
|
const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
|
||||||
|
if (!formData.phoneNumber.trim()) {
|
||||||
|
newErrors.phoneNumber = 'Phone number is required';
|
||||||
|
} else if (
|
||||||
|
!phoneRegex.test(formData.phoneNumber.replace(/[\s\-\(\)]/g, ''))
|
||||||
|
) {
|
||||||
|
newErrors.phoneNumber = 'Please enter a valid phone number';
|
||||||
|
}
|
||||||
|
|
||||||
|
return newErrors;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
const validationErrors = validateForm();
|
||||||
|
|
||||||
|
if (Object.keys(validationErrors).length > 0) {
|
||||||
|
setErrors(validationErrors);
|
||||||
|
setIsLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Prepare data for API call (remove confirmPassword)
|
||||||
|
const { confirmPassword, ...userData } = formData;
|
||||||
|
|
||||||
|
// Simulate API call
|
||||||
|
console.log('Submitting registration data:', userData);
|
||||||
|
|
||||||
|
// Mock API call delay
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||||
|
const reqBod = {
|
||||||
|
phone_number: userData.phoneNumber,
|
||||||
|
username: userData.username,
|
||||||
|
password: userData.password,
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch('http://localhost:9080/api/v1/register', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(reqBod),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
alert('Registration successful! Redirecting to login...');
|
||||||
|
const res = await response.json();
|
||||||
|
console.log(res.message);
|
||||||
|
navigate('/login');
|
||||||
|
} else {
|
||||||
|
console.error('Error registering');
|
||||||
|
setErrors({ submit: 'Registration failed. Please try again.' });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Registration error:', error);
|
||||||
|
setErrors({ submit: 'Registration failed. Please try again.' });
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatPhoneNumber = (value) => {
|
||||||
|
// Remove all non-digit characters
|
||||||
|
const cleaned = value.replace(/\D/g, '');
|
||||||
|
|
||||||
|
// Format as (XXX) XXX-XXXX for US numbers
|
||||||
|
if (cleaned.length <= 3) {
|
||||||
|
return cleaned;
|
||||||
|
} else if (cleaned.length <= 6) {
|
||||||
|
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
|
||||||
|
} else {
|
||||||
|
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePhoneChange = (e) => {
|
||||||
|
const formatted = formatPhoneNumber(e.target.value);
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
phoneNumber: formatted,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="register-container">
|
||||||
|
<div className="register-card">
|
||||||
|
<h1 className="register-title">Create Account</h1>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="register-form">
|
||||||
|
{errors.submit && (
|
||||||
|
<div className="error-message submit-error">{errors.submit}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="username" className="form-label">
|
||||||
|
Username *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="username"
|
||||||
|
name="username"
|
||||||
|
value={formData.username}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={`form-input ${errors.username ? 'error' : ''}`}
|
||||||
|
placeholder="Enter your username"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{errors.username && (
|
||||||
|
<span className="error-message">{errors.username}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="phoneNumber" className="form-label">
|
||||||
|
Phone Number *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phoneNumber"
|
||||||
|
name="phoneNumber"
|
||||||
|
value={formData.phoneNumber}
|
||||||
|
onChange={handlePhoneChange}
|
||||||
|
className={`form-input ${errors.phoneNumber ? 'error' : ''}`}
|
||||||
|
placeholder="(123) 456-7890"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{errors.phoneNumber && (
|
||||||
|
<span className="error-message">{errors.phoneNumber}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="password" className="form-label">
|
||||||
|
Password *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={`form-input ${errors.password ? 'error' : ''}`}
|
||||||
|
placeholder="Enter your password"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{errors.password && (
|
||||||
|
<span className="error-message">{errors.password}</span>
|
||||||
|
)}
|
||||||
|
<small className="form-hint">Minimum 6 characters</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="confirmPassword" className="form-label">
|
||||||
|
Confirm Password *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="confirmPassword"
|
||||||
|
name="confirmPassword"
|
||||||
|
value={formData.confirmPassword}
|
||||||
|
onChange={handleChange}
|
||||||
|
className={`form-input ${errors.confirmPassword ? 'error' : ''}`}
|
||||||
|
placeholder="Confirm your password"
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
{errors.confirmPassword && (
|
||||||
|
<span className="error-message">{errors.confirmPassword}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="submit-btn" disabled={isLoading}>
|
||||||
|
{isLoading ? 'Creating Account...' : 'Create Account'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="login-link">
|
||||||
|
<p>
|
||||||
|
Already have an account?{' '}
|
||||||
|
<Link to="/login" className="link">
|
||||||
|
Sign In
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="terms">
|
||||||
|
<p className="terms-text">
|
||||||
|
By creating an account, you agree to our{' '}
|
||||||
|
<Link to="/terms" className="link">
|
||||||
|
Terms of Service
|
||||||
|
</Link>{' '}
|
||||||
|
and{' '}
|
||||||
|
<Link to="/privacy" className="link">
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Register;
|
||||||
+19
-59
@@ -1,68 +1,28 @@
|
|||||||
:root {
|
* {
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
margin: 0;
|
||||||
line-height: 1.5;
|
padding: 0;
|
||||||
font-weight: 400;
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
color-scheme: light dark;
|
body {
|
||||||
color: rgba(255, 255, 255, 0.87);
|
font-family:
|
||||||
background-color: #242424;
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
||||||
|
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.login-placeholder {
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
flex-direction: column;
|
||||||
min-width: 320px;
|
align-items: center;
|
||||||
min-height: 100vh;
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.login-placeholder h1 {
|
||||||
font-size: 3.2em;
|
font-size: 3rem;
|
||||||
line-height: 1.1;
|
margin-bottom: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-6
@@ -1,10 +1,10 @@
|
|||||||
import { StrictMode } from 'react'
|
import { StrictMode } from 'react';
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client';
|
||||||
import './index.css'
|
import './index.css';
|
||||||
import App from './App.jsx'
|
import App from './App.jsx';
|
||||||
|
|
||||||
createRoot(document.getElementById('root')).render(
|
createRoot(document.getElementById('root')).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</StrictMode>,
|
</StrictMode>
|
||||||
)
|
);
|
||||||
|
|||||||
+3
-3
@@ -1,7 +1,7 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite';
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
})
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user