Add footer extension points for links and avatar

scm-ui/ui-components/src/avatar/AvatarImage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {FC} from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { Image } from "..";
 import { Person } from "./Avatar";
@@ -6,21 +6,20 @@ import { EXTENSION_POINT } from "./Avatar";
 
 type Props = {
   person: Person;
+  representation?: "rounded" | "rounded-border";
 };
 
-class AvatarImage extends React.Component<Props> {
-  render() {
-    const { person } = this.props;
-
+const AvatarImage:FC<Props> = ({person, representation = "rounded-border"}) => {
     const avatarFactory = binder.getExtension(EXTENSION_POINT);
     if (avatarFactory) {
       const avatar = avatarFactory(person);
 
-      return <Image className="has-rounded-border" src={avatar} alt={person.name} />;
+      const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
+
+      return <Image className={className} src={avatar} alt={person.name} />;
     }
 
     return null;
-  }
-}
+};
 
 export default AvatarImage;

scm-ui/ui-components/src/layout/Footer.tsx

@@ -1,23 +1,66 @@
 import React from "react";
-import { Me } from "@scm-manager/ui-types";
+import { Me, Links } from "@scm-manager/ui-types";
 import { Link } from "react-router-dom";
+import { binder } from "@scm-manager/ui-extensions";
+import { AvatarWrapper, AvatarImage } from "../avatar";
 
 type Props = {
   me?: Me;
+  version: string;
+  links: Links;
 };
 
+const RestDocLink = () => {
+  return <a href="">Rest Documentation</a>;
+};
+
+binder.bind("footer.links", RestDocLink);
+
 class Footer extends React.Component<Props> {
   render() {
-    const { me } = this.props;
+    const { me, version, links } = this.props;
     if (!me) {
       return "";
     }
+
+    const extensions = binder.getExtensions("footer.links", { me, links });
+
     return (
       <footer className="footer">
-        <div className="container is-centered">
-          <p className="has-text-centered">
+        <div className="container is-centered has-text-centered ">
+          <p className="is-size-6 columns is-centered">
+            <AvatarWrapper>
+              <figure className="media-left">
+                <p className="image is-24x24 is-rounded">
+                  <AvatarImage person={me} representation="rounded" />
+                </p>
+              </figure>
+            </AvatarWrapper>
             <Link to={"/me"}>{me.displayName}</Link>
           </p>
+          <hr className={"has-background-grey-lighter"} />
+          <p>
+            <a href="https://www.scm-manager.org/" target="_blank">
+              SCM-Manager {version}
+            </a>
+            {extensions.map(Ext => (
+              <>
+                {" "}
+                | <Ext />
+              </>
+            ))}
+          </p>
+          <br />
+          <p>
+            Powered by{" "}
+            <a target="_blank" href="https://cloudogu.com/">
+              Cloudogu GmbH
+            </a>{" "}
+            | Learn more at{" "}
+            <a href="https://www.scm-manager.org/" target="_blank">
+              SCM-Manager
+            </a>
+          </p>
         </div>
       </footer>
     );