fix redirects

scm-ui/ui-webapp/src/containers/App.tsx

@@ -27,7 +27,15 @@ import { connect } from "react-redux";
 import { compose } from "redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
-import { fetchMe, getFetchMeFailure, getMe, isAuthenticated, isFetchMePending } from "../modules/auth";
+import {
+  fetchMe,
+  getFetchMeFailure,
+  getMe,
+  isAuthenticated,
+  isFetchMePending,
+  isLoginPending,
+  isLogoutPending
+} from "../modules/auth";
 import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components";
 import { Links, Me } from "@scm-manager/ui-types";
 import {
@@ -37,6 +45,7 @@ import {
   getMeLink,
   isFetchIndexResourcesPending
 } from "../modules/indexResource";
+import Login from "./Login";
 
 type Props = WithTranslation & {
   me: Me;
@@ -64,12 +73,14 @@ class App extends Component<Props> {
     let content;
     const navigation = authenticated ? <PrimaryNavigation links={links} /> : "";
 
-    if (loading) {
+    if (!authenticated) {
+      content = <Login />;
+    } else if (loading) {
       content = <Loading />;
     } else if (error) {
       content = <ErrorPage title={t("app.error.title")} subtitle={t("app.error.subtitle")} error={error} />;
-    } else if (me) {
-      content = <Main authenticated={authenticated} links={links} />;
+    } else {
+      content = <Main authenticated={authenticated} links={links} me={me} />;
     }
     return (
       <div className="App">
@@ -88,9 +99,9 @@ const mapDispatchToProps = (dispatch: any) => {
 };
 
 const mapStateToProps = (state: any) => {
-  const authenticated = isAuthenticated(state);
+  const authenticated = isAuthenticated(state) && !isLogoutPending(state);
   const me = getMe(state);
-  const loading = isFetchMePending(state) || isFetchIndexResourcesPending(state);
+  const loading = isFetchMePending(state) || isFetchIndexResourcesPending(state) || isLoginPending(state);
   const error = getFetchMeFailure(state) || getFetchIndexResourcesFailure(state);
   const links = getLinks(state);
   const meLink = getMeLink(state);

scm-ui/ui-webapp/src/containers/Login.tsx

@@ -23,15 +23,17 @@
  */
 import React from "react";
 import { connect } from "react-redux";
-import { Redirect, withRouter } from "react-router-dom";
+import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
 import { compose } from "redux";
 import styled from "styled-components";
-import { getLoginFailure, isAnonymous, isLoginPending, login } from "../modules/auth";
+import { getLoginFailure, getMe, isAnonymous, isLoginPending, login } from "../modules/auth";
 import { getLoginInfoLink, getLoginLink } from "../modules/indexResource";
 import LoginInfo from "../components/LoginInfo";
+import { Me } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = RouteComponentProps & {
   authenticated: boolean;
+  me: Me;
   loading: boolean;
   error?: Error;
   link: string;
@@ -39,10 +41,6 @@ type Props = {
 
   // dispatcher props
   login: (link: string, username: string, password: string) => void;
-
-  // context props
-  from: any;
-  location: any;
 };
 
 const HeroSection = styled.section`
@@ -65,9 +63,9 @@ class Login extends React.Component<Props> {
   };
 
   render() {
-    const { authenticated, ...restProps } = this.props;
+    const { authenticated, me, ...restProps } = this.props;
 
-    if (authenticated) {
+    if (authenticated && !!me) {
       return this.renderRedirect();
     }
 
@@ -87,12 +85,14 @@ class Login extends React.Component<Props> {
 
 const mapStateToProps = (state: any) => {
   const authenticated = state?.auth?.me && !isAnonymous(state.auth.me);
+  const me = getMe(state);
   const loading = isLoginPending(state);
   const error = getLoginFailure(state);
   const link = getLoginLink(state);
   const loginInfoLink = getLoginInfoLink(state);
   return {
     authenticated,
+    me,
     loading,
     error,
     link,

scm-ui/ui-webapp/src/containers/Logout.tsx

@@ -24,52 +24,48 @@
 import React from "react";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { Redirect } from "react-router-dom";
 
-import { getLogoutFailure, isLogoutPending, isRedirecting, logout } from "../modules/auth";
+import { getLogoutFailure, logout } from "../modules/auth";
 import { ErrorPage, Loading } from "@scm-manager/ui-components";
-import { getLoginLink, getLogoutLink } from "../modules/indexResource";
+import { getLogoutLink } from "../modules/indexResource";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { compose } from "redux";
 
-type Props = WithTranslation & {
-  authenticated: boolean;
-  loading: boolean;
-  redirecting: boolean;
-  error: Error;
-  logoutLink: string;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    error: Error;
+    logoutLink: string;
 
-  // dispatcher functions
-  logout: (link: string) => void;
-};
+    // dispatcher functions
+    logout: (link: string) => void;
+  };
 
 class Logout extends React.Component<Props> {
   componentDidMount() {
-    if (this.props.logoutLink) {
-      this.props.logout(this.props.logoutLink);
-    }
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (this.props.logoutLink) {
+          this.props.logout(this.props.logoutLink);
+          resolve(this.props.history.push("/login"));
+        }
+      });
+    });
   }
 
   render() {
-    const { authenticated, redirecting, loading, error, t } = this.props;
+    const { error, t } = this.props;
     if (error) {
       return <ErrorPage title={t("logout.error.title")} subtitle={t("logout.error.subtitle")} error={error} />;
-    } else if (loading || authenticated || redirecting) {
-      return <Loading />;
     } else {
-      return <Redirect to="/login" />;
+      return <Loading />;
     }
   }
 }
 
 const mapStateToProps = (state: any) => {
-  const authenticated = state.auth.me && !getLoginLink(state);
-  const loading = isLogoutPending(state);
-  const redirecting = isRedirecting(state);
   const error = getLogoutFailure(state);
   const logoutLink = getLogoutLink(state);
   return {
-    authenticated,
-    loading,
-    redirecting,
     error,
     logoutLink
   };
@@ -81,4 +77,4 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTranslation("commons")(Logout));
+export default compose(withTranslation("commons"), withRouter, connect(mapStateToProps, mapDispatchToProps))(Logout);

scm-ui/ui-webapp/src/containers/Main.tsx

@@ -24,7 +24,7 @@
 import React from "react";
 
 import { Redirect, Route, Switch, withRouter } from "react-router-dom";
-import { Links } from "@scm-manager/ui-types";
+import { Links, Me } from "@scm-manager/ui-types";
 
 import Overview from "../repos/containers/Overview";
 import Users from "../users/containers/Users";
@@ -48,15 +48,22 @@ import Admin from "../admin/containers/Admin";
 import Profile from "./Profile";
 
 type Props = {
+  me: Me;
   authenticated?: boolean;
   links: Links;
 };
 
 class Main extends React.Component<Props> {
   render() {
-    const { authenticated, links } = this.props;
+    const { authenticated, me, links } = this.props;
     const redirectUrlFactory = binder.getExtension("main.redirect", this.props);
-    let url = "/repos/";
+    let url = "/";
+    if (authenticated) {
+      url = "/repos/";
+    }
+    if (!me) {
+      url = "/login";
+    }
     if (redirectUrlFactory) {
       url = redirectUrlFactory(this.props);
     }