From b6680a3eb40b0d326c79bad924b451f9a673d547 Mon Sep 17 00:00:00 2001 From: Jayam Srivastava Date: Fri, 4 Sep 2026 20:41:55 +0530 Subject: [PATCH 1/2] feat: redesign login page layout --- src/app/components/Login.tsx | 245 +++++++++++------------------------ 1 file changed, 76 insertions(+), 169 deletions(-) diff --git a/src/app/components/Login.tsx b/src/app/components/Login.tsx index a151d59..9650163 100644 --- a/src/app/components/Login.tsx +++ b/src/app/components/Login.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { motion } from "motion/react"; -import { Shield, Mail, Lock, ArrowRight, AlertCircle, Chrome } from "lucide-react"; +import { Shield, Mail, Lock, ArrowRight, AlertCircle, Chrome, ScanLine, Sparkles } from "lucide-react"; import { Link, useNavigate } from "react-router"; import { login as loginRequest } from "../lib/api"; import { consumeGoogleRedirectResult, signInWithGoogle } from "../lib/firebase"; @@ -22,13 +22,7 @@ export default function Login() { const completeGoogleLogin = async (user: { email: string | null; getIdToken: () => Promise }) => { const firebaseToken = await user.getIdToken(); - - const auth = await loginRequest({ - email: user.email || "", - password: firebaseToken, - remember_me: false, - }); - + const auth = await loginRequest({ email: user.email || "", password: firebaseToken, remember_me: false }); saveLocalSession(auth.user.name, auth.user.email, auth.token); navigate("/dashboard"); }; @@ -37,10 +31,7 @@ export default function Login() { const consumeRedirect = async () => { try { const credential = await consumeGoogleRedirectResult(); - if (!credential) { - return; - } - + if (!credential) return; setIsGoogleLoading(true); setError(""); await completeGoogleLogin(credential.user); @@ -50,28 +41,19 @@ export default function Login() { setIsGoogleLoading(false); } }; - void consumeRedirect(); }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(""); - if (!email || !password) { setError("Please fill in all fields"); return; } - setIsLoading(true); - try { - const auth = await loginRequest({ - email, - password, - remember_me: rememberMe, - }); - + const auth = await loginRequest({ email, password, remember_me: rememberMe }); saveLocalSession(auth.user.name, auth.user.email, auth.token); navigate("/dashboard"); } catch (err) { @@ -84,173 +66,98 @@ export default function Login() { const handleGoogleSignIn = async () => { setError(""); setIsGoogleLoading(true); - try { const credential = await signInWithGoogle(); if (!credential) { setError("Continuing Google sign-in..."); return; } - await completeGoogleLogin(credential.user); } catch (err) { - const errorMsg = err instanceof Error ? err.message : "Google sign-in failed"; - setError(errorMsg); + setError(err instanceof Error ? err.message : "Google sign-in failed"); } finally { setIsGoogleLoading(false); } }; return ( -
- {/* Animated background */} -
-
-
+
+
+
+
+
- {/* Login card */} - -
- {/* Logo and title */} -
- - - -

- VeritasAI -

-

Sign in to your account

-
- - {/* Error message */} - {error && ( - - -

{error}

- - )} - - {/* Login form */} -
-
- -
- - setEmail(e.target.value)} - placeholder="you@example.com" - className="w-full pl-12 pr-4 py-3 bg-gray-900/50 border border-gray-700 rounded-xl text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all" - /> +
+ +
+
+
+
+
+
+ +
+
+

VeritasAI

+

Trust intelligence

+
- -
- -
- - setPassword(e.target.value)} - placeholder="••••••••" - className="w-full pl-12 pr-4 py-3 bg-gray-900/50 border border-gray-700 rounded-xl text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-all" - /> +
+
+ Secure verification workspace +
+

Question the noise. Trust the signal.

+

Verify text, media and sources with a focused intelligence workspace built for clarity.

+
+ + Multimodal analysis · Private workspace
+

Evidence first. Decisions second.

+
+ +
+
+
+
+
+ VeritasAI +
+
+
+

Welcome back

+

Sign in to continue.

+

Access your verification workspace.

+
-
- - - Forgot password? - -
- - - -
-
- - OR - + {error && {error}} + + +
+ +
setEmail(e.target.value)} placeholder="you@example.com" className="w-full rounded-xl border border-slate-200 bg-slate-50/80 py-3.5 pl-11 pr-4 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:bg-white focus:ring-4 focus:ring-sky-100 dark:border-slate-700 dark:bg-slate-800/70 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-sky-500 dark:focus:bg-slate-800 dark:focus:ring-sky-500/10" />
+
+
+ +
setPassword(e.target.value)} placeholder="••••••••" className="w-full rounded-xl border border-slate-200 bg-slate-50/80 py-3.5 pl-11 pr-4 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:bg-white focus:ring-4 focus:ring-sky-100 dark:border-slate-700 dark:bg-slate-800/70 dark:text-white dark:focus:border-sky-500 dark:focus:bg-slate-800 dark:focus:ring-sky-500/10" />
+
+ + +
OR
+ + +

Don't have an account? Create one

- - - - - {/* Sign up link */} -
-

- Don't have an account?{" "} - - Sign up - -

-
-
- - {/* Footer text */} -

- Secure authentication powered by VeritasAI -

- -
+
+ +
+
); -} \ No newline at end of file +} From c2de7437ef2318173b1a3b06d53a63cce695750b Mon Sep 17 00:00:00 2001 From: Jayam Srivastava Date: Fri, 4 Sep 2026 20:43:17 +0530 Subject: [PATCH 2/2] feat: redesign signup page layout --- src/app/components/Signup.tsx | 431 +++++----------------------------- 1 file changed, 62 insertions(+), 369 deletions(-) diff --git a/src/app/components/Signup.tsx b/src/app/components/Signup.tsx index 729b353..0a7dc1b 100644 --- a/src/app/components/Signup.tsx +++ b/src/app/components/Signup.tsx @@ -1,18 +1,13 @@ import { useEffect, useState } from "react"; import { motion } from "motion/react"; -import { Shield, Mail, Lock, User, ArrowRight, AlertCircle, CheckCircle2, Chrome, Info } from "lucide-react"; +import { Shield, Mail, Lock, User, ArrowRight, AlertCircle, CheckCircle2, Chrome, Info, ScanLine, Sparkles } from "lucide-react"; import { Link, useNavigate } from "react-router"; import { signup as signupRequest, login as loginRequest } from "../lib/api"; import { consumeGoogleRedirectResult, signInWithGoogle } from "../lib/firebase"; import BiometricVerification from "./BiometricVerification"; export default function Signup() { - const [formData, setFormData] = useState({ - name: "", - email: "", - password: "", - confirmPassword: "", - }); + const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "" }); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isGoogleLoading, setIsGoogleLoading] = useState(false); @@ -27,392 +22,90 @@ export default function Signup() { localStorage.setItem("veritasai_user", JSON.stringify({ name, email: userEmail })); localStorage.setItem("veritasai_token", token); }; - - const handleChange = (e: React.ChangeEvent) => { - setFormData({ ...formData, [e.target.name]: e.target.value }); - }; - + const handleChange = (e: React.ChangeEvent) => setFormData({ ...formData, [e.target.name]: e.target.value }); const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - setError(""); - - if (!formData.name || !formData.email || !formData.password || !formData.confirmPassword) { - setError("Please fill in all fields"); - return; - } - - if (formData.password.length < 8) { - setError("Password must be at least 8 characters"); - return; - } - - if (formData.password !== formData.confirmPassword) { - setError("Passwords do not match"); - return; - } - - if (!acceptTerms) { - setError("Please accept the Terms of Service and Privacy Policy"); - return; - } - + e.preventDefault(); setError(""); + if (!formData.name || !formData.email || !formData.password || !formData.confirmPassword) return setError("Please fill in all fields"); + if (formData.password.length < 8) return setError("Password must be at least 8 characters"); + if (formData.password !== formData.confirmPassword) return setError("Passwords do not match"); + if (!acceptTerms) return setError("Please accept the Terms of Service and Privacy Policy"); setIsLoading(true); - try { - const auth = await signupRequest({ - name: formData.name, - email: formData.email, - password: formData.password, - confirm_password: formData.confirmPassword, - accept_terms: acceptTerms, - }); - - saveLocalSession(auth.user.name, auth.user.email, auth.token); - // Show biometric verification before navigating to dashboard - setShowBiometricVerification(true); - } catch (err) { - setError(err instanceof Error ? err.message : "Unable to create account"); - } finally { - setIsLoading(false); - } - }; - - const handleVerificationComplete = () => { - setIsVerified(true); - // Navigate to dashboard after verification - setTimeout(() => { - navigate("/dashboard"); - }, 1500); + const auth = await signupRequest({ name: formData.name, email: formData.email, password: formData.password, confirm_password: formData.confirmPassword, accept_terms: acceptTerms }); + saveLocalSession(auth.user.name, auth.user.email, auth.token); setShowBiometricVerification(true); + } catch (err) { setError(err instanceof Error ? err.message : "Unable to create account"); } finally { setIsLoading(false); } }; - + const handleVerificationComplete = () => { setIsVerified(true); setTimeout(() => navigate("/dashboard"), 1500); }; const handleVerificationCancel = () => { - setShowBiometricVerification(false); - // Clear local session on cancel - localStorage.removeItem("veritasai_authenticated"); - localStorage.removeItem("veritasai_user"); - localStorage.removeItem("veritasai_token"); - setFormData({ name: "", email: "", password: "", confirmPassword: "" }); - setError("Verification cancelled. Please try again."); + setShowBiometricVerification(false); localStorage.removeItem("veritasai_authenticated"); localStorage.removeItem("veritasai_user"); localStorage.removeItem("veritasai_token"); + setFormData({ name: "", email: "", password: "", confirmPassword: "" }); setError("Verification cancelled. Please try again."); }; - const completeGoogleSignup = async (user: { email: string | null; displayName: string | null; getIdToken: () => Promise }) => { const firebaseToken = await user.getIdToken(); - try { - const auth = await signupRequest({ - name: user.displayName || user.email?.split("@")[0] || "Google User", - email: user.email || "", - password: firebaseToken, - confirm_password: firebaseToken, - accept_terms: true, - }); - - saveLocalSession(auth.user.name, auth.user.email, auth.token); - setShowBiometricVerification(true); + const auth = await signupRequest({ name: user.displayName || user.email?.split("@")[0] || "Google User", email: user.email || "", password: firebaseToken, confirm_password: firebaseToken, accept_terms: true }); + saveLocalSession(auth.user.name, auth.user.email, auth.token); setShowBiometricVerification(true); } catch (signupErr) { const errorMsg = signupErr instanceof Error ? signupErr.message : ""; if (errorMsg.includes("already exists")) { - const auth = await loginRequest({ - email: user.email || "", - password: firebaseToken, - remember_me: false, - }); - saveLocalSession(auth.user.name, auth.user.email, auth.token); - setShowBiometricVerification(true); - return; - } - - if (errorMsg.includes("Invalid Firebase token") || errorMsg.includes("token verification")) { - throw new Error( - "Backend cannot validate your Google account. Please ensure backend is running and reachable at VITE_API_BASE_URL." - ); + const auth = await loginRequest({ email: user.email || "", password: firebaseToken, remember_me: false }); + saveLocalSession(auth.user.name, auth.user.email, auth.token); setShowBiometricVerification(true); return; } - + if (errorMsg.includes("Invalid Firebase token") || errorMsg.includes("token verification")) throw new Error("Backend cannot validate your Google account. Please ensure backend is running and reachable at VITE_API_BASE_URL."); throw signupErr; } }; - useEffect(() => { const consumeRedirect = async () => { - try { - const credential = await consumeGoogleRedirectResult(); - if (!credential) { - return; - } - - setIsGoogleLoading(true); - setError(""); - await completeGoogleSignup(credential.user); - } catch (err) { - setError(err instanceof Error ? err.message : "Google sign-up failed"); - } finally { - setIsGoogleLoading(false); - } - }; - - void consumeRedirect(); + try { const credential = await consumeGoogleRedirectResult(); if (!credential) return; setIsGoogleLoading(true); setError(""); await completeGoogleSignup(credential.user); } + catch (err) { setError(err instanceof Error ? err.message : "Google sign-up failed"); } + finally { setIsGoogleLoading(false); } + }; void consumeRedirect(); }, []); - const handleGoogleSignup = async () => { - setError(""); - setIsGoogleLoading(true); - - try { - const credential = await signInWithGoogle(); - if (!credential) { - setError("Continuing Google sign-up..."); - return; - } - - await completeGoogleSignup(credential.user); - } catch (err) { - let errorMessage = "Google sign-up failed"; + setError(""); setIsGoogleLoading(true); + try { const credential = await signInWithGoogle(); if (!credential) { setError("Continuing Google sign-up..."); return; } await completeGoogleSignup(credential.user); } + catch (err) { const errorDetails = err instanceof Error ? err.message : ""; - - // Check if this is a Firebase availability issue - const isFirebaseIssue = - errorDetails.includes("temporarily unavailable") || - errorDetails.includes("timed out") || - errorDetails.includes("timeout") || - errorDetails.includes("email/password instead") || - errorDetails.includes("ERR_NAME_NOT_RESOLVED"); - - if (isFirebaseIssue) { - setGoogleUnavailable(true); - errorMessage = "Google sign-up is temporarily unavailable. Please use email and password to sign up instead."; - } else { - errorMessage = errorDetails || errorMessage; - } - - setError(errorMessage); - } finally { - setIsGoogleLoading(false); - } + const isFirebaseIssue = ["temporarily unavailable", "timed out", "timeout", "email/password instead", "ERR_NAME_NOT_RESOLVED"].some((value) => errorDetails.includes(value)); + if (isFirebaseIssue) { setGoogleUnavailable(true); setError("Google sign-up is temporarily unavailable. Please use email and password to sign up instead."); } + else setError(errorDetails || "Google sign-up failed"); + } finally { setIsGoogleLoading(false); } }; - - const passwordStrength = () => { - const length = formData.password.length; - if (length === 0) return { label: "", color: "" }; - if (length < 6) return { label: "Weak", color: "text-red-500" }; - if (length < 10) return { label: "Medium", color: "text-yellow-500" }; - return { label: "Strong", color: "text-green-500" }; - }; - + const passwordStrength = () => { const length = formData.password.length; if (!length) return { label: "", color: "" }; if (length < 6) return { label: "Weak", color: "text-red-500" }; if (length < 10) return { label: "Medium", color: "text-yellow-500" }; return { label: "Strong", color: "text-green-500" }; }; const strength = passwordStrength(); return ( -
- {/* Show biometric verification when needed */} - {showBiometricVerification && ( - - )} - - {/* Animated background */} -
-
-
+
+ {showBiometricVerification && } +
+
+ +
+
+

VeritasAI

Trust intelligence

+
Built for trustworthy decisions

Build your trust layer.

Create a verification workspace for analyzing claims, media, sources and suspicious signals.

Multimodal verification tools
Secure personal workspace
+

Evidence first. Decisions second.

+
+
+
VeritasAI
+

Get started

Create your workspace.

Set up your account and start verifying information.

+ {error && {error}} +
+
+
+
{formData.password &&

Password strength: {strength.label}

}
+
{formData.confirmPassword && formData.password === formData.confirmPassword && }
+ + +
OR
+ + {googleUnavailable && Google auth is temporarily unavailable. Use email/password instead.} + +

Already have an account? Sign in

+
+
- - {/* Signup card */} - -
- {/* Logo and title */} -
- - - -

- VeritasAI -

-

Create your account

-
- - {/* Error message */} - {error && ( - - -

{error}

- - )} - - {/* Signup form */} -
-
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
- {formData.password && ( -

- Password strength: {strength.label} -

- )} -
- -
- -
- - - {formData.confirmPassword && formData.password === formData.confirmPassword && ( - - )} -
-
- -
- -
- - - -
-
- - OR - -
- -
- - {googleUnavailable && ( - - -

Google auth temporarily unavailable. Use email/password instead.

- - )} -
- - - {/* Sign in link */} -
-

- Already have an account?{" "} - - Sign in - -

-
-
- - {/* Footer text */} -

- Secure authentication powered by VeritasAI -

- -
+
); -} \ No newline at end of file +}