fix: fixed issue with incorrect login status (#600)

* fix: fixed issue with incorrect login status

* style: remove unless code

* fix: user avatar error

* refactor: replace with default svg icon

* style: remove unless code

* docs: update changelog

---------

Co-authored-by: rain <15911122312@163.com>

docs/content.en/docs/release-notes/_index.md

@@ -17,6 +17,8 @@ Information about release notes of Coco Server is provided here.
 
 ### 🐛 Bug fix
 
+- fix: fixed issue with incorrect login status #600
+
 ### ✈️ Improvements
 
 ## 0.5.1 (2025-05-31)

src/components/Cloud/ServiceAuth.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { FC, memo, useCallback, useEffect, useState } from "react";
 import { Copy } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { v4 as uuidv4 } from "uuid";
@@ -30,7 +30,9 @@ const ServiceAuth = memo(
     const addError = useAppStore((state) => state.addError);
 
     const currentService = useConnectStore((state) => state.currentService);
-    const setCurrentService = useConnectStore((state) => state.setCurrentService);
+    const setCurrentService = useConnectStore(
+      (state) => state.setCurrentService
+    );
     const serverList = useConnectStore((state) => state.serverList);
     const setServerList = useConnectStore((state) => state.setServerList);
 
@@ -63,7 +65,7 @@ const ServiceAuth = memo(
             emit("login_or_logout", false);
             // update server profile
             setCurrentService({ ...currentService, profile: null });
-            const updatedServerList = serverList.map(server => 
+            const updatedServerList = serverList.map((server) =>
               server.id === id ? { ...server, profile: null } : server
             );
             console.log("updatedServerList", updatedServerList);
@@ -130,7 +132,6 @@ const ServiceAuth = memo(
 
     // Fetch the initial deep link intent
     useEffect(() => {
-      setLoading(false);
       // Function to handle pasted URL
       const handlePaste = (event: any) => {
         const pastedText = event.clipboardData.getData("text").trim();
@@ -172,6 +173,10 @@ const ServiceAuth = memo(
       };
     }, [ssoRequestID]);
 
+    useEffect(() => {
+      setLoading(false);
+    }, [currentService]);
+
     if (!currentService?.auth_provider?.sso?.url) {
       return null;
     }
@@ -222,8 +227,14 @@ const ServiceAuth = memo(
 
 export default ServiceAuth;
 
-const LoginButton = memo(({ LoginClick }: { LoginClick: () => void }) => {
+interface LoginButtonProps {
+  LoginClick: () => void;
+}
+
+const LoginButton: FC<LoginButtonProps> = memo((props) => {
+  const { LoginClick } = props;
   const { t } = useTranslation();
+
   return (
     <button
       className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors mb-3"
@@ -235,27 +246,32 @@ const LoginButton = memo(({ LoginClick }: { LoginClick: () => void }) => {
   );
 });
 
-const LoadingState = memo(
-  ({ onCancel, onCopy }: { onCancel: () => void; onCopy: () => void }) => {
-    const { t } = useTranslation();
-    return (
-      <div className="flex items-center space-x-2">
-        <button
-          className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors mb-3"
-          onClick={onCancel}
-        >
-          {t("cloud.cancel")}
-        </button>
-        <button
-          onClick={onCopy}
-          className="text-xl text-blue-500 hover:text-blue-600"
-        >
-          <Copy className="inline mr-2" />{" "}
-        </button>
-        <div className="text-justify italic text-xs">
-          {t("cloud.manualCopyLink")}
-        </div>
+interface LoadingStateProps {
+  onCancel: () => void;
+  onCopy: () => void;
+}
+
+const LoadingState: FC<LoadingStateProps> = memo((props) => {
+  const { onCancel, onCopy } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center space-x-2">
+      <button
+        className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors mb-3"
+        onClick={onCancel}
+      >
+        {t("cloud.cancel")}
+      </button>
+      <button
+        onClick={onCopy}
+        className="text-xl text-blue-500 hover:text-blue-600"
+      >
+        <Copy className="inline mr-2" />{" "}
+      </button>
+      <div className="text-justify italic text-xs">
+        {t("cloud.manualCopyLink")}
       </div>
-    );
-  }
-);
+    </div>
+  );
+});

src/components/Cloud/UserProfile.tsx

@@ -1,6 +1,7 @@
 import { User, LogOut } from "lucide-react";
 
 import { UserProfile as UserInfo } from "@/types/server";
+import { useState } from "react";
 
 interface UserProfileProps {
   server: string; //server's id
@@ -14,12 +15,21 @@ export function UserProfile({ server, userInfo, onLogout }: UserProfileProps) {
     console.log("Logout", server);
   };
 
+  const [imageLoadError, setImageLoadError] = useState(false);
+
   return (
     <div className="space-y-6">
       <div className="flex items-center space-x-4">
         <div className="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
-          {userInfo?.avatar ? (
-            <img src={userInfo?.avatar} alt="" className="w-6 h-6" />
+          {userInfo?.avatar && !imageLoadError ? (
+            <img
+              src={userInfo?.avatar}
+              alt=""
+              className="w-6 h-6"
+              onError={() => {
+                setImageLoadError(true);
+              }}
+            />
           ) : (
             <User className="w-6 h-6 text-gray-500 dark:text-gray-400" />
           )}