Fixed Signin and Signup

opencodeiiita · Apr 16, 2023 · 1d1a67c · 1d1a67c · vercel · Apr 16, 2023
1 parent 6359e60
commit 1d1a67c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env
diff --git a/components/elements/GoogleOAuth/index.js b/components/elements/GoogleOAuth/index.js
@@ -1,33 +1,23 @@
-import React from "react"
+import React from "react";
 import { FcGoogle } from "react-icons/fc";
-import {get} from "../../utils/API"
+import { get } from "../../utils/API";
 
-export default function GoogleOAuth(){
+export default function GoogleOAuth() {
+  const click = async () => {
+    const response = await get("/auth/google");
+    window.open(response.data.data.url, "_self");
+  };
 
-    const click = async () => {
-        console.log("clicked");
-        const response = await get("/auth/google")
-        console.log(response.data.data.url)
-        window.open(response.data.data.url,"_self")
-    }
-
-    return(
-        <div>
-            <button 
-            type="submit" 
-            className="flex justify-between items-center border-2 rounded-lg border-[#555656] border-opacity-30 w-full my-2 py-3"
-            onClick={click}
-            >
-            <div className="w-1/2">
-
-            </div>
-            <div className="px-1">
-                <FcGoogle/>
-            </div>
-            <div className="w-full text-left opacity-80 font-inter font-semibold">
-                Sign in with Google
-            </div>
-            </button>
-        </div>
-    )
-}
+  return (
+    <div
+      className="flex justify-between items-center border-2 rounded-lg border-[#555656] border-opacity-30 w-full my-2 py-3 cursor-pointer"
+      onClick={click}
+    >
+      <div className="w-1/2"></div>
+      <div className="px-1">
+        <FcGoogle />
+      </div>
+      <div className="w-full text-left opacity-80 font-inter font-semibold">Sign in with Google</div>
+    </div>
+  );
+}
diff --git a/components/utils/API/index.js b/components/utils/API/index.js
@@ -1,7 +1,9 @@
 import axios from "axios";
 import { getLS, removeLS } from "../LocalStorage/index";
 
-const API_URL = "https://api.savemyform.tk";
+const API_URL = process.env.NEXT_PUBLIC_ENVIORNMENT === "prod"
+  ? "https://api.savemyform.tk"
+  : "http://localhost:8080";
 
 const getAccessToken = () => {
   return getLS("secret");

diff --git a/pages/signin/index.js b/pages/signin/index.js
@@ -50,8 +50,8 @@ export default function SignIn() {
         return;
       }
       post("/login", {
-        email: e.currentTarget.elements.email.value,
-        password: e.currentTarget.elements.password.value,
+        email: e.target.elements.email.value,
+        password: e.target.elements.password.value,
         recaptcha_token: token,
       })
         .then((res) => {
@@ -62,6 +62,7 @@ export default function SignIn() {
         })
         .catch((err) => error());
     } catch (err) {
+      console.log(err);
       error();
     }
   };
@@ -74,13 +75,8 @@ export default function SignIn() {
           <Image src={backimage} className="object-contain" alt={"backImage"} />
         </div>
         <div className=" flex flex-col justify-center">
-          <form
-            onSubmit={handleSubmit}
-            className="max-w-[500px] w-full mx-auto rounded-lg p-10 "
-          >
-            <h2 className="text-4xl text-center text- p-5 text-[#00694B] font-bold">
-              Log In
-            </h2>
+          <form onSubmit={handleSubmit} className="max-w-[500px] w-full mx-auto rounded-lg p-10 ">
+            <h2 className="text-4xl text-center text- p-5 text-[#00694B] font-bold">Log In</h2>
             <div className="flex flex-col py-2 text-[#00694B] ">
               <input
                 placeholder="Email"
@@ -99,11 +95,7 @@ export default function SignIn() {
                 required
               ></input>
               <div className="text-2xl absolute top-5 right-3 cursor-[pointer] select-none">
-                {open === false ? (
-                  <AiFillEyeInvisible onClick={toggle} />
-                ) : (
-                  <AiFillEye onClick={toggle} />
-                )}
+                {open === false ? <AiFillEyeInvisible onClick={toggle} /> : <AiFillEye onClick={toggle} />}
               </div>
             </div>
             <button

diff --git a/pages/signup/index.js b/pages/signup/index.js
@@ -12,10 +12,10 @@ import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
 export default function SignUp() {
   const { executeRecaptcha } = useGoogleReCaptcha();
   const router = useRouter();
-  const [name, setName] = useState(null);
-  const [email, setEmail] = useState(null);
-  const [password, setPassword] = useState(null);
-  const [confirmPassword, setConfirmPassword] = useState(null);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [passwordToggle, setPasswordToggle] = useState(false);
   const [confirmPasswordToggle, setConfirmPasswordToggle] = useState(false);
   async function handleClick(e) {
@@ -34,7 +34,6 @@ export default function SignUp() {
         message.error("reCaptcha failed");
         return;
       }
-      console.log(token);
 
       let result = await post("/signup", {
         name: name,
@@ -58,13 +57,11 @@ export default function SignUp() {
     <>
       <div className="grid grid-cols-1 sm:grid-cols-2 h-[calc(100vh-76px)] w-full ">
         <div className="hidden sm:flex overflow-auto">
-          <Image src={backimage} className="object-contain" alt = {"backkImage"}/>
+          <Image src={backimage} className="object-contain" alt={"backkImage"} />
         </div>
         <div className=" flex flex-col justify-center">
           <form className="max-w-[500px] w-full mx-auto rounded-lg p-10 ">
-            <h2 className="text-4xl text-center text- p-5 text-[#00694B] font-bold">
-              Sign up
-            </h2>
+            <h2 className="text-4xl text-center text- p-5 text-[#00694B] font-bold">Sign up</h2>
             <div className="flex flex-col py-2 text-[#00694B] ">
               <input
                 placeholder="Name"
@@ -96,13 +93,9 @@ export default function SignUp() {
               ></input>
               <div className="text-2xl absolute top-5 right-3 cursor-[pointer] select-none">
                 {passwordToggle === false ? (
-                  <AiFillEyeInvisible
-                    onClick={() => setPasswordToggle((prev) => !prev)}
-                  />
+                  <AiFillEyeInvisible onClick={() => setPasswordToggle((prev) => !prev)} />
                 ) : (
-                  <AiFillEye
-                    onClick={() => setPasswordToggle((prev) => !prev)}
-                  />
+                  <AiFillEye onClick={() => setPasswordToggle((prev) => !prev)} />
                 )}
               </div>
             </div>
@@ -117,13 +110,9 @@ export default function SignUp() {
               ></input>
               <div className="text-2xl absolute top-5 right-3 cursor-[pointer] select-none">
                 {confirmPasswordToggle === false ? (
-                  <AiFillEyeInvisible
-                    onClick={() => setConfirmPasswordToggle((prev) => !prev)}
-                  />
+                  <AiFillEyeInvisible onClick={() => setConfirmPasswordToggle((prev) => !prev)} />
                 ) : (
-                  <AiFillEye
-                    onClick={() => setConfirmPasswordToggle((prev) => !prev)}
-                  />
+                  <AiFillEye onClick={() => setConfirmPasswordToggle((prev) => !prev)} />
                 )}
               </div>
             </div>
@@ -140,4 +129,4 @@ export default function SignUp() {
       </div>
     </>
   );
-}
+}