-
+
diff --git a/web/src/pages/Signup/Signup.jsx b/web/src/pages/Signup/Signup.jsx
new file mode 100644
index 0000000..5aca8f7
--- /dev/null
+++ b/web/src/pages/Signup/Signup.jsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import styles from './Signup.module.css';
+
+function Signup() {
+ const [formData, setFormData] = useState({
+ name: '',
+ email: '',
+ password: '',
+ });
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [signupResult, setSignupResult] = useState(null);
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value,
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setError(null);
+ setSignupResult(null);
+ setFormData({
+ name: '',
+ email: '',
+ password: '',
+ });
+
+ try {
+ const response = await fetch('http://localhost:3333/signup', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(formData),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.message || 'Signup failed');
+ }
+
+ setSignupResult(data);
+ console.log('Signup successful:', data);
+ if (data.message === 'Signup successful') {
+ setSignupResult(data);
+ }
+
+ // Here you could redirect or update UI based on successful signup
+ // For now, we'll just display the result
+ } catch (error) {
+ setError(error.message);
+ console.error('Signup error:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
Sign Up
+ {error &&
{error}
}
+
+ {signupResult && signupResult.message === 'Signup successful' && (
+
+ SignUp successful! Welcome, {signupResult.user.name}.
+
+ )}
+
+
+
+ );
+}
+
+export default Signup;
diff --git a/web/src/pages/Signup/Signup.module.css b/web/src/pages/Signup/Signup.module.css
new file mode 100644
index 0000000..bca060e
--- /dev/null
+++ b/web/src/pages/Signup/Signup.module.css
@@ -0,0 +1,79 @@
+/* Signup.module.css
+
+ */
+
+.signupContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.signupForm {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ margin-top: 1.5rem;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.formGroup label {
+ font-weight: 500;
+}
+
+.formGroup input {
+ padding: 0.75rem;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1rem;
+}
+
+.signupButton {
+ padding: 0.75rem;
+ background-color: #28a745;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 1rem;
+ font-weight: 500;
+ cursor: pointer;
+ margin-top: 1rem;
+}
+
+.signupButton:hover {
+ background-color: #218838;
+}
+
+.signupButton:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+}
+
+.error {
+ color: #e74c3c;
+ background-color: #fadbd8;
+ padding: 0.75rem;
+ border-radius: 4px;
+ margin-bottom: 1rem;
+ text-align: center;
+ width: 100%;
+}
+
+.success {
+ color: #27ae60;
+ background-color: #d5f5e3;
+ padding: 0.75rem;
+ border-radius: 4px;
+ margin-bottom: 1rem;
+ text-align: center;
+ width: 100%;
+}