fix(Login): Dealing with external login links not jumping properly

Author: haitaoo

ui/src/components/Header/index.tsx

@@ -20,7 +20,7 @@ import {
 
 import classnames from 'classnames';
 
-import { floppyNavigation, userCenter } from '@/utils';
+import { userCenter } from '@/utils';
 import {
   loggedUserInfoStore,
   siteInfoStore,
@@ -29,7 +29,6 @@ import {
   themeSettingStore,
 } from '@/stores';
 import { logout, useQueryNotificationStatus } from '@/services';
-import { RouteAlias } from '@/router/alias';
 
 import NavItems from './components/NavItems';
 
@@ -73,19 +72,6 @@ const Header: FC = () => {
     clearUserStore();
     window.location.replace(window.location.href);
   };
-  const onLoginClick = (evt) => {
-    if (location.pathname === RouteAlias.login) {
-      evt.preventDefault();
-      window.location.reload();
-      return;
-    }
-    if (floppyNavigation.shouldProcessLinkClick(evt)) {
-      evt.preventDefault();
-      floppyNavigation.navigateToLogin({
-        handler: navigate,
-      });
-    }
-  };
 
   useEffect(() => {
     if (q) {
@@ -155,7 +141,6 @@ const Header: FC = () => {
                     'link-light': navbarStyle === 'theme-colored',
                     'link-primary': navbarStyle !== 'theme-colored',
                   })}
-                  onClick={onLoginClick}
                   href={userCenter.getLoginUrl()}>
                   {t('btns.login')}
                 </Button>
@@ -243,7 +228,6 @@ const Header: FC = () => {
                     'link-light': navbarStyle === 'theme-colored',
                     'link-primary': navbarStyle !== 'theme-colored',
                   })}
-                  onClick={onLoginClick}
                   href={userCenter.getLoginUrl()}>
                   {t('btns.login')}
                 </Button>

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

@@ -175,86 +175,90 @@ const Index: React.FC = () => {
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
       <WelcomeTitle />
-      {step === 1 && canOriginalLogin ? (
+      {step === 1 ? (
         <Col className="mx-auto" md={6} lg={4} xl={3}>
           {ucAgentInfo ? (
             <PluginUcLogin className="mb-5" />
           ) : (
             <PluginOauth className="mb-5" />
           )}
-          <Form noValidate onSubmit={handleSubmit}>
-            <Form.Group controlId="email" className="mb-3">
-              <Form.Label>{t('email.label')}</Form.Label>
-              <Form.Control
-                required
-                tabIndex={1}
-                type="email"
-                value={formData.e_mail.value}
-                isInvalid={formData.e_mail.isInvalid}
-                onChange={(e) =>
-                  handleChange({
-                    e_mail: {
-                      value: e.target.value,
-                      isInvalid: false,
-                      errorMsg: '',
-                    },
-                  })
-                }
-              />
-              <Form.Control.Feedback type="invalid">
-                {formData.e_mail.errorMsg}
-              </Form.Control.Feedback>
-            </Form.Group>
+          {canOriginalLogin ? (
+            <>
+              <Form noValidate onSubmit={handleSubmit}>
+                <Form.Group controlId="email" className="mb-3">
+                  <Form.Label>{t('email.label')}</Form.Label>
+                  <Form.Control
+                    required
+                    tabIndex={1}
+                    type="email"
+                    value={formData.e_mail.value}
+                    isInvalid={formData.e_mail.isInvalid}
+                    onChange={(e) =>
+                      handleChange({
+                        e_mail: {
+                          value: e.target.value,
+                          isInvalid: false,
+                          errorMsg: '',
+                        },
+                      })
+                    }
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {formData.e_mail.errorMsg}
+                  </Form.Control.Feedback>
+                </Form.Group>
 
-            <Form.Group controlId="password" className="mb-3">
-              <div className="d-flex justify-content-between">
-                <Form.Label>{t('password.label')}</Form.Label>
-                <Link to="/users/account-recovery" tabIndex={2}>
-                  <small>{t('forgot_pass')}</small>
-                </Link>
-              </div>
+                <Form.Group controlId="password" className="mb-3">
+                  <div className="d-flex justify-content-between">
+                    <Form.Label>{t('password.label')}</Form.Label>
+                    <Link to="/users/account-recovery" tabIndex={2}>
+                      <small>{t('forgot_pass')}</small>
+                    </Link>
+                  </div>
 
-              <Form.Control
-                required
-                tabIndex={1}
-                type="password"
-                // value={formData.pass.value}
-                maxLength={32}
-                isInvalid={formData.pass.isInvalid}
-                onChange={(e) =>
-                  handleChange({
-                    pass: {
-                      value: e.target.value,
-                      isInvalid: false,
-                      errorMsg: '',
-                    },
-                  })
-                }
-              />
-              <Form.Control.Feedback type="invalid">
-                {formData.pass.errorMsg}
-              </Form.Control.Feedback>
-            </Form.Group>
+                  <Form.Control
+                    required
+                    tabIndex={1}
+                    type="password"
+                    // value={formData.pass.value}
+                    maxLength={32}
+                    isInvalid={formData.pass.isInvalid}
+                    onChange={(e) =>
+                      handleChange({
+                        pass: {
+                          value: e.target.value,
+                          isInvalid: false,
+                          errorMsg: '',
+                        },
+                      })
+                    }
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {formData.pass.errorMsg}
+                  </Form.Control.Feedback>
+                </Form.Group>
 
-            <div className="d-grid">
-              <Button variant="primary" type="submit" tabIndex={1}>
-                {t('login', { keyPrefix: 'btns' })}
-              </Button>
-            </div>
-          </Form>
-          {loginSetting.allow_new_registrations && (
-            <div className="text-center mt-5">
-              <Trans i18nKey="login.info_sign" ns="translation">
-                Don’t have an account?
-                <Link
-                  to={userCenter.getSignUpUrl()}
-                  tabIndex={2}
-                  onClick={floppyNavigation.handleRouteLinkClick}>
-                  Sign up
-                </Link>
-              </Trans>
-            </div>
-          )}
+                <div className="d-grid">
+                  <Button variant="primary" type="submit" tabIndex={1}>
+                    {t('login', { keyPrefix: 'btns' })}
+                  </Button>
+                </div>
+              </Form>
+              {loginSetting.allow_new_registrations && (
+                <div className="text-center mt-5">
+                  <Trans i18nKey="login.info_sign" ns="translation">
+                    Don’t have an account?
+                    <Link
+                      to={userCenter.getSignUpUrl()}
+                      tabIndex={2}
+                      onClick={floppyNavigation.handleRouteLinkClick}>
+                      Sign up
+                    </Link>
+                  </Trans>
+                </div>
+              )}
+            </>
+          ) : null}
         </Col>
       ) : null}
 

ui/src/utils/floppyNavigation.ts

@@ -62,7 +62,7 @@ const navigate = (to: string | number, config: NavigateConfig = {}) => {
      * 2. Auto storage login redirect
      */
     if (to === RouteAlias.login || to === getLoginUrl()) {
-      if (equalToCurrentHref(RouteAlias.login)) {
+      if (equalToCurrentHref(to)) {
         return;
       }
       storageLoginRedirect();