Updated Login

src/app/login/page.tsx

@@ -1,191 +1,31 @@
 "use client"
 
-import { useState, useEffect, useRef } from "react"
+import { useState } from "react"
 import { useRouter } from "next/navigation"
+import { motion } from "framer-motion"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
 import { COMPANY_NAME } from "@/lib/constants"
 import { Eye, EyeOff, Loader2 } from "lucide-react"
 
-const waves = [
-  { a: 16, f: 0.011, s: 0.018, y: 0.38, fill: "rgba(27,176,206,0.18)" },
-  { a: 20, f: 0.008, s: 0.013, y: 0.52, fill: "rgba(27,176,206,0.25)" },
-  { a: 12, f: 0.015, s: 0.025, y: 0.28, fill: "rgba(180,192,210,0.06)" },
-  { a: 26, f: 0.006, s: 0.010, y: 0.65, fill: "rgba(180,192,210,0.15)" },
-  { a: 10, f: 0.019, s: 0.030, y: 0.20, fill: "rgba(27,176,206,0.10)" },
-]
-
-export default function LoginPage() {
+function LoginForm() {
   const router = useRouter()
-  const [email, setEmail] = useState("admin@coastalit.com")
+  const searchParams = useSearchParams()
+  const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [showPassword, setShowPassword] = useState(false)
   const [loading, setLoading] = useState(false)
   const [remember, setRemember] = useState(false)
-  const [counts, setCounts] = useState({ leads: 0, conversion: 0, users: 0 })
-  const counterStarted = useRef(false)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const starsCanvasRightRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-
-    let animId: number
-    let time = 0
-
-    const resize = () => {
-      const parent = canvas.parentElement!
-      const rect = parent.getBoundingClientRect()
-      const dpr = window.devicePixelRatio || 1
-      canvas.width = rect.width * dpr
-      canvas.height = 200 * dpr
-      canvas.style.width = rect.width + "px"
-      canvas.style.height = "200px"
-      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
-    }
-
-    resize()
-    window.addEventListener("resize", resize)
-
-    const draw = () => {
-      const w = canvas.width / (window.devicePixelRatio || 1)
-      const h = 200
-      ctx!.clearRect(0, 0, w, h)
-
-      for (const wave of waves) {
-        ctx!.beginPath()
-        ctx!.moveTo(0, h)
-        for (let x = 0; x <= w; x++) {
-          const y = wave.y * h + Math.sin(x * wave.f + time * wave.s) * wave.a
-          ctx!.lineTo(x, y)
-        }
-        ctx!.lineTo(w, h)
-        ctx!.closePath()
-        ctx!.fillStyle = wave.fill
-        ctx!.fill()
-      }
-
-      time += 1
-      animId = requestAnimationFrame(draw)
-    }
-
-    animId = requestAnimationFrame(draw)
-
-    return () => {
-      cancelAnimationFrame(animId)
-      window.removeEventListener("resize", resize)
-    }
-  }, [])
-
-  useEffect(() => {
-    const canvases = [starsCanvasRightRef.current].filter(Boolean) as HTMLCanvasElement[]
-    if (canvases.length === 0) return
-
-    const stars = Array.from({ length: 312 }, () => ({
-      x: Math.random(),
-      y: Math.random(),
-      r: 0.2 + Math.random() * 0.6,
-      baseOpacity: 0.12 + Math.random() * 0.43,
-      speed: 0.003 + Math.random() * 0.015,
-      phase: Math.random() * Math.PI * 2,
-      driftX: (Math.random() - 0.5) * 0.00003,
-      driftY: (Math.random() - 0.5) * 0.00003,
-    }))
-
-    let animId: number
-    let time = 0
-
-    const resize = () => {
-      for (const c of canvases) {
-        const dpr = window.devicePixelRatio || 1
-        const rect = c.getBoundingClientRect()
-        c.width = rect.width * dpr
-        c.height = rect.height * dpr
-        const ctx = c.getContext("2d")
-        if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      }
-    }
-
-    resize()
-    const ros = canvases.map((c) => {
-      const ro = new ResizeObserver(() => resize())
-      ro.observe(c.parentElement!)
-      return ro
-    })
-    window.addEventListener("resize", resize)
-
-    const draw = () => {
-      time += 1
-      for (const c of canvases) {
-        const dpr = window.devicePixelRatio || 1
-        const w = c.width / dpr
-        const h = c.height / dpr
-        const ctx = c.getContext("2d")
-        if (!ctx) continue
-        ctx.clearRect(0, 0, w, h)
-
-        for (const star of stars) {
-          const x = ((star.x + time * star.driftX) % 1) * w
-          const y = ((star.y + time * star.driftY) % 1) * h
-          const opacity = star.baseOpacity * (0.5 + 0.5 * Math.sin(time * star.speed + star.phase))
-
-          ctx.beginPath()
-          ctx.arc(x, y, star.r, 0, Math.PI * 2)
-          ctx.fillStyle = `rgba(255,255,255,${opacity})`
-          ctx.fill()
-
-          if (star.r > 0.5) {
-            ctx.beginPath()
-            ctx.arc(x, y, star.r * 1.8, 0, Math.PI * 2)
-            ctx.fillStyle = `rgba(255,255,255,${opacity * 0.06})`
-            ctx.fill()
-          }
-        }
-      }
-
-      animId = requestAnimationFrame(draw)
-    }
-
-    animId = requestAnimationFrame(draw)
-
-    return () => {
-      cancelAnimationFrame(animId)
-      ros.forEach((ro) => ro.disconnect())
-      window.removeEventListener("resize", resize)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (counterStarted.current) return
-    counterStarted.current = true
-    const targets = { leads: 1247, conversion: 40, users: 83 }
-    const steps = 150
-
-    const delayTimer = setTimeout(() => {
-      let step = 0
-      const interval = setInterval(() => {
-        step++
-        if (step >= steps) {
-          clearInterval(interval)
-          setCounts(targets)
-          return
-        }
-        setCounts({
-          leads: Math.min(Math.floor((targets.leads / steps) * step), targets.leads),
-          conversion: Math.min(Math.floor((targets.conversion / steps) * step), targets.conversion),
-          users: Math.min(Math.floor((targets.users / steps) * step), targets.users),
-        })
-      }, 15)
-    }, 400)
-
-    return () => clearTimeout(delayTimer)
-  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    setError("")
     setLoading(true)
+
     await new Promise((resolve) => setTimeout(resolve, 1200))
+
     router.push("/dashboard")
   }
 
@@ -503,78 +343,69 @@ export default function LoginPage() {
               Sign in to your account to continue
             </p>
 
-            <form onSubmit={handleSubmit} className="space-y-5">
-              <div>
-                <label htmlFor="email" className="login-label">
-                  Email
-                </label>
-                <div className="input-sheen">
-                  <input
-                    id="email"
-                    type="email"
-                    placeholder="name@company.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    autoComplete="email"
-                    className="login-input"
-                  />
-                </div>
-              </div>
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="name@company.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+              />
+            </div>
 
-              <div>
-                <div className="flex items-center justify-between mb-[6px]">
-                  <label htmlFor="password" className="login-label" style={{ marginBottom: 0 }}>
-                    Password
-                  </label>
-                  <button type="button" className="text-[12px] text-[#1BB0CE] hover:underline">
-                    Forgot password?
-                  </button>
-                </div>
-                <div className="input-sheen input-sheen-delayed">
-                  <div className="relative">
-                    <input
-                      id="password"
-                      type={showPassword ? "text" : "password"}
-                      placeholder="Enter your password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      required
-                      autoComplete="current-password"
-                      className="login-input"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="password-toggle"
-                    >
-                      {showPassword ? (
-                        <EyeOff className="h-4 w-4" />
-                      ) : (
-                        <Eye className="h-4 w-4" />
-                      )}
-                    </button>
-                  </div>
-                </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <button
+                  type="button"
+                  className="text-xs text-primary hover:underline"
+                >
+                  Forgot password?
+                </button>
               </div>
-
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={remember}
-                  onChange={(e) => setRemember(e.target.checked)}
-                  className="login-checkbox"
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="current-password"
                 />
-                <span className="text-[13px] checkbox-text">
-                  Remember me
-                </span>
-              </label>
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
 
-              <button type="submit" className="auth-btn" disabled={loading}>
-                {loading && <Loader2 className="h-4 w-4 animate-spin" />}
-                {loading ? "Signing in..." : "Sign in"}
-              </button>
-            </form>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="remember"
+                checked={remember}
+                onCheckedChange={(checked) => setRemember(checked as boolean)}
+              />
+              <label
+                htmlFor="remember"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Remember me
+              </label>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {loading ? "Signing in..." : "Sign in"}
+            </Button>
+          </form>
 
             <p className="text-center text-[11px] mt-4 footer-text">
               By signing in, you agree to our{" "}