Spaces:
Running
Running
File size: 3,427 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { useEffect, useState } from "react";
import Router, { useRouter } from "next/router";
import Image from "next/image";
import LinkComp from "next/link";
import { setToken } from "utils/auth";
// import Background from "assets/images/header/background.svg";
// import Book from "assets/images/header/book.svg";
// import Pizza from "assets/images/header/pizza.svg";
import AvatarBot from "assets/images/avatar_bot.png";
export default function DiscordCallback() {
const { asPath } = useRouter();
const [fragment, setFragment] = useState<any>(null);
const [accessToken, setAccessToken] = useState<any>(null);
useEffect(() => {
setFragment(new URLSearchParams((asPath as string).split("#")[1]));
}, []);
useEffect(() => {
setAccessToken(fragment?.get("access_token"));
}, [fragment]);
useEffect(() => {
if (accessToken) {
setToken(accessToken);
// redirect to home
Router.push("/");
}
}, [accessToken]);
return (
<header className="relative z-1 h-screen">
<div className="z-1 px-6 h-full">
<div className="container mx-auto relative h-full flex items-center justify-center">
<div className="max-w-2xl mx-auto bg-dark-500 w-full rounded-2xl grid grid-cols-1 lg:grid-cols-5 overflow-hidden shadow-xl transform transition-all duration-400">
<div className="lg:col-span-3 py-9 px-8 text-center">
<Image
width={64}
height={64}
alt="Clyde the Bot"
src={AvatarBot}
className="w-16 mx-auto"
/>
<h3 className="text-white font-bold text-2xl text-center mt-1 tracking-wide">
The Guardian
</h3>
<p className="text-lg text-dark-100">
{!accessToken
? "Hello, something went wrong. Please go back."
: "Login in progress..."}
</p>
{!accessToken && (
<LinkComp href="/">
<button className="bg-[#f02727] text-white rounded-lg w-full text-center px-3 py-3 mt-5 font-semibold hover:bg-opacity-80">
Go back to website
</button>
</LinkComp>
)}
</div>
<div
style={
{
// backgroundImage: `url(${ModalLoginIllustration.src})`,
}
}
className="w-full h-full bg-cover hidden lg:block bg-center lg:col-span-2 relative bg-dark-600"
/>
</div>
</div>
</div>
<div className="bg-blue h-full w-full absolute top-0 left-0 -z-1">
{/* <Image
width={124}
height={124}
alt="Decoration Background"
src={Book}
className="absolute select-none left-20 top-1/3 pointer-events-none hidden lg:block"
/>
<Image
width={124}
height={124}
alt="Decoration Background"
src={Pizza}
className="absolute select-none bottom-20 right-20 pointer-events-none hidden lg:block"
/>
<Image
width={124}
height={124}
alt="Decoration Background"
src={Background}
className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1"
/> */}
</div>
</header>
);
}
|