tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add all install steps [skip ci]

This commit is contained in:
ivan 2017-03-11 02:19:02 -03:00
parent d6f33a7b32
commit 01192aaeb7
23 changed files with 368 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/gulp/config.js
View File

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

2
client/gulp/tasks/watch.js
View File

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

4
client/src/app-components/toggle-button.js
View File

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

7
client/src/app-components/toggle-button.scss
View File

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

12
client/src/app/Routes.js
View File

@ -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 InstallStep4Administrator from 'app/install/install-step-4-administrator';
import InstallStep5Install from 'app/install/install-step-5-install';
import InstallStep3Database from 'app/install/install-step-3-database';
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);
@ -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-4" component={InstallStep4Administrator} />
<Route path="step-5" component={InstallStep5Install} />
<Route path="step-3" component={InstallStep3Database} />
<Route path="step-4" component={InstallStep4UserSystem} />
<Route path="step-5" component={InstallStep5Admin} />
<Route path="step-6" component={InstallStep6Completed} />
</Route>
<Route path="admin">

4
client/src/app/install/install-layout.js
View File

@ -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'
];

78
client/src/app/install/install-step-3-database.js Normal file
View File

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

18
client/src/app/install/install-step-3-database.scss Normal file
View File

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

14
client/src/app/install/install-step-3-settings.js
View File

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

1
client/src/app/install/install-step-3-settings.scss
View File

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

14
client/src/app/install/install-step-4-administrator.js
View File

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

1
client/src/app/install/install-step-4-administrator.scss
View File

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

68
client/src/app/install/install-step-4-user-system.js Normal file
View File

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

14
client/src/app/install/install-step-4-user-system.scss Normal file
View File

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

77
client/src/app/install/install-step-5-admin.js Normal file
View File

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

18
client/src/app/install/install-step-5-admin.scss Normal file
View File

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

14
client/src/app/install/install-step-5-install.js
View File

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

1
client/src/app/install/install-step-5-install.scss
View File

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

18
client/src/app/install/install-step-6-completed.js
View File

@ -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>
INSTALLATION
<div className="install-step-6">
<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>
);
}

11
client/src/core-components/form-field.js
View File

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

35
client/src/data/fixtures/system-fixtures.js
View File

@ -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',
ok: false
value: 'Writable',
ok: true
}
}
};

23
client/src/data/languages/en.js
View File

@ -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_4_DESCRIPTION': 'Select your preferred language for the installation wizard.',
'STEP_5_DESCRIPTION': 'Select your preferred language for the installation wizard.',
'STEP_6_DESCRIPTION': 'Select your preferred language for the installation wizard.',
'STEP_3_DESCRIPTION': 'Please fill the MySQL database configuration.',
'STEP_4_DESCRIPTION': 'Please select your user system preferences.',
'STEP_5_DESCRIPTION': 'Please configure the administrator account.',
'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.',

1
client/src/index.html
View File

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