implemented ui for login information

2025-11-12 08:25:44 +01:00 · 2019-08-13 08:23:37 +02:00
parent bb2e6c22d2
commit 2120a4ee02
7 changed files with 332 additions and 108 deletions
--- a/scm-ui/src/components/InfoBox.js
+++ b/scm-ui/src/components/InfoBox.js
@@ -0,0 +1,118 @@
+//@flow
+import * as React from "react";
+import { ErrorNotification } from "@scm-manager/ui-components";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import { translate } from "react-i18next";
+import type { InfoItem } from "./InfoItem";
+
+const styles = {
+  image: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    width: 160,
+    height: 160
+  },
+  icon: {
+    color: "#bff1e6"
+  },
+  label: {
+    marginTop: "0.5em"
+  },
+  content: {
+    marginLeft: "1.5em"
+  },
+  link: {
+    width: "60%",
+    height: "200px",
+    position: "absolute",
+    cursor: "pointer",
+    zIndex: 20
+  },
+  "@media (max-width: 768px)": {
+    link: {
+      width: "100%",
+    }
+  }
+};
+
+type Props = {
+  type: "plugin" | "feature",
+  item?: InfoItem,
+  error?: Error,
+
+  // context props
+  classes: any,
+  t: string => string
+};
+
+class InfoBox extends React.Component<Props> {
+
+  renderBody = () => {
+    const { item, error, t } = this.props;
+
+    const bodyClasses = classNames("media-content", "content", this.props.classes.content);
+
+    if (error) {
+      return (
+        <div className={bodyClasses}>
+          <h4>{t("login.error")}</h4>
+          <ErrorNotification error={error}/>
+        </div>
+      );
+    }
+
+    const title = item ? item.title : t("login.loading");
+    const summary = item ? item.summary : t("login.loading");
+
+
+    return (
+      <div className={bodyClasses}>
+        <h4>
+          <a href={this.createHref()}>{title}</a>
+        </h4>
+        <p>{summary}</p>
+      </div>
+    );
+
+  };
+
+  createHref = () => {
+    const { item } = this.props;
+    return item ? item._links.self.href : "#";
+  };
+
+  createLink = () => {
+    const { classes } = this.props;
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a href={this.createHref()} className={classes.link} />;
+  };
+
+  render() {
+    const { type, classes, t } = this.props;
+    const icon = type === "plugin" ? "puzzle-piece" : "star";
+    return (
+      <>
+        {this.createLink()}
+        <div className="box media">
+          <figure className="media-left">
+            <div
+              className={classNames("image", "box", "has-background-info", "has-text-white", "has-text-weight-bold", classes.image)}>
+              <i className={classNames("fas", "fa-" + icon, "fa-2x", classes.icon)}/>
+              <div className={classNames("is-size-4", classes.label)}>{t("login." + type)}</div>
+              <div className={classNames("is-size-4")}>{t("login.tip")}</div>
+            </div>
+          </figure>
+          {this.renderBody()}
+        </div>
+      </>
+    );
+  }
+
+}
+
+export default injectSheet(styles)(translate("commons")(InfoBox));
+
+