Skip to content

Added login to google funcanality #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 26, 2024
Merged

Added login to google funcanality #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e7dfaaf
Added login to google funcanality
Sawan-Kushwah Oct 25, 2024
abb2140
Merge branch 'main' into add/authentication
Sawan-Kushwah Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"dotenv": "^16.4.5",
"firebase": "^10.10.0",
"firebase": "^10.14.1",
"jotai": "^2.10.0",
"localforage": "^1.10.0",
"lucide-react": "^0.447.0",
Expand Down
33 changes: 0 additions & 33 deletions client/src/component/Firebase/Setup.js
View file
Open in desktop

This file was deleted.

36 changes: 36 additions & 0 deletions client/src/component/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
} from "@ant-design/icons";
import "../css/Login.css";
import toast from "react-hot-toast";
import { doSignInWithGoogle } from '../firebase/auth'
import { useAuth } from '../contexts/authContext/index'

const VITE_SERVER_PORT =
import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
Expand Down Expand Up @@ -57,8 +59,21 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
setCredentials({ ...credentials, [e.target.name]: e.target.value });
};

const { userLoggedIn } = useAuth()

const onGoogleSignIn = (e) => {
e.preventDefault()
if (!isloggedin) {
setloggedin(true)
doSignInWithGoogle().catch(err => {
setloggedin(false)
})
}
}

return (
<div className="h-screen flex items-center justify-center">
{userLoggedIn && navigate('/')}
<div
className="wrapper h-3/4 mt-10"
style={{
Expand Down Expand Up @@ -121,6 +136,26 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {

<button className="submit" type="submit" disabled={loading}>
{loading ? <Spin size="small" /> : "Login"}
</Button>
<button
disabled={isloggedin}
onClick={(e) => { onGoogleSignIn(e) }}
className={`w-full flex items-center justify-center mt-3 gap-x-3 py-2.5 border rounded-lg text-sm font-medium ${isloggedin ? 'cursor-not-allowed' : 'hover:bg-gray-100 transition duration-300 active:bg-gray-100'}`}>
<svg className="w-5 h-5" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_17_40)">
<path d="M47.532 24.5528C47.532 22.9214 47.3997 21.2811 47.1175 19.6761H24.48V28.9181H37.4434C36.9055 31.8988 35.177 34.5356 32.6461 36.2111V42.2078H40.3801C44.9217 38.0278 47.532 31.8547 47.532 24.5528Z" fill="#4285F4" />
<path d="M24.48 48.0016C30.9529 48.0016 36.4116 45.8764 40.3888 42.2078L32.6549 36.2111C30.5031 37.675 27.7252 38.5039 24.4888 38.5039C18.2275 38.5039 12.9187 34.2798 11.0139 28.6006H3.03296V34.7825C7.10718 42.8868 15.4056 48.0016 24.48 48.0016Z" fill="#34A853" />
<path d="M11.0051 28.6006C9.99973 25.6199 9.99973 22.3922 11.0051 19.4115V13.2296H3.03298C-0.371021 20.0112 -0.371021 28.0009 3.03298 34.7825L11.0051 28.6006Z" fill="#FBBC04" />
<path d="M24.48 9.49932C27.9016 9.44641 31.2086 10.7339 33.6866 13.0973L40.5387 6.24523C36.2 2.17101 30.4414 -0.068932 24.48 0.00161733C15.4055 0.00161733 7.10718 5.11644 3.03296 13.2296L11.005 19.4115C12.901 13.7235 18.2187 9.49932 24.48 9.49932Z" fill="#EA4335" />
</g>
<defs>
<clipPath id="clip0_17_40">
<rect width="48" height="48" fill="white" />
</clipPath>
</defs>
</svg>
{isloggedin ? 'Signing In...' : 'Continue with Google'}

</button>

<p
Expand All @@ -147,6 +182,7 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
>
Forgot Password?
</Button>

</form>

<div className="banner">
Expand Down
131 changes: 81 additions & 50 deletions client/src/component/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@ import axios from "axios";
import AddProject from "./AddProject";
import logo from "../assets/images/logo.png";
import avatarDropdown from "../assets/images/Dropdown/avatar.png";
import { auth } from "../component/Firebase/Setup";
import { FaSun } from "react-icons/fa6";
import { FaMoon } from "react-icons/fa6";
import { useAuth } from "../contexts/authContext";
import { doSignOut } from "../firebase/auth";

function Navbar(props) {
const { currentUser } = useAuth()
const { userLoggedIn } = useAuth();
const [isHovered, setIsHovered] = useState(false)

const { showAlert, mode } = props;
const VITE_SERVER_PORT =
import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
Expand Down Expand Up @@ -60,7 +65,7 @@ function Navbar(props) {

const handleLogout = async () => {
try {
await auth.signOut(); // Sign out the user
doSignOut()
localStorage.removeItem("token");
navigate("/login");
} catch (error) {
Expand Down Expand Up @@ -91,9 +96,8 @@ function Navbar(props) {
return (
<div>
<nav
className={`navbar navbar-expand-lg ${
isScrolled ? "sticky" : ""
} navbar-${props.mode === "dark" ? "dark" : "light"}`}
className={`navbar navbar-expand-lg ${isScrolled ? "sticky" : ""
} navbar-${props.mode === "dark" ? "dark" : "light"}`}
style={{
backgroundColor: props.mode === "dark" ? "black" : "white",
borderBottom: "1px solid white",
Expand All @@ -103,9 +107,8 @@ function Navbar(props) {
{/* Hamburger icon */}

<div
className={`gap-[3rem] w-full visible navbar-collapse rnav ${
isOpen ? "show" : ""
}`}
className={`gap-[3rem] w-full visible navbar-collapse rnav ${isOpen ? "show" : ""
}`}
style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}
>
<Link
Expand All @@ -118,17 +121,15 @@ function Navbar(props) {
alt="logo"
/>
<div
className={`logoTitle md:block hidden ${
props.mode === "dark" ? "text-white" : "text-black"
}`}
className={`logoTitle md:block hidden ${props.mode === "dark" ? "text-white" : "text-black"
}`}
>
{props.title}
</div>
</Link>
<div
className={`collapse navbar-collapse justify-content-center ${
isOpen ? "show" : ""
}`}
className={`collapse navbar-collapse justify-content-center ${isOpen ? "show" : ""
}`}
id="navbarSupportedContent"
>
<ul
Expand All @@ -137,9 +138,8 @@ function Navbar(props) {
>
<li className="nav-item fs-4 fw-medium">
<Link
className={`nav-link ${
location.pathname === "/" ? "active" : ""
}`}
className={`nav-link ${location.pathname === "/" ? "active" : ""
}`}
aria-current="page"
to="/"
>
Expand All @@ -148,9 +148,8 @@ function Navbar(props) {
</li>
<li className="nav-item fs-4">
<Link
className={`nav-link ${
location.pathname === "/about" ? "active" : ""
}`}
className={`nav-link ${location.pathname === "/about" ? "active" : ""
}`}
aria-current="page"
to="/about"
>
Expand All @@ -159,9 +158,8 @@ function Navbar(props) {
</li>
<li className="nav-item fs-4">
<Link
className={`nav-link ${
location.pathname === "/community" ? "active" : ""
}`}
className={`nav-link ${location.pathname === "/community" ? "active" : ""
}`}
aria-current="page"
to="/community"
>
Expand All @@ -170,9 +168,8 @@ function Navbar(props) {
</li>
<li className="nav-item fs-4">
<Link
className={`nav-link ${
location.pathname === "/discussion" ? "active" : ""
}`}
className={`nav-link ${location.pathname === "/discussion" ? "active" : ""
}`}
aria-current="page"
to="/discussion"
>
Expand Down Expand Up @@ -214,22 +211,64 @@ function Navbar(props) {
</div>
</div>
</div>
<Link
role="button"
to="/login"
className="btn loginbtn mx-2 h-10 "
style={{ height: "45px", color: "white" }}
>
Login
</Link>
<Link
role="button"
to="/signup"
className="btn loginbtn mx-2 h-10 "
style={{ height: "45px", color: "white" }}
>
Signup
</Link>
{userLoggedIn == false ?
<>
<Link
role="button"
to="/login"
className="btn loginbtn mx-2 h-10 "
style={{ height: "45px", color: "white" }}
>
Login
</Link>
<Link
role="button"
to="/signup"
className="btn loginbtn mx-2 h-10 "
style={{ height: "45px", color: "white" }}
>
Signup
</Link>
</>
:
<>

<div className="relative w-16 flex justify-center">
{/* Placeholder image if user.picture is not available */}
<img
src={currentUser.picture || 'https://img.freepik.com/free-vector/blue-circle-with-white-user_78370-4707.jpg?size=338&ext=jpg&ga=GA1.1.2113030492.1729036800&semt=ais_hybrid'}
className="useremailbutton rounded-full w-12 bg-black cursor-pointer"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
alt="User Profile"
/>

{/* Information box */}
<div
className={`absolute accountBox bg-gray-800 top-16 -right-24 py-2 pr-10 pl-2 text-start rounded-lg font-normal ${isHovered ? 'block' : 'hidden'
}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<span className="text-gray-200 text-sm">Bitbox Account</span>
<br />
<span className="text-gray-400 text-sm">{currentUser.displayName}</span>
<br />
<span className="text-gray-400 text-sm">{currentUser.email}</span>
</div>
</div>

<Link
role="button"
to="/signup"
className="btn loginbtn mx-2 h-10 "
style={{ height: "45px", color: "white" }}
onClick={handleLogout}
>
Signout
</Link>
</>
}
<button
className="navbar-toggler block lg:hidden ml-5 focus:outline-none"
type="button"
Expand Down Expand Up @@ -360,14 +399,6 @@ function Navbar(props) {
}}
/>
</li>
<li>
<a
onClick={handleLogout}
style={{ cursor: "pointer" }}
>
Logout
</a>
</li>
</ul>
</li>
</div>
Expand Down
Loading