Skip to content

fix: broken create account link on login page #258

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
anan-yaa wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: broken create account link on login page #258

Show file tree
Hide file tree
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
12 changes: 11 additions & 1 deletion frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,16 @@ const App = () => {
</ErrorBoundary>
}
/>
<Route
path="/signup"
element={
<ErrorBoundary>
<PageTransition>
<SignUp />
</PageTransition>
</ErrorBoundary>
}
/>
<Route
path="/verify-email"
element={
Expand Down Expand Up @@ -327,7 +337,7 @@ const App = () => {
style: {
fontSize: "13px",
},
}}
}}
/>
</div>
</ErrorBoundary>
Expand Down
96 changes: 90 additions & 6 deletions frontend/src/pages/Auth/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,96 @@ const Login = ({ setCurrentPage, onLoginSuccess }) => {
};

return (
<div className="w-full">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-2 mb-3">
<img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
<span className="font-semibold text-gray-300">PrepPilot</span>
<div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-[#0B0F19] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0B0F19] to-[#05080f]">
<div className="w-full max-w-[500px] rounded-2xl p-6 sm:p-10 shadow-2xl border border-white/5 relative overflow-hidden bg-[#111827]">
{/* Subtle background glow effect for SaaS look */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-gradient-to-b from-violet-500/10 to-transparent pointer-events-none" />

<div className="relative z-10">
{/* Header */}
<div className="mb-8 text-center sm:text-left">
<div className="flex items-center justify-center sm:justify-start gap-2 mb-4">
<img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
<span className="font-semibold text-gray-200">PrepPilot</span>
</div>
<h2 className="text-2xl sm:text-3xl font-bold text-white mb-2 tracking-tight">
Welcome Back
</h2>
<p className="text-sm text-gray-400">Sign in to continue your interview preparation journey</p>
</div>

<form onSubmit={handleLogin} className="space-y-5">
<div className="w-full">
<Input
value={email}
onChange={({ target }) => setEmail(target.value)}
label="Email Address"
placeholder="your@email.com"
type="text"
autoFocus
/>
</div>

<div className="w-full">
<Input
value={password}
onChange={({ target }) => setPassword(target.value)}
label="Password"
placeholder="Min 8 characters"
type="password"
/>
</div>

{/* Remember Me */}
<div className="flex items-center gap-2 mt-2">
<input
id="rememberMe"
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
className="cursor-pointer w-4 h-4 rounded border-gray-600 bg-white"
/>
<label htmlFor="rememberMe" className="text-sm text-gray-400 cursor-pointer hover:text-gray-300 transition-colors">
Remember Me
</label>
</div>

{error && (
<div id="login-error" role="alert" aria-live="polite" className="p-3 mt-4 bg-red-500/10 border border-red-500/30 rounded-lg">
<p className="text-red-400 text-sm font-medium">{error}</p>
</div>
)}

<Button
type="submit"
loading={loading}
loadingText="Signing in..."
icon={<LuArrowRight className="group-hover:translate-x-1 transition-transform" />}
className="mt-6 w-full flex justify-center py-2.5 text-sm font-semibold shadow-lg shadow-violet-500/20 bg-gradient-to-r from-violet-600 to-blue-600 hover:from-violet-500 hover:to-blue-500 text-white rounded-lg transition-all"
>
Sign In
</Button>

<div className="mt-8 pt-6 border-t border-white/10">
<p className="text-sm text-gray-400 text-center">
Don't have an account?{" "}
<button
type="button"
className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
onClick={() => {
if (setCurrentPage) {
setCurrentPage("signup");
} else {
navigate("/signup");
}
setError(null);
}}
>
Create account
</button>
</p>
</div>
</form>
</div>
<h2 className="text-3xl font-bold bg-gradient-to-r from-violet-300 to-blue-300 bg-clip-text text-transparent mb-2">
Welcome Back
Expand Down
59 changes: 40 additions & 19 deletions frontend/src/pages/Auth/SignUp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,18 +105,23 @@ const SignUp = ({ setCurrentPage }) => {
};

return (
<div className="w-full">
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-2 mb-3">
<img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
<span className="font-semibold text-gray-300">PrepPilot</span>
</div>
<h2 className="text-3xl font-bold bg-gradient-to-r from-violet-300 to-blue-300 bg-clip-text text-transparent mb-2">
Create Account
</h2>
<p className="text-sm text-gray-400">Join thousands preparing smarter for their dream jobs</p>
</div>
<div className="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-[#0B0F19] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#1a1a2e] via-[#0B0F19] to-[#05080f]">
<div className="w-full max-w-[500px] rounded-2xl p-6 sm:p-10 shadow-2xl border border-white/5 relative overflow-hidden bg-[#111827]">
{/* Subtle background glow effect for SaaS look */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-32 bg-gradient-to-b from-violet-500/10 to-transparent pointer-events-none" />

<div className="relative z-10">
{/* Header */}
<div className="mb-8 text-center sm:text-left">
<div className="flex items-center justify-center sm:justify-start gap-2 mb-4">
<img src="/PrepPilot-Logo.png" alt="PrepPilot Logo" className="w-8 h-8 object-contain" />
<span className="font-semibold text-gray-200">PrepPilot</span>
</div>
<h2 className="text-2xl sm:text-3xl font-bold text-white mb-2 tracking-tight">
Create Account
</h2>
<p className="text-sm text-gray-400">Join thousands preparing smarter for their dream jobs</p>
</div>

{successMessage ? (
/* Success state */
Expand All @@ -141,13 +146,20 @@ const SignUp = ({ setCurrentPage }) => {
</div>
)}

<div className="pt-4 border-t border-white/10">
<div className="pt-6 mt-8 border-t border-white/10">
<p className="text-sm text-gray-400 text-center">
Already verified?{" "}
<button
type="button"
className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer"
onClick={() => { setCurrentPage("login"); setSuccessMessage(""); }}
className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
onClick={() => {
if (setCurrentPage) {
setCurrentPage("login");
} else {
navigate("/login");
}
setSuccessMessage("");
}}
>
Sign in
</button>
Expand Down Expand Up @@ -249,25 +261,34 @@ const SignUp = ({ setCurrentPage }) => {
loading={loading}
loadingText="Creating account..."
icon={<LuArrowRight className="group-hover:translate-x-1 transition-transform" />}
className="mt-6"
className="mt-6 w-full flex justify-center py-2.5 text-sm font-semibold shadow-lg shadow-violet-500/20 bg-gradient-to-r from-violet-600 to-blue-600 hover:from-violet-500 hover:to-blue-500 text-white rounded-lg transition-all"
>
Create Account
</Button>

<div className="mt-6 pt-4 border-t border-white/10">
<div className="mt-8 pt-6 border-t border-white/10">
<p className="text-sm text-gray-400 text-center">
Already have an account?{" "}
<button
type="button"
className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer"
onClick={() => { setCurrentPage("login"); setError(null); }}
className="font-semibold text-transparent bg-gradient-to-r from-violet-400 to-blue-400 bg-clip-text hover:opacity-80 transition-opacity cursor-pointer ml-1"
onClick={() => {
if (setCurrentPage) {
setCurrentPage("login");
} else {
navigate("/login");
}
setError(null);
}}
>
Sign in
</button>
</p>
</div>
</form>
)}
</div>
</div>
</div>
);
};
Expand Down