Fix Signup page design, logo visibility, and add signin redirect #193
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,162 +1,217 @@ | ||||||
| import React, { useState, ChangeEvent, FormEvent, useContext } from "react"; | ||||||
| import axios from "axios"; | ||||||
| import { useNavigate, Link } from "react-router-dom"; | ||||||
| import { ThemeContext } from "../../context/ThemeContext"; | ||||||
| import type { ThemeContextType } from "../../context/ThemeContext"; | ||||||
|
|
||||||
| const backendUrl = import.meta.env.VITE_BACKEND_URL; | ||||||
|
Contributor
There was a problem hiding this comment. 💡 Verification agent 🧩 Analysis chainProvide a safe fallback when Without a fallback, the code may post to the literal string "undefined/api/auth/signup". Default to empty string so relative URLs still work (useful in dev or same-origin deployments). Apply this diff: -const backendUrl = import.meta.env.VITE_BACKEND_URL;
+const backendUrl = import.meta.env.VITE_BACKEND_URL || "";Optional: verify the env var is defined in your repo: 🏁 Script executed: #!/bin/bash
rg -n 'VITE_BACKEND_URL'Length of output: 247 Add a safe fallback for To prevent the app from posting to • Update in src/pages/Signup/Signup.tsx --- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -7,1 +7,1 @@
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
+const backendUrl = import.meta.env.VITE_BACKEND_URL || "";--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -7,1 +7,1 @@
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
+const backendUrl = import.meta.env.VITE_BACKEND_URL || "";📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
|
|
||||||
| interface SignUpFormData { | ||||||
| username: string; | ||||||
| email: string; | ||||||
| password: string; | ||||||
| } | ||||||
|
|
||||||
| const SignUp: React.FC = () => { | ||||||
| const [formData, setFormData] = useState<SignUpFormData>({ | ||||||
| username: "", | ||||||
| email: "", | ||||||
| password: "", | ||||||
| }); | ||||||
| const [message, setMessage] = useState<string>(""); | ||||||
| const [isLoading, setIsLoading] = useState<boolean>(false); | ||||||
|
|
||||||
| const navigate = useNavigate(); | ||||||
| const themeContext = useContext(ThemeContext) as ThemeContextType; | ||||||
| const { mode } = themeContext; | ||||||
|
|
||||||
| const handleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||||||
| const { name, value } = e.target; | ||||||
| setFormData({ ...formData, [name]: value }); | ||||||
| }; | ||||||
|
|
||||||
| const handleSubmit = async (e: FormEvent) => { | ||||||
| e.preventDefault(); | ||||||
| setIsLoading(true); | ||||||
|
|
||||||
| try { | ||||||
| const response = await axios.post(`${backendUrl}/api/auth/signup`, formData); | ||||||
| setMessage(response.data.message); | ||||||
|
|
||||||
| if (response.data.message === "User created successfully") { | ||||||
| navigate("/login"); | ||||||
| } | ||||||
| } catch (error: any) { | ||||||
| setMessage(error.response?.data?.message || "Something went wrong"); | ||||||
| } finally { | ||||||
| setIsLoading(false); | ||||||
| } | ||||||
| }; | ||||||
|
|
||||||
| return ( | ||||||
| <div | ||||||
| className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900" | ||||||
| : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100" | ||||||
| }`} | ||||||
| > | ||||||
| {/* Animated background elements */} | ||||||
| <div className="absolute inset-0"> | ||||||
| <div | ||||||
| className={`absolute -top-40 -right-40 w-96 h-96 ${ | ||||||
| mode === "dark" ? "bg-purple-500" : "bg-purple-300" | ||||||
| } rounded-full blur-3xl opacity-30 animate-pulse`} | ||||||
| /> | ||||||
| <div | ||||||
| className={`absolute -bottom-40 -left-40 w-96 h-96 ${ | ||||||
| mode === "dark" ? "bg-blue-500" : "bg-blue-300" | ||||||
| } rounded-full blur-3xl opacity-30 animate-pulse`} | ||||||
| /> | ||||||
| <div | ||||||
| className={`absolute top-40 left-40 w-96 h-96 ${ | ||||||
| mode === "dark" ? "bg-pink-500" : "bg-pink-300" | ||||||
| } rounded-full blur-3xl opacity-30 animate-pulse`} | ||||||
| /> | ||||||
| <div | ||||||
| className={`absolute top-1/2 right-1/4 w-64 h-64 ${ | ||||||
| mode === "dark" ? "bg-indigo-500" : "bg-indigo-300" | ||||||
| } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`} | ||||||
| /> | ||||||
| </div> | ||||||
|
|
||||||
| <div className="relative w-full max-w-md px-6"> | ||||||
| {/* Branding */} | ||||||
| <div className="text-center mb-10"> | ||||||
| <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 bg-clip-text text-transparent mb-2 ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300" | ||||||
| : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600" | ||||||
| }`} | ||||||
| > | ||||||
| GitHubTracker | ||||||
| </h1> | ||||||
| <p | ||||||
| className={`${ | ||||||
| mode === "dark" ? "text-slate-300" : "text-gray-700" | ||||||
| } text-lg font-medium`} | ||||||
| > | ||||||
| Join your GitHub journey | ||||||
| </p> | ||||||
| </div> | ||||||
|
|
||||||
| {/* Form Card */} | ||||||
| <div | ||||||
| className={`rounded-3xl p-10 shadow-2xl border ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" | ||||||
| : "bg-white border-gray-200 text-black" | ||||||
| }`} | ||||||
| > | ||||||
| <h2 | ||||||
| className={`text-2xl font-bold text-center mb-8 ${ | ||||||
| mode === "dark" ? "text-white" : "text-gray-800" | ||||||
| }`} | ||||||
| > | ||||||
| Create Account | ||||||
| </h2> | ||||||
|
|
||||||
| <form onSubmit={handleSubmit} className="space-y-6"> | ||||||
| <input | ||||||
| type="text" | ||||||
| name="username" | ||||||
| placeholder="Enter your username" | ||||||
| value={formData.username} | ||||||
| onChange={handleChange} | ||||||
| required | ||||||
| className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" | ||||||
| : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" | ||||||
| }`} | ||||||
| /> | ||||||
|
|
||||||
| <input | ||||||
| type="email" | ||||||
| name="email" | ||||||
| placeholder="Enter your email" | ||||||
| value={formData.email} | ||||||
| onChange={handleChange} | ||||||
| required | ||||||
| className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" | ||||||
| : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" | ||||||
| }`} | ||||||
| /> | ||||||
|
|
||||||
| <input | ||||||
| type="password" | ||||||
| name="password" | ||||||
| placeholder="Enter your password" | ||||||
| value={formData.password} | ||||||
| onChange={handleChange} | ||||||
| required | ||||||
| className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${ | ||||||
| mode === "dark" | ||||||
| ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" | ||||||
| : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" | ||||||
| }`} | ||||||
| /> | ||||||
|
|
||||||
| <button | ||||||
| type="submit" | ||||||
| disabled={isLoading} | ||||||
| className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed" | ||||||
| > | ||||||
| {isLoading ? "Creating..." : "Create Account"} | ||||||
| </button> | ||||||
| </form> | ||||||
|
|
||||||
| {/* Message */} | ||||||
| {message && ( | ||||||
| <div | ||||||
| className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${ | ||||||
| message.includes("successfully") | ||||||
| ? "bg-green-500/20 text-green-300 border border-green-500/30" | ||||||
| : "bg-red-500/20 text-red-300 border border-red-500/30" | ||||||
| }`} | ||||||
| > | ||||||
| {message} | ||||||
| </div> | ||||||
| )} | ||||||
|
|
||||||
| {/* Footer Text */} | ||||||
| <div className="text-center mt-8 pb-8"> | ||||||
| <p | ||||||
| className={`${ | ||||||
| mode === "dark" ? "text-slate-500" : "text-gray-600" | ||||||
| } text-sm`} | ||||||
| > | ||||||
| Already have an account? | ||||||
| <Link | ||||||
| to="/login" | ||||||
| className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300" | ||||||
| > | ||||||
| Sign in here | ||||||
| </Link> | ||||||
| </p> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
| <div | ||||||
| className={`${ | ||||||
| mode === "dark" ? "from-slate-900" : "from-slate-100" | ||||||
| } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} | ||||||
| /> | ||||||
| </div> | ||||||
| ); | ||||||
| }; | ||||||
|
|
||||||
| export default SignUp; | ||||||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Verification agent
🧩 Analysis chain
Avoid unsafe ThemeContext cast; provide a safe fallback for
mode.ThemeContextis created with a nullable default (see src/context/ThemeContext.tsx). Casting and destructuring without a guard risks runtime crashes if the Provider is ever omitted. Use a nullable context and a sane fallback.Apply this diff:
If you adopt the above, you can remove the now-unused type-only import:
-import type { ThemeContextType } from "../../context/ThemeContext";Run this quick check to confirm the app wraps routes with a Theme Provider:
Also applies to: 25-26
🏁 Script executed:
Length of output: 950
🏁 Script executed:
Length of output: 1416
🏁 Script executed:
Length of output: 1678
Handle nullable ThemeContext safely; remove unsafe cast and redundant import
Verified that
ThemeWrapperwraps the entire app (in bothApp.tsxandmain.tsx), souseContext(ThemeContext)should never benullat runtime—but it’s still best practice to guard against a missing provider and eliminate the unnecessary cast.• In src/pages/Signup/Signup.tsx, replace:
• Remove the now-unused type-only import:
- import type { ThemeContextType } from "../../context/ThemeContext";Also apply the same change on lines 25–26 if this pattern repeats.
📝 Committable suggestion
🤖 Prompt for AI Agents