fix(Auth): add a step in history for auth form

Author: ariser

src/containers/App/Content.js

@@ -79,11 +79,18 @@ function ContentWrapper(props) {
         <HistoryContext.Consumer>
             {(history) => (
                 <Router history={history}>
-                    <ThemeProvider theme={theme}>
-                        <div className={!singleClusterMode ? b() : b({embedded: true})}>
-                            {isAuthenticated ? props.children : <Authentication />}
-                        </div>
-                    </ThemeProvider>
+                    <Switch>
+                        <Route path={routes.auth}>
+                            <Authentication closable />
+                        </Route>
+                        <Route>
+                            <ThemeProvider theme={theme}>
+                                <div className={b({embedded: singleClusterMode})}>
+                                    {isAuthenticated ? props.children : <Authentication />}
+                                </div>
+                            </ThemeProvider>
+                        </Route>
+                    </Switch>
                 </Router>
             )}
         </HistoryContext.Consumer>

src/containers/AsideNavigation/AsideNavigation.tsx

@@ -23,7 +23,7 @@ import UserSettings from '../UserSettings/UserSettings';
 
 import routes, {createHref, CLUSTER_PAGES} from '../../routes';
 
-import {logout, setIsNotAuthenticated} from '../../store/reducers/authentication';
+import {logout} from '../../store/reducers/authentication';
 import {getSettingValue, setSettingValue} from '../../store/reducers/settings';
 
 import {ASIDE_HEADER_COMPACT_KEY} from '../../utils/constants';
@@ -43,10 +43,15 @@ interface MenuItem {
 interface YbdInternalUserProps {
     ydbUser?: string;
     logout: VoidFunction;
-    setIsNotAuthenticated: VoidFunction;
 }
 
-function YbdInternalUser({ydbUser, logout, setIsNotAuthenticated}: YbdInternalUserProps) {
+function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
+    const history = useHistory();
+
+    const handleLoginClick = () => {
+        history.push(createHref(routes.auth, undefined, {returnUrl: encodeURI(location.href)}));
+    };
+
     return (
         <div className={b('internal-user')}>
             <div className={b('user-info-wrapper')}>
@@ -58,7 +63,7 @@ function YbdInternalUser({ydbUser, logout, setIsNotAuthenticated}: YbdInternalUs
                     <Icon data={signOutIcon} size={16} />
                 </Button>
             ) : (
-                <Button view="flat-secondary" onClick={setIsNotAuthenticated} title="login">
+                <Button view="flat-secondary" title="login" onClick={handleLoginClick}>
                     <Icon data={signInIcon} size={16} />
                 </Button>
             )}
@@ -71,7 +76,6 @@ interface YdbUserDropdownProps {
     ydbUser: {
         login?: string;
         logout: VoidFunction;
-        setIsNotAuthenticated: VoidFunction;
     };
     popupAnchor: React.RefObject<HTMLDivElement>;
 }
@@ -96,11 +100,7 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
             onClosePopup={() => setIsUserDropdownVisible(false)}
             renderPopupContent={() => (
                 <div className={b('ydb-user-wrapper')}>
-                    <YbdInternalUser
-                        ydbUser={ydbUser.login}
-                        logout={ydbUser.logout}
-                        setIsNotAuthenticated={ydbUser.setIsNotAuthenticated}
-                    />
+                    <YbdInternalUser ydbUser={ydbUser.login} logout={ydbUser.logout} />
                 </div>
             )}
         />
@@ -112,7 +112,6 @@ interface AsideNavigationProps {
     ydbUser: string;
     compact: boolean;
     logout: VoidFunction;
-    setIsNotAuthenticated: VoidFunction;
     setSettingValue: (name: string, value: string) => void;
 }
 
@@ -260,7 +259,6 @@ function AsideNavigation(props: AsideNavigationProps) {
                             ydbUser={{
                                 login: props.ydbUser,
                                 logout: props.logout,
-                                setIsNotAuthenticated: props.setIsNotAuthenticated,
                             }}
                         />
                     </React.Fragment>
@@ -291,7 +289,6 @@ const mapStateToProps = (state: any) => {
 
 const mapDispatchToProps = {
     logout,
-    setIsNotAuthenticated,
     setSettingValue,
 };
 

src/containers/Authentication/Authentication.scss

@@ -83,4 +83,10 @@
     &__show-password-button {
         margin-left: 4px;
     }
+
+    &__close {
+        position: absolute;
+        top: 40px;
+        right: 40px;
+    }
 }

src/containers/Authentication/Authentication.tsx

@@ -1,19 +1,33 @@
 import {KeyboardEvent, useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router';
 import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
+
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
-//@ts-ignore
+
 import {authenticate} from '../../store/reducers/authentication';
+import {useTypedSelector} from '../../utils/hooks';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import showIcon from '../../assets/icons/show.svg';
 import hideIcon from '../../assets/icons/hide.svg';
+import closeIcon from '../../assets/icons/close.svg';
 
 import './Authentication.scss';
 
 const b = cn('authentication');
 
-function Authentication({authenticate, error}: any) {
+interface AuthenticationProps {
+    returnUrl?: string;
+    closable?: boolean;
+}
+
+function Authentication({returnUrl, closable = false}: AuthenticationProps) {
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const {error} = useTypedSelector((state) => state.authentication);
+
     const [login, setLogin] = useState('');
     const [pass, setPass] = useState('');
     const [loginError, setLoginError] = useState('');
@@ -40,7 +54,13 @@ function Authentication({authenticate, error}: any) {
     };
 
     const onLoginClick = () => {
-        authenticate(login, pass);
+        // @ts-expect-error
+        // typed dispatch required, remove error expectation after adding it
+        dispatch(authenticate(login, pass)).then(() => {
+            if (returnUrl) {
+                history.replace(decodeURI(returnUrl));
+            }
+        });
     };
 
     const onEnterClick = (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -49,6 +69,10 @@ function Authentication({authenticate, error}: any) {
         }
     };
 
+    const onClose = () => {
+        history.go(-1);
+    };
+
     const onTogglePasswordVisibility = () => {
         setShowPassword((prev) => !prev);
     };
@@ -106,18 +130,13 @@ function Authentication({authenticate, error}: any) {
                     Sign in
                 </Button>
             </form>
+            {closable && history.length > 1 && (
+                <Button onClick={onClose} className={b('close')}>
+                    <Icon data={closeIcon} size={24} />
+                </Button>
+            )}
         </section>
     );
 }
 
-function mapStateToProps(state: any) {
-    return {
-        error: state.authentication.error,
-    };
-}
-
-const mapDispatchToProps = {
-    authenticate,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Authentication);
+export default Authentication;

src/routes.ts

@@ -16,6 +16,7 @@ const routes = {
     tablet: '/tablet/:id',
     tabletsFilters: '/tabletsFilters',
     clusterPage: '/clusters/:name',
+    auth: '/auth',
 };
 
 export const CLUSTER_PAGES = {