Dev

.gitignore

@@ -37,3 +37,5 @@ next-env.d.ts
 
 # pnpm
 pnpm-lock.yaml
+
+.env.example 

app/(pre-dashboard)/(entry)/forgot/page.tsx

@@ -1,70 +1,84 @@
-"use client"
+'use client';
 
 import { Button } from '@/app/ui/button';
 import Image from 'next/image';
 
-
 import { Forgot } from '../../../lib/actions';
 
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 export default function SignupPage() {
-
   const SignUpSchema = z.object({
     email: z.string().email(),
-
   });
 
   type SignUp = z.infer<typeof SignUpSchema>;
 
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<SignUp>({ resolver: zodResolver(SignUpSchema) });
 
-
-  const { register, handleSubmit, reset, formState: { errors }, } = useForm<SignUp>({ resolver: zodResolver(SignUpSchema) });
-
-  const [message, setMessage] = useState("");
-  const [buttonDisabled, setButtonDisabled] = useState(false)
+  const [message, setMessage] = useState('');
+  const [buttonDisabled, setButtonDisabled] = useState(false);
 
   const onSubmit = async (data: SignUp) => {
     setButtonDisabled(true);
     const resp = await Forgot(data.email);
     setMessage(resp);
-    setTimeout(() => {  // wait 1 minutes between requests
+    setTimeout(() => {
+      // wait 1 minutes between requests
       setButtonDisabled(false);
     }, 60000);
-  }
+  };
 
   return (
-    <main className="flex items-center justify-center h-screen w-screen">
-      <form onSubmit={handleSubmit(onSubmit)} className='bg-gradient-to-b from-offblack-100 to-[#453148] p-20 rounded-xl'>
+    <main className="flex h-screen w-screen items-center justify-center">
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="rounded-xl bg-gradient-to-b from-[var(--bg-color)] to-[var(--bg-color2)] p-20"
+      >
         <div className="w-full">
-          {(<p className="text-xs italic text-white mt-2">{message}</p>)}
+          {
+            <p className="mt-2 text-xs italic text-[var(--mainText-color)]">
+              {message}
+            </p>
+          }
           <div>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-white"
+              className="mb-3 mt-5 block text-xs font-medium text-[var(--mainText-color)] "
               htmlFor="email"
             >
               Email
             </label>
             <div className="relative">
               <input
-                {...register("email")}
-                className="peer block w-96 rounded-md mb-4 border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
+                {...register('email')}
+                className="peer mb-4 block w-96 rounded-md border border-[var(--border-color)]  py-[9px] pl-4 text-sm outline-2 placeholder:text-[var(--placeholder-color)] "
                 id="email"
                 type="email"
                 name="email"
                 placeholder="Enter your email address"
                 required
               />
-              {errors.email && (<p className="text-xs italic text-red-500 mt-2">{errors.email?.message}</p>)}
+              {errors.email && (
+                <p className="mt-2 text-xs italic  text-[var(--error-color)]">
+                  {errors.email?.message}
+                </p>
+              )}
             </div>
           </div>
         </div>
         <Button type="submit" disabled={buttonDisabled}>
-          {buttonDisabled ? "Please wait 1 minute between requests!" : "Send reset link"}
+          {buttonDisabled
+            ? 'Please wait 1 minute between requests!'
+            : 'Send reset link'}
         </Button>
       </form>
     </main>

app/(pre-dashboard)/(entry)/layout.tsx

@@ -1,9 +1,22 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <main className="relative h-fit w-fit">
+      <main
+        className="h-fit w-fit "
+        style={
+          {
+            '--bg-color': '#172335',
+            '--bg-color2': '#453148',
+            '--mainText-color': '#FFFFFF',
+            '--border-color': '#e5e7eb',
+            '--placeholder-color': '#6b7280',
+            '--error-color': '#ef4444',
+            '--success-color': '#ef4444',
+            '--hover-color': '#141719',
+            backgroundImage: 'url("/backgrounds/hero.jpg")',
+          } as React.CSSProperties
+        }
+      >
         {children}
         <div id="entry-radial" className="absolute top-0 -z-10 h-full w-full" />
       </main>

app/(pre-dashboard)/(entry)/login/page.tsx

@@ -1,23 +1,20 @@
-"use client"
+'use client';
 
 import { Button } from '@/app/ui/button';
 
 import { authenticate, authUser } from '../../../lib/actions';
 
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 
-import { Suspense, useState } from "react";
+import { Suspense, useState } from 'react';
 
 import Image from 'next/image';
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation';
 import Cursor from '../../../ui/cursor';
 
-
 export default function LoginPage() {
-
-
   const LoginSchema = z.object({
     email: z.string().email(),
     //email :z.string(),
@@ -26,69 +23,102 @@ export default function LoginPage() {
 
   type Login = z.infer<typeof LoginSchema>;
 
-  const [submit_errors, setErrors] = useState("");
+  const [submit_errors, setErrors] = useState('');
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
-  const { register, handleSubmit, reset, formState: { errors }, } = useForm<Login>({ resolver: zodResolver(LoginSchema) });
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<Login>({ resolver: zodResolver(LoginSchema) });
 
   const onSubmit = async (data: Login) => {
     setLoading(true);
     const resp = await authenticate(data.email, data.password);
     setLoading(false);
     setErrors(resp);
-  }
+  };
 
   return (
-    <main className="flex items-center justify-center md:h-screen w-screen h-screen">
-      <form onSubmit={handleSubmit(onSubmit)} className='bg-gradient-to-b from-offblack-100 to-[#453148] p-20 rounded-xl'>
-        <div className="w-full grid gap-0 items-center">
-          {(<p className="text-xs italic text-red-500 mt-2">{submit_errors}</p>)}
+    <main className="flex h-screen w-screen items-center justify-center md:h-screen">
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="rounded-xl bg-gradient-to-b from-[var(--bg-color)] to-[var(--bg-color2)] p-20"
+      >
+        <div className="grid w-full items-center gap-0">
+          {
+            <p className="mt-2 text-xs italic text-[var(--error-color)]">
+              {submit_errors}
+            </p>
+          }
           <div>
-          <p className = "text-s italic  text-white">Press Login or Press Enter to Login</p>
+            <p className="text-s italic  text-[var(--mainText-color)]">
+              Press Login or Press Enter to Login
+            </p>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-white"
+              className="mb-3 mt-5 block text-xs font-medium text-[var(--mainText-color)]"
               htmlFor="email"
             >
               Email
             </label>
             <div className="relative">
               <input
-                {...register("email")}
-                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
+                {...register('email')}
+                className="border-var(--border-color)] peer block w-96 rounded-md border py-[9px] pl-4 text-sm outline-2 placeholder:text-[var(--placeholder-color)]"
                 id="email"
                 type="email"
                 name="email"
                 placeholder="Enter your email address"
                 required
               />
             </div>
-            {errors.email && (<p className="text-xs italic text-red-500 mt-2">{errors.email?.message}</p>)}
+            {errors.email && (
+              <p className="mt-2 text-xs italic text-[var(--error-color)]">
+                {errors.email?.message}
+              </p>
+            )}
           </div>
           <div className="">
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-white"
+              className="mb-3 mt-5 block text-xs font-medium text-[var(--mainText-color)]"
               htmlFor="password"
             >
               Password
             </label>
             <div className="relative">
               <input
-                {...register("password")}
-                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
+                {...register('password')}
+                className="peer block w-96 rounded-md border border-[var(--border-color)] py-[9px] pl-4 text-sm outline-2 placeholder:text-[var(--placeholder-color)]"
                 id="password"
                 type="password"
                 name="password"
                 placeholder="Enter password"
                 required
               />
-              {errors.password && (<p className="text-xs italic text-red-500 mt-2">{errors.password?.message}</p>)}
+              {errors.password && (
+                <p className="mt-2 text-xs italic text-[var(--error-color)]">
+                  {errors.password?.message}
+                </p>
+              )}
             </div>
           </div>
           <Button className="mt-4 justify-center" type="submit">
-            {loading ? 'Loading...' : 'Login'} </Button>
-          <p className="text-s italic  text-white mt-2 hover:text-blue-500 cursor-pointer" onClick={() => router.push('/signup')}>Not a member? Create an Account!</p>
-          <p className="text-s italic  text-white mt-2 hover:text-blue-500 cursor-pointer" onClick={() => router.push('/forgot')}>Forgot Password? Reset it Here!</p>
+            {loading ? 'Loading...' : 'Login'}{' '}
+          </Button>
+          <p
+            className="text-s mt-2  cursor-pointer italic text-[var(--mainText-color)] hover:text-[var(--hover-color)]"
+            onClick={() => router.push('/signup')}
+          >
+            Not a member? Create an Account!
+          </p>
+          <p
+            className="text-s mt-2  italic text-[var(--mainText-color)] hover:text-[var(--hover-color)]"
+            onClick={() => router.push('/forgot')}
+          >
+            Forgot Password? Reset it Here!
+          </p>
         </div>
       </form>
     </main>