Ivan - Add all install steps [skip ci]

client/gulp/config.js

@@ -15,8 +15,7 @@ module.exports = {
   },
 
   'styles': {
-    'src': './src/*.scss',
+    'src': './src/**/*.scss',
-    'watch': './src/**/*.scss',
     'dest': './build/css/'
   },
 

client/gulp/tasks/watch.js

@@ -6,7 +6,7 @@ var config = require('../config');
 gulp.task('watch', ['browserSync', 'server'], function() {
 
   // Scripts are automatically watched by Watchify inside Browserify task
-  gulp.watch(config.styles.watch,                 ['sass']);
+  gulp.watch(config.styles.src,                 ['sass']);
   gulp.watch(config.images.src,                 ['imagemin']);
   gulp.watch(config.sourceDir + 'index.html',   ['copyIndex']);
 

client/src/app-components/toggle-button.js

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import i18n from 'lib-app/i18n';
 
 class ToggleButton extends React.Component {
-
     
     static propTypes = {
         value: React.PropTypes.bool,
@@ -22,6 +21,7 @@ class ToggleButton extends React.Component {
     getClass() {
         let classes = {
             'toggle-button': true,
+            'toggle-button_disabled': (this.props.disabled),
             [this.props.className]: (this.props.className)
         };
 
@@ -30,7 +30,7 @@ class ToggleButton extends React.Component {
 
 
     onClick() {
-        if (this.props.onChange) {
+        if (this.props.onChange && !this.props.disabled) {
             this.props.onChange({
                 target: {
                     value: !this.props.value

client/src/app-components/toggle-button.scss

@@ -7,4 +7,11 @@
     border-radius: 4px;
     text-align: center;
     user-select: none;
+    cursor: pointer;
+
+    &_disabled {
+        cursor: default;
+        background-color: transparent;
+        color: $dark-grey;
+    }
 }

client/src/app/Routes.js

@@ -57,9 +57,9 @@ import AdminPanelEmailTemplates from 'app/admin/panel/settings/admin-panel-email
 import InstallLayout from 'app/install/install-layout';
 import InstallStep1Language from 'app/install/install-step-1-language';
 import InstallStep2Requirements from 'app/install/install-step-2-requirements';
-import InstallStep3Settings from 'app/install/install-step-3-settings';
+import InstallStep3Database from 'app/install/install-step-3-database';
-import InstallStep4Administrator from 'app/install/install-step-4-administrator';
+import InstallStep4UserSystem from 'app/install/install-step-4-user-system';
-import InstallStep5Install from 'app/install/install-step-5-install';
+import InstallStep5Admin from 'app/install/install-step-5-admin';
 import InstallStep6Completed from 'app/install/install-step-6-completed';
 
 const history = syncHistoryWithStore(browserHistory, store);
@@ -95,9 +95,9 @@ export default (
                 <IndexRedirect to="step-1" />
                 <Route path="step-1" component={InstallStep1Language}/>
                 <Route path="step-2" component={InstallStep2Requirements} />
-                <Route path="step-3" component={InstallStep3Settings} />
+                <Route path="step-3" component={InstallStep3Database} />
-                <Route path="step-4" component={InstallStep4Administrator} />
+                <Route path="step-4" component={InstallStep4UserSystem} />
-                <Route path="step-5" component={InstallStep5Install} />
+                <Route path="step-5" component={InstallStep5Admin} />
                 <Route path="step-6" component={InstallStep6Completed} />
             </Route>
             <Route path="admin">

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

@@ -10,9 +10,9 @@ import Icon from 'core-components/icon';
 const steps = [
     'LANGUAGE',
     'SERVER_REQUIREMENTS',
-    'SETTINGS_SETUP',
+    'DATABASE_CONFIGURATION',
+    'USER_SYSTEM',
     'ADMIN_SETUP',
-    'INSTALL',
     'COMPLETED'
 ];
 

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import {browserHistory} from 'react-router';
+
+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';
+import SubmitButton from 'core-components/submit-button';
+import Message from 'core-components/message';
+
+class InstallStep3Database extends React.Component {
+
+    state = {
+        loading: false,
+        error: false,
+        errorMessage: ''
+    };
+
+    render() {
+        return (
+            <div className="install-step-3">
+                <Header title={i18n('STEP_TITLE', {title: i18n('DATABASE_CONFIGURATION'), current: 3, total: 6})} description={i18n('STEP_3_DESCRIPTION')}/>
+                {this.renderMessage()}
+                <Form loading={this.state.loading} onSubmit={this.onSubmit.bind(this)}>
+                    <FormField name="dbHost" label={i18n('DATABASE_HOST')} fieldProps={{size: 'large'}} required/>
+                    <FormField name="dbName" label={i18n('DATABASE_NAME')} fieldProps={{size: 'large'}} required/>
+                    <FormField name="dbUser" label={i18n('DATABASE_USER')} fieldProps={{size: 'large'}} required/>
+                    <FormField name="dbPassword" label={i18n('DATABASE_PASSWORD')} fieldProps={{size: 'large', password: true}} required/>
+                    <div className="install-step-3__buttons">
+                        <SubmitButton className="install-step-3__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
+                        <Button className="install-step-3__previous" size="medium" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button>
+                    </div>
+                </Form>
+            </div>
+        );
+    }
+
+    renderMessage() {
+        let message = null;
+
+        if(this.state.error) {
+            message = (
+                <Message className="install-step-3__message" type="error">
+                    {i18n('ERROR_UPDATING_SETTINGS')}: {this.state.errorMessage}
+                </Message>
+            );
+        }
+
+        return message;
+    }
+
+    onPreviousClick(event) {
+        event.preventDefault();
+        browserHistory.push('/install/step-2');
+    }
+
+    onSubmit(form) {
+        this.setState({
+            loading: true
+        }, () => {
+            API.call({
+                path: '/system/init-database',
+                data: form
+            })
+                .then(() => browserHistory.push('/install/step-4'))
+                .catch(({message}) => this.setState({
+                    loading: false,
+                    error: true,
+                    errorMessage: message
+                }));
+        });
+    }
+}
+
+export default InstallStep3Database;

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

@@ -0,0 +1,18 @@
+@import "../../scss/vars";
+
+.install-step-3 {
+
+    &__message {
+        margin-bottom: 20px;
+    }
+
+    &__previous {
+        float: left;
+    }
+
+    &__next {
+        float: left;
+        position: absolute;
+        margin-left: 286px;
+    }
+}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class InstallStep3Settings extends React.Component {
-
-    render() {
-        return (
-            <div>
-                INSTALLATION
-            </div>
-        );
-    }
-}
-
-export default InstallStep3Settings;

client/src/app/install/install-step-3-settings.scss

@@ -1 +0,0 @@
-@import "../../scss/vars";

client/src/app/install/install-step-4-administrator.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class InstallStep4Administrator extends React.Component {
-
-    render() {
-        return (
-            <div>
-                INSTALLATION
-            </div>
-        );
-    }
-}
-
-export default InstallStep4Administrator;

client/src/app/install/install-step-4-administrator.scss

@@ -1 +0,0 @@
-@import "../../scss/vars";

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import {browserHistory} from 'react-router';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import ToggleButton from 'app-components/toggle-button';
+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';
+import SubmitButton from 'core-components/submit-button';
+
+class InstallStep4UserSystem extends React.Component {
+
+    state = {
+        form: {
+            'user-system-enabled': true,
+            'registration': true
+        }
+    };
+
+    render() {
+        return (
+            <div className="install-step-4">
+                <Header title={i18n('STEP_TITLE', {title: i18n('USER_SYSTEM'), current: 4, total: 6})} description={i18n('STEP_4_DESCRIPTION')}/>
+                <Form onSubmit={this.onSubmit.bind(this)} values={this.state.form} onChange={this.onChange.bind(this)}>
+                    <FormField name="user-system-enabled" label={i18n('ENABLE_USER_SYSTEM')} decorator={ToggleButton}/>
+                    <FormField name="registration" label={i18n('ENABLE_USER_REGISTRATION')} decorator={ToggleButton} fieldProps={{disabled: this.isDisabled()}}/>
+                    <div className="install-step-4__buttons">
+                        <SubmitButton className="install-step-4__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
+                        <Button className="install-step-4__previous" size="medium" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button>
+                    </div>
+                </Form>
+            </div>
+        );
+    }
+
+    onChange(form) {
+        this.setState({
+            form: {
+                'user-system-enabled': form['user-system-enabled'],
+                'registration': form['user-system-enabled'] && form['registration']
+            }
+        });
+    }
+
+    onPreviousClick(event) {
+        event.preventDefault();
+        browserHistory.push('/install/step-3');
+    }
+
+    onSubmit(form) {
+        API.call({
+            path: '/system/init-settings',
+            data: {
+                'user-system-enabled': form['user-system-enabled'],
+                'registration': form['registration']
+            }
+        }).then(() => browserHistory.push('/install/step-5'));
+    }
+
+    isDisabled() {
+        return !this.state.form['user-system-enabled'];
+    }
+}
+
+export default InstallStep4UserSystem;

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

@@ -0,0 +1,14 @@
+@import "../../scss/vars";
+
+.install-step-4 {
+
+    &__previous {
+        margin-right: 20px;
+    }
+
+    &__next {
+        float: left;
+        position: absolute;
+        margin-left: 286px;
+    }
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import {browserHistory} from 'react-router';
+
+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';
+import SubmitButton from 'core-components/submit-button';
+import Message from 'core-components/message';
+
+class InstallStep5Admin extends React.Component {
+
+    state = {
+        loading: false,
+        error: false,
+        errorMessage: ''
+    };
+
+    render() {
+        return (
+            <div className="install-step-5">
+                <Header title={i18n('STEP_TITLE', {title: i18n('ADMIN_SETUP'), current: 5, total: 6})} description={i18n('STEP_5_DESCRIPTION')}/>
+                {this.renderMessage()}
+                <Form onSubmit={this.onSubmit.bind(this)}>
+                    <FormField name="name" validation="NAME" label={i18n('ADMIN_NAME')} fieldProps={{size: 'large'}} required/>
+                    <FormField name="email" validation="EMAIL" label={i18n('ADMIN_EMAIL')} fieldProps={{size: 'large'}} required/>
+                    <FormField name="password" validation="PASSWORD" label={i18n('ADMIN_PASSWORD')} infoMessage={i18n('ADMIN_PASSWORD_DESCRIPTION')} fieldProps={{size: 'large', autoComplete: 'off'}} required/>
+                    <div className="install-step-5__buttons">
+                        <SubmitButton className="install-step-5__next" size="medium" type="secondary">{i18n('NEXT')}</SubmitButton>
+                        <Button className="install-step-5__previous" size="medium" onClick={this.onPreviousClick.bind(this)}>{i18n('PREVIOUS')}</Button>
+                    </div>
+                </Form>
+            </div>
+        );
+    }
+
+    renderMessage() {
+        let message = null;
+
+        if(this.state.error) {
+            message = (
+                <Message className="install-step-5_message" type="error">
+                    {i18n('ERROR_UPDATING_SETTINGS')}: {this.state.errorMessage}
+                </Message>
+            );
+        }
+
+        return message;
+    }
+    
+    onPreviousClick(event) {
+        event.preventDefault();
+        browserHistory.push('/install/step-4');
+    }
+
+    onSubmit(form) {
+        this.setState({
+            loading: true
+        }, () => {
+            API.call({
+                path: '/system/init-admin',
+                data: form
+            })
+                .then(() => browserHistory.push('/install/step-6'))
+                .catch(({message}) => this.setState({
+                    loading: false,
+                    error: true,
+                    errorMessage: message
+                }));
+        });
+    }
+}
+
+export default InstallStep5Admin;

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

@@ -0,0 +1,18 @@
+@import "../../scss/vars";
+
+.install-step-5 {
+
+    &__message {
+        margin-bottom: 20px;
+    }
+
+    &__previous {
+        margin-right: 20px;
+    }
+
+    &__next {
+        float: left;
+        position: absolute;
+        margin-left: 286px;
+    }
+}

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

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class InstallStep5Install extends React.Component {
-
-    render() {
-        return (
-            <div>
-                INSTALLATION
-            </div>
-        );
-    }
-}
-
-export default InstallStep5Install;

client/src/app/install/install-step-5-install.scss

@@ -1 +0,0 @@
-@import "../../scss/vars";

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

@@ -1,11 +1,25 @@
 import React from 'react';
+import {browserHistory} from 'react-router';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import Header from 'core-components/header';
+import Message from 'core-components/message';
 
 class InstallStep6Completed extends React.Component {
 
+    componentDidMount() {
+        setTimeout(() => browserHistory.push('/admin'), 5000);
+    }
+
     render() {
         return (
-            <div>
+            <div className="install-step-6">
-                INSTALLATION
+                <Header title={i18n('STEP_TITLE', {title: i18n('COMPLETED'), current: 6, total: 6})} description={i18n('STEP_6_DESCRIPTION')}/>
+                <Message title={i18n('INSTALLATION_COMPLETED')} type="success">
+                    {i18n('INSTALLATION_COMPLETED_DESCRIPTION')}
+                </Message>
             </div>
         );
     }

client/src/core-components/form-field.js

@@ -29,7 +29,8 @@ class FormField extends React.Component {
     };
     
     static defaultProps = {
-        field: 'input'
+        field: 'input',
+        fieldProps: {}
     };
 
     static getDefaultValue(field) {
@@ -120,7 +121,7 @@ class FormField extends React.Component {
     
     getFieldProps() {
         let props = _.extend({}, this.props.fieldProps, {
-            disabled: this.context.loading,
+            disabled: this.isDisabled(),
             errored: !!this.props.error,
             name: this.props.name,
             placeholder: this.props.placeholder,
@@ -171,6 +172,12 @@ class FormField extends React.Component {
             this.props.onChange(event)
         }
     }
+    
+    isDisabled() {
+        const fieldProps = this.props.fieldProps;
+
+        return (fieldProps.disabled === undefined) ? this.context.loading : fieldProps.disabled;
+    }
 
     focus() {
         if (this.refs.nativeField) {

client/src/data/fixtures/system-fixtures.js

@@ -56,6 +56,37 @@ module.exports = [
             }
         }
     },
+    {
+        path: '/system/init-settings',
+        time: 50,
+        response: function() {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/init-database',
+        time: 50,
+        response: function() {
+            return {
+                status: 'success',
+                message: 'ERROR_SERVER',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/init-admin',
+        time: 50,
+        response: function() {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
     {
         path: '/system/edit-settings',
         time: 50,
@@ -90,8 +121,8 @@ module.exports = [
                     },
                     configFile: {
                         name: 'File: /api/config.php',
-                        value: 'No writable',
+                        value: 'Writable',
-                        ok: false
+                        ok: true
                     }
                 }
             };

client/src/data/languages/en.js

@@ -210,9 +210,8 @@ export default {
     'ACTIVITY_UN_BAN_USER': 'banned user',
 
     'SERVER_REQUIREMENTS': 'Server requirements',
-    'SETTINGS_SETUP': 'Settings setup',
+    'DATABASE_CONFIGURATION': 'Database configuration',
     'ADMIN_SETUP': 'Admin setup',
-    'INSTALL': 'Install',
     'COMPLETED': 'Completed',
     'INSTALL_HEADER_TITLE': 'OpenSupports Installation Wizard',
     'INSTALL_HEADER_DESCRIPTION': 'This wizard will help you to configure and install OpenSupports on your website',
@@ -220,14 +219,26 @@ export default {
     'REQUIREMENT': 'Requirement',
     'VALUE': 'Value',
     'REFRESH': 'Refresh',
+    'USER_SYSTEM': 'User System',
+    'PREVIOUS': 'Previous',
+    'DATABASE_HOST': 'MySQL server',
+    'DATABASE_NAME': 'MySQL database name',
+    'DATABASE_USER': 'MySQL user',
+    'DATABASE_PASSWORD': 'MySQL password',
+    'ADMIN_NAME': 'Admin account name',
+    'ADMIN_EMAIL': 'Admin account email',
+    'ADMIN_PASSWORD': 'Admin account password',
+    'ADMIN_PASSWORD_DESCRIPTION': 'Please remember this password. It is needed for accessing the admin panel. You can change it later.',
+    'INSTALLATION_COMPLETED': 'Installation completed.',
+    'INSTALLATION_COMPLETED_DESCRIPTION': 'The installation of OpenSupports is completed. Redirecting to admin panel...',
 
     'STEP_TITLE': 'Step {current} of {total} - {title}',
     'STEP_1_DESCRIPTION': 'Select your preferred language for the installation wizard.',
     'STEP_2_DESCRIPTION': 'Here are listed the requirements for running OpenSupports. Please make sure that all requirements are satisfied.',
-    'STEP_3_DESCRIPTION': 'Select your preferred language for the installation wizard.',
+    'STEP_3_DESCRIPTION': 'Please fill the MySQL database configuration.',
-    'STEP_4_DESCRIPTION': 'Select your preferred language for the installation wizard.',
+    'STEP_4_DESCRIPTION': 'Please select your user system preferences.',
-    'STEP_5_DESCRIPTION': 'Select your preferred language for the installation wizard.',
+    'STEP_5_DESCRIPTION': 'Please configure the administrator account.',
-    'STEP_6_DESCRIPTION': 'Select your preferred language for the installation wizard.',
+    'STEP_6_DESCRIPTION': 'Installation is completed.',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',

client/src/index.html

@@ -9,6 +9,7 @@
       <title>OS4</title>
 
       <link rel="stylesheet" href="/css/main.css">
+      <link rel="icon" type="image/x-icon" href="/images/icon.png">
   </head>
   <body>