uploadfly · zyzer01 · Sep 25, 2023 · Sep 25, 2023 · Sep 25, 2023 · Sep 25, 2023
diff --git a/layouts/AuthLayout.tsx b/layouts/AuthLayout.tsx
@@ -1,24 +1,25 @@
-import FlyingThing from "@/components/FlyingThing";
-import Link from "next/link";
-import { ReactNode, useEffect, useState } from "react";
-import { RiLoader5Fill } from "react-icons/ri";
-import { SiGithub } from "react-icons/si";
-import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
-import Head from "next/head";
+import FlyingThing from '@/components/FlyingThing';
+import Link from 'next/link';
+import { ReactNode, useEffect, useState } from 'react';
+import { RiLoader5Fill } from 'react-icons/ri';
+import { SiGithub } from 'react-icons/si';
+import { useRouter } from 'next/router';
+import { toast } from 'react-hot-toast';
+import Head from 'next/head';
+import Image from 'next/image';
 
 const AuthLayout = ({
   children,
   text,
-  type = "login",
+  type = 'login',
   hideExtras = false,
   question,
   hideFlyingThing = false,
   pageName,
 }: {
   children: ReactNode;
   text: string;
-  type?: "login" | "signup" | "forgot" | "reset";
+  type?: 'login' | 'signup' | 'forgot' | 'reset';
   hideExtras?: boolean;
   question?: {
     title: string;
@@ -32,15 +33,15 @@ const AuthLayout = ({
   const [loading, setLoading] = useState(false);
 
   const handleKeyPress = (e: KeyboardEvent) => {
-    e.key === "Enter" && setHide(true);
+    e.key === 'Enter' && setHide(true);
   };
 
   const router = useRouter();
 
   useEffect(() => {
-    if (router.asPath === "/login?status=failed") {
+    if (router.asPath === '/login?status=failed') {
       setHide(true);
-      toast.error("Login failed");
+      toast.error('Login failed');
     }
   }, []);
 
@@ -49,78 +50,74 @@ const AuthLayout = ({
       handleKeyPress(e as unknown as KeyboardEvent);
     };
 
-    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener('keydown', handleKeyDown);
     };
     //Written by ChatGPT
     //Modified by @xing0x
   }, []);
 
   const loginWithGithub = async () => {
     setLoading(true);
-    window.open(`${process.env.NEXT_PUBLIC_AUTH_URL}/github`, "_self");
+    window.open(`${process.env.NEXT_PUBLIC_AUTH_URL}/github`, '_self');
   };
 
   return (
     <div className="bg-uf-dark relative h-screen text-uf-light overflow-x-hidden">
       <Head>
         <title>{pageName} | Uploadfly</title>
       </Head>
-      <div
-        className={`abosolute top-0 w-full h-full bg-uf-dark flex items-center justify-center`}
-      >
+      <div className={`abosolute top-0 w-full h-full bg-uf-dark flex items-center justify-center`}>
         <div
           className="w-[35%] h-full lg:flex hidden items-center justify-center"
           style={{
-            backgroundImage:
-              "linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(/grid-bg.png)",
-            backgroundSize: "cover",
-            backgroundPosition: "right",
-          }}
-        >
-          <img src="/logo.svg" alt="" className="w-40 opacity-70" />
+            backgroundImage: 'linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(/grid-bg.png)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'right',
+          }}>
+          <Image src="/logo.svg" alt="" width={100} height={100} className="opacity-70" />
         </div>
-        <div className="flex-col lg:w-[65%] h-full bg-uf-dark flex relative items-center lg:justify-center lg:mt-0 mt-48">
-          <div className="h-full w-full absolute animate-opacity pointer-events-none"></div>
+        <div className="flex-col w-full lg:w-[65%] h-vh bg-uf-dark flex relative items-center lg:justify-center lg:mt-0">
+          <div className="h-full w-full absolute  animate-opacity pointer-events-none"></div>
           <div className="mb-8 flex flex-col items-center">
-            <img
+            <Image
               src="/logo.svg"
               alt=""
+              width={100}
+              height={100}
               className="w-20 my-5 opacity-70 lg:hidden"
             />
             <h1 className="shiny-text text-3xl">{text}</h1>
-            {type === "signup" && (
+            {type === 'signup' && (
               <p className="text-center font-semibold text-gray-400">{`Let's fly`}</p>
             )}
           </div>
           {children}
 
-          {type === "login" && (
+          {type === 'login' && (
             <Link
-              href={"/forgot-password"}
-              className="text-left w-[380px] mx-auto mt-3 font-semibold text-sm hover:text-uf-accent transition-colors"
-            >
+              href={'/forgot-password'}
+              className="text-left w-[380px] mx-auto mt-3 font-semibold text-sm hover:text-uf-accent transition-colors">
               Forgot password?
             </Link>
           )}
           {!hideExtras && (
             <>
-              {type !== "reset" && (
+              {type !== 'reset' && (
                 <div className="mt-4 flex justify-start w-[380px] gap-2 font-semibold">
                   <p>{question?.title}</p>
-                  <Link href={question?.route || ""}>{question?.text}</Link>
+                  <Link href={question?.route || ''}>{question?.text}</Link>
                 </div>
               )}
 
-              {(type === "login" || type === "signup") && (
+              {(type === 'login' || type === 'signup') && (
                 <div className="mt-4 flex items-center gap-4 flex-col">
                   <p>or</p>
                   <button
                     className="flex gap-2 bg-uf-light text-uf-dark rounded-md py-2 w-[380px] items-center justify-center font-bold hover:scale-105 transition-all"
-                    onClick={loginWithGithub}
-                  >
+                    onClick={loginWithGithub}>
                     {loading ? (
                       <RiLoader5Fill className="animate-spin text-2xl" />
                     ) : (

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -64,7 +64,7 @@ const Login = () => {
       }}
       pageName="Login">
       <form
-        className="flex flex-col z-40"
+        className="flex flex-col z-40 px-40"
         onSubmit={(e) => {
           e.preventDefault();
           loginWithEmail();

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -170,12 +170,6 @@ const Signup = () => {
               onChange={(e) => setEmail(e.target.value.toLowerCase().trim())}
             />
 
-            <input
-              type={showPassword ? 'text' : 'password'}
-              className="input"
-              placeholder="Password"
-              onChange={(e) => setPassword(e.target.value)}
-            />
             <div className="relative">
               <button
                 type="button"
@@ -186,10 +180,16 @@ const Signup = () => {
               <input
                 type={showPassword ? 'text' : 'password'}
                 className="input"
-                placeholder="Shh...it's a secret"
-                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Password"
+                onChange={(e) => setPassword(e.target.value)}
               />
             </div>
+            <input
+              type={showPassword ? 'text' : 'password'}
+              className="input"
+              placeholder="Re-enter password"
+              onChange={(e) => setConfirmPassword(e.target.value)}
+            />
           </>
         )}
 
@@ -224,16 +224,6 @@ const Signup = () => {
             </div>
           </div>
         )}
-        {!showOtpInput && !accountVerified && (
-          <div className="flex items-center gap-2 mt-2">
-            <input
-              type="checkbox"
-              name="Show password"
-              onChange={() => setShowPassword(!showPassword)}
-            />
-            <p>Show password</p>
-          </div>
-        )}
         {(wantsToChangeUsername || !accountVerified) && (
           <button className="w-[380px] bg-uf-accent rounded-md py-2 h-10 flex items-center justify-center text-[#1e1e1e] font-bold hover:scale-105 transition-all mt-4">
             {loading ? (