fix: allow logout on login page (#244)

RSSNext · Aug 29, 2024 · 8b679d1 · 8b679d1
1 parent 13ba679
commit 8b679d1
Showing 1 changed file with 42 additions and 24 deletions.
diff --git a/src/renderer/src/pages/(external)/login.tsx b/src/renderer/src/pages/(external)/login.tsx
@@ -1,6 +1,7 @@
 import { SessionProvider, signIn, useSession } from "@hono/auth-js/react"
 import { Logo } from "@renderer/components/icons/logo"
 import { Button } from "@renderer/components/ui/button"
+import { UserAvatar } from "@renderer/components/user-button"
 import { useSignOut } from "@renderer/hooks/biz/useSignOut"
 import { LOGIN_CALLBACK_URL, loginHandler } from "@renderer/lib/auth"
 import { useEffect, useState } from "react"
@@ -21,6 +22,13 @@ function Login() {
   const location = useLocation()
   const urlParams = new URLSearchParams(location.search)
   const provider = urlParams.get("provider")
+
+  const onContinue = () => {
+    if (status === "authenticated") {
+      navigate("/redirect?app=follow")
+    }
+  }
+
   useEffect(() => {
     if (!window.electron && provider) {
       if (status === "authenticated") {
@@ -32,8 +40,6 @@ function Login() {
         })
       }
       setRedirecting(true)
-    } else if (status === "authenticated") {
-      navigate("/redirect?app=follow")
     }
   }, [status])
 
@@ -48,28 +54,40 @@ function Login() {
         <div>Redirecting</div>
       ) : (
         <div className="flex flex-col gap-3">
-          <Button
-            className="h-[48px] w-[320px] rounded-[8px] !bg-black font-sans text-base text-white hover:!bg-black/80 focus:!border-black/80 focus:!ring-black/80"
-            onClick={() => {
-              loginHandler("github")
-            }}
-          >
-            <i className="i-mgc-github-cute-fi mr-2 text-xl" />
-            {" "}
-            Continue with
-            GitHub
-          </Button>
-          <Button
-            className="h-[48px] w-[320px] rounded-[8px] bg-blue-500 font-sans text-base text-white hover:bg-blue-500/90 focus:!border-blue-500/80 focus:!ring-blue-500/80"
-            onClick={() => {
-              loginHandler("google")
-            }}
-          >
-            <i className="i-mgc-google-cute-fi mr-2 text-xl" />
-            {" "}
-            Continue with
-            Google
-          </Button>
+          {status === "authenticated" ? (
+            <>
+              <UserAvatar className="gap-8 px-10 py-4 text-2xl" />
+              <div className="flex items-center justify-center gap-4">
+                <Button variant="outline" onClick={signOut}>Log out</Button>
+                <Button onClick={onContinue}>Continue</Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <Button
+                className="h-[48px] w-[320px] rounded-[8px] !bg-black font-sans text-base text-white hover:!bg-black/80 focus:!border-black/80 focus:!ring-black/80"
+                onClick={() => {
+                  loginHandler("github")
+                }}
+              >
+                <i className="i-mgc-github-cute-fi mr-2 text-xl" />
+                {" "}
+                Continue with
+                GitHub
+              </Button>
+              <Button
+                className="h-[48px] w-[320px] rounded-[8px] bg-blue-500 font-sans text-base text-white hover:bg-blue-500/90 focus:!border-blue-500/80 focus:!ring-blue-500/80"
+                onClick={() => {
+                  loginHandler("google")
+                }}
+              >
+                <i className="i-mgc-google-cute-fi mr-2 text-xl" />
+                {" "}
+                Continue with
+                Google
+              </Button>
+            </>
+          )}
         </div>
       )}
     </div>