Fixed routing for profile page

scm-ui/src/containers/Profile.js

@@ -5,16 +5,14 @@ import React from "react";
 import {
   Page,
   Navigation,
-  Section,
-  MailLink
+  Section
 } from "../../../scm-ui-components/packages/ui-components/src/index";
-import { NavLink, Route } from "react-router-dom";
+import { NavLink, Route, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import type { Me } from "../../../scm-ui-components/packages/ui-types/src/index";
-import AvatarWrapper from "../repos/components/changesets/AvatarWrapper";
 import { ErrorPage } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
@@ -23,12 +21,26 @@ type Props = {
   me: Me,
 
   // Context props
-  t: string => string
+  t: string => string,
+  match: any
 };
 type State = {};
 
 class Profile extends React.Component<Props, State> {
+  stripEndingSlash = (url: string) => {
+    if (url.endsWith("/")) {
+      return url.substring(0, url.length - 2);
+    }
+    return url;
+  };
+
+  matchedUrl = () => {
+    return this.stripEndingSlash(this.props.match.url);
+  };
+
   render() {
+    const url = this.matchedUrl();
+
     const { me, t } = this.props;
 
     if (!me) {
@@ -43,8 +55,24 @@ class Profile extends React.Component<Props, State> {
 
     return (
       <Page title={me.displayName}>
-        <Route path={""} render={() => <ProfileInfo me={me} />} />
-        <Route path={"/password"} component={ChangeUserPassword} />
+        <div className="columns">
+          <div className="column is-three-quarters">
+            <Route path={url} exact render={() => <ProfileInfo me={me} />} />
+            <Route
+              path={`${url}/password`}
+              exact
+              component={ChangeUserPassword}
+            />
+          </div>
+          <div className="column">
+            <Navigation>
+              <Section label={t("profile.actions-label")} />
+              <NavLink to={`${url}/password`}>
+                {t("profile.change-password")}
+              </NavLink>
+            </Navigation>
+          </div>
+        </div>
       </Page>
     );
   }
@@ -58,5 +86,6 @@ const mapStateToProps = state => {
 
 export default compose(
   translate("commons"),
-  connect(mapStateToProps)
+  connect(mapStateToProps),
+  withRouter
 )(Profile);

scm-ui/src/containers/ProfileInfo.js

@@ -1,9 +1,8 @@
 // @flow
 import React from "react";
 import AvatarWrapper from "../repos/components/changesets/AvatarWrapper";
-import { NavLink } from "react-router-dom";
 import type { Me } from "@scm-manager/ui-types";
-import { MailLink, Navigation, Section } from "@scm-manager/ui-components";
+import { MailLink } from "@scm-manager/ui-components";
 import { compose } from "redux";
 import { translate } from "react-i18next";
 
@@ -19,7 +18,7 @@ class ProfileInfo extends React.Component<Props, State> {
   render() {
     const { me, t } = this.props;
     return (
-      <div className="columns">
+      <>
         <AvatarWrapper>
           <div>
             <figure className="media-left">
@@ -31,7 +30,6 @@ class ProfileInfo extends React.Component<Props, State> {
             </figure>
           </div>
         </AvatarWrapper>
-        <div className="column is-two-quarters">
         <table className="table">
           <tbody>
             <tr>
@@ -50,14 +48,7 @@ class ProfileInfo extends React.Component<Props, State> {
             </tr>
           </tbody>
         </table>
-        </div>
-        <div className="column is-one-quarter">
-          <Navigation>
-            <Section label={t("profile.actions-label")} />
-            <NavLink to={"password"}>{t("profile.change-password")}</NavLink>
-          </Navigation>
-        </div>
-      </div>
+      </>
     );
   }
 }