Implemented Profile component

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/users.json

@@ -44,6 +44,9 @@
     "information-label": "Information",
     "back-label": "Back"
   },
+  "profile": {
+    "change-pw": "Change Password"
+  },
   "validation": {
     "mail-invalid": "This email is invalid",
     "name-invalid": "This name is invalid",

scm-ui/src/containers/Main.js

@@ -19,6 +19,7 @@ import SingleGroup from "../groups/containers/SingleGroup";
 import AddGroup from "../groups/containers/AddGroup";
 
 import Config from "../config/containers/Config";
+import Profile from "../users/containers/Profile";
 
 type Props = {
   authenticated?: boolean
@@ -106,6 +107,12 @@ class Main extends React.Component<Props> {
             component={Config}
             authenticated={authenticated}
           />
+          <ProtectedRoute
+            exact
+            path="/me"
+            component={Profile}
+            authenticated={authenticated}
+          />
         </Switch>
       </div>
     );

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", () => {

scm-ui/src/users/containers/Profile.js

@@ -0,0 +1,90 @@
+// @flow
+
+import React from "react";
+
+import {
+  Page,
+  Navigation,
+  Section,
+  MailLink
+} from "@scm-manager/ui-components";
+import { NavLink } 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-manager/ui-types";
+import AvatarWrapper from "../../repos/components/changesets/AvatarWrapper";
+
+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 null;
+    }
+    return (
+      <Page title={me.displayName}>
+        <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("user.name")}</td>
+                  <td>{me.name}</td>
+                </tr>
+                <tr>
+                  <td>{t("user.displayName")}</td>
+                  <td>{me.displayName}</td>
+                </tr>
+                <tr>
+                  <td>{t("user.mail")}</td>
+                  <td>
+                    <MailLink address={me.mail} />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div className="column is-one-quarter">
+            <Navigation>
+              <Section label={t("single-user.actions-label")} />
+              <NavLink to={"me/password"}>{t("profile.change-pw")}</NavLink>
+            </Navigation>
+          </div>
+        </div>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    me: getMe(state)
+  };
+};
+
+export default compose(
+  translate("users"),
+  connect(mapStateToProps)
+)(Profile);