Account

electronics-website/package.json

@@ -3,14 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@auth0/auth0-react": "^2.2.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^10.5.0",
     "json-server": "^0.17.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.16.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

electronics-website/src/App.js

@@ -1,9 +1,12 @@
 
+import { useEffect, useState } from 'react';
 import './App.css';
 import AllRoutes from './components/AllRoutes';
 import Navbar from './components/Navbar';
+import { auth } from './pages/firebase';
 
 function App() {
+
   return (
     <div className="App">
       <Navbar />

electronics-website/src/components/Navbar.jsx

@@ -1,15 +1,23 @@
 import React from 'react'
 import {Link} from "react-router-dom"
 import "../styles/Navbar.css"
+import { useAuth0 } from "@auth0/auth0-react";
+
 
 const Navbar = () => {
+  const { logout } = useAuth0();
+  const { loginWithRedirect } = useAuth0();
+
+  const { user, isAuthenticated, isLoading } = useAuth0();
+
   return (
     <div style={{display: "flex", marginTop: "20px", justifyContent: "space-around"}}>
       <Link to="/">Home</Link>
       <Link to="/products">Products</Link>
       <Link to="/wishlist">WishList</Link>
       <Link to="/cart">Cart</Link>
       <Link to="/login">Login</Link>
+
     </div>
   )
 }

electronics-website/src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  /* background: linear-gradient(#d6cbf8,#42006c); */
 }
 
 code {

electronics-website/src/index.js

@@ -4,12 +4,23 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
+  <Auth0Provider
+    domain="dev-51x6ufz2d8nyphme.us.auth0.com"
+    clientId="VxP8shyEmNEaUeU9xMVBURAvgKTL7Zkm"
+    authorizationParams={{
+      redirect_uri: window.location.origin
+    }}
+  >
   <BrowserRouter>
     <App />
   </BrowserRouter>
+
+  </Auth0Provider>
 );
 
 // If you want to start measuring performance in your app, pass a function

electronics-website/src/pages/GoogleLogin.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+// import { GoogleLogin } from 'react-google-login';
+
+const GoogleLoginComponent = ({ onGoogleLogin }) => {
+  const responseGoogle = (response) => {
+    if (response.profileObj) {
+      onGoogleLogin(response.profileObj);
+    } else {
+      console.log('Google login failed');
+    }
+  };
+
+  return (
+    <div>
+      <GoogleLogin
+        clientId="YOUR_GOOGLE_CLIENT_ID"
+        buttonText="Login with Google"
+        onSuccess={responseGoogle}
+        onFailure={responseGoogle}
+        cookiePolicy={'single_host_origin'}
+      />
+    </div>
+  );
+};
+
+export default GoogleLoginComponent;

electronics-website/src/pages/Home.jsx

@@ -1,12 +1,28 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import "../styles/Home.css"
+import { auth } from './firebase';
+// import { userName } from '../App'
 
 const Home = () => {
+  // useState
+  // useEffect
+  // auth
+  // const [userName,setUserName]=useState("");
+  // useEffect(()=>{
+  //   auth.onAuthStateChanged((user)=>{
+  //     if(user){
+  //       setUserName(user.displayName);
+
+  //     }else{
+  //       setUserName("")
+  //     }
+  //   })
+  // },[])
   return (
     <div>
       <h1>Home Page</h1>
+      {/* <h4>{userName}</h4> */}
     </div>
   )
 }
-
 export default Home

electronics-website/src/pages/InputControl.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+// import styles from "./InputControl.module.css"
+import styles from "../styles/InputControl.module.css"
+
+const InputControl = (props) => {
+  return (
+    <div className={styles.container}>
+      {props.label && <label></label>}
+      <input type="text" {...props} />
+    </div>
+  )
+}
+
+export default InputControl

electronics-website/src/pages/Login.jsx

@@ -1,12 +1,156 @@
-import React from 'react'
-import "../styles/Login.css"
+// import React from 'react'
+// import { useState } from 'react';
+// import { useAuth0 } from "@auth0/auth0-react";
+// import "./LoginSignup.css"
+// import user_icon from "../Assests/person.png"
+// import email_icon from "../Assests/email.png"
+// import password_icon from "../Assests/password.png"
+
+
+
+
+// const Login = () => {
+//   const [action,setAction]=useState("Sign Up")
+//   const [values, setValues]=useState({
+//     name:"",
+//     email:"",
+//     pass:""
+//   }) 
+//   const handlesub=()=>{
+//     console.log(values);
+//   }
+//   // const { logout } = useAuth0();
+//   // const { loginWithRedirect } = useAuth0();
+
+//   // const { user, isAuthenticated, isLoading } = useAuth0();
+
+
+//   return (
+// <div className='container'>
+//       {/* <h4>
+//         {isAuthenticated && <p>{user.name}</p>}
+//       </h4>
+//       <h4>
+//         {isAuthenticated?<h4>  <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
+//       Log Out
+//     </button></h4>
+//     :  <h4>
+//       <button onClick={() => loginWithRedirect()}>Log In</button>;
+//       </h4>
+//     }
+//       </h4> */}
+
+//       <div className='header'>
+//         <div className='text'>{action}</div>
+//         <div className='underline'></div>
+//       </div>
+//       <div className='inputs'>
+//       {action==="Login"? <div></div>: <div className='input'>
+//         <img src={user_icon} alt="" />
+//         <input type="text"  placeholder='Enter Your Name' onClick={(event)=>setValues((prev)=>({...prev,name:event.target.value}))}/>
+//        </div>
+//       }
+//        <div className='input'>
+//         <img src={email_icon} alt="" />
+
+//         <input type="email" placeholder='Enter Your Email' onClick={(event)=>setValues((prev)=>({...prev,email:event.target.value}))} />
+//        </div>
+//        <div className='input'>
+//         <img src={password_icon} alt="" />
+//         <input type="password"  placeholder='Password' onClick={(event)=>setValues((prev)=>({...prev,pass:event.target.value}))}/>
+//        </div>
+//        {action==="Login"?<div></div>:<div className="forgot-password">Lost Password ? <span>Click Here !</span></div>
+// }
+//        <div className='submit-container'>
+//         <div className={action==="Login"?"submit grey":"submit"} onClick={handlesub}>SignUp</div>
+//         <div className={action==="Sign Up"?"submit grey":"submit"} onClick={()=>{setAction("Login")}}>Login</div>
+
+//        </div>
+//       </div>
+
+//     </div>
+//   )
+// }
+
+// export default Login
+
+
+import React, { useEffect, useState } from 'react'
+import InputControl from './InputControl'
+import { Link, useNavigate } from 'react-router-dom'
+// import styles from "./Login.module.css"
+import styles from "../styles/Login.module.css"
+// import { auth, provider } from './firebase'
+import {signInWithEmailAndPassword} from 'firebase/auth'
+import { signInWithPopup } from 'firebase/auth'
+import Home from './Home'
+import { auth, provider } from './firebase'
 
 const Login = () => {
+
+  // provider
+  // auth
+    // provider
+    const navigate=useNavigate();
+  const [values,setValues]=useState({
+
+    email:"",
+    pass:""
+  })
+  const [errormessage,setErrormessage]=useState("");
+  const [submitButtonDisabled,setSubmitButtonDisabled]=useState(false);
+
+const handlesub=()=>{
+  if(!values.email||!values.pass){
+    setErrormessage("fill all fields");
+    return;
+  }
+  setErrormessage("");
+  setSubmitButtonDisabled(true);
+  signInWithEmailAndPassword(auth,values.email,values.pass).then(async res=>{
+    setSubmitButtonDisabled(false);
+navigate('/')
+    setSubmitButtonDisabled(false);
+  }).catch(err=>{
+    setSubmitButtonDisabled(false);
+    setErrormessage(err.message);
+    console.log(errormessage);
+  });
+}
+// google auth
+const handleClick=()=>{
+   signInWithPopup(auth,provider).then((data)=>{
+      setValues(data.user.email);
+      localStorage.setItem("email",data.user.email)
+   })
+}
+useEffect(()=>{
+  setValues(localStorage.getItem('email'))
+},[])
+
   return (
-    <div>
-      <h1>Login page</h1>
+     <div className={styles.container}>
+    <div className={styles.innerBox}>
+<h1 className={styles.heading}>Login</h1>
+<InputControl onChange={event=>setValues(prev=>({...prev,email:event.target.value}))} label="Email" placeholder="Enter Email Address"/>
+<InputControl onChange={event=>setValues(prev=>({...prev,pass:event.target.value}))} label="Password" placeholder="Enter password"/>
+<div className={styles.footer}>
+<b className={styles.error}>{errormessage}</b>
+    <button disabled={submitButtonDisabled} onClick={handlesub}>Login</button>
+    <p>Already have an account ? {" " }
+    <span><Link to="/signup">Sign up</Link></span></p>
+    {/* <Link/> */}
+</div>
+{/* <Home></Home> */}
+      {/* <button>Signin with Google</button> */}
+
+
+      {values? navigate('/'):<button className={styles.btn} onClick={handleClick}>Sign In with Google</button>}
+
     </div>
-  )
+
+
+    </div>  )
 }
 
 export default Login

electronics-website/src/pages/Signup.jsx

@@ -1,10 +1,63 @@
 import React from 'react'
+// import React, { useState } from 'react';
+import { useState } from 'react';
 import "../styles/Signup.css"
+import InputControl from './InputControl';
+import { Link,useNavigate } from 'react-router-dom';
+import { createUserWithEmailAndPassword ,updateProfile} from 'firebase/auth';
+import { auth } from './firebase';
+// import styles from "./Login.module.css"
+import styles from "../styles/Login.module.css";
+// import { auth } from '../../firebase';
 
 const Signup = () => {
+  const navigate=useNavigate();
+  const [values,setValues]=useState({
+    name:"",
+    email:"",
+    pass:""
+  })
+  const [errormessage,setErrormessage]=useState("");
+  const [submitButtonDisabled,setSubmitButtonDisabled]=useState(false);
+
+const handlesub=()=>{
+  if(!values.name||!values.email||!values.pass){
+    setErrormessage("fill all fields");
+    return;
+  }
+  setErrormessage("");
+  setSubmitButtonDisabled(true);
+  createUserWithEmailAndPassword(auth,values.email,values.pass).then(async res=>{
+    const user=res.user;
+    await updateProfile(user,{
+      displayName:values.name,
+    })
+navigate('/')
+
+    console.log(user);
+    setSubmitButtonDisabled(false);
+  }).catch(err=>{
+    setSubmitButtonDisabled(false);
+    setErrormessage(err.message);
+    console.log(errormessage);
+  });
+}
   return (
-    <div>
-      <h1>Signup page</h1>
+    <div className={styles.container}>
+    <div className={styles.innerBox}>
+<h1 className={styles.heading}>Sign Up</h1>
+<InputControl onChange={event=>setValues(prev=>({...prev,name:event.target.value}))} label="Name" placeholder="Enter your name"/>
+{/* <Link/> */}
+<InputControl onChange={event=>setValues(prev=>({...prev,email:event.target.value}))} label="Email" placeholder="Enter Email Address"/>
+<InputControl onChange={event=>setValues(prev=>({...prev,pass:event.target.value}))} label="Password" placeholder="Enter password"/>
+<div className={styles.footer}>
+<b className={styles.error}>{errormessage}</b>
+    <button disabled={submitButtonDisabled} onClick={handlesub}>Sign Up</button>
+    <p>Already have an account ? {" " }
+    <span><Link to="/login">Login</Link></span></p>
+</div>
+    </div>
+
     </div>
   )
 }