feat(auth): add password field back to login form

Author: DongDuong2001

app/login/page.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
-import { signInWithEmail, checkRememberMe } from "@/lib/features/auth"
+import { signIn, checkRememberMe } from "@/lib/features/auth"
 import { getTranslations, getUserLanguage } from "@/lib/config"
 import { LanguageSwitcher } from "@/components/language-switcher"
 import {
@@ -26,8 +26,10 @@ import {
 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 [message, setMessage] = useState("")
+  const [showPassword, setShowPassword] = useState(false)
   const [t, setT] = useState(getTranslations("en"))
 
   useEffect(() => {
@@ -46,17 +48,16 @@ export default function LoginPage() {
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
     setError("")
-    setMessage("")
 
-    if (!email) {
-      setError(t.auth.email + " is required")
+    if (!email || !password) {
+      setError("Email and password are required")
       return
     }
 
-    const result = await signInWithEmail(email)
+    const result = await signIn(email, password, rememberMe)
 
     if (result.success) {
-      setMessage("Check your email for the magic link to sign in!")
+      router.push("/dashboard")
     } else {
       setError(result.error || "Login failed")
     }
@@ -177,19 +178,6 @@ 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">
@@ -212,13 +200,60 @@ 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"
               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"
             >
-              Send Magic Link
+              Sign In
               <ArrowRightIcon className="ml-3 h-5 w-5 group-hover:translate-x-1.5 transition-transform" />
             </Button>
           </form>