109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import Channels, { STORE_ITEMS } from "../../electron/constants";
|
|
import { useEffect, useState } from "react";
|
|
import { useRecoilState, useSetRecoilState } from "recoil";
|
|
|
|
import { $jwtToken } from "../../controller/recoil";
|
|
import { FcGoogle } from "react-icons/fc";
|
|
import Logo from "../../components/Logo";
|
|
import { useLogin } from "../../controller/index";
|
|
|
|
export default function Login() {
|
|
const { mutateAsync } = useLogin();
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
|
|
const setJwtToken = useSetRecoilState($jwtToken);
|
|
|
|
useEffect(() => {
|
|
window.electronAPI.once(
|
|
Channels.GOOGLE_AUTH_TOKENS,
|
|
async (tokens: {
|
|
access_token: string;
|
|
id_token: string;
|
|
refresh_token: string;
|
|
}) => {
|
|
console.log("got tokens", tokens);
|
|
|
|
setIsLoading(true);
|
|
// todo: implement refresh token procedure in api layer by sending refresh_token and such
|
|
|
|
const loginResponse = await mutateAsync({
|
|
accessToken: tokens.access_token,
|
|
idToken: tokens.id_token,
|
|
});
|
|
|
|
const { jwtToken, userDetails } = loginResponse;
|
|
setJwtToken(jwtToken);
|
|
}
|
|
);
|
|
|
|
// todo: figure out how to clean up with the preload api
|
|
// return () => {
|
|
// window.electronAPI.removeAllListeners(Channels.GOOGLE_AUTH_TOKENS);
|
|
// };
|
|
}, []);
|
|
|
|
const continueAuth = () => {
|
|
setIsLoading(true);
|
|
|
|
// send to main process
|
|
window.electronAPI.auth.initiateLogin();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col space-y-5 justify-center items-center
|
|
h-screen w-screen
|
|
bg-zinc-700"
|
|
>
|
|
<Logo className="scale-50" />
|
|
|
|
{/* ! TESTING PURPOSES */}
|
|
<div className={"text-white flex flex-col gap-5"}>
|
|
<button
|
|
onClick={() =>
|
|
setJwtToken(
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MjczYTNjZGVmYzc3MDNhZDg1NWYzMjYiLCJnb29nbGVVc2VySWQiOiIxMTM0NzA3ODY2OTAzNTMxMDkwODYiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2ptMjlTZDFXbm04TnZaYlhrb3N2ZjZTb0lENmtCUDVPSFJMVklPQlE9czk2LWMiLCJlbWFpbCI6InBhdGVsLmFyanVuNTBAZ21haWwuY29tIiwibmFtZSI6IkFyanVuIFBhdGVsIiwiaWF0IjoxNjUxOTY2MDg2fQ.bGK4DaUyuHCIRFhX5g3xQxI5SVMKR7hmte1UpmTZaVc"
|
|
)
|
|
}
|
|
>
|
|
Personal Account
|
|
</button>
|
|
|
|
<button
|
|
onClick={() =>
|
|
setJwtToken(
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MjczYTZmYmVmYzc3MDNhZDg1NWYzMjciLCJnb29nbGVVc2VySWQiOiIxMTE2NzEzNTI4MDkwMTg3NjM4MjYiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2dUUmFNaVVUZkNaX1ZOM2M3SFJyYUlZUmpmN1BNSUZjVThJdlZiPXM5Ni1jIiwiZW1haWwiOiJhcmp1bnBhdGVsQGJlcmtlbGV5LmVkdSIsIm5hbWUiOiJBcmp1biBQYXRlbCIsImlhdCI6MTY1MTk2NjA5OH0.53TbuXaHDTivEpqVr-TP5A1vVIFznT3q_HoVxOReZKc"
|
|
)
|
|
}
|
|
>
|
|
Berkeley Email
|
|
</button>
|
|
|
|
<button
|
|
onClick={() =>
|
|
setJwtToken(
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MjczZTAxNTM1OTg3YWZhMGZjOTA5NzYiLCJnb29nbGVVc2VySWQiOiIxMTQyMTgxMjM0Mzk1OTA4OTU4MjAiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL29ndy9BRGVhNEk0RUhmY08ycVc1blEtelJXdzdRdTVOMWVQdnU5cHkyQzFPbUVxbj1zNjQtYy1tbyIsImVtYWlsIjoidXNlbmlydmFuYUBnbWFpbC5jb20iLCJuYW1lIjoiTmlydmFuYSBTdXBwb3J0IiwiaWF0IjoxNjUxOTY3MDA2fQ.9AgmMW2LYv4QNqibvopiKAaV0GWNbChujWiY6t0OZeQ"
|
|
)
|
|
}
|
|
>
|
|
Nirvana Support
|
|
</button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<>
|
|
<span className="text-white">Attempting to log you in</span>
|
|
</>
|
|
) : (
|
|
<button
|
|
onClick={continueAuth}
|
|
className=" text-md text-zinc-200 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 hover:text-teal-500 rounded flex flex-row items-center space-x-2"
|
|
>
|
|
<FcGoogle className="text-lg" />
|
|
<span>Continue with Google</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|