FrontOps/UserDashboard
9
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

update register/login page

Browse Source
This commit is contained in:
Syasya 2025-07-30 10:00:54 +08:00
parent 4452183305
commit c6dd83f4db
5 changed files with 114 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/(auth)/login/page.tsx
View File

@ -7,28 +7,57 @@ type Props = {}
const LoginPage = (props: Props) => { const LoginPage = (props: Props) => {
return ( return (
<div> <div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
<div className="absolute inset-0"> {/* Background gradient layer */}
<img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" /> <div className="absolute inset-0 -z-10">
<img
src="/assets/images/auth/bg-gradient.png"
alt="background gradient"
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
</div> </div>
<div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"> {/* Background decorative objects */}
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" /> <img
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" /> src="/assets/images/auth/coming-soon-object1.png"
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" /> alt="left decor"
<img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" /> className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
<div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"> />
<div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]"> <img
<div className="mx-auto w-full max-w-[440px]"> src="/assets/images/auth/coming-soon-object3.png"
<div className="mb-10"> alt="right decor"
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1> className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p> />
</div>
{/* Centered card wrapper */}
<div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
<div
className="relative w-full max-w-[870px] rounded-2xl p-1
bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
>
{/* Inner card (glassmorphic effect) */}
<div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
<div className="mx-auto w-full max-w-[440px] text-center">
{/* Header */}
<h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
Sign In
</h1>
<p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
Enter your email and password to access your account.
</p>
{/* Login form */}
<ComponentsAuthLoginForm /> <ComponentsAuthLoginForm />
<div className="text-center dark:text-white"> {/* Footer link */}
Don&apos;t have an account ?&nbsp; <div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
<Link href="/register" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> Don’t have an account?{" "}
<Link
href="/register"
className="text-yellow-400 font-semibold underline transition hover:text-white"
>
SIGN UP SIGN UP
</Link> </Link>
</div> </div>
@ -37,7 +66,8 @@ const LoginPage = (props: Props) => {
</div> </div>
</div> </div>
</div> </div>
) );
} };
export default LoginPage export default LoginPage

68
app/(auth)/register/page.tsx
View File

@ -6,30 +6,58 @@ import React from 'react';
type Props = {} type Props = {}
const RegisterPage = (props: Props) => { const RegisterPage = (props: Props) => {
return ( return (
<div> <div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
<div className="absolute inset-0"> {/* Background gradient layer */}
<img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" /> <div className="absolute inset-0 -z-10">
<img
src="/assets/images/auth/bg-gradient.png"
alt="background gradient"
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
</div> </div>
<div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"> {/* Background decorative objects */}
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" /> <img
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" /> src="/assets/images/auth/coming-soon-object1.png"
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" /> alt="left decor"
<img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" /> className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
<div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"> />
<div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]"> <img
src="/assets/images/auth/coming-soon-object3.png"
alt="right decor"
className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
/>
<div className="mx-auto w-full max-w-[440px]"> {/* Centered card wrapper */}
<div className="mb-10"> <div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1> <div
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p> className="relative w-full max-w-[870px] rounded-2xl p-1
</div> bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
>
{/* Inner card (glassmorphic effect) */}
<div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
<div className="mx-auto w-full max-w-[440px] text-center">
{/* Header */}
<h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
Sign Up
</h1>
<p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
Enter your email and password to register
</p>
{/* Login form */}
<ComponentsAuthRegisterForm /> <ComponentsAuthRegisterForm />
<div className="text-center dark:text-white"> {/* Footer link */}
Already have an account ?&nbsp; <div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
<Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"> Already have an account ?{" "}
<Link
href="/register"
className="text-yellow-400 font-semibold underline transition hover:text-white"
>
SIGN IN SIGN IN
</Link> </Link>
</div> </div>
@ -38,7 +66,7 @@ const RegisterPage = (props: Props) => {
</div> </div>
</div> </div>
</div> </div>
) );
} }
export default RegisterPage export default RegisterPage

14
components/auth/components-auth-login-form.tsx
View File

@ -35,9 +35,9 @@ const ComponentsAuthLoginForm = () => {
} }
return ( return (
<form className="space-y-5 dark:text-white" onSubmit={submitForm}> <form className="space-y-3 dark:text-white" onSubmit={submitForm}>
<div> <div>
<label htmlFor="Email">Email</label> <label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
<div className="relative text-white-dark"> <div className="relative text-white-dark">
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" /> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
<span className="absolute start-4 top-1/2 -translate-y-1/2"> <span className="absolute start-4 top-1/2 -translate-y-1/2">
@ -45,8 +45,8 @@ const ComponentsAuthLoginForm = () => {
</span> </span>
</div> </div>
</div> </div>
<div> <div className= "pb-2">
<label htmlFor="Password">Password</label> <label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
<div className="relative text-white-dark"> <div className="relative text-white-dark">
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
<span className="absolute start-4 top-1/2 -translate-y-1/2"> <span className="absolute start-4 top-1/2 -translate-y-1/2">
@ -54,7 +54,11 @@ const ComponentsAuthLoginForm = () => {
</span> </span>
</div> </div>
</div> </div>
<button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"> <button
type="submit"
disabled={loading}
className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70"
>
{loading ? "Logging in..." : "Sign In"} {loading ? "Logging in..." : "Sign In"}
</button> </button>
</form> </form>

12
components/auth/components-auth-register-form.tsx
View File

@ -47,24 +47,24 @@ const ComponentsAuthRegisterForm = () => {
</div> </div>
</div> */} </div> */}
<div> <div>
<label htmlFor="Email">Email</label> <label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
<div className="relative text-white-dark"> <div className="relative text-white-dark">
<input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" /> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
<span className="absolute start-4 top-1/2 -translate-y-1/2"> <span className="absolute start-4 top-1/2 -translate-y-1/2">
<IconMail fill={true} /> <IconMail fill={true} />
</span> </span>
</div> </div>
</div> </div>
<div> <div className= "pb-2">
<label htmlFor="Password">Password</label> <label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
<div className="relative text-white-dark"> <div className="relative text-white-dark">
<input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
<span className="absolute start-4 top-1/2 -translate-y-1/2"> <span className="absolute start-4 top-1/2 -translate-y-1/2">
<IconLockDots fill={true} /> <IconLockDots fill={true} />
</span> </span>
</div> </div>
</div> </div>
<button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"> <button type="submit" disabled={loading} className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70">
{loading ? "Creating account..." : "Register"} {loading ? "Creating account..." : "Register"}
</button> </button>
</form> </form>

2
components/dashboards/MonthlyBarChart.tsx
View File

@ -50,7 +50,7 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
} }
} }
// ✅ Only return the last 3 months // ✅ Only return the last 6 months
return monthlyData.slice(-6); return monthlyData.slice(-6);
}, [siteData]); }, [siteData]);