refactor(auth): remove password from login form for magic link flow

Author: DongDuong2001

app/login/page.tsx

@@ -8,28 +8,26 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
-import { signIn, checkRememberMe } from "@/lib/features/auth"
+import { signInWithEmail, checkRememberMe } from "@/lib/features/auth"
 import { getTranslations, getUserLanguage } from "@/lib/config"
 import { LanguageSwitcher } from "@/components/language-switcher"
-import { 
-  EyeIcon, 
-  EyeSlashIcon, 
-  LockClosedIcon, 
-  EnvelopeIcon, 
-  ArrowRightIcon, 
-  SparklesIcon, 
-  BoltIcon, 
+import {
+  EyeIcon,
+  EyeSlashIcon,
+  LockClosedIcon,
+  EnvelopeIcon,
+  ArrowRightIcon,
+  SparklesIcon,
+  BoltIcon,
   ShieldCheckIcon,
   CheckCircleIcon
 } from "@heroicons/react/24/outline"
 
 export default function LoginPage() {
   const router = useRouter()
   const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState("")
-  const [showPassword, setShowPassword] = useState(false)
+  const [message, setMessage] = useState("")
   const [t, setT] = useState(getTranslations("en"))
 
   useEffect(() => {
@@ -41,23 +39,24 @@ export default function LoginPage() {
         router.push("/dashboard")
       }
     }
-    
+
     checkAuth()
   }, [router])
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
     setError("")
+    setMessage("")
 
-    if (!email || !password) {
-      setError("Email and password are required")
+    if (!email) {
+      setError(t.auth.email + " is required")
       return
     }
 
-    const result = await signIn(email, password, rememberMe)
+    const result = await signInWithEmail(email)
 
     if (result.success) {
-      router.push("/dashboard")
+      setMessage("Check your email for the magic link to sign in!")
     } else {
       setError(result.error || "Login failed")
     }
@@ -73,12 +72,12 @@ export default function LoginPage() {
           <div className="absolute bottom-[-10%] right-[-10%] w-[70%] h-[70%] bg-purple-600/20 rounded-full blur-[120px] animate-pulse delay-700"></div>
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[50%] h-[50%] bg-pink-600/10 rounded-full blur-[120px] animate-pulse delay-1000"></div>
         </div>
-        
+
         {/* Static noise texture */}
         <div className="absolute inset-0 opacity-20 pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]"></div>
 
         <div className="relative z-10 flex flex-col justify-center items-center text-white p-20 w-full">
-          <motion.div 
+          <motion.div
             initial={{ opacity: 0, x: -50 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, ease: "easeOut" }}
@@ -95,7 +94,7 @@ export default function LoginPage() {
                 <p className="text-xs font-bold uppercase tracking-[0.4em] text-primary/80">Innovation Lab</p>
               </div>
             </div>
-            
+
             <div className="space-y-6">
               <h2 className="text-5xl font-bold leading-tight tracking-tight text-balance">
                 Build something <br />
@@ -112,11 +111,11 @@ export default function LoginPage() {
                 { icon: CheckCircleIcon, title: "Collaboration", desc: "Work with your team in real-time" },
                 { icon: ShieldCheckIcon, title: "Secure & Private", desc: "Your data is always protected" }
               ].map((item, idx) => (
-                <motion.div 
+                <motion.div
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: 0.5 + idx * 0.1 }}
-                  key={idx} 
+                  key={idx}
                   className="flex items-start gap-5 p-4 rounded-2xl hover:bg-white/5 transition-colors border border-transparent hover:border-white/5 group"
                 >
                   <div className="rounded-xl bg-primary/10 border border-primary/20 p-3 mt-1 group-hover:bg-primary/20 transition-all">
@@ -137,12 +136,12 @@ export default function LoginPage() {
       <div className="flex-1 flex items-center justify-center p-8 bg-slate-950 relative overflow-hidden">
         {/* Background glow for mobile */}
         <div className="lg:hidden absolute top-[-20%] left-[-20%] w-full h-full bg-primary/5 rounded-full blur-[100px] pointer-events-none"></div>
-        
+
         <div className="absolute top-8 right-8 z-20">
           <LanguageSwitcher />
         </div>
 
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
@@ -166,7 +165,7 @@ export default function LoginPage() {
           <form onSubmit={handleLogin} className="space-y-6">
             <AnimatePresence>
               {error && (
-                <motion.div 
+                <motion.div
                   initial={{ opacity: 0, height: 0 }}
                   animate={{ opacity: 1, height: "auto" }}
                   exit={{ opacity: 0, height: 0 }}
@@ -178,6 +177,19 @@ export default function LoginPage() {
                   </div>
                 </motion.div>
               )}
+              {message && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: "auto" }}
+                  exit={{ opacity: 0, height: 0 }}
+                  className="rounded-2xl border border-green-500/50 bg-green-500/5 p-4 text-sm text-green-400 overflow-hidden"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-1.5 h-6 bg-green-500 rounded-full"></div>
+                    <p className="font-medium">{message}</p>
+                  </div>
+                </motion.div>
+              )}
             </AnimatePresence>
 
             <div className="space-y-5">
@@ -200,77 +212,30 @@ export default function LoginPage() {
                   />
                 </div>
               </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-xs font-bold uppercase tracking-widest text-slate-500 ml-1">
-                  {t.auth.password}
-                </Label>
-                <div className="relative group">
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2 flex items-center justify-center">
-                    <LockClosedIcon className="h-5 w-5 text-slate-500 group-focus-within:text-primary transition-colors" />
-                  </div>
-                  <Input
-                    id="password"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="pl-12 pr-12 h-14 bg-white/[0.03] border-white/5 hover:border-white/10 focus:border-primary/50 transition-all rounded-2xl text-lg placeholder:text-slate-600 focus:ring-0 focus:bg-white/[0.05]"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
-                  >
-                    {showPassword ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
-                  </button>
-                </div>
-              </div>
             </div>
 
-            <div className="flex items-center justify-between px-1">
-              <label className="flex items-center gap-3 cursor-pointer group">
-                <div className="relative">
-                  <input
-                    type="checkbox"
-                    checked={rememberMe}
-                    onChange={(e) => setRememberMe(e.target.checked)}
-                    className="peer appearance-none w-5 h-5 rounded-md border border-white/10 checked:bg-primary checked:border-primary transition-all cursor-pointer"
-                  />
-                  <CheckCircleIcon className="absolute top-0.5 left-0.5 w-4 h-4 text-slate-950 opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none" />
-                </div>
-                <span className="text-sm font-medium text-slate-400 group-hover:text-slate-300 transition-colors">
-                  {t.auth.rememberMe}
-                </span>
-              </label>
-              <Link href="#" className="text-sm text-primary hover:text-white font-bold transition-colors">
-                Forgot password?
-              </Link>
-            </div>
-
-            <Button 
-              type="submit" 
+            <Button
+              type="submit"
               className="w-full h-14 text-lg font-black uppercase tracking-widest bg-primary hover:bg-primary/90 text-slate-950 shadow-[0_0_20px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_30px_rgba(var(--primary-rgb),0.5)] transition-all group rounded-2xl"
             >
-              Sign In
+              Send Magic Link
               <ArrowRightIcon className="ml-3 h-5 w-5 group-hover:translate-x-1.5 transition-transform" />
             </Button>
           </form>
 
           <footer className="pt-6 space-y-6 text-center border-t border-white/5">
             <p className="text-slate-500 font-medium">
               Don't have an account?{" "}
-              <Link 
-                href="/signup" 
+              <Link
+                href="/signup"
                 className="text-white hover:text-primary font-bold underline decoration-primary/30 underline-offset-4 decoration-2 transition-all"
               >
                 Sign Up
               </Link>
             </p>
-            
-            <Link 
-              href="/" 
+
+            <Link
+              href="/"
               className="inline-flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-slate-600 hover:text-primary transition-all"
             >
               <span>← Back to Home</span>