From 04e21be3c14791f28c604c0c4369d2167d9f01a3 Mon Sep 17 00:00:00 2001
From: Matteo V <matteo.velludini.geosolutions@gmail.com>
Date: Fri, 7 Oct 2016 11:59:38 +0200
Subject: [PATCH] Fixed #1087 : Login dialog now is destroyed when it is closed
 (#1091)

* Fixed #1087 : Login dialog now is destroyed when it is closed

* changed all login tools to dialog

* fixed french translation
---
 .../components/security/forms/LoginForm.jsx   |  7 ---
 .../security/forms/PasswordReset.jsx          |  9 +---
 .../components/security/modals/LoginModal.jsx | 45 ++++++++++---------
 .../security/modals/PasswordResetModal.jsx    | 36 +++++++++------
 .../security/modals/UserDetailsModal.jsx      | 39 ++++++++--------
 web/client/localConfig.json                   | 21 ++++++++-
 web/client/plugins/CreateNewMap.jsx           |  2 +-
 web/client/translations/data.en-US            |  1 +
 web/client/translations/data.fr-FR            |  3 +-
 web/client/translations/data.it-IT            |  1 +
 10 files changed, 89 insertions(+), 75 deletions(-)

diff --git a/web/client/components/security/forms/LoginForm.jsx b/web/client/components/security/forms/LoginForm.jsx
index 312cd2e46b..8b0505d420 100644
--- a/web/client/components/security/forms/LoginForm.jsx
+++ b/web/client/components/security/forms/LoginForm.jsx
@@ -5,13 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
- /**
-  * Copyright 2016, GeoSolutions Sas.
-  * All rights reserved.
-  *
-  * This source code is licensed under the BSD-style license found in the
-  * LICENSE file in the root directory of this source tree.
-  */
 
 const React = require('react');
 const {Input, ButtonInput, Alert} = require('react-bootstrap');
diff --git a/web/client/components/security/forms/PasswordReset.jsx b/web/client/components/security/forms/PasswordReset.jsx
index 0e4c2475bf..ebe972f9e3 100644
--- a/web/client/components/security/forms/PasswordReset.jsx
+++ b/web/client/components/security/forms/PasswordReset.jsx
@@ -5,13 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
- /**
-  * Copyright 2016, GeoSolutions Sas.
-  * All rights reserved.
-  *
-  * This source code is licensed under the BSD-style license found in the
-  * LICENSE file in the root directory of this source tree.
-  */
 
 const React = require('react');
 const {Input, Alert} = require('react-bootstrap');
@@ -68,7 +61,7 @@ const PasswordReset = React.createClass({
           return null;
       }
       let pw = this.refs.password.getValue();
-      if (pw !== null && pw.length < this.props.minPasswordSize) {
+      if (pw !== null && pw.length < this.props.minPasswordSize && pw.length > 0) {
           return <Alert bsStyle="danger"><Message msgId="user.passwordMinlenght" msgParams={{minSize: this.props.minPasswordSize}}/></Alert>;
       } else if (pw !== null && pw !== this.refs.passwordcheck.getValue() ) {
           return <Alert bsStyle="danger"><Message msgId="user.passwordCheckFail" /></Alert>;
diff --git a/web/client/components/security/modals/LoginModal.jsx b/web/client/components/security/modals/LoginModal.jsx
index c36493a8ee..841cbae86e 100644
--- a/web/client/components/security/modals/LoginModal.jsx
+++ b/web/client/components/security/modals/LoginModal.jsx
@@ -5,13 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
- /**
-  * Copyright 2016, GeoSolutions Sas.
-  * All rights reserved.
-  *
-  * This source code is licensed under the BSD-style license found in the
-  * LICENSE file in the root directory of this source tree.
-  */
 
 const React = require('react');
 const LoginForm = require('../forms/LoginForm');
@@ -61,8 +54,8 @@ const LoginModal = React.createClass({
           includeCloseButton: true
       };
   },
-  render() {
-      const form = (<LoginForm
+  getForm() {
+      return (<LoginForm
           role="body"
           ref="loginForm"
           showSubmitButton={false}
@@ -71,8 +64,10 @@ const LoginModal = React.createClass({
           onLoginSuccess={this.props.onLoginSuccess}
           onSubmit={this.props.onSubmit}
           onError={this.props.onError}
-          />);
-      const footer = (<span role="footer">
+    />);
+  },
+  getFooter() {
+      return (<span role="footer">
           <Button
               ref="submit"
               value={LocaleUtils.getMessageById(this.context.messages, "user.signIn")}
@@ -85,25 +80,31 @@ const LoginModal = React.createClass({
             key="closeButton"
             ref="closeButton"
             bsSize={this.props.buttonSize}
-            onClick={this.props.onClose}>Close</Button> : <span/>}
+            onClick={this.props.onClose}><Message msgId="close"/></Button> : <span/>}
       </span>);
-      return this.props.useModal ? (<Modal {...this.props.options} show={this.props.show} onHide={this.props.onClose}>
+  },
+  renderModal() {
+      return (<Modal {...this.props.options} show={this.props.show} onHide={this.props.onClose}>
           <Modal.Header key="passwordChange" closeButton>
             <Modal.Title><Message msgId="user.login"/></Modal.Title>
           </Modal.Header>
           <Modal.Body>
-              {form}
+              {this.getForm()}
           </Modal.Body>
           <Modal.Footer>
-              {footer}
+              {this.getFooter()}
           </Modal.Footer>
-      </Modal>) : (
-          <Dialog modal id="mapstore-login-panel" style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}>
-              <span role="header"><span className="login-panel-title"><Message msgId="user.login"/></span><button onClick={this.props.onClose} className="login-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
-              {form}
-              {footer}
-          </Dialog>
-      );
+      </Modal>);
+  },
+  renderDialog() {
+      return (this.props.show) ? (<Dialog modal id="mapstore-login-panel" style={assign({}, this.props.style, {display: "block" })}>
+         <span role="header"><span className="login-panel-title"><Message msgId="user.login"/></span><button onClick={this.props.onClose} className="login-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
+           {this.getForm()}
+           {this.getFooter()}
+     </Dialog>) : null;
+  },
+  render() {
+      return this.props.useModal ? this.renderModal() : this.renderDialog();
   },
   loginSubmit() {
       this.refs.loginForm.submit();
diff --git a/web/client/components/security/modals/PasswordResetModal.jsx b/web/client/components/security/modals/PasswordResetModal.jsx
index ea5d352533..58f6fe25f9 100644
--- a/web/client/components/security/modals/PasswordResetModal.jsx
+++ b/web/client/components/security/modals/PasswordResetModal.jsx
@@ -11,7 +11,7 @@ const PasswordReset = require('../forms/PasswordReset');
 const Message = require('../../../components/I18N/Message');
 const {Modal, Button, Glyphicon} = require('react-bootstrap');
 
-const Dialog = require('../../../components/misc/Dialog');
+const Dialog = require('../../misc/Dialog');
 const assign = require('object-assign');
 
 const Spinner = require('react-spinkit');
@@ -26,6 +26,8 @@ const PasswordResetModal = React.createClass({
         authHeader: React.PropTypes.string,
         show: React.PropTypes.bool,
         options: React.PropTypes.object,
+
+
         onPasswordChange: React.PropTypes.func,
         onPasswordChanged: React.PropTypes.func,
         onClose: React.PropTypes.func,
@@ -75,8 +77,8 @@ const PasswordResetModal = React.createClass({
     renderLoading() {
         return this.state.loading ? <Spinner spinnerName="circle" key="loadingSpinner" noFadeIn/> : null;
     },
-    render() {
-        const footer = (<span role="footer"><div style={{"float": "left"}}>{this.renderLoading()}</div>
+    getFooter() {
+        return (<span role="footer"><div style={{"float": "left"}}>{this.renderLoading()}</div>
         <Button
             ref="passwordChangeButton"
             key="passwordChangeButton"
@@ -93,28 +95,36 @@ const PasswordResetModal = React.createClass({
             bsSize={this.props.buttonSize}
             onClick={this.props.onClose}><Message msgId="close"/></Button> : <span/>}
         </span>);
-        const body = (<PasswordReset role="body" ref="passwordResetForm"
+    },
+    getBody() {
+        return (<PasswordReset role="body" ref="passwordResetForm"
             onChange={() => {
                 this.setState({passwordValid: this.refs.passwordResetForm.isValid()});
             }} />);
-        return this.props.useModal ? (
+    },
+    renderModal() {
+        return (
             <Modal {...this.props.options} show={this.props.show} onHide={this.props.onClose}>
                 <Modal.Header key="passwordChange" closeButton>
                   <Modal.Title><Message msgId="user.changePwd"/></Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    {body}
+                    {this.getBody()}
                 </Modal.Body>
                 <Modal.Footer>
-                  {footer}
+                  {this.getFooter()}
                 </Modal.Footer>
-            </Modal>) : (
-            <Dialog id="mapstore-changepassword-panel" style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}>
+            </Modal>);
+    },
+    renderDialog() {
+        return (this.props.show) ? (<Dialog modal id="mapstore-changepassword-panel" style={assign({}, this.props.style, {display: "block"})}>
                 <span role="header"><span className="changepassword-panel-title"><Message msgId="user.changePwd"/></span><button onClick={this.props.onClose} className="login-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
-                {body}
-                {footer}
-            </Dialog>
-        );
+                {this.getBody()}
+                {this.getFooter()}
+            </Dialog>) : null;
+    },
+    render() {
+        return this.props.useModal ? this.renderModal() : this.renderDialog();
     }
 });
 
diff --git a/web/client/components/security/modals/UserDetailsModal.jsx b/web/client/components/security/modals/UserDetailsModal.jsx
index 7cc92f5ae9..cb15c49647 100644
--- a/web/client/components/security/modals/UserDetailsModal.jsx
+++ b/web/client/components/security/modals/UserDetailsModal.jsx
@@ -5,14 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
- /**
-  * Copyright 2016, GeoSolutions Sas.
-  * All rights reserved.
-  *
-  * This source code is licensed under the BSD-style license found in the
-  * LICENSE file in the root directory of this source tree.
-  */
-
 const React = require('react');
 
 const {Modal, Button, Table, Alert, Glyphicon} = require('react-bootstrap');
@@ -67,26 +59,31 @@ const UserDetails = React.createClass({
       }
       return <Alert type="info"><Message msgId="user.noAttributesMessage" /></Alert>;
   },
-  render() {
-      const footer = this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} bsSize="small" onClick={this.props.onClose}><Message msgId="close"/></Button> : <span/>;
-      return this.props.useModal ? (
-          <Modal {...this.props.options} show={this.props.show} onHide={this.props.onClose}>
+  getFooter() {
+      return (this.props.includeCloseButton ? <Button bsSize={this.props.buttonSize} bsSize="small" onClick={this.props.onClose}><Message msgId="close"/></Button> : <span/>);
+  },
+  renderModal() {
+      return (<Modal {...this.props.options} show={this.props.show} onHide={this.props.onClose}>
               <Modal.Header key="details" closeButton>
-                <Modal.Title>User Details</Modal.Title>
+                <Modal.Title><Message msgId="user.details" /></Modal.Title>
               </Modal.Header>
               <Modal.Body>
                   {this.renderAttributes()}
               </Modal.Body>
               <Modal.Footer>
-                {footer}
+                {this.getFooter()}
               </Modal.Footer>
-          </Modal>) : (
-          <Dialog id="mapstore-user-panel" style={assign({}, this.props.style, {display: this.props.show ? "block" : "none"})}>
-              <span role="header"><span className="user-panel-title">Login</span><button onClick={this.props.onClose} className="login-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
-              {this.renderAttributes()}
-              {footer}
-          </Dialog>
-      );
+          </Modal>);
+  },
+  renderDialog() {
+      return (this.props.show) ? (<Dialog id="mapstore-user-panel" modal style={assign({}, this.props.style, {display: "block"})}>
+                  <span role="header"><span className="user-panel-title"><Message msgId="user.details" /></span><button onClick={this.props.onClose} className="login-panel-close close">{this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}</button></span>
+                  {this.renderAttributes()}
+                  {this.getFooter()}
+              </Dialog>) : null;
+  },
+  render() {
+      return this.props.useModal ? this.renderModal() : this.renderDialog();
   }
 
 });
diff --git a/web/client/localConfig.json b/web/client/localConfig.json
index a8b296b775..63896f202d 100644
--- a/web/client/localConfig.json
+++ b/web/client/localConfig.json
@@ -733,8 +733,25 @@
           "nav": false,
           "menuProps": {
               "noCaret": true
-          }
-      }
+					},
+					"toolsCfg": [{
+								"buttonSize": "small",
+								"includeCloseButton": false,
+								"useModal": false,
+								"closeGlyph": "1-close"
+							}, {
+								"buttonSize": "small",
+								"includeCloseButton": false,
+								"useModal": false,
+								"closeGlyph": "1-close"
+							}, {
+								"buttonSize": "small",
+								"includeCloseButton": false,
+								"useModal": false,
+								"closeGlyph": "1-close"
+					 }]
+
+      	}
 		}, {"name": "Language"}, {
 			"name" : "Attribution",
 			"hide": true
diff --git a/web/client/plugins/CreateNewMap.jsx b/web/client/plugins/CreateNewMap.jsx
index 307395abc7..77c7001343 100644
--- a/web/client/plugins/CreateNewMap.jsx
+++ b/web/client/plugins/CreateNewMap.jsx
@@ -38,7 +38,7 @@ const CreateNewMap = React.createClass({
 
     render() {
         const display = this.props.isLoggedIn ? null : "none";
-        return (<Grid fluid="true" style={{marginBottom: "30px", padding: 0, display}}>
+        return (<Grid fluid={true} style={{marginBottom: "30px", padding: 0, display}}>
         <Col {...this.props.colProps} >
             <Button bsStyle="primary" onClick={() => { this.context.router.push("/viewer/" + this.props.mapType + "/new"); }}>
             <Message msgId="newMap" />
diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US
index fae031c146..a964a622f1 100644
--- a/web/client/translations/data.en-US
+++ b/web/client/translations/data.en-US
@@ -428,6 +428,7 @@
             "login": "Login",
             "logout": "Logout",
             "info": " Account Info",
+            "details": " User Details",
             "noAttributesMessage": "There is no information related to your account",
             "changePwd": "Change Password",
             "newPwd": "New Password",
diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR
index 7b3ca8a552..8fd8f49b8c 100644
--- a/web/client/translations/data.fr-FR
+++ b/web/client/translations/data.fr-FR
@@ -429,7 +429,8 @@
         "user":{
             "login": "Login",
             "logout": "Logout",
-            "info": " Informations du compte",
+            "info": "Informations du compte",
+            "details": "Détails de l'utilisateur",
             "noAttributesMessage": "Il n'y a pas d'informations relatives à votre compte",
             "changePwd": "Changer le mot de passe",
             "newPwd": "Nouveau mot de passe",
diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT
index 22c96031ac..f6ace8aa44 100644
--- a/web/client/translations/data.it-IT
+++ b/web/client/translations/data.it-IT
@@ -428,6 +428,7 @@
             "login": "Login",
             "logout": "Logout",
             "info": " Informazioni Account",
+            "details": " Dettagli utente",
             "noAttributesMessage": "Non ci sono informazioni sul tuo account",
             "changePwd": "Cambia Password",
             "newPwd": "Nuova Password",