implemented ui for login information

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

@@ -5,7 +5,11 @@
     "logo-alt": "SCM-Manager",
     "username-placeholder": "Benutzername",
     "password-placeholder": "Passwort",
-    "submit": "Anmelden"
+    "submit": "Anmelden",
+    "plugin": "Plugin",
+    "feature": "Feature",
+    "tip": "Tipp",
+    "loading": "Lade Daten ..."
   },
   "logout": {
     "error": {

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

@@ -5,7 +5,12 @@
     "logo-alt": "SCM-Manager",
     "username-placeholder": "Your Username",
     "password-placeholder": "Your Password",
-    "submit": "Login"
+    "submit": "Login",
+    "plugin": "Plugin",
+    "feature": "Feature",
+    "tip": "Tip",
+    "loading": "Loading ...",
+    "error": "Error"
   },
   "logout": {
     "error": {

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));
+
+

scm-ui/src/components/InfoItem.js

@@ -0,0 +1,8 @@
+// @flow
+import type { Link } from "@scm-manager/ui-types";
+
+export type InfoItem = {
+  title: string,
+  summary: string,
+  _links: {[string]: Link}
+};

scm-ui/src/components/LoginForm.js

@@ -0,0 +1,120 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Image, ErrorNotification, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+const styles = {
+  avatar: {
+    marginTop: "-70px",
+    paddingBottom: "20px"
+  },
+  avatarImage: {
+    border: "1px solid lightgray",
+    padding: "5px",
+    background: "#fff",
+    borderRadius: "50%",
+    width: "128px",
+    height: "128px"
+  },
+  avatarSpacing: {
+    marginTop: "5rem"
+  }
+};
+
+type Props = {
+  error?: Error,
+  loading: boolean,
+  login: (username: string, password: string) => void,
+
+  // context props
+  t: string => string,
+  classes: any
+};
+
+type State = {
+  username: string,
+  password: string
+};
+
+class LoginForm extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { username: "", password: "" };
+  }
+
+  handleSubmit = (event: Event) => {
+    event.preventDefault();
+    if (this.isValid()) {
+      this.props.login(
+        this.state.username,
+        this.state.password
+      );
+    }
+  };
+
+  handleUsernameChange = (value: string) => {
+    this.setState({ username: value });
+  };
+
+  handlePasswordChange = (value: string) => {
+    this.setState({ password: value });
+  };
+
+  isValid() {
+    return this.state.username && this.state.password;
+  }
+
+  areCredentialsInvalid() {
+    const { t, error } = this.props;
+    if (error instanceof UnauthorizedError) {
+      return new Error(t("errorNotification.wrongLoginCredentials"));
+    } else {
+      return error;
+    }
+  }
+
+  render() {
+    const { loading, classes, t } = this.props;
+    return (
+      <div className="column is-4 box has-text-centered has-background-white-ter">
+        <h3 className="title">{t("login.title")}</h3>
+        <p className="subtitle">{t("login.subtitle")}</p>
+        <div className={classNames("box", classes.avatarSpacing)}>
+          <figure className={classes.avatar}>
+            <Image
+              className={classes.avatarImage}
+              src="/images/blib.jpg"
+              alt={t("login.logo-alt")}
+            />
+          </figure>
+          <ErrorNotification error={this.areCredentialsInvalid()}/>
+          <form onSubmit={this.handleSubmit}>
+            <InputField
+              placeholder={t("login.username-placeholder")}
+              autofocus={true}
+              onChange={this.handleUsernameChange}
+            />
+            <InputField
+              placeholder={t("login.password-placeholder")}
+              type="password"
+              onChange={this.handlePasswordChange}
+            />
+            <SubmitButton
+              label={t("login.submit")}
+              fullWidth={true}
+              loading={loading}
+            />
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default injectSheet(styles)(translate("commons")(LoginForm));
+
+

scm-ui/src/components/LoginInfo.js

@@ -0,0 +1,54 @@
+//@flow
+import React from "react";
+import InfoBox from "./InfoBox";
+import type { InfoItem } from "./InfoItem";
+
+type Props = {
+};
+
+type State = {
+  plugin?: InfoItem,
+  feature?: InfoItem,
+  error?: Error
+};
+
+class LoginInfo extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    fetch("https://login-info.scm-manager.org/api/v1/login-info")
+      .then(response => response.json())
+      .then(info => {
+        this.setState({
+          plugin: info.plugin,
+          feature: info.feature,
+          error: undefined
+        });
+      })
+      .catch(error => {
+        this.setState({
+          error
+        });
+      });
+  }
+
+  render() {
+    const { plugin, feature, error } = this.state;
+    return (
+      <div className="column is-7 is-offset-1 is-paddingless">
+        <InfoBox item={feature} type="feature" error={error} />
+        <InfoBox item={plugin} type="plugin" error={error} />
+      </div>
+    );
+  }
+
+}
+
+export default LoginInfo;
+
+

scm-ui/src/containers/Login.js

@@ -1,8 +1,6 @@
 //@flow
 import React from "react";
 import { Redirect, withRouter } from "react-router-dom";
-import injectSheet from "react-jss";
-import { translate } from "react-i18next";
 import {
   login,
   isAuthenticated,
@@ -10,148 +8,65 @@ import {
   getLoginFailure
 } from "../modules/auth";
 import { connect } from "react-redux";
-
-import {
-  InputField,
-  SubmitButton,
-  ErrorNotification,
-  Image, UnauthorizedError
-} from "@scm-manager/ui-components";
-import classNames from "classnames";
 import { getLoginLink } from "../modules/indexResource";
+import LoginForm from "../components/LoginForm";
+import LoginInfo from "../components/LoginInfo";
+import classNames from "classnames";
+import injectSheet from "react-jss";
 
 const styles = {
-  avatar: {
-    marginTop: "-70px",
-    paddingBottom: "20px"
-  },
-  avatarImage: {
-    border: "1px solid lightgray",
-    padding: "5px",
-    background: "#fff",
-    borderRadius: "50%",
-    width: "128px",
-    height: "128px"
-  },
-  avatarSpacing: {
-    marginTop: "5rem"
+  section: {
+    paddingTop: "2em"
   }
 };
 
 type Props = {
   authenticated: boolean,
   loading: boolean,
-  error: Error,
+  error?: Error,
   link: string,
 
   // dispatcher props
   login: (link: string, username: string, password: string) => void,
 
   // context props
-  t: string => string,
   classes: any,
+  t: string => string,
   from: any,
   location: any
 };
 
-type State = {
-  username: string,
-  password: string
-};
+class Login extends React.Component<Props> {
 
-class Login extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { username: "", password: "" };
-  }
-
-  handleUsernameChange = (value: string) => {
-    this.setState({ username: value });
+  login = (username: string, password: string) => {
+    const { link, login } = this.props;
+    login(link, username, password);
   };
 
-  handlePasswordChange = (value: string) => {
-    this.setState({ password: value });
-  };
-
-  handleSubmit = (event: Event) => {
-    event.preventDefault();
-    if (this.isValid()) {
-      this.props.login(
-        this.props.link,
-        this.state.username,
-        this.state.password
-      );
-    }
-  };
-
-  isValid() {
-    return this.state.username && this.state.password;
-  }
-
-  isInValid() {
-    return !this.isValid();
-  }
-
-  areCredentialsInvalid() {
-    const { t, error } = this.props;
-    if (error instanceof UnauthorizedError) {
-      return new Error(t("errorNotification.wrongLoginCredentials"));
-    } else {
-      return error;
-    }
-  }
-
   renderRedirect = () => {
     const { from } = this.props.location.state || { from: { pathname: "/" } };
-    return <Redirect to={from} />;
+    return <Redirect to={from}/>;
   };
 
   render() {
-    const { authenticated, loading, t, classes } = this.props;
+    const { authenticated, loading, error, classes } = this.props;
 
     if (authenticated) {
       return this.renderRedirect();
     }
 
     return (
-      <section className="hero">
+      <section className={classNames("hero", classes.section )}>
         <div className="hero-body">
-          <div className="container has-text-centered">
-            <div className="column is-4 is-offset-4">
-              <h3 className="title">{t("login.title")}</h3>
-              <p className="subtitle">{t("login.subtitle")}</p>
-              <div className={classNames("box", classes.avatarSpacing)}>
-                <figure className={classes.avatar}>
-                  <Image
-                    className={classes.avatarImage}
-                    src="/images/blib.jpg"
-                    alt={t("login.logo-alt")}
-                  />
-                </figure>
-                <ErrorNotification error={this.areCredentialsInvalid()} />
-                <form onSubmit={this.handleSubmit}>
-                  <InputField
-                    placeholder={t("login.username-placeholder")}
-                    autofocus={true}
-                    onChange={this.handleUsernameChange}
-                  />
-                  <InputField
-                    placeholder={t("login.password-placeholder")}
-                    type="password"
-                    onChange={this.handlePasswordChange}
-                  />
-                  <SubmitButton
-                    label={t("login.submit")}
-                    fullWidth={true}
-                    loading={loading}
-                  />
-                </form>
-              </div>
+          <div className="container">
+            <div className="columns">
+              <LoginForm loading={loading} error={error} login={this.login}/>
+              <LoginInfo/>
             </div>
           </div>
         </div>
       </section>
-    );
+      );
   }
 }
 
@@ -179,6 +94,6 @@ const StyledLogin = injectSheet(styles)(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("commons")(Login))
+  )(Login)
 );
 export default withRouter(StyledLogin);