From 9b13339217b46bb76d7d0614878ae145ffa800a8 Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Mon, 4 Feb 2019 19:00:13 +1100
Subject: [PATCH] fix (login): gracefull handling of connection page error when
 the config is invalid

---
 client/helpers/form.js           |  2 +-
 client/pages/connectpage.js      |  8 +++++++-
 client/pages/connectpage/form.js | 11 ++++-------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/helpers/form.js b/client/helpers/form.js
index 0c817857..b839b9c1 100644
--- a/client/helpers/form.js
+++ b/client/helpers/form.js
@@ -18,9 +18,9 @@ export const FormObjToJSON = function(o, fn){
 
 export function createFormBackend(backend_available, backend_data){
     if(!backend_available) return {};
+    else if(!backend_available[backend_data.type]) return {};
 
     let template = JSON.parse(JSON.stringify(backend_available[backend_data.type]));
-
     for(let key in backend_data){
         if(key in template){
             template[key].value = backend_data[key];
diff --git a/client/pages/connectpage.js b/client/pages/connectpage.js
index 91766c95..29859fdc 100644
--- a/client/pages/connectpage.js
+++ b/client/pages/connectpage.js
@@ -3,12 +3,13 @@ import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import './connectpage.scss';
 import { Session } from '../model/';
-import { Container, NgIf, NgShow, Loader, Notification } from '../components/';
+import { Container, NgIf, NgShow, Loader, Notification, ErrorPage } from '../components/';
 import { ForkMe, RememberMe, Credentials, Form } from './connectpage/';
 import { cache, notify, urlParams } from '../helpers/';
 
 import { Alert } from '../components/';
 
+@ErrorPage
 export class ConnectPage extends React.Component {
     constructor(props){
         super(props);
@@ -84,6 +85,10 @@ export class ConnectPage extends React.Component {
         }
     }
 
+    onError(err){
+        this.props.error(err);
+    }
+
     render() {
         return (
             <div className="component_page_connect">
@@ -98,6 +103,7 @@ export class ConnectPage extends React.Component {
                   <ReactCSSTransitionGroup transitionName="form" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={500}>
                     <Form credentials={this.state.credentials}
                           onLoadingChange={this.setLoading.bind(this)}
+                          onError={this.onError.bind(this)}
                           onSubmit={this.onFormSubmit.bind(this)} />
                   </ReactCSSTransitionGroup>
                   <ReactCSSTransitionGroup transitionName="remember" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={5000}>
diff --git a/client/pages/connectpage/form.js b/client/pages/connectpage/form.js
index 7dfde5e2..80c4ceb0 100644
--- a/client/pages/connectpage/form.js
+++ b/client/pages/connectpage/form.js
@@ -33,12 +33,8 @@ export class Form extends React.Component {
                 backends_enabled: window.CONFIG["connections"].map((conn) => {
                     return createFormBackend(backend, conn);
                 })
-            }, () => {
-                return this.publishState(this.props);
-            });
-        }).catch((err) => {
-            this.props.error(err);
-        });
+            }, () => this.publishState(this.props));
+        }).catch((err) => this.props.onError(err));
     }
 
     componentWillUnmount(){
@@ -107,9 +103,10 @@ export class Form extends React.Component {
                   {
                          this.state.backends_enabled.map((backend, i) => {
                              const key = Object.keys(backend)[0];
+                             if(!backend[key]) return null;
                              return (
                                  <Button key={"menu-"+i} className={i === this.state.select ? "active primary" : ""} onClick={this.onTypeChange.bind(this, i)}>
-                                   { backend[key].label.value }
+                                     { backend[key].label.value }
                                  </Button>
                              );
                          })