fix(login): Does not auto proxy the `ucAgent.login_redirect_url` jump on the `users/login` page

ui/src/components/Icon/svg.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+import { base64ToSvg } from '@/utils';
+
+interface IProps {
+  base64: string;
+}
+const Icon: FC<IProps> = ({ base64 = '' }) => {
+  return base64 ? (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: base64ToSvg(base64),
+      }}
+    />
+  ) : null;
+};
+
+export default Icon;

ui/src/components/index.ts

@@ -3,6 +3,7 @@ import Editor, { EditorRef, htmlRender } from './Editor';
 import Header from './Header';
 import Footer from './Footer';
 import Icon from './Icon';
+import SvgIcon from './Icon/svg';
 import Modal from './Modal';
 import TagSelector from './TagSelector';
 import Unactivate from './Unactivate';
@@ -42,6 +43,7 @@ export {
   Header,
   Footer,
   Icon,
+  SvgIcon,
   Modal,
   Unactivate,
   UploadImg,

ui/src/pages/Users/Login/index.tsx

@@ -11,9 +11,13 @@ import type {
   ImgCodeRes,
   FormDataType,
 } from '@/common/interface';
-import { Unactivate, WelcomeTitle } from '@/components';
+import { SvgIcon, Unactivate, WelcomeTitle } from '@/components';
 import { PluginOauth } from '@/plugins';
-import { loggedUserInfoStore, loginSettingStore } from '@/stores';
+import {
+  loggedUserInfoStore,
+  loginSettingStore,
+  userCenterStore,
+} from '@/stores';
 import { guard, floppyNavigation, handleFormError } from '@/utils';
 import { login, checkImgCode } from '@/services';
 import { PicAuthCodeModal } from '@/components/Modal';
@@ -26,6 +30,10 @@ const Index: React.FC = () => {
   const [refresh, setRefresh] = useState(0);
   const { user: storeUser, update: updateUser } = loggedUserInfoStore((_) => _);
   const loginSetting = loginSettingStore((state) => state.login);
+  const ucAgent = userCenterStore().agent;
+  const ucLoginRedirect =
+    ucAgent?.enabled && ucAgent?.agent_info?.login_redirect_url;
+
   const [formData, setFormData] = useState<FormDataType>({
     e_mail: {
       value: '',
@@ -56,6 +64,9 @@ const Index: React.FC = () => {
   };
 
   const getImgCode = () => {
+    if (ucLoginRedirect) {
+      return;
+    }
     checkImgCode({
       action: 'login',
     }).then((res) => {
@@ -169,13 +180,26 @@ const Index: React.FC = () => {
   usePageTags({
     title: t('login', { keyPrefix: 'page_title' }),
   });
-  if (!guard.loginAgent().ok) {
-    return null;
-  }
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
       <WelcomeTitle />
-      {step === 1 && (
+      {ucLoginRedirect && step === 1 && (
+        <Col className="mx-auto" md={3}>
+          <Button
+            className="w-100"
+            variant="outline-secondary"
+            href={ucAgent?.agent_info.login_redirect_url}>
+            <SvgIcon base64={ucAgent?.agent_info.icon} />
+            <span>
+              {t('connect', {
+                auth_name: ucAgent?.agent_info.name,
+                keyPrefix: 'plugins.oauth',
+              })}
+            </span>
+          </Button>
+        </Col>
+      )}
+      {step === 1 && !ucLoginRedirect && (
         <Col className="mx-auto" md={3}>
           <PluginOauth className="mb-5" />
           <Form noValidate onSubmit={handleSubmit}>

ui/src/pages/Users/Personal/components/UserInfo/index.tsx

@@ -5,11 +5,10 @@ import { Link } from 'react-router-dom';
 
 import classnames from 'classnames';
 
-import { Avatar, Icon } from '@/components';
+import { Avatar, Icon, SvgIcon } from '@/components';
 import type { UserInfoRes } from '@/common/interface';
 import { getUcBranding, UcBrandingEntry } from '@/services';
 import { userCenterStore } from '@/stores';
-import { base64ToSvg } from '@/utils';
 
 interface Props {
   data: UserInfoRes;
@@ -124,13 +123,7 @@ const Index: FC<Props> = ({ data }) => {
                 className={classnames('d-flex', 'align-items-center', {
                   'me-3': i < a.length - 1,
                 })}>
-                {b.icon ? (
-                  <span
-                    dangerouslySetInnerHTML={{
-                      __html: base64ToSvg(b.icon),
-                    }}
-                  />
-                ) : null}
+                {b.icon ? <SvgIcon base64={b.icon} /> : null}
                 {b.url ? (
                   <a className="link-secondary" href={b.url}>
                     {b.label}

ui/src/plugins/PluginOauth/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
 import { useGetStartUseOauthConnector } from '@/services';
-import { base64ToSvg } from '@/utils';
+import { SvgIcon } from '@/components';
 
 interface Props {
   className?: string;
@@ -20,12 +20,7 @@ const Index: FC<Props> = ({ className }) => {
       {data?.map((item) => {
         return (
           <Button variant="outline-secondary" href={item.link} key={item.name}>
-            <span
-              dangerouslySetInnerHTML={{
-                __html: base64ToSvg(item.icon),
-              }}
-            />
-
+            <SvgIcon base64={item.icon} />
             <span>{t('connect', { auth_name: item.name })}</span>
           </Button>
         );

ui/src/router/routes.ts

@@ -158,10 +158,6 @@ const routes: RouteNode[] = [
         guard: () => {
           const notLogged = guard.notLogged();
           if (notLogged.ok) {
-            const la = guard.loginAgent();
-            if (!la.ok) {
-              return la;
-            }
             return notLogged;
           }
 

ui/src/utils/common.ts

@@ -268,9 +268,10 @@ function base64ToSvg(base64: string) {
   // svg add class btnSvg
   const parser = new DOMParser();
   const doc = parser.parseFromString(svgxml, 'image/svg+xml');
+  const parseError = doc.querySelector('parsererror');
   const svg = doc.querySelector('svg');
   let str = '';
-  if (svg) {
+  if (svg && !parseError) {
     svg.classList.add('btnSvg');
     svg.classList.add('me-2');
 

ui/src/utils/floppyNavigation.ts

@@ -60,9 +60,17 @@ const navigate = (
     if (!differentCurrent(to)) {
       return;
     }
+    /**
+     * 1. Blocking redirection of two login pages
+     * 2. Auto storage login redirect
+     */
     if (to === RouteAlias.login || to === getLoginUrl()) {
+      if (!differentCurrent(RouteAlias.login)) {
+        return;
+      }
       storageLoginRedirect();
     }
+
     if (!isRoutableLink(to) && handler !== 'href' && handler !== 'replace') {
       handler = 'href';
     }