From 107375d1eb428c8b7e3e9c145208de04eab1a741 Mon Sep 17 00:00:00 2001 From: Dani <git@danny.works> Date: Thu, 29 Dec 2022 12:41:44 -0800 Subject: [PATCH] add swc and fix up nav --- components/Nav.tsx | 8 +++---- lib/providers.tsx | 19 ++++++++++----- next.config.js | 1 + pages/auth/signin.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++ pages/login.tsx | 55 ------------------------------------------- 5 files changed, 73 insertions(+), 65 deletions(-) create mode 100644 pages/auth/signin.tsx delete mode 100644 pages/login.tsx diff --git a/components/Nav.tsx b/components/Nav.tsx index fc2f66e..9d0b850 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -41,13 +41,13 @@ const Nav: React.FC<Props> = (props) => { </div> <div className="flex flex-row items-center text-right"> {!user && ( - <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/login">Login</Link> + <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/auth/signin">Sign in</Link> )} {user && ( <span className="flex flex-row items-center gap-x-4 text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200"> Hello, {user?.user_metadata?.full_name} <button onClick={toggleUserInfo}> - <img className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} /> + <img referrerPolicy="no-referrer" className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} /> </button> </span> )} @@ -55,7 +55,7 @@ const Nav: React.FC<Props> = (props) => { </nav> <div className={`${userInfoOpened ? "flex" : "hidden"} items- flex-col gap-y-4 absolute right-0 bg-gray-300 dark:bg-nav-bg transition ease-in-out rounded-bl-xl z-[40]`}> <div className="flex items-center flex-col gap-y-4 px-16 pt-8 pb-2"> - <img className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} /> + <img referrerPolicy="no-referrer" className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} /> <div> <h1 className="text-xl font-bold text-gray-800 dark:text-gray-200 text-center"> {user?.user_metadata?.full_name} @@ -89,7 +89,7 @@ const Nav: React.FC<Props> = (props) => { } finally { setLoading(false) setUserInfoOpened(false) // we need this to make it so if they logout it closes the user info page <3 - router.reload() + router.push("/") } }} variant="outlined" startIcon={<Logout />} className="mx-12 dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case"> Sign out diff --git a/lib/providers.tsx b/lib/providers.tsx index fa65fa0..bc786a7 100644 --- a/lib/providers.tsx +++ b/lib/providers.tsx @@ -1,25 +1,32 @@ import { Google, GitHub, Twitter } from "@mui/icons-material"; +import { SiMicrosoft, SiSpotify, SiGitlab } from "react-icons/si"; + +let standardClasses = "text-xl" + const pages = { "google": { displayName: "Google", - icon: <Google /> + icon: <Google className={standardClasses} /> }, "spotify": { - displayName: "Spotify" + displayName: "Spotify", + icon: <SiSpotify className={standardClasses} /> }, "azure": { - displayName: "Microsoft" + displayName: "Microsoft", + icon: <SiMicrosoft className={standardClasses} /> }, "twitter": { displayName: "Twitter", - icon: <Twitter /> + icon: <Twitter className={standardClasses} /> }, "github": { displayName: "Github", - icon: <GitHub /> + icon: <GitHub className={standardClasses} /> }, "gitlab": { - displayName: "Gitlab" + displayName: "Gitlab", + icon: <SiGitlab className={standardClasses} /> } } diff --git a/next.config.js b/next.config.js index a843cbe..e674786 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,7 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + swcMinify: true } module.exports = nextConfig diff --git a/pages/auth/signin.tsx b/pages/auth/signin.tsx new file mode 100644 index 0000000..fae6ade --- /dev/null +++ b/pages/auth/signin.tsx @@ -0,0 +1,55 @@ +import { useState, useEffect } from "react" +import type { NextPage } from "next" +import providers from "../../lib/providers" +import { Tooltip, Button, Badge } from "@mui/material" +import { Logout, Menu, Notifications, Settings } from "@mui/icons-material" +import { supabase } from "../../lib/supabase" +import useUser from "../../hooks/useUser" +import { useRouter } from "next/router" + +const Login: NextPage = () => { + const router = useRouter() + const { user } = useUser() + + const [loading, setLoading] = useState(false) + const [email, setEmail] = useState("") + + useEffect(() => { + if (user) router.push("/") + }) + + async function handleLogin(provider) { + setLoading(true) + try { + await supabase.auth.signIn({ + provider + }) + } finally { + setLoading(false) + } + } + + return ( + <> + <div className="flex flex-col justify-center gap-y-2 items-center"> + <h2 className="text-3xl dark:text-gray-300 text-gray-800 text-center">Sign in to Flame</h2> + <div className="flex flex-row items-center gap-x-2"> + { + Object.keys(providers).map((provider, index) => ( + <Button key={provider} onClick={ + async (e) => { + handleLogin(provider) + } + } + variant="outlined" className="dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case"> + {providers[provider].icon || <></>} + </Button> + )) + } + </div> + </div> + </> + ) +} + +export default Login \ No newline at end of file diff --git a/pages/login.tsx b/pages/login.tsx deleted file mode 100644 index 9e28e5d..0000000 --- a/pages/login.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { useState, useEffect } from "react" -import type { NextPage } from "next" -import providers from "../lib/providers" -import { Tooltip, Button, Badge } from "@mui/material" -import { Logout, Menu, Notifications, Settings } from "@mui/icons-material" -import { supabase } from "../lib/supabase" -import useUser from "../hooks/useUser" -import { useRouter } from "next/router" - -const Login: NextPage = () => { - const router = useRouter() - const { user } = useUser() - - const [loading, setLoading] = useState(false) - const [email, setEmail] = useState("") - - useEffect(() => { - if (user) router.push("/") - }) - - async function handleLogin(provider) { - setLoading(true) - try { - await supabase.auth.signIn({ - provider - }) - } finally { - setLoading(false) - } - } - - return ( - <> - <div className="flex flex-col justify-center gap-y-2 px-96"> - <h2 className="dark:text-gray-300 text-gray-800 text-center">Login to Flame</h2> - - { - Object.keys(providers).map((provider, index) => ( - <Button key={provider} onClick={ - async (e) => { - handleLogin(provider) - } - } - - variant="outlined" startIcon={providers[provider].icon || <></>} className="mx-12 dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case"> - Continue With {providers[provider].displayName} - </Button> - )) - } - </div> - </> - ) -} - -export default Login \ No newline at end of file