SignUp page now exists and works, mostly

app/lib/actions.ts

@@ -1,8 +1,6 @@
 'use server';
 
 import { z } from 'zod';
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
 import { signIn } from '@/auth';
 import { AuthError } from 'next-auth';
 
@@ -23,30 +21,20 @@ const FormSchema = z.object({
 });
 
 
-export async function authenticate(
-  prevState: string | undefined,
-  formData: FormData,
-) {
+export async function authenticate(email:string, password:string) {
   try {
     console.log("FORM");
     const session = await auth();
     console.log(session);
-    await signIn('credentials', formData);
+    await signIn('credentials', {email:email, password:password});
   } catch (error) {
-      if (error instanceof AuthError) {
-        switch (error.type) {
-          case 'CredentialsSignin':
-            return 'Invalid credentials.';
-          default:
-            return 'Something went wrong.';
-        }
-      }
+      console.log("ERROR");
+      console.log(error);
+      return "Invalid Login"
   }
 }
 
 export async function authUser(email: string, password:string){
-  console.log(email);
-  console.log(password);
   let resp = {
     error: "",
     response: "",
@@ -80,3 +68,118 @@ export async function authUser(email: string, password:string){
 }
 
 
+
+export async function SignUp(firstname:string, lastname:string, email:string, password:string, confirmpassword:string) {
+  let resp = {
+      error: "",
+      response: "",
+  };
+  console.log(firstname);
+  console.log(lastname);
+  console.log(email);
+  console.log(password);
+  console.log(confirmpassword);
+      if (!firstname) {
+          resp.error = "Invalid first name";
+          return resp;
+      } else if (!lastname) {
+          resp.error = "Invalid last name";
+          return resp;
+      } else if (!email) {
+          resp.error = "Invalid email";
+          return resp;
+      } else if (!password) {
+          resp.error = "Invalid password";
+          return resp;
+      } else if (!confirmpassword) {
+          resp.error = "Invalid password";
+          return resp;
+      } else if (password !== confirmpassword) {
+          resp.error = "Passwords don't match";
+          return resp;
+      } else {
+
+          await fetch("https://api.hackru.org/dev/create", {
+              method: "POST",
+              headers: {
+                  "content-type": "application/json",
+              },
+              body: JSON.stringify({
+                  email: email,
+                  password: password,
+                  registration_status: "unregistered", //"waitlist" is one of them
+              }),
+          })
+              .then(async (res) => {
+                  let res_json = await res.json();
+                  if (res_json.statusCode === 400) {
+                      resp.error =
+                          "User with email " + email + " already exists";
+                  } else if (res_json.statusCode === 200) {
+                      // Set the first and last name
+                      let data = res_json.body;
+                      let token = data.token;
+
+                      await fetch("https://api.hackru.org/dev/update", {
+                          method: "POST",
+                          headers: {
+                              "content-type": "application/json",
+                          },
+                          body: JSON.stringify({
+                              updates: {
+                                  $set: {
+                                      first_name: firstname,
+                                      last_name: lastname,
+                                  },
+                              },
+                              user_email: email,
+                              auth_email: email,
+                              token: token,
+                          }),
+                      })
+                          .then(async (res) => {
+                              let res_json = await res.json();
+                              if (res_json.statusCode === 200) {
+                                try {
+                                  await signIn('credentials', {email:email, password:password});
+                                } catch (error) {
+                                    if (error instanceof AuthError) {
+                                      switch (error.type) {
+                                        case 'CredentialsSignin':
+                                          resp.error = 'Invalid credentials.';
+                                        default:
+                                          resp.error = 'Something went wrong.';
+                                      }
+                                    }
+                                }
+                              } else {
+                                  if (res_json.body) {
+                                      resp.error = res_json.body;
+                                  } else {
+                                      resp.error = "Unexpected Error";
+                                  }
+                              }
+                          })
+                          .catch((error) => {
+                              resp.error =
+                                  error +
+                                  "; An error occured when attempting signup. Failed at 2/2";
+                          });
+                  } else {
+                      if (res_json.body) {
+                          resp.error = res_json.body;
+                      } else {
+                          resp.error = "Unexpected Error";
+                      }
+                  }
+              })
+              .catch((error) => {
+                  resp.error =
+                      error +
+                      "; An error occured when attempting signup. Failed at 1/2";
+              });
+  }
+
+  return resp;
+}
+

app/login/page.tsx

@@ -2,19 +2,39 @@
 
 import { Button } from '@/app/ui/button';
 
-import { useFormState } from 'react-dom';
+
 
 import { authenticate, authUser } from '../lib/actions';
 
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from 'zod';
+
 
 export default function LoginPage() {
 
-  const [errorMessage, dispatch] = useFormState(authenticate, undefined);
+
+  const LoginSchema = z.object({
+    email: z.string().email(),
+    password: z.string(),
+  });
+
+  type Login = z.infer<typeof LoginSchema>;
+
+
+
+  const {register,handleSubmit,reset, formState: { errors },} = useForm<Login>({resolver: zodResolver(LoginSchema)});
+
+  const onSubmit = (data: Login) => {
+    console.log("Hi");
+    authenticate(data.email, data.password);
+  }
+
 
 
   return (
     <main className="flex items-center justify-center md:h-screen">
-        <form action={dispatch} >
+        <form onSubmit={handleSubmit(onSubmit)} >
         <div className="w-full">
           <div>
             <label
@@ -25,6 +45,7 @@ export default function LoginPage() {
             </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"
                 id="email"
                 type="email"
@@ -33,6 +54,7 @@ export default function LoginPage() {
                 required
               />
             </div>
+            {errors.email && (<p className="text-xs italic text-red-500 mt-2">{errors.email?.message}</p>)}
           </div>
           <div className="mt-4">
             <label
@@ -43,13 +65,15 @@ export default function LoginPage() {
             </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"
                 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>)}
             </div>
           </div>
         </div>

app/signup/page.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { Button } from '@/app/ui/button';
+
+
+import { SignUp } from '../lib/actions';
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from 'zod';
+
+export default function SignupPage() {
+
+  const SignUpSchema = z.object({
+    email: z.string().email(),
+
+    first_name: z.string(),
+    last_name: z.string(),
+
+    password: z.string(),
+    confirm_password: z.string()
+
+  }).refine((data) => data.password === data.confirm_password, {
+    message: "Passwords don't match",
+    path: ["confirm_password"], // path of error
+  });
+
+  type SignUp = z.infer<typeof SignUpSchema>;
+
+
+
+  const {register,handleSubmit,reset, formState: { errors },} = useForm<SignUp>({resolver: zodResolver(SignUpSchema)});
+
+  const onSubmit = (data: SignUp) => {
+    console.log("SENDING SIGNUP");
+    console.log(data);
+    const resp = SignUp(data.first_name, data.last_name, data.email, data.password, data.confirm_password);
+    console.log(resp);
+  }
+
+
+  return (
+    <main className="flex items-center justify-center md:h-screen">
+        <form  onSubmit={handleSubmit(onSubmit)} >
+        <div className="w-full">
+          <div>
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              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"
+                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>)}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="first_name"
+            >
+              First
+            </label>
+            <div className="relative">
+              <input
+                {...register("first_name")}
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="first_name"
+                name="first_name"
+                placeholder="First"
+                required
+              />
+                {errors.first_name && (<p className="text-xs italic text-red-500 mt-2">{errors.first_name?.message}</p>)}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="first"
+            >
+              Last
+            </label>
+            <div className="relative">
+              <input
+                {...register("last_name")}
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="last_name"
+                name="last_name"
+                placeholder="Last"
+                required
+              />
+                {errors.last_name && (<p className="text-xs italic text-red-500 mt-2">{errors.last_name?.message}</p>)}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              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"
+                id="password"
+                name="password"
+                placeholder="Enter password"
+                required
+              />
+                {errors.password && (<p className="text-xs italic text-red-500 mt-2">{errors.password?.message}</p>)}
+            </div>
+          </div>
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              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"
+                id="confirm_password"
+                name="confirm_password"
+                placeholder="Enter password again" 
+                required
+              />
+                {errors.confirm_password && (<p className="text-xs italic text-red-500 mt-2">{errors.confirm_password?.message}</p>)}
+            </div>
+          </div>
+
+        </div>
+        <Button type = "submit">Sign Up</Button>
+        </form>
+    </main>
+  );
+}