Add IE compatibility

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

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>

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,7 +145,11 @@ 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();
+            }
         }
     }
 }

client/src/core-components/text-editor.scss

@@ -28,4 +28,12 @@
             border: 1px solid $primary-red;
         }
     }
+
+    &_textarea {
+        .text-editor__editor {
+            height: 200px;
+            padding-left: 10px;
+            width: 100%;
+        }
+    }
 }

client/src/index.html

@@ -15,6 +15,7 @@
 
         <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>

client/src/index.php

@@ -23,6 +23,9 @@
             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>

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

server/config.php

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