done

Author: Golu7667

.gitignore

@@ -0,0 +1 @@
+node_modules

client/.gitignore

@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/package-lock.json

@@ -1,6 +1,6 @@
 .App{
     display: flex;
-    width: 100vw;
+    width: 100%;
     height: 90vh;
     justify-content: center;
     align-items: center;

client/package.json

@@ -2,18 +2,27 @@ import React from "react";
 import Login from "./component/login"
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import "./App.css"
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 function App() {
 
-
+  
   return (
+    <>
       <div className="App">
       <BrowserRouter>
         <Routes>
+        
         <Route path='/' element={<Login/>} />
+       
         </Routes>
       </BrowserRouter>
-       
+     
+     
      </div>
+     <ToastContainer/>
+     </>
   )
 }
 

client/src/App.css

@@ -6,6 +6,7 @@
     border-radius: 8px;
     align-items: center;
     text-align: center;
+    
 }
 .login > input{
     border-radius: 8px;
@@ -16,15 +17,17 @@
     padding: 0.5rem 0.75rem;
     width: 92%;
     font-size: 1rem;
+    
 }
 .login > .button{
-    background-color: aquamarine;
-    border: 1px solid aquamarine;
+    background-color: rgb(120, 120, 192);
+    border: 1px solid rgb(224, 230, 228);
     color: rgb(255, 250, 250);
     font-size: 1.25rem;
     padding: 0.5rem;
     margin: 0.5rem 0;
     border-radius: 8px;
     outline: none;
     cursor: pointer;
+    margin:0px 12px 0px 12px;
 }

client/src/App.js

@@ -1,47 +1,57 @@
-import React, { useState } from 'react'
-import "./login.css"
+import React, { useState } from 'react';
+import "./login.css";
 import axios from "axios";
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 function Login() {
-    const [email, setEmail] = useState("");
-    const [message, setMessage] = useState("");
-    const [otp,setOtp]=useState("");
-    const handleSubmit = async (e) => {
-      e.preventDefault();
-      try {
-        const res = await axios.post("http://localhost:8000/signup", { email });
-        setMessage(res.data.message);
-        
-      } catch (error) {
-        setMessage("Error sending verification email");
-      }
-    }
-    const verify=()=>{
-        if(otp===message){
-            alert("verified")
-        }else{
-            alert("wrong OTP")
-        }
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [otp, setOtp] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post("http://localhost:8000/signup", { email });
+      toast.success('Otp send successfully!', { autoClose: 5000 });
+      setMessage(res.data.message);
+    } catch (error) {
+      toast.error('Otp sending failed!', { autoClose: 5000 });
+      setMessage("Error sending verification email");
+    } 
+  }
+
+  const verify = () => {
+    if (otp === message) {
+      toast.success('Verification successful!', { autoClose: 5000 });
+    } else {
+      toast.error('Invalid OTP. Verification failed.', { autoClose: 5000 });
     }
+  }
+
   return (
-    <div className='login'>
-  <input
-         type="email"
-         placeholder="Enter Your Email Id"
-         value={email}
-         onChange={(e) => setEmail(e.target.value)}
-       />
-       <input
-         type="text"
-         placeholder="Enter Your OTP"
-         value={otp}
-         onChange={(e) => setOtp(e.target.value)}
-       />
-      <button onClick={handleSubmit} className='button'>send otp</button>
-      <button onClick={verify} className='button'>verify</button>
-      <div>{message}</div>
-    
-    </div>
+    <>
+      <ToastContainer />
+      <div className='login'>
+      
+        <input
+          type="email"
+          placeholder="Enter Your Email Id"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="Enter Your OTP"
+          value={otp}
+          onChange={(e) => setOtp(e.target.value)}
+        />
+
+        <button onClick={handleSubmit} className='button'>Send OTP</button>
+        <button onClick={verify} className='button'>Verify</button>
+      </div>
+    </>
   )
 }
 
-export default Login
+export default Login;

client/src/component/login.css

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App'
+
+
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
- 
+  
     <App />
-
+   
 );
 
 

client/src/component/login.js

@@ -0,0 +1,2 @@
+node_modules
+.env