Dev

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

@@ -1,6 +1,7 @@
 "use client"
 
 import { Button } from '@/app/ui/button';
+import Image from 'next/image';
 
 
 import { Forgot } from '../../../lib/actions';
@@ -16,8 +17,6 @@ export default function SignupPage() {
   const SignUpSchema = z.object({
     email: z.string().email(),
 
-
-
   });
 
   type SignUp = z.infer<typeof SignUpSchema>;
@@ -26,33 +25,34 @@ export default function SignupPage() {
 
   const { register, handleSubmit, reset, formState: { errors }, } = useForm<SignUp>({ resolver: zodResolver(SignUpSchema) });
 
-  const [submit_errors, setErrors] = useState("");
-  const [success, setSuccess] = useState("");
+  const [message, setMessage] = useState("");
+  const [buttonDisabled, setButtonDisabled] = useState(false)
 
   const onSubmit = async (data: SignUp) => {
+    setButtonDisabled(true);
     const resp = await Forgot(data.email);
-    setSuccess(resp.response);
-    setErrors(resp.error);
+    setMessage(resp);
+    setTimeout(() => {  // wait 1 minutes between requests
+      setButtonDisabled(false);
+    }, 60000);
   }
 
-
   return (
-    <main className="flex items-center justify-center md:h-screen w-screen">
-      <form onSubmit={handleSubmit(onSubmit)} >
+    <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'>
         <div className="w-full">
-          {(<p className="text-xs italic text-red-500 mt-2">{success}</p>)}
-          {(<p className="text-xs italic text-red-500 mt-2">{submit_errors}</p>)}
+          {(<p className="text-xs italic text-white mt-2">{message}</p>)}
           <div>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="email"
             >
               Email
             </label>
             <div className="relative">
               <input
                 {...register("email")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                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"
                 id="email"
                 type="email"
                 name="email"
@@ -62,10 +62,10 @@ export default function SignupPage() {
               {errors.email && (<p className="text-xs italic text-red-500 mt-2">{errors.email?.message}</p>)}
             </div>
           </div>
-
-
         </div>
-        <Button type="submit">Send Reset Link</Button>
+        <Button type="submit" disabled={buttonDisabled}>
+          {buttonDisabled ? "Please wait 1 minute between requests!" : "Send reset link"}
+        </Button>
       </form>
     </main>
   );

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

@@ -27,45 +27,35 @@ export default function LoginPage() {
   type Login = z.infer<typeof LoginSchema>;
 
   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 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">
-      <Image
-        src={('/textbannerBROWN.png')}
-        width="900"
-        height="900"
-        alt="Scroll"
-        className={"h-[500px] w-[650px] sm:h-auto md:w-[650px] lg:w-[650px] xl:w-[650px] absolute"}
-        priority
-        style={{
-          objectFit: 'cover',
-          zIndex: -1
-        }}
-      />
-      <form onSubmit={handleSubmit(onSubmit)} >
+      <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>)}
           <div>
-          <p className = "text-s italic text-grey-200">Press Login or Press Enter to Login</p>
+          <p className = "text-s italic  text-white">Press Login or Press Enter to Login</p>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="email"
             >
               Email
             </label>
             <div className="relative">
               <input
                 {...register("email")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
                 id="email"
                 type="email"
                 name="email"
@@ -77,15 +67,15 @@ export default function LoginPage() {
           </div>
           <div className="">
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="password"
             >
               Password
             </label>
             <div className="relative">
               <input
                 {...register("password")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
                 id="password"
                 type="password"
                 name="password"
@@ -95,9 +85,10 @@ export default function LoginPage() {
               {errors.password && (<p className="text-xs italic text-red-500 mt-2">{errors.password?.message}</p>)}
             </div>
           </div>
-          <Button className="mt-4 justify-center" type="submit">Log in</Button>
-          <p className="text-s italic text-grey-500 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-grey-500 mt-2 hover:text-blue-500 cursor-pointer" onClick={() => router.push('/forgot')}>Forgot Password? Reset it Here!</p>
+          <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>
         </div>
       </form>
     </main>

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

@@ -10,6 +10,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from 'zod';
 
 import { useState } from "react";
+import Image from 'next/image';
 
 import { usePathname } from 'next/navigation'
 
@@ -47,28 +48,37 @@ export default function SignupPage() {
     const resp = await Reset(data.email, data.password, data.confirm_password, arr[1]);
 
     console.log(resp);
-    setSuccess(resp.response);
-    setErrors(resp.error);
-  }
-
+    if (resp.error) {
+      setErrors(resp.error);
+      setSuccess("");
+    } else {
+      setSuccess(resp.response);
+      setErrors("");
+    }
+
+    if (resp.error == "Password reset successful") {   // for some reason this was showing up as an error
+      setSuccess(resp.error);
+      setErrors("");
+    }
+  };
 
   return (
     <main className="flex items-center justify-center md:h-screen w-screen">
-      <form onSubmit={handleSubmit(onSubmit)} >
+      <form onSubmit={handleSubmit(onSubmit)} className='bg-gradient-to-b from-offblack-100 to-[#453148] p-20 rounded-xl'>
         <div className="w-full">
           {(<p className="text-xs italic text-red-500 mt-2">{submit_errors}</p>)}
-          {(<p className="text-xs italic text-red-500 mt-2">{success}</p>)}
+          {(<p className="text-xs italic text-green-500 mt-2">{success}</p>)}
           <div>
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="email"
             >
               Email
             </label>
             <div className="relative">
               <input
                 {...register("email")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
                 id="email"
                 type="email"
                 name="email"
@@ -81,16 +91,17 @@ export default function SignupPage() {
 
           <div className="mt-4">
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="password"
             >
               Password
             </label>
             <div className="relative">
               <input
                 {...register("password")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                className="peer block w-96 rounded-md border border-gray-200 py-[9px] pl-4 text-sm outline-2 placeholder:text-gray-500"
                 id="password"
+                type="password"
                 name="password"
                 placeholder="Enter password"
                 required
@@ -100,16 +111,17 @@ export default function SignupPage() {
           </div>
           <div className="mt-4">
             <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              className="mb-3 mt-5 block text-xs font-medium text-white"
               htmlFor="confirm_password"
             >
               Confim Password
             </label>
             <div className="relative">
               <input
                 {...register("confirm_password")}
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                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"
                 id="confirm_password"
+                type="password"
                 name="confirm_password"
                 placeholder="Enter password again"
                 required
@@ -123,4 +135,4 @@ export default function SignupPage() {
       </form>
     </main>
   );
-}
+}