Merged 2.0.0-m3

scm-ui-components/packages/ui-components/src/layout/Footer.js

@@ -1,6 +1,7 @@
 //@flow
 import React from "react";
 import type { Me } from "@scm-manager/ui-types";
+import {Link} from "react-router-dom";
 
 type Props = {
   me?: Me
@@ -15,7 +16,7 @@ class Footer extends React.Component<Props> {
     return (
       <footer className="footer">
         <div className="container is-centered">
-          <p className="has-text-centered">{me.displayName}</p>
+          <p className="has-text-centered"><Link to={"/me"}>{me.displayName}</Link></p>
         </div>
       </footer>
     );

scm-ui-components/packages/ui-types/src/Me.js

@@ -2,5 +2,6 @@
 
 export type Me = {
   name: string,
-  displayName: string
+  displayName: string,
+  mail: string
 };

scm-ui/public/locales/en/commons.json

@@ -38,5 +38,14 @@
   "paginator": {
     "next": "Next",
     "previous": "Previous"
+  },
+  "profile": {
+    "actions-label": "Actions",
+    "username": "Username",
+    "displayName": "Display Name",
+    "mail": "E-Mail",
+    "change-password": "Change password",
+    "error-title": "Error",
+    "error-subtitle": "Cannot display profile"
   }
 }

scm-ui/src/containers/ChangeUserPassword.js

@@ -1,15 +1,15 @@
 // @flow
 import React from "react";
-import type { User } from "@scm-manager/ui-types";
+import type { User } from "../../../scm-ui-components/packages/ui-types/src/index";
 import {
   SubmitButton,
   Notification,
   ErrorNotification,
   InputField
-} from "@scm-manager/ui-components";
+} from "../../../scm-ui-components/packages/ui-components/src/index";
 import { translate } from "react-i18next";
-import { setPassword, updatePassword } from "./changePassword";
-import PasswordConfirmation from "./PasswordConfirmation";
+import { setPassword, updatePassword } from "../users/components/changePassword";
+import PasswordConfirmation from "../users/components/PasswordConfirmation";
 
 type Props = {
   user: User,

scm-ui/src/containers/Main.js

@@ -19,7 +19,8 @@ import SingleGroup from "../groups/containers/SingleGroup";
 import AddGroup from "../groups/containers/AddGroup";
 
 import Config from "../config/containers/Config";
-import ChangeUserPassword from "../users/components/ChangeUserPassword";
+import ChangeUserPassword from "./ChangeUserPassword";
+import Profile from "./Profile";
 
 type Props = {
   authenticated?: boolean
@@ -79,11 +80,7 @@ class Main extends React.Component<Props> {
             path="/user/:name"
             component={SingleUser}
           />
-          <ProtectedRoute
-            authenticated={authenticated}
-            path={"/me/password"}
-            component={ChangeUserPassword}
-          />
+
           <ProtectedRoute
             exact
             path="/groups"
@@ -112,6 +109,11 @@ class Main extends React.Component<Props> {
             component={Config}
             authenticated={authenticated}
           />
+          <ProtectedRoute
+            path="/me"
+            component={Profile}
+            authenticated={authenticated}
+          />
         </Switch>
       </div>
     );

scm-ui/src/containers/Profile.js

@@ -0,0 +1,62 @@
+// @flow
+
+import React from "react";
+
+import {
+  Page,
+  Navigation,
+  Section,
+  MailLink
+} from "../../../scm-ui-components/packages/ui-components/src/index";
+import { NavLink, Route } 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";
+
+type Props = {
+  me: Me,
+
+  // Context props
+  t: string => string
+};
+type State = {};
+
+class Profile extends React.Component<Props, State> {
+  render() {
+    const { me, t } = this.props;
+
+    if (!me) {
+      return (
+        <ErrorPage
+          title={t("profile.error-title")}
+          subtitle={t("profile.error-subtitle")}
+          error={{ name: "Error", message: "'me' is undefined" }}
+        />
+      );
+    }
+
+    return (
+      <Page title={me.displayName}>
+        <Route path={""} render={() => <ProfileInfo me={me} />} />
+        <Route path={"/password"} component={ChangeUserPassword} />
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    me: getMe(state)
+  };
+};
+
+export default compose(
+  translate("commons"),
+  connect(mapStateToProps)
+)(Profile);

scm-ui/src/containers/ProfileInfo.js

@@ -0,0 +1,65 @@
+// @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 { compose } from "redux";
+import { translate } from "react-i18next";
+
+type Props = {
+  me: Me,
+
+  // Context props
+  t: string => string
+};
+type State = {};
+
+class ProfileInfo extends React.Component<Props, State> {
+  render() {
+    const { me, t } = this.props;
+    return (
+      <div className="columns">
+        <AvatarWrapper>
+          <div>
+            <figure className="media-left">
+              <p className="image is-64x64">
+                {
+                  // TODO: add avatar
+                }
+              </p>
+            </figure>
+          </div>
+        </AvatarWrapper>
+        <div className="column is-two-quarters">
+          <table className="table">
+            <tbody>
+              <tr>
+                <td>{t("profile.username")}</td>
+                <td>{me.name}</td>
+              </tr>
+              <tr>
+                <td>{t("profile.displayName")}</td>
+                <td>{me.displayName}</td>
+              </tr>
+              <tr>
+                <td>{t("profile.mail")}</td>
+                <td>
+                  <MailLink address={me.mail} />
+                </td>
+              </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>
+    );
+  }
+}
+
+export default compose(translate("commons"))(ProfileInfo);

scm-ui/src/modules/auth.js

@@ -1,5 +1,5 @@
 // @flow
-import type { Me } from "@scm-manager/ui-components";
+import type { Me } from "@scm-manager/ui-types";
 import * as types from "./types";
 
 import { apiClient, UNAUTHORIZED_ERROR } from "@scm-manager/ui-components";
@@ -136,7 +136,11 @@ const callFetchMe = (link: string): Promise<Me> => {
       return response.json();
     })
     .then(json => {
-      return { name: json.name, displayName: json.displayName };
+      return {
+        name: json.name,
+        displayName: json.displayName,
+        mail: json.mail
+      };
     });
 };
 

scm-ui/src/modules/auth.test.js

@@ -37,7 +37,11 @@ import {
   FETCH_INDEXRESOURCES_SUCCESS
 } from "./indexResource";
 
-const me = { name: "tricia", displayName: "Tricia McMillian" };
+const me = {
+  name: "tricia",
+  displayName: "Tricia McMillian",
+  mail: "trillian@heartofgold.universe"
+};
 
 describe("auth reducer", () => {
   it("should set me and login on successful fetch of me", () => {