feat: integrated signup,login and forgetpassword apis

zenlang-rs · Dec 2, 2023 · dba38a5 · dba38a5
1 parent 2c9a016
commit dba38a5
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -10,9 +10,11 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "axios": "^1.6.2",
     "next": "13.5.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-router-dom": "^6.20.1"
   },
   "devDependencies": {
     "autoprefixer": "^10",

diff --git a/src/app/forgotpassword/page.js b/src/app/forgotpassword/page.js
@@ -5,8 +5,28 @@ import { ThemeContext } from "../contextapi/ThemeContext";
 
 export default function Forgotpassword() {
   const { darkMode } = useContext(ThemeContext);
+
   const [passwordError, setPasswordError] = useState("");
+  const sendMail = async (e) => {
+    e.preventDefault();
+    const email = document.getElementById("email").value;
+    const host = process.env.SERVER_HOSTNAME;
+    console.log(data);
+    const response = await fetch(`${host}/api/send_email/${email}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+    });
 
+    if (!response.ok) {
+      console.error("HTTP error", response.status);
+    } else {
+      const result = await response.json();
+      console.log(result);
+    }
+  };
   const validatePassword = (password) => {
     const regex =
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
@@ -60,12 +80,16 @@ export default function Forgotpassword() {
             </div>
           </div>
           <form
-            onSubmit={(e) => e.preventDefault()}
+            onSubmit={(e) => sendMail(e)}
             className="mt-8 space-y-9 ml-20px"
           >
             <div>
-              <label className="font-medium">Email</label>
+              <label htmlFor="email" className="font-medium">
+                Email
+              </label>
               <input
+                id="email"
+                name="email"
                 type="email"
                 required
                 className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"

diff --git a/src/app/login/page.js b/src/app/login/page.js
@@ -1,12 +1,38 @@
 "use client";
 import React, { useState, useContext } from "react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ThemeContext } from "../../app/contextapi/ThemeContext";
 
 export default function Login() {
+  const router = useRouter();
+
   const { darkMode } = useContext(ThemeContext);
   const [passwordError, setPasswordError] = useState("");
+  const handleLoginIn = async (e) => {
+    e.preventDefault();
+    const email = document.getElementById("email").value;
+    const password = document.getElementById("pass").value;
+    const data = { email, password };
+    const host = process.env.SERVER_HOSTNAME;
+    console.log(data);
+    const response = await fetch(`${host}/api/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+      body: JSON.stringify(data),
+    });
 
+    if (!response.ok) {
+      console.error("HTTP error", response.status);
+    } else {
+      const result = await response.json();
+      router.push("/");
+      console.log(result);
+    }
+  };
   const validatePassword = (password) => {
     const regex =
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
@@ -60,20 +86,28 @@ export default function Login() {
             </div>
           </div>
           <form
-            onSubmit={(e) => e.preventDefault()}
+            onSubmit={(e) => handleLoginIn(e)}
             className="mt-8 space-y-9 ml-20px"
           >
             <div>
-              <label className="font-medium">Email</label>
+              <label htmlFor="email" className="font-medium">
+                Email
+              </label>
               <input
+                id="email"
+                name="email"
                 type="email"
                 required
                 className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
               />
             </div>
             <div>
-              <label className="font-medium">Password</label>
+              <label htmlFor="pass" className="font-medium">
+                Password
+              </label>
               <input
+                id="pass"
+                name="pass"
                 type="password"
                 required
                 onChange={handlePasswordChange}

diff --git a/src/app/signup/page.js b/src/app/signup/page.js
@@ -1,12 +1,40 @@
 "use client";
 import React, { useState, useContext } from "react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { ThemeContext } from "../../app/contextapi/ThemeContext";
 
-export default function Login() {
+export default function SignUp() {
+  const router = useRouter();
   const { darkMode } = useContext(ThemeContext);
   const [passwordError, setPasswordError] = useState("");
+  const handleSignUp = async (e) => {
+    e.preventDefault();
+    console.log("first");
+    const name = document.getElementById("name").value;
+    const username = document.getElementById("uname").value;
+    const email = document.getElementById("email").value;
+    const password = document.getElementById("pass").value;
+    const data = { name, username, email, password };
+    const host = process.env.SERVER_HOSTNAME;
+    console.log(data);
+    const response = await fetch(`${host}/api/signup`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+      body: JSON.stringify(data),
+    });
 
+    if (!response.ok) {
+      console.error("HTTP error", response.status);
+    } else {
+      const result = await response.json();
+      router.push("/");
+      console.log(result);
+    }
+  };
   const validatePassword = (password) => {
     const regex =
       /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
@@ -63,26 +91,67 @@ export default function Login() {
               </p>
             </div>
           </div>
-          <form onSubmit={(e) => e.preventDefault()} className="mt-8 space-y-5">
+          <form
+            onSubmit={(e) => {
+              handleSignUp(e);
+            }}
+            className="mt-8 space-y-5"
+          >
+            <div>
+              <label
+                htmlFor="name"
+                className={darkMode ? "font-medium text-white" : "font-medium"}
+              >
+                Name
+              </label>
+              <input
+                id="name"
+                name="name"
+                type="text"
+                required
+                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="uname"
+                className={darkMode ? "font-medium text-white" : "font-medium"}
+              >
+                UserName
+              </label>
+              <input
+                id="uname"
+                name="uname"
+                type="text"
+                required
+                className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
+              />
+            </div>
             <div>
               <label
+                htmlFor="email"
                 className={darkMode ? "font-medium text-white" : "font-medium"}
               >
                 Email
               </label>
               <input
+                id="email"
+                name="email"
                 type="email"
                 required
                 className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
               />
             </div>
             <div>
               <label
+                htmlFor="pass"
                 className={darkMode ? "font-medium text-white" : "font-medium"}
               >
                 Password
               </label>
               <input
+                id="pass"
+                name="pass"
                 type="password"
                 required
                 onChange={handlePasswordChange}