From 372e629dfce8f80936a8135da07d01818696bf8c Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 15 Aug 2019 10:08:48 +0200
Subject: [PATCH] do not show login tips, if they could not fetched

---
 scm-ui/src/components/InfoBox.js   | 28 ++++-----------
 scm-ui/src/components/LoginForm.js |  4 +--
 scm-ui/src/components/LoginInfo.js | 56 ++++++++++++++++++++++--------
 scm-ui/src/containers/Login.js     | 13 ++-----
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/scm-ui/src/components/InfoBox.js b/scm-ui/src/components/InfoBox.js
index 95d487a210..794ad24684 100644
--- a/scm-ui/src/components/InfoBox.js
+++ b/scm-ui/src/components/InfoBox.js
@@ -33,15 +33,14 @@ const styles = {
   },
   "@media (max-width: 768px)": {
     link: {
-      width: "100%",
+      width: "100%"
     }
   }
 };
 
 type Props = {
   type: "plugin" | "feature",
-  item?: InfoItem,
-  error?: Error,
+  item: InfoItem,
 
   // context props
   classes: any,
@@ -51,27 +50,16 @@ type Props = {
 class InfoBox extends React.Component<Props> {
 
   renderBody = () => {
-    const { item, error, t } = this.props;
+    const { item, 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>
+          <a href={item._links.self.href}>{title}</a>
         </h4>
         <p>{summary}</p>
       </div>
@@ -79,15 +67,11 @@ class InfoBox extends React.Component<Props> {
 
   };
 
-  createHref = () => {
-    const { item } = this.props;
-    return item ? item._links.self.href : "#";
-  };
 
   createLink = () => {
-    const { classes } = this.props;
+    const { item, classes } = this.props;
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    return <a href={this.createHref()} className={classes.link} />;
+    return <a href={item._links.self.href} className={classes.link}/>;
   };
 
   render() {
diff --git a/scm-ui/src/components/LoginForm.js b/scm-ui/src/components/LoginForm.js
index c1ad8c0ea5..95d4c0b7d3 100644
--- a/scm-ui/src/components/LoginForm.js
+++ b/scm-ui/src/components/LoginForm.js
@@ -26,7 +26,7 @@ const styles = {
 type Props = {
   error?: Error,
   loading: boolean,
-  login: (username: string, password: string) => void,
+  loginHandler: (username: string, password: string) => void,
 
   // context props
   t: string => string,
@@ -48,7 +48,7 @@ class LoginForm extends React.Component<Props, State> {
   handleSubmit = (event: Event) => {
     event.preventDefault();
     if (this.isValid()) {
-      this.props.login(
+      this.props.loginHandler(
         this.state.username,
         this.state.password
       );
diff --git a/scm-ui/src/components/LoginInfo.js b/scm-ui/src/components/LoginInfo.js
index 63ce6f3dbe..a7e488e646 100644
--- a/scm-ui/src/components/LoginInfo.js
+++ b/scm-ui/src/components/LoginInfo.js
@@ -2,15 +2,24 @@
 import React from "react";
 import InfoBox from "./InfoBox";
 import type { InfoItem } from "./InfoItem";
+import LoginForm from "./LoginForm";
+import { Loading } from "@scm-manager/ui-components";
 
 type Props = {
-  loginInfoLink: string
+  loginInfoLink?: string,
+  loading?: boolean,
+  error?: Error,
+  loginHandler: (username: string, password: string) => void,
+};
+
+type LoginInfoResponse = {
+  plugin?: InfoItem,
+  feature?: InfoItem
 };
 
 type State = {
-  plugin?: InfoItem,
-  feature?: InfoItem,
-  error?: Error
+  info?: LoginInfoResponse,
+  loading?: boolean,
 };
 
 class LoginInfo extends React.Component<Props, State> {
@@ -18,34 +27,53 @@ class LoginInfo extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
+      loading: !!props.loginInfoLink
     };
   }
 
   componentDidMount() {
     const { loginInfoLink } = this.props;
+    if (!loginInfoLink) {
+      return;
+    }
     fetch(loginInfoLink)
       .then(response => response.json())
       .then(info => {
         this.setState({
-          plugin: info.plugin,
-          feature: info.feature,
-          error: undefined
+          info,
+          loading: false
         });
       })
-      .catch(error => {
+      .catch(() => {
         this.setState({
-          error
+          loading: false
         });
       });
   }
 
+  createInfoPanel = (info: LoginInfoResponse) => (
+    <div className="column is-7 is-offset-1 is-paddingless">
+      <InfoBox item={info.feature} type="feature" />
+      <InfoBox item={info.plugin} type="plugin" />
+    </div>
+  );
+
   render() {
-    const { plugin, feature, error } = this.state;
+    const { info, loading } = this.state;
+    if (loading) {
+      return <Loading/>;
+    }
+
+    let infoPanel;
+    if (info) {
+      infoPanel = this.createInfoPanel(info);
+    }
+
     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>
+      <>
+        <LoginForm {...this.props} />
+        {infoPanel}
+      </>
     );
   }
 
diff --git a/scm-ui/src/containers/Login.js b/scm-ui/src/containers/Login.js
index 4b30f9cb0f..f8246ab88b 100644
--- a/scm-ui/src/containers/Login.js
+++ b/scm-ui/src/containers/Login.js
@@ -9,7 +9,6 @@ import {
 } from "../modules/auth";
 import { connect } from "react-redux";
 import { getLoginLink, getLoginInfoLink } from "../modules/indexResource";
-import LoginForm from "../components/LoginForm";
 import LoginInfo from "../components/LoginInfo";
 import classNames from "classnames";
 import injectSheet from "react-jss";
@@ -39,7 +38,7 @@ type Props = {
 
 class Login extends React.Component<Props> {
 
-  login = (username: string, password: string) => {
+  handleLogin = (username: string, password: string): void => {
     const { link, login } = this.props;
     login(link, username, password);
   };
@@ -50,24 +49,18 @@ class Login extends React.Component<Props> {
   };
 
   render() {
-    const { authenticated, loginInfoLink, loading, error, classes } = this.props;
+    const { authenticated, classes, ...restProps } = this.props;
 
     if (authenticated) {
       return this.renderRedirect();
     }
 
-    let loginInfo;
-    if (loginInfoLink) {
-      loginInfo = <LoginInfo loginInfoLink={loginInfoLink}/>
-    }
-
     return (
       <section className={classNames("hero", classes.section )}>
         <div className="hero-body">
           <div className="container">
             <div className="columns is-centered">
-              <LoginForm loading={loading} error={error} login={this.login}/>
-              {loginInfo}
+              <LoginInfo loginHandler={this.handleLogin} {...restProps} />
             </div>
           </div>
         </div>