diff --git a/client/src/Layouts/Home.jsx b/client/src/Layouts/Home.jsx
new file mode 100644
index 0000000..3039b83
--- /dev/null
+++ b/client/src/Layouts/Home.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Home = () => {
+ return (
+
+ );
+};
+
+export default Home;
diff --git a/client/src/PrivateRoute/PrivateRoute.jsx b/client/src/PrivateRoute/PrivateRoute.jsx
new file mode 100644
index 0000000..e3f20b3
--- /dev/null
+++ b/client/src/PrivateRoute/PrivateRoute.jsx
@@ -0,0 +1,32 @@
+import React, { useContext, useEffect, useState } from "react";
+import { AuthContext } from "../provider/AuthProvider";
+import { Navigate } from "react-router-dom";
+
+const PrivateRoute = ({ children }) => {
+ const { user, loading } = useContext(AuthContext);
+ const [showDelayed, setShowDelayed] = useState(true);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setShowDelayed(false);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ }, []);
+
+ if (loading || showDelayed) {
+ return (
+
;
+};
+
+export default PrivateRoute;
diff --git a/client/src/components/Login.jsx b/client/src/components/Login.jsx
index 4a5d676..3a22c64 100644
--- a/client/src/components/Login.jsx
+++ b/client/src/components/Login.jsx
@@ -1,18 +1,89 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
+import React, { useContext, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { AuthContext } from "../provider/AuthProvider";
const Login = () => {
const navigate = useNavigate();
+ const { signIn } = useContext(AuthContext);
+ const formRef = useRef(null);
+
+ const handleLogin = e => {
+ e.preventDefault();
+ const [email, password] = e.target.elements;
+ // console.log(email.value, password.value);
+
+ signIn(email.value, password.value)
+ .then((userCredentials) => {
+ console.log(userCredentials)
+ formRef.current.reset();
+ navigate('/interview')
+ })
+ .catch((error) => {
+ if (error.code === 'auth/invalid-credential') {
+ alert('Invalid email or password. Try again');
+ }
+ else {
+ alert('Error in Login: ' + error.message);
+ }
+ })
+
+
+ }
return (
-
-
Under Development 🚧
-
+
);
};
diff --git a/client/src/components/Register.jsx b/client/src/components/Register.jsx
new file mode 100644
index 0000000..e463670
--- /dev/null
+++ b/client/src/components/Register.jsx
@@ -0,0 +1,119 @@
+import React, { useContext, useRef } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { AuthContext } from "../provider/AuthProvider";
+import { useState } from "react";
+
+const Register = () => {
+ const { createUser } = useContext(AuthContext);
+ const [weakPassword, setWeakPassword] = useState(false);
+ const navigate = useNavigate();
+
+ // Reference to the form
+ const formRef = useRef();
+
+ const handleRegister = (e) => {
+ e.preventDefault();
+
+
+ const [name, email, password] = e.target.elements;
+ // console.log(name.value, email.value, password.value);
+
+ // console.log(password.value.length)
+
+ if (password.value.length < 6) {
+ setWeakPassword(true);
+ return;
+ }
+
+ setWeakPassword(false);
+
+
+
+ createUser(email.value, password.value)
+ .then((userCredential) => {
+ // console.log("User created:", userCredential.user);
+ formRef.current.reset();
+ navigate("/interview")
+ })
+ .catch((error) => {
+ if (error.code === 'auth/email-already-in-use') {
+ alert("This email is already in use, try a different email");
+ } else {
+ alert("Error during Registration: ", + error.message);
+ }
+ });
+ };
+
+ return (
+
+
+
+
+ Create your account at here
+
+
+
+
+
+ );
+};
+
+export default Register;
diff --git a/client/src/main.jsx b/client/src/main.jsx
index b04d076..1719817 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -6,36 +6,44 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
import VoiceToTextAndSpeak from "./components/VoiceToTextAndSpeak.jsx";
import App from "./App.jsx";
import Login from "./components/Login.jsx";
-import Logout from "./components/Logout.jsx";
import Profile from "./components/Profile.jsx";
+import Register from "./components/Register.jsx";
+import AuthProvider from "./provider/AuthProvider.jsx";
+import Home from "./Layouts/Home.jsx";
+import PrivateRoute from "./PrivateRoute/PrivateRoute.jsx";
-const router =
- createBrowserRouter([
- {
- path: "/",
- element:
,
- children: [
- {
- path: "/",
- element:
- },
- {
- path: "/login",
- element:
- },
- {
- path: "/logout",
- element:
- },
- {
- path: "/profile",
- element:
- }
- ]
- }
- ]);
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
,
+ children: [
+ {
+ path: "/",
+ element:
,
+ },
+ {
+ path: "/interview",
+ element:
,
+ },
+ {
+ path: "/login",
+ element:
,
+ },
+ {
+ path: "/register",
+ element:
,
+ },
+ {
+ path: "/profile",
+ element:
,
+ },
+ ],
+ },
+]);
createRoot(document.getElementById("root")).render(
-
+
+
+
);
diff --git a/client/src/provider/AuthProvider.jsx b/client/src/provider/AuthProvider.jsx
new file mode 100644
index 0000000..f0a592e
--- /dev/null
+++ b/client/src/provider/AuthProvider.jsx
@@ -0,0 +1,54 @@
+import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword,signOut } from "firebase/auth";
+import { auth } from "../../firebase.init";
+import { createContext, useEffect } from "react";
+import { useState } from "react";
+
+export const AuthContext = createContext(null);
+
+const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const createUser = (email, password) => {
+ // console.log(email, password);
+ setLoading(true);
+
+ return createUserWithEmailAndPassword(auth,email,password)
+ }
+
+ const signIn = (email, password) => {
+ setLoading(true);
+ return signInWithEmailAndPassword(auth, email, password);
+ }
+
+ const Logout = () => {
+ setLoading(true);
+ return signOut(auth);
+ }
+
+ useEffect(() => {
+ const unSubscribe = onAuthStateChanged(auth, (currentUser) => {
+ console.log("Current User: ", currentUser);
+ setUser(currentUser);
+ setLoading(false);
+ })
+
+ return () => unSubscribe();
+ },[])
+
+ const authInfo = {
+ user,
+ loading,
+ createUser,
+ signIn,
+ Logout,
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export default AuthProvider;
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index d37737f..f7a0b69 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -7,6 +7,8 @@ export default {
theme: {
extend: {},
},
- plugins: [],
+ plugins: [
+ require('daisyui'),
+ ],
}