Skip to content

fix: signup toggle not switching modes #229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheBinaryAVA wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: signup toggle not switching modes #229

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 88 additions & 60 deletions src/pages/Signup/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import React, { useState } from "react";
import axios from "axios";
import { useNavigate ,Link } from "react-router-dom";
import { useNavigate, Link } from "react-router-dom";
import { User, Mail, Lock } from "lucide-react";

const backendUrl = import.meta.env.VITE_BACKEND_URL;
Comment thread
TheBinaryAVA marked this conversation as resolved.

interface SignUpFormData {
username: string;
email: string;
password: string;
}

const SignUp: React.FC = () => {
const [formData, setFormData] = useState<SignUpFormData>({
username: "",
email: "",
password: ""
const [formData, setFormData] = useState<SignUpFormData>({
username: "",
email: "",
password: "",
});

const [message, setMessage] = useState<string>("");
const navigate = useNavigate();
const navigate = useNavigate();

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
Expand All @@ -25,64 +29,65 @@ const navigate = useNavigate();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await axios.post(`${backendUrl}/api/auth/signup`,
formData // Include cookies for session
const response = await axios.post(
`${backendUrl}/api/auth/signup`,
formData
);
setMessage(response.data.message); // Show success message from backend

// Navigate to login page after successful signup
if (response.data.message === 'User created successfully') {
navigate("/login");}


// // Simulate API call (replace with your actual backend integration)
// try {
// // Mock successful signup
// setMessage("Account created successfully! Redirecting to login...");

// // In your actual implementation, integrate with your backend here:
// // const response = await fetch(`${backendUrl}/api/auth/signup`, {
// // method: 'POST',
// // headers: { 'Content-Type': 'application/json' },
// // body: JSON.stringify(formData)
// // });

// setTimeout(() => {
// // Navigate to login page in your actual implementation
// console.log("Redirecting to login page...");
// }, 2000);


setMessage(response.data.message);

if (response.data.message === "User created successfully") {
navigate("/login");
}
Comment thread
TheBinaryAVA marked this conversation as resolved.
} catch (error) {
setMessage("Something went wrong. Please try again.");
}
};

return (
<div className="relative h-screen w-screen bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 flex items-center justify-center px-4 overflow-hidden">
{/* Background decorative elements */}
<div className="relative h-screen w-screen
bg-gradient-to-br
from-indigo-200 via-purple-200 to-pink-200
dark:from-indigo-900 dark:via-purple-800 dark:to-pink-700
flex items-center justify-center px-4 overflow-hidden">

{/* Background effects */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
<div className="absolute -bottom-40 -left-32 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
</div>

<div className="relative w-full max-w-md">
{/* Logo and Title */}
{/* Logo */}
<div className="text-center mb-8">
<div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
<img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
</div>
<h1 className="text-4xl font-bold text-white mb-2">GitHubTracker</h1>
<p className="text-purple-200 text-lg">Join your GitHub journey</p>
<div className="inline-flex items-center justify-center w-20 h-20
bg-white dark:bg-gray-200 rounded-3xl mb-6 shadow-2xl
transform hover:scale-105 transition duration-300 overflow-hidden">
<img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
</div>

<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
GitHubTracker
</h1>

<p className="text-purple-600 dark:text-purple-200 text-lg">
Join your GitHub journey
</p>
</div>

{/* Sign Up Form */}
<div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 border border-white/20 shadow-2xl">
<h2 className="text-2xl font-semibold text-white text-center mb-8">Create Account</h2>

{/* Form Card */}
<div className="bg-white/80 dark:bg-white/10 backdrop-blur-lg
rounded-3xl p-8 border border-gray-200 dark:border-white/20 shadow-2xl">

<h2 className="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-8">
Create Account
</h2>

<div className="space-y-6">
{/* Username */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<User className="h-5 w-5 text-purple-300" />
<User className="h-5 w-5 text-purple-500 dark:text-purple-300" />
</div>
<input
type="text"
Expand All @@ -91,13 +96,19 @@ const navigate = useNavigate();
value={formData.username}
onChange={handleChange}
required
className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
className="w-full pl-12 pr-4 py-4
bg-white/70 dark:bg-white/10
border border-gray-300 dark:border-white/20
rounded-2xl text-gray-900 dark:text-white
placeholder-gray-500 dark:placeholder-purple-300
focus:outline-none focus:ring-2 focus:ring-purple-400 transition"
/>
</div>

{/* Email */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Mail className="h-5 w-5 text-purple-300" />
<Mail className="h-5 w-5 text-purple-500 dark:text-purple-300" />
</div>
<input
type="email"
Expand All @@ -106,13 +117,19 @@ const navigate = useNavigate();
value={formData.email}
onChange={handleChange}
required
className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
className="w-full pl-12 pr-4 py-4
bg-white/70 dark:bg-white/10
border border-gray-300 dark:border-white/20
rounded-2xl text-gray-900 dark:text-white
placeholder-gray-500 dark:placeholder-purple-300
focus:outline-none focus:ring-2 focus:ring-purple-400 transition"
/>
</div>

{/* Password */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Lock className="h-5 w-5 text-purple-300" />
<Lock className="h-5 w-5 text-purple-500 dark:text-purple-300" />
</div>
<input
type="password"
Expand All @@ -121,35 +138,46 @@ const navigate = useNavigate();
value={formData.password}
onChange={handleChange}
required
className="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-purple-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent backdrop-blur-sm transition-all duration-300"
className="w-full pl-12 pr-4 py-4
bg-white/70 dark:bg-white/10
border border-gray-300 dark:border-white/20
rounded-2xl text-gray-900 dark:text-white
placeholder-gray-500 dark:placeholder-purple-300
focus:outline-none focus:ring-2 focus:ring-purple-400 transition"
/>
</div>

{/* Button */}
<button
onClick={handleSubmit}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold py-4 rounded-2xl hover:from-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transform hover:scale-105 transition-all duration-300 shadow-lg"
className="w-full bg-gradient-to-r from-purple-500 to-pink-500
text-white font-semibold py-4 rounded-2xl
hover:from-purple-600 hover:to-pink-600
transform hover:scale-105 transition shadow-lg"
>
Create Account
</button>
</div>

{/* Message */}
{message && (
<div className={`text-center mt-6 p-3 rounded-xl ${
message.includes('successfully')
? 'text-green-300 bg-green-500/20'
: 'text-red-300 bg-red-500/20'
message.includes("successfully")
? "text-green-600 bg-green-100 dark:text-green-300 dark:bg-green-500/20"
: "text-red-600 bg-red-100 dark:text-red-300 dark:bg-red-500/20"
}`}>
{message}
</div>
)}

{/* Footer */}
<div className="text-center mt-8">
<p className="text-purple-200">
Already have an account?{' '}
<Link to="/login" className="inline-flex items-center">
<button className="text-purple-300 hover:text-white font-medium transition-colors duration-300">
<p className="text-gray-700 dark:text-purple-200">
Already have an account?{" "}
<Link to="/login">
<span className="text-purple-600 dark:text-purple-300 hover:text-purple-800 dark:hover:text-white font-medium">
Sign in here
</button>
</span>
</Link>
</p>
</div>
Expand All @@ -159,4 +187,4 @@ const navigate = useNavigate();
);
};

export default SignUp;
export default SignUp;
Loading