Ivan - Fix installation in subfolder and file permissions

client/gulp/tasks/browserify.js

@@ -24,6 +24,9 @@ function buildScript(file, watch) {
     entries: [config.sourceDir + file],
     debug: !global.isProd,
     insertGlobalVars: {
+      isProd: function () {
+        return (global.isProd) ? "'enabled'" : "'disabled'";
+      },
       noFixtures: function() {
         return (util.env['api']) ? "'enabled'" : "'disabled'";
       }

client/package.json

@@ -58,6 +58,7 @@
     "classnames": "^2.2.5",
     "draft-js": "^0.10.0",
     "draft-js-export-html": "^0.5.2",
+    "history": "^3.0.0",
     "jquery": "^2.1.4",
     "keycode": "^2.1.4",
     "localStorage": "^1.0.3",
@@ -71,8 +72,8 @@
     "react-google-recaptcha": "^0.5.2",
     "react-motion": "^0.4.7",
     "react-redux": "^4.4.5",
-    "react-router": "^2.4.0",
-    "react-router-redux": "^4.0.5",
+    "react-router": "^3.0.2",
+    "react-router-redux": "^4.0.7",
     "redux": "^3.5.2",
     "redux-promise-middleware": "^3.3.2"
   }

client/src/app/App.js

@@ -2,9 +2,9 @@ import React              from 'react';
 import _                  from 'lodash';
 import classNames         from 'classnames';
 import { connect }        from 'react-redux'
-import { browserHistory } from 'react-router';
 import DocumentTitle      from 'react-document-title';
 
+import history from 'lib-app/history';
 import ModalContainer from 'app-components/modal-container';
 
 const level2Paths = [
@@ -66,11 +66,11 @@ class App extends React.Component {
         };
         
         if(props.config['maintenance-mode'] === '1' && !_.includes(props.location.pathname, '/admin') && !_.includes(props.location.pathname, '/maintenance')) {
-            browserHistory.push('/maintenance');
+            history.push('/maintenance');
         }
 
         if(props.config['maintenance-mode'] === '0' && _.includes(props.location.pathname, '/maintenance')) {
-            browserHistory.push('/');
+            history.push('/');
         }
 
         if (validations.languageChanged) {
@@ -78,37 +78,41 @@ class App extends React.Component {
         }
 
         if (validations.loggedOut) {
-            browserHistory.push('/');
+            history.push('/');
         }
 
         if (validations.loggedOutStaff) {
-            browserHistory.push('/admin');
+            history.push('/admin');
         }
 
         if (validations.loggedIn && !props.session.staff) {
-            browserHistory.push('/dashboard');
+            history.push('/dashboard');
         } else if(validations.loggedInStaff) {
-            browserHistory.push('/admin/panel');
+            history.push('/admin/panel');
         }
 
         if (props.session.userLevel && !this.isPathAvailableForStaff(props)) {
-            browserHistory.push('/admin/panel');
+            history.push('/admin/panel');
         }
 
         if (!props.config.registration && _.includes(props.location.pathname, 'signup')) {
-            browserHistory.push('/');
+            history.push('/');
         }
 
         if(props.config['user-system-enabled'] && _.includes(props.location.pathname, '/check-ticket')) {
-            browserHistory.push('/');
+            history.push('/');
         }
 
         if(props.config.installedDone && !props.config.installed && !_.includes(props.location.pathname, '/install')) {
-            browserHistory.push('/install');
+            history.push('/install');
         }
 
         if(props.config.installedDone && props.config.installed && _.includes(props.location.pathname, '/install')) {
-            browserHistory.push('/');
+            history.push('/');
+        }
+
+        if(isProd && _.includes(props.location.pathname, '/components-demo')) {
+            history.push('/');
         }
     }
 

client/src/app/Routes.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
-
-import store from 'app/store';
+import {Router, Route, IndexRoute, IndexRedirect} from 'react-router';
 
 import App from 'app/App';
 import DemoPage from 'app/demo/components-demo-page';
+import history from 'lib-app/history';
 
 import MainLayout from 'app/main/main-layout';
 import MainHomePage from 'app/main/main-home/main-home-page';
@@ -62,8 +60,6 @@ import InstallStep4UserSystem from 'app/install/install-step-4-user-system';
 import InstallStep5Admin from 'app/install/install-step-5-admin';
 import InstallStep6Completed from 'app/install/install-step-6-completed';
 
-const history = syncHistoryWithStore(browserHistory, store);
-
 export default (
     <Router history={history}>
         <Route component={App}>
@@ -146,7 +142,7 @@ export default (
                 </Route>
             </Route>
 
-            <Route name='Demo' path='demo' component={DemoPage} />
+            <Route name='Demo' path='components-demo' component={DemoPage} />
         </Route>
     </Router>
 );

client/src/app/admin/panel/articles/admin-panel-view-article.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import {connect}  from 'react-redux';
-import {browserHistory} from 'react-router';
+import history from 'lib-app/history';
 
 import ArticlesActions from 'actions/articles-actions';
 import SessionStore from 'lib-app/session-store';
@@ -156,7 +156,7 @@ class AdminPanelViewArticle extends React.Component {
             data: {
                 articleId: article.id
             }
-        }).then(() => browserHistory.push('/admin/panel/articles/list-articles'));
+        }).then(() => history.push('/admin/panel/articles/list-articles'));
     }
 }
 

client/src/app/admin/panel/staff/admin-panel-view-staff.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
+import history from 'lib-app/history';
 import {connect} from 'react-redux';
 import _ from 'lodash';
 
@@ -60,7 +60,7 @@ class AdminPanelViewStaff extends React.Component {
     }
 
     onDelete() {
-        browserHistory.push('/admin/panel/staff/staff-members');
+        history.push('/admin/panel/staff/staff-members');
     }
 }
 

client/src/app/admin/panel/users/admin-panel-view-user.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {connect}  from 'react-redux';
-import {browserHistory} from 'react-router';
+import history from 'lib-app/history';
 
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
@@ -124,7 +124,7 @@ class AdminPanelViewUser extends React.Component {
                 data: {
                     email: this.state.email
                 }
-            }).then(() => browserHistory.push('/admin/panel/users/list-users'));
+            }).then(() => history.push('/admin/panel/users/list-users'));
         });
     }
 }

client/src/app/install/install-layout.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-import {browserHistory} from 'react-router';
 import DocumentTitle from 'react-document-title';
 
 import i18n from 'lib-app/i18n';
@@ -27,7 +26,7 @@ class InstallLayout extends React.Component {
                 <Widget className="install-layout">
                     <div className="install-layout__header">
                         <div className="install-layout__header-logo">
-                            <img width="100%" src="../../images/logo.png" alt="OpenSupports Installation"/>
+                            <img width="100%" src={API.getURL() + '/images/logo.png'} alt="OpenSupports Installation"/>
                         </div>
                         <div className="install-layout__header-text">
                             <div className="install-layout__header-title">

client/src/app/install/install-step-1-language.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
-import {browserHistory} from 'react-router';
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import ConfigActions from 'actions/config-actions';
 
@@ -17,7 +17,7 @@ class InstallStep1Language extends React.Component {
                 <Header title={i18n('STEP_TITLE', {title: i18n('SELECT_LANGUAGE'), current: 1, total: 6})} description={i18n('STEP_1_DESCRIPTION')}/>
                 <LanguageSelector {...this.getLanguageSelectorProps()} />
                 <div className="install-step-1__button">
-                    <Button size="medium" type="secondary" onClick={() => browserHistory.push('/install/step-2')}>
+                    <Button size="medium" type="secondary" onClick={() => history.push('/install/step-2')}>
                         {i18n('NEXT')}
                     </Button>
                 </div>

client/src/app/install/install-step-2-requirements.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 import classNames from 'classnames';
-import {browserHistory} from 'react-router';
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 
@@ -39,7 +39,7 @@ class InstallStep2Requirements extends React.Component {
                 <Table {...this.getTableProps()} />
                 <div className="install-step-2__buttons">
                     <div className="install-step-2__next">
-                        <Button disabled={!this.isAllOk()} size="medium" type="secondary" onClick={() => browserHistory.push('/install/step-3')}>
+                        <Button disabled={!this.isAllOk()} size="medium" type="secondary" onClick={() => history.push('/install/step-3')}>
                             {i18n('NEXT')}
                         </Button>
                     </div>
@@ -90,7 +90,7 @@ class InstallStep2Requirements extends React.Component {
 
     onPreviousClick(event) {
         event.preventDefault();
-        browserHistory.push('/install/step-1');
+        history.push('/install/step-1');
     }
 
     isAllOk() {

client/src/app/install/install-step-3-database.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 
@@ -54,7 +54,7 @@ class InstallStep3Database extends React.Component {
 
     onPreviousClick(event) {
         event.preventDefault();
-        browserHistory.push('/install/step-2');
+        history.push('/install/step-2');
     }
 
     onSubmit(form) {
@@ -65,7 +65,7 @@ class InstallStep3Database extends React.Component {
                 path: '/system/init-database',
                 data: form
             })
-                .then(() => browserHistory.push('/install/step-4'))
+                .then(() => history.push('/install/step-4'))
                 .catch(({message}) => this.setState({
                     loading: false,
                     error: true,

client/src/app/install/install-step-4-user-system.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
 import { connect } from 'react-redux'
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 
@@ -49,7 +49,7 @@ class InstallStep4UserSystem extends React.Component {
 
     onPreviousClick(event) {
         event.preventDefault();
-        browserHistory.push('/install/step-3');
+        history.push('/install/step-3');
     }
 
     onSubmit(form) {
@@ -64,7 +64,7 @@ class InstallStep4UserSystem extends React.Component {
             }
         }).then(() => this.setState({
             loading: false
-        }, () => browserHistory.push('/install/step-5'))));
+        }, () => history.push('/install/step-5'))));
     }
 
     isDisabled() {

client/src/app/install/install-step-5-admin.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 
-import Button from 'core-components/button';
 import Header from 'core-components/header';
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
@@ -58,7 +57,7 @@ class InstallStep5Admin extends React.Component {
                 path: '/system/init-admin',
                 data: form
             })
-                .then(() => browserHistory.push('/install/step-6'))
+                .then(() => history.push('/install/step-6'))
                 .catch(({message}) => this.setState({
                     loading: false,
                     error: true,

client/src/app/install/install-step-6-completed.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
 
+import store from 'app/store';
+import ConfigActions from 'actions/config-actions';
 import i18n from 'lib-app/i18n';
 
 import Header from 'core-components/header';
@@ -9,7 +10,9 @@ import Message from 'core-components/message';
 class InstallStep6Completed extends React.Component {
 
     componentDidMount() {
-        setTimeout(() => browserHistory.push('/admin'), 5000);
+        setTimeout(() => {
+            store.dispatch(ConfigActions.checkInstallation());
+        }, 5000);
     }
 
     render() {

client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js

@@ -1,9 +1,9 @@
 import React              from 'react';
 import _                  from 'lodash';
-import { browserHistory } from 'react-router';
 import {connect} from 'react-redux';
 import {EditorState, convertToRaw} from 'draft-js';
 
+import history            from 'lib-app/history';
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
 import SessionStore       from 'lib-app/session-store';
@@ -142,9 +142,9 @@ class CreateTicketForm extends React.Component {
 
         if(this.props.userLogged) {
             store.dispatch(SessionActions.getUserData());
-            setTimeout(() => {browserHistory.push('/dashboard')}, 2000);
+            setTimeout(() => {history.push('/dashboard')}, 2000);
         } else {
-            setTimeout(() => {browserHistory.push('/check-ticket/' + result.data.ticketNumber + '/' + email)}, 1000);
+            setTimeout(() => {history.push('/check-ticket/' + result.data.ticketNumber + '/' + email)}, 1000);
         }
     }
 

client/src/app/main/main-check-ticket-page.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import {browserHistory} from 'react-router';
 import {connect} from 'react-redux';
 
+import history from 'lib-app/history';
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
 import SessionStore from 'lib-app/session-store';
@@ -99,7 +99,7 @@ class MainCheckTicketPage extends React.Component {
 
     onTicketGetSuccess(result) {
         SessionStore.setItem('token', result.data.token);
-        setTimeout(() => {browserHistory.push('/view-ticket/' + this.state.form.ticketNumber)}, 2000);
+        setTimeout(() => {history.push('/view-ticket/' + this.state.form.ticketNumber)}, 2000);
     }
 }
 

client/src/app/main/main-home/main-home-page-portal.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
-import {browserHistory} from 'react-router';
 import {connect} from 'react-redux'
 
+import history from 'lib-app/history';
 import Widget from 'core-components/widget';
 import Card from 'core-components/card';
 import i18n from 'lib-app/i18n';
@@ -41,7 +41,7 @@ class MainHomePagePortal extends React.Component {
             icon: 'ticket',
             color: 'red',
             buttonText: (this.props.type === 'complete') ? i18n('CREATE_TICKET') : null,
-            onButtonClick: () => browserHistory.push('/create-ticket')
+            onButtonClick: () => history.push('/create-ticket')
         };
     }
 
@@ -61,7 +61,7 @@ class MainHomePagePortal extends React.Component {
             icon: 'book',
             color: 'blue',
             buttonText: (this.props.type === 'complete') ? i18n('VIEW_ARTICLES') : null,
-            onButtonClick: () => browserHistory.push('/articles')
+            onButtonClick: () => history.push('/articles')
         };
     }
 
@@ -72,7 +72,7 @@ class MainHomePagePortal extends React.Component {
             icon: 'check-square-o',
             color: 'green',
             buttonText: (this.props.type === 'complete') ? i18n('CHECK_TICKET') : null,
-            onButtonClick: () => browserHistory.push('/check-ticket')
+            onButtonClick: () => history.push('/check-ticket')
         };
     }
 }

client/src/app/main/main-verify-token-page.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {connect}        from 'react-redux'
-import {browserHistory} from 'react-router';
 
 import SessionActions from 'actions/session-actions'
+import history from 'lib-app/history';
 import API from 'lib-app/api-call';
 
 import Message from 'core-components/message';
@@ -18,10 +18,10 @@ class MainVerifyTokenPage extends React.Component {
             }
         }).then(() => {
             this.props.dispatch(SessionActions.verify(true));
-            browserHistory.push('/');
+            history.push('/');
         }).catch(() => {
             this.props.dispatch(SessionActions.verify(false));
-            browserHistory.push('/');
+            history.push('/');
         });
     }
 

client/src/app/main/main-view-ticket-page.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {browserHistory} from 'react-router';
 import {connect} from 'react-redux';
 
+import history from 'lib-app/history';
 import AdminPanelViewTicket from 'app/admin/panel/tickets/admin-panel-view-ticket'
 
 import Widget from 'core-components/widget';
@@ -20,7 +20,7 @@ class MainViewTicketPage extends React.Component {
 
     onRetrieveFail() {
         if (!this.props.config['user-system-enabled']) {
-            setTimeout(() => {browserHistory.push('/check-ticket')}, 2000);
+            setTimeout(() => {history.push('/check-ticket')}, 2000);
         }
     }
 }

client/src/config.js

@@ -1,2 +1,3 @@
 root = 'http://localhost:3000';
 apiRoot = 'http://localhost:3000/api';
+globalIndexPath = '';

client/src/core-components/icon.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import API from 'lib-app/api-call';
+
 class Icon extends React.Component {
 
     static propTypes = {
@@ -25,7 +27,7 @@ class Icon extends React.Component {
 
     renderFlag() {
         return (
-            <img className={this.props.className} src={`/images/icons/${this.props.name}.png`} aria-hidden="true" />
+            <img className={this.props.className} src={`${API.getURL()}/images/icons/${this.props.name}.png`} aria-hidden="true" />
         );
     }
 

client/src/index.js

@@ -14,7 +14,7 @@ Array.prototype.swap = function (x,y) {
     return this;
 };
 
-if ( process.env.NODE_ENV !== 'production' ) {
+if (isProd === 'disabled') {
     // Enable React devtools
     window.React = React;
 }

client/src/index.php

@@ -1,3 +1,7 @@
+<?php
+    $url = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);
+    $path = dirname($_SERVER['PHP_SELF']);
+?>
 <!doctype html>
 <html class="no-js" lang="">
     <head>
@@ -8,16 +12,17 @@
     
         <title>OpenSupports</title>
     
-        <link rel="stylesheet" href="/css/main.css">
-        <link rel="icon" type="image/x-icon" href="/images/icon.png">
+        <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 = "<?php echo ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']); ?>";
-            apiRoot = "<?php echo ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']); ?>" + 'api';
+            root = "<?=$url ?>";
+            apiRoot = '<?=$url ?>/api';
+            globalIndexPath = "<?=$path ?>";
         </script>
-        <script src="/js/main.js"></script>
+        <script src="<?=$url ?>/js/main.js"></script>
     </body>
 </html>

client/src/lib-app/history.js

@@ -0,0 +1,8 @@
+import {browserHistory} from 'react-router';
+import {syncHistoryWithStore} from 'react-router-redux';
+import {useBasename} from 'history';
+import store from 'app/store';
+
+const history = syncHistoryWithStore(browserHistory, store);
+
+export default useBasename(() => history)({basename: globalIndexPath});