change login and register to form

components/AuthSubmitButton.tsx

@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type Props = {
+  onClick?: Function;
+  icon?: IconProp;
+  label: string;
+  loading: boolean;
+  className?: string;
+};
+
+export default function AuthSubmitButton({
+  onClick,
+  icon,
+  label,
+  loading,
+  className,
+}: Props) {
+  return (
+    <button
+      type="submit"
+      className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
+        loading
+          ? "bg-sky-600 cursor-auto"
+          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
+      } ${className}`}
+      onClick={() => {
+        if (!loading && onClick) onClick();
+      }}
+    >
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="text-center w-full">{label}</p>
+    </button>
+  );
+}

pages/login.tsx

@@ -3,8 +3,9 @@ import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
+import AuthSubmitButton from "@/components/AuthSubmitButton";
 
 interface FormData {
   username: string;
@@ -21,7 +22,9 @@ export default function Login() {
     password: "",
   });
 
-  async function loginUser() {
+  async function loginUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
     if (form.username !== "" && form.password !== "") {
       setSubmitLoader(true);
 
@@ -47,6 +50,7 @@ export default function Login() {
 
   return (
     <CenteredForm text="Sign in to your account">
+      <form onSubmit={loginUser}>
         <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
           <p className="text-2xl text-black dark:text-white text-center font-bold">
             Enter your credentials
@@ -59,6 +63,7 @@ export default function Login() {
             </p>
 
             <TextInput
+              autoFocus={true}
               placeholder="johnny"
               value={form.username}
               className="bg-white"
@@ -90,8 +95,7 @@ export default function Login() {
             )}
           </div>
 
-        <SubmitButton
+          <AuthSubmitButton
-          onClick={loginUser}
             label="Login"
             className=" w-full text-center"
             loading={submitLoader}
@@ -108,6 +112,7 @@ export default function Login() {
             </div>
           )}
         </div>
+      </form>
     </CenteredForm>
   );
 }

pages/register.tsx

@@ -1,11 +1,12 @@
 import Link from "next/link";
-import { useState } from "react";
+import { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
+import AuthSubmitButton from "@/components/AuthSubmitButton";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -29,7 +30,9 @@ export default function Register() {
     passwordConfirmation: "",
   });
 
-  async function registerUser() {
+  async function registerUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
     const checkFields = () => {
       if (emailEnabled) {
         return (
@@ -107,6 +110,7 @@ export default function Register() {
           </p>
         </div>
       ) : (
+        <form onSubmit={registerUser}>
           <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
           <p className="text-2xl text-black dark:text-white text-center font-bold">
             Enter your details
@@ -117,6 +121,7 @@ export default function Register() {
             </p>
 
             <TextInput
+              autoFocus={true}
               placeholder="Johnny"
               value={form.name}
               className="bg-white"
@@ -217,8 +222,7 @@ export default function Register() {
             </div>
           ) : undefined}
 
-          <SubmitButton
+          <AuthSubmitButton
-            onClick={registerUser}
             label="Sign Up"
             className="mt-2 w-full text-center"
             loading={submitLoader}
@@ -235,6 +239,7 @@ export default function Register() {
             </Link>
           </div>
         </div>
+        </form>
       )}
     </CenteredForm>
   );