fix: optimize third-party login display name

i18n/en_US.yaml

@@ -1052,6 +1052,11 @@ ui:
     plugins: Plugins
     installed_plugins: Installed Plugins
   website_welcome: Welcome to {{site_name}}
+  plugins:
+    oauth:
+      connect: Connect with {{ auth_name }}
+      remove: Remove {{ auth_name }}
+
   admin:
     admin_header:
       title: Admin

ui/src/pages/Users/Settings/Account/components/MyLogins/index.tsx

@@ -14,6 +14,10 @@ const Index = () => {
     keyPrefix: 'settings.my_logins',
   });
 
+  const { t: t2 } = useTranslation('translation', {
+    keyPrefix: 'plugins.oauth',
+  });
+
   const deleteLogins = (e, item) => {
     if (!item.binding) {
       return;
@@ -57,7 +61,12 @@ const Index = () => {
                   height={16}
                   className="btnSvg me-2"
                 />
-                <span> {item.name}</span>
+                <span>
+                  {' '}
+                  {t2(item.binding ? 'remove' : 'connect', {
+                    auth_name: item.name,
+                  })}
+                </span>
               </Button>
             </div>
           );

ui/src/plugins/PluginOauth/index.tsx

@@ -1,5 +1,6 @@
 import { memo, FC } from 'react';
 import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 import classnames from 'classnames';
 
@@ -9,6 +10,7 @@ interface Props {
   className?: string;
 }
 const Index: FC<Props> = ({ className }) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'plugins.oauth' });
   const { data } = useGetStartUseOauthConnector();
 
   if (!data?.length) return null;
@@ -24,7 +26,7 @@ const Index: FC<Props> = ({ className }) => {
               height={16}
               className="btnSvg me-2"
             />
-            <span>{item.name}</span>
+            <span>{t('connect', { auth_name: item.name })}</span>
           </Button>
         );
       })}