From 7134f82b5f6491edfcddb31e2011d3219b340e75 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Sun, 25 Feb 2018 11:37:37 -0300
Subject: [PATCH] Add IE compatibility

---
 .../create-ticket-form.js                     |  5 +-
 .../app/main/dashboard/dashboard-layout.js    |  2 +-
 client/src/core-components/form-field.js      |  8 ++--
 client/src/core-components/text-editor.js     | 48 +++++++++++++++----
 client/src/core-components/text-editor.scss   | 10 +++-
 client/src/index.html                         |  3 +-
 client/src/index.php                          |  9 ++--
 client/src/lib-core/navigator.js              | 15 ++++++
 server/config.php                             | 15 ------
 9 files changed, 78 insertions(+), 37 deletions(-)
 create mode 100644 client/src/lib-core/navigator.js
 delete mode 100755 server/config.php

diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
index c04ae6b4..98f7b5e6 100644
--- a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
+++ b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js
@@ -1,7 +1,6 @@
 import React              from 'react';
 import _                  from 'lodash';
 import {connect} from 'react-redux';
-import {EditorState, convertToRaw} from 'draft-js';
 
 import history            from 'lib-app/history';
 import i18n               from 'lib-app/i18n';
@@ -13,6 +12,7 @@ import LanguageSelector   from 'app-components/language-selector';
 import Captcha            from 'app/main/captcha';
 
 import Header             from 'core-components/header';
+import TextEditor         from 'core-components/text-editor';
 import Form               from 'core-components/form';
 import FormField          from 'core-components/form-field';
 import SubmitButton       from 'core-components/submit-button';
@@ -33,7 +33,7 @@ class CreateTicketForm extends React.Component {
         message: null,
         form: {
             title: '',
-            content: EditorState.createEmpty(),
+            content: TextEditor.createEmpty(),
             departmentIndex: 0,
             email: '',
             name: '',
@@ -162,4 +162,3 @@ export default connect((store) => {
         allowAttachments: store.config['allow-attachments']
     };
 })(CreateTicketForm);
-
diff --git a/client/src/app/main/dashboard/dashboard-layout.js b/client/src/app/main/dashboard/dashboard-layout.js
index ae51fca4..99545ff4 100644
--- a/client/src/app/main/dashboard/dashboard-layout.js
+++ b/client/src/app/main/dashboard/dashboard-layout.js
@@ -14,7 +14,7 @@ class DashboardLayout extends React.Component {
                     <DashboardMenu location={this.props.location} />
                 </div>
                 <div className={this.getDashboardContentClass()}>
-                    <Widget>
+                    <Widget className="col-md-12">
                         {this.props.children}
                     </Widget>
                 </div>
diff --git a/client/src/core-components/form-field.js b/client/src/core-components/form-field.js
index c1e38ef3..f8ae8a6b 100644
--- a/client/src/core-components/form-field.js
+++ b/client/src/core-components/form-field.js
@@ -27,7 +27,7 @@ class FormField extends React.Component {
         field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group', 'file']),
         fieldProps: React.PropTypes.object
     };
-    
+
     static defaultProps = {
         field: 'input',
         fieldProps: {}
@@ -118,7 +118,7 @@ class FormField extends React.Component {
 
         return classNames(classes);
     }
-    
+
     getFieldProps() {
         let props = _.extend({}, this.props.fieldProps, {
             disabled: this.isDisabled(),
@@ -172,7 +172,7 @@ class FormField extends React.Component {
             this.props.onChange(event)
         }
     }
-    
+
     isDisabled() {
         const fieldProps = this.props.fieldProps;
 
@@ -186,4 +186,4 @@ class FormField extends React.Component {
     }
 }
 
-export default FormField;
\ No newline at end of file
+export default FormField;
diff --git a/client/src/core-components/text-editor.js b/client/src/core-components/text-editor.js
index 486fbd90..ffcba1e4 100644
--- a/client/src/core-components/text-editor.js
+++ b/client/src/core-components/text-editor.js
@@ -3,19 +3,24 @@ import classNames from 'classnames';
 import {Editor} from 'react-draft-wysiwyg';
 import {EditorState, ContentState, convertFromHTML} from 'draft-js';
 import {stateToHTML} from 'draft-js-export-html';
+import {isIE} from 'lib-core/navigator';
 
 class TextEditor extends React.Component {
     static propTypes = {
         errored: React.PropTypes.bool,
         onChange: React.PropTypes.func,
-        value: React.PropTypes.object
+        value: React.PropTypes.oneOfType([
+            React.PropTypes.object, React.PropTypes.string
+        ])
     };
-    
+
     static createEmpty() {
-        return EditorState.createEmpty()
+        if(isIE()) return '';
+        return EditorState.createEmpty();
     }
-    
+
     static getEditorStateFromHTML(htmlString) {
+        if(isIE()) return htmlString;
         const blocksFromHTML = convertFromHTML(htmlString);
         const state = ContentState.createFromBlockArray(
             blocksFromHTML.contentBlocks,
@@ -26,31 +31,51 @@ class TextEditor extends React.Component {
     }
 
     static getHTMLFromEditorState(editorState) {
+        if(isIE()) return editorState;
         return stateToHTML(editorState.getCurrentContent());
     }
-    
+
     static isEditorState(editorState) {
+        if(isIE()) return typeof editorState === 'String';
         return editorState && editorState.getCurrentContent;
     }
 
     state = {
-        value: EditorState.createEmpty(),
+        value: TextEditor.createEmpty(),
         focused: false
     };
 
     render() {
         return (
             <div className={this.getClass()}>
-                <Editor {...this.getEditorProps()} />
+                {isIE() ? this.renderTextArea() : this.renderDraftJS()}
             </div>
         );
     }
 
+    renderDraftJS() {
+        return <Editor {...this.getEditorProps()} />;
+    }
+
+    renderTextArea() {
+        return (
+          <textarea
+              className="text-editor__editor"
+              onChange={this.onEditorChange.bind(this)}
+              onFocus={this.onEditorFocus.bind(this)}
+              onBlur={this.onBlur.bind(this)}
+              ref="editor"
+              value={this.props.value || this.state.value}
+          />
+        );
+    }
+
     getClass() {
         let classes = {
             'text-editor': true,
             'text-editor_errored': (this.props.errored),
             'text-editor_focused': (this.state.focused),
+            'text-editor_textarea': isIE(),
 
             [this.props.className]: (this.props.className)
         };
@@ -94,6 +119,7 @@ class TextEditor extends React.Component {
     }
 
     onEditorChange(value) {
+        if(isIE()) value = value.target.value;
         this.setState({value});
 
         if (this.props.onChange) {
@@ -119,9 +145,13 @@ class TextEditor extends React.Component {
 
     focus() {
         if (this.refs.editor) {
-            this.refs.editor.focusEditor();
+            if(isIE()) {
+              this.refs.editor.focus();
+            } else {
+              this.refs.editor.focusEditor();
+            }
         }
     }
 }
 
-export default TextEditor;
\ No newline at end of file
+export default TextEditor;
diff --git a/client/src/core-components/text-editor.scss b/client/src/core-components/text-editor.scss
index 0111a48a..07e81be1 100644
--- a/client/src/core-components/text-editor.scss
+++ b/client/src/core-components/text-editor.scss
@@ -28,4 +28,12 @@
             border: 1px solid $primary-red;
         }
     }
-}
\ No newline at end of file
+
+    &_textarea {
+        .text-editor__editor {
+            height: 200px;
+            padding-left: 10px;
+            width: 100%;
+        }
+    }
+}
diff --git a/client/src/index.html b/client/src/index.html
index 8271ea09..3e5e5b7a 100755
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -15,7 +15,8 @@
 
         <div id="app"></div>
 
+        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=String.prototype.startsWith,Array.from,Array.prototype.fill,Array.prototype.keys,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,String.prototype.repeat,Number.isInteger,Promise&flags=gated"></script>
         <script src="/js/config.js"></script>
         <script src="/js/main.js"></script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/client/src/index.php b/client/src/index.php
index 2235750d..210dca6c 100755
--- a/client/src/index.php
+++ b/client/src/index.php
@@ -9,20 +9,23 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">
-    
+
         <title>OpenSupports</title>
-    
+
         <link rel="stylesheet" href="<?=$url ?>/css/main.css">
         <link rel="icon" type="image/x-icon" href="<?=$url ?>/images/icon.png">
     </head>
     <body>
         <div id="app"></div>
-        
+
         <script>
             root = "<?=$url ?>";
             apiRoot = '<?=$url ?>/api';
             globalIndexPath = "<?=$path ?>";
         </script>
+        <?php if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)): ?>
+          <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=String.prototype.startsWith,Array.from,Array.prototype.fill,Array.prototype.keys,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,String.prototype.repeat,Number.isInteger,Promise&flags=gated"></script>
+        <?php endif; ?>
         <script src="<?=$url ?>/js/main.js"></script>
     </body>
 </html>
diff --git a/client/src/lib-core/navigator.js b/client/src/lib-core/navigator.js
new file mode 100644
index 00000000..6a3c5175
--- /dev/null
+++ b/client/src/lib-core/navigator.js
@@ -0,0 +1,15 @@
+export function getInternetExplorerVersion() {
+    let rv = -1
+
+    if(navigator.appName == 'Microsoft Internet Explorer') {
+        let ua = navigator.userAgent;
+        let re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+        if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
+    }
+
+    return rv;
+}
+
+export function isIE() {
+    return !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
+}
diff --git a/server/config.php b/server/config.php
deleted file mode 100755
index 4871c4d7..00000000
--- a/server/config.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<?php
-$env['MYSQL_SERVER']   = getenv('MYSQL_SERVER');
-$env['MYSQL_USER']     = getenv('MYSQL_USER');
-$env['MYSQL_PASSWORD'] = getenv('MYSQL_PASSWORD');
-$env['MYSQL_DATABASE'] = getenv('MYSQL_DATABASE');
-
-$mysql_host       = ($env['MYSQL_SERVER'])   ? $env['MYSQL_SERVER']   : 'localhost';
-$mysql_user       = ($env['MYSQL_USER'])     ? $env['MYSQL_USER']     : 'root';
-$mysql_password   = ($env['MYSQL_PASSWORD']) ? $env['MYSQL_PASSWORD'] : '';
-$mysql_database   = ($env['MYSQL_DATABASE']) ? $env['MYSQL_DATABASE'] : 'development';
-
-define('MYSQL_HOST', $mysql_host);
-define('MYSQL_USER', $mysql_user);
-define('MYSQL_PASSWORD', $mysql_password);
-define('MYSQL_DATABASE', $mysql_database);
\ No newline at end of file