Skip to content

Commit

Permalink
feature/google-login
Browse files Browse the repository at this point in the history
  • Loading branch information
rohit-zip committed Jun 13, 2024
1 parent 4b7f8e2 commit 71e4f0f
Show file tree
Hide file tree
Showing 13 changed files with 320 additions and 47 deletions.
7 changes: 5 additions & 2 deletions app/(auth)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {ApplicationProvider} from "@/providers/ApplicationProvider";
import BloggiosToast from "@/components/custom/BloggiosToast";
import {RefreshTokenProvider} from "@/providers/RefreshTokenProvider";
import IsAuthenticated from "@/components/functional/IsAuthenticated";
import {GoogleOAuthProvider} from "@react-oauth/google";

const poppins = Poppins({
subsets: ["latin"],
Expand Down Expand Up @@ -39,10 +40,11 @@ export default function RootLayout({
className={`${poppins.variable} relative flex flex-col min-h-screen bg-auth-bg bg-cover bg-no-repeat bg-fixed`}>
<ApplicationProvider>
<BloggiosToast/>
<NextUIProvider className={"flex flex-col min-h-screen justify-between relative"}>
<NextUIProvider className={"flex flex-col min-h-screen justify-between relative"}>
<GoogleOAuthProvider clientId={"50987300482-vlm1c14cr19nush8ib2hhv5deoi4ge08.apps.googleusercontent.com"}>
<RefreshTokenProvider>
<main className={"flex flex-row w-full mt-10 md:mt-20 lg:space-x-20"}>
<IsAuthenticated />
<IsAuthenticated/>
<div className={"flex-1 hidden lg:flex justify-end"}>
<AuthPageCard/>
</div>
Expand All @@ -65,6 +67,7 @@ export default function RootLayout({
</div>
</footer>
</RefreshTokenProvider>
</GoogleOAuthProvider>
</NextUIProvider>
</ApplicationProvider>
</body>
Expand Down
4 changes: 2 additions & 2 deletions app/oauth2/redirect/page.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
"use client";

import {useRouter, useSearchParams} from "next/navigation";
import {redirect, useRouter, useSearchParams} from "next/navigation";
import {useEffect} from "react";
import axios from "axios";
import {refreshTokenSocial} from "@/rest/AuthProviderApplication";

const OAuthRedirectHandler = () => {
Expand All @@ -26,6 +25,7 @@ const OAuthRedirectHandler = () => {
refreshTokenSocial(token)
.then(response => {
window.location.reload();
redirect("/")
})
} else {
router.push('/login');
Expand Down
115 changes: 97 additions & 18 deletions components/custom/blog/BlogActionButton.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
"use client";

import React from 'react';
import {Button, Divider} from "@nextui-org/react";
import {
Button,
Divider,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownSection,
DropdownTrigger
} from "@nextui-org/react";
import {SlOptions} from "react-icons/sl";
import {AiOutlineLike} from "react-icons/ai";
import {HiOutlineChatBubbleOvalLeftEllipsis} from "react-icons/hi2";
import {GoBookmark} from "react-icons/go";
import {IoShareOutline} from "react-icons/io5";
import {IoIosLink} from "react-icons/io";
import {FaXTwitter} from "react-icons/fa6";
import {FaInstagram, FaLinkedin} from "react-icons/fa";
import BlogCommentDrawer from "@/components/custom/drawers/BlogCommentDrawer";
import BlogCommentMobileDrawer from "@/components/custom/drawers/BlogCommentMobileDrawer";

const BlogActionButton = ({isDividerShown = true}: { isDividerShown?: boolean }) => {
const BlogActionButton = ({data, isDividerShown = true}: {data: any, isDividerShown?: boolean }) => {
return (
<div className={"flex flex-col space-y-2"}>
{isDividerShown && <Divider className={"w-[90%] self-center"}/>}
Expand All @@ -32,14 +46,14 @@ const BlogActionButton = ({isDividerShown = true}: { isDividerShown?: boolean })
<small className={"text-sm"}>
10
</small>
<Button
isIconOnly={true}
variant={"light"}
size={"sm"}
className={"text-xl"}
>
<HiOutlineChatBubbleOvalLeftEllipsis/>
</Button>
<BlogCommentDrawer data={data}/>
</div>

<div className={"flex items-center"}>
<small className={"text-sm"}>
10
</small>
<BlogCommentMobileDrawer/>
</div>
</div>

Expand All @@ -52,14 +66,79 @@ const BlogActionButton = ({isDividerShown = true}: { isDividerShown?: boolean })
>
<GoBookmark/>
</Button>
<Button
isIconOnly={true}
variant={"light"}
size={"sm"}
className={"text-xl"}

<Dropdown
showArrow
radius="sm"
backdrop={"blur"}
classNames={{
base: "before:bg-default-200", // change arrow background
content: "p-0 border-small border-divider bg-background",
}}
>
<IoShareOutline/>
</Button>
<DropdownTrigger>
<Button
isIconOnly={true}
variant={"light"}
size={"sm"}
className={"text-xl"}
>
<IoShareOutline/>
</Button>
</DropdownTrigger>

<DropdownMenu
aria-label={"user-actions"}
variant={"flat"}
className={"max-w-[260px] h-auto w-full pt-2"}
itemClasses={{
base: [
"rounded-md",
"text-default-500",
"transition-opacity",
"data-[hover=true]:text-foreground",
"data-[hover=true]:bg-default-100",
"dark:data-[hover=true]:bg-default-50",
"data-[selectable=true]:focus:bg-default-50",
"data-[pressed=true]:opacity-70",
"data-[focus-visible=true]:ring-default-500",
],
}}
>

<DropdownSection showDivider>
<DropdownItem>
<div className={"flex items-center gap-2"}>
<IoIosLink />
<span>Copy Link</span>
</div>
</DropdownItem>
</DropdownSection>

<DropdownSection className={"w-full"}>
<DropdownItem>
<div className={"flex items-center gap-2"}>
<FaLinkedin />
<span>Share on LinkedIn</span>
</div>
</DropdownItem>

<DropdownItem>
<div className={"flex items-center gap-2"}>
<FaXTwitter />
<span>Share on X</span>
</div>
</DropdownItem>

<DropdownItem>
<div className={"flex items-center gap-2"}>
<FaInstagram />
<span>Share on Instagram</span>
</div>
</DropdownItem>
</DropdownSection>
</DropdownMenu>
</Dropdown>

<Button
isIconOnly={true}
Expand Down
35 changes: 27 additions & 8 deletions components/custom/buttons/SocialAuthButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,44 @@ import {Button} from "@/components/ui/button";
import {GitHubLogoIcon} from "@radix-ui/react-icons";
import google_logo from "@/public/assets/google.svg";
import Image from "next/image";
import Link from "next/link";
import {useGoogleLogin} from "@react-oauth/google";
import {loginGoogle} from "@/rest/AuthProviderApplication";
import {useRouter, useSearchParams} from "next/navigation";
import {BLOG_PAGE} from "@/constants/UiPathConstants";

export default function SocialAuthButtons({
classname = "my-4"
}) {

const OAUTH2_REDIRECT_URI = `${window.location.origin}/oauth2/redirect`
const GOOGLE_AUTH_URL = "https://auth.bloggios.in" + '/oauth2/authorize/google?redirect_uri=' + OAUTH2_REDIRECT_URI;
const searchParams = useSearchParams()
const redirect = searchParams.get('redirect');
const router = useRouter();

const authenticateGoogle = useGoogleLogin({
onSuccess: tokenResponse => {
setTimeout(()=> {
loginGoogle(tokenResponse?.access_token, "9571406506-bloggios_856854.dev.google.auth.bloggios.com")
.then((response) => {
if (redirect) {
router.push(redirect);
} else {
router.push(BLOG_PAGE);
}
}).catch(error => {
console.log(error)
});
}, 2000)
},
});

return (
<div className={`flex items-center justify-between space-x-2 ${classname}`}>
<Button variant={"outline"} className={"flex-1 flex items-center gap-2"}>
<GitHubLogoIcon/> Github
</Button>
<Link href={GOOGLE_AUTH_URL}>
<Button variant={"outline"} className={"flex-1 flex items-center gap-2"}>
<Image src={google_logo} alt={"google"} width={18} height={18}/> Google
</Button>
</Link>
<Button variant={"outline"} className={"flex-1 flex items-center gap-2"} onClick={()=> authenticateGoogle()}>
<Image src={google_logo} alt={"google"} width={18} height={18}/> Google
</Button>
</div>
)
}
2 changes: 1 addition & 1 deletion components/custom/cards/BlogCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const BlogCard = React.forwardRef<HTMLDivElement, BlogCardProps>((props: BlogCar
/>
</CardHeader>
)}
<CardBody className={"flex flex-col justify-start items-start md:px-7 md:py-4"}
<CardBody className={"flex flex-col justify-start items-start md:px-7 md:py-4 cursor-pointer"}
onClick={() => router.push(`/blog/${props.data.blogId}`)}>
<User
name={props.data.name}
Expand Down
24 changes: 12 additions & 12 deletions components/custom/details/BlogDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ import Image from "next/image";

const BlogDetails = ({data}: { data: any }) => {

console.log(data);

return (
<div className={"mt-2 md:mt-6 flex flex-col gap-10"}>

<div className={"w-full"}>
<Image
src={data.coverImage}
alt={data.title}
className={"h-auto w-full object-cover rounded-xl"}
width={0}
height={0}
sizes={"100vw"}
/>
</div>
{data.coverImage && (
<div className={"w-full"}>
<Image
src={data.coverImage}
alt={data.title}
className={"h-auto w-full object-cover rounded-xl"}
width={0}
height={0}
sizes={"100vw"}
/>
</div>
)}

<div className={"flex flex-col space-y-2"}>
<h1 className={"scroll-m-20 text-4xl font-medium tracking-wide lg:text-5xl"}>
Expand Down
94 changes: 94 additions & 0 deletions components/custom/drawers/BlogCommentDrawer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import {Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger} from "@/components/ui/sheet";
import {Avatar, Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger} from "@nextui-org/react";
import {HiOutlineChatBubbleOvalLeftEllipsis} from "react-icons/hi2";
import {useSelector} from "react-redux";
import {RootState} from "@/state/store";
import {Card, CardContent, CardFooter, CardHeader} from "@/components/ui/card";

const BlogCommentDrawer = ({data}: { data: any }) => {

const {isAuthenticated} = useSelector((state: RootState) => state.auth);
const {name, profileImage} = useSelector((state: RootState) => state.profile);
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["relevant"]));

const selectedValue = React.useMemo(
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
[selectedKeys]
);

return (
<Sheet>
<SheetTrigger asChild>
<Button
isIconOnly={true}
variant={"light"}
size={"sm"}
className={"text-xl"}
>
<HiOutlineChatBubbleOvalLeftEllipsis/>
</Button>
</SheetTrigger>
<SheetContent side={"right"} className={"w-[500px] p-2"}>
<SheetHeader className={"p-4"}>
<SheetTitle className={"text-2xl"}>Discussions</SheetTitle>
</SheetHeader>
<div className={"flex flex-col my-6"}>
{isAuthenticated && (
<Card>
<CardHeader className={"p-3"}>
<div className={"flex items-center gap-2"}>
<Avatar
src={profileImage ? profileImage : ""}
showFallback={true}
size={"md"}
/>
<span>{name}</span>
</div>
</CardHeader>

<CardContent>
<textarea
className={"border-none outline-none bg-transparent w-full resize-none"}
rows={4}
placeholder={"Any thoughts ?"}
/>
</CardContent>

<CardFooter className={"flex justify-end py-3"}>
<Button color={"primary"} size={"sm"}>
Send
</Button>
</CardFooter>
</Card>
)}
</div>
<SheetFooter>
<Dropdown>
<DropdownTrigger>
<Button
variant="bordered"
className="capitalize"
>
{selectedValue}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="comment-type"
variant="flat"
disallowEmptySelection
selectionMode="single"
selectedKeys={selectedKeys}
onSelectionChange={(e)=> console.log(e)}
>
<DropdownItem key="relevant">Relevant</DropdownItem>
<DropdownItem key="recent">Recent</DropdownItem>
</DropdownMenu>
</Dropdown>
</SheetFooter>
</SheetContent>
</Sheet>
);
};

export default BlogCommentDrawer;
Loading

0 comments on commit 71e4f0f

Please sign in to comment.