Ivan - Add check ticket page [skip ci]

client/src/app/Routes.js

@@ -66,8 +66,8 @@ export default (
                 <Route path='maintenance' component={MainMaintenancePage}/>
 
                 <Route path='create-ticket' component={DashboardCreateTicketPage}/>
-                <Route path='check-ticket' component={MainCheckTicketPage}/>
-                <Route path='ticket/:ticketNumber/:email' component={DashboardTicketPage}/>
+                <Route path='check-ticket(/:ticketNumber/:email)' component={MainCheckTicketPage}/>
+                <Route path='ticket/:email/:ticketNumber' component={DashboardTicketPage}/>
                 <Route path='articles' component={DashboardListArticlesPage}/>
 
                 <Route path='dashboard' component={DashboardLayout}>

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

@@ -2,7 +2,7 @@ import React              from 'react';
 import _                  from 'lodash';
 import ReCAPTCHA          from 'react-google-recaptcha';
 import { browserHistory } from 'react-router';
-import RichTextEditor from 'react-rte-browserify';
+import RichTextEditor     from 'react-rte-browserify';
 
 import i18n               from 'lib-app/i18n';
 import API                from 'lib-app/api-call';
@@ -123,11 +123,11 @@ class CreateTicketForm extends React.Component {
                     captcha: captcha && captcha.getValue(),
                     departmentId: SessionStore.getDepartments()[formState.departmentIndex].id
                 })
-            }).then(this.onTicketSuccess.bind(this)).catch(this.onTicketFail.bind(this));
+            }).then(this.onTicketSuccess.bind(this, formState.email)).catch(this.onTicketFail.bind(this));
         }
     }
 
-    onTicketSuccess() {
+    onTicketSuccess(email, result) {
         this.setState({
             loading: false,
             message: 'success'
@@ -136,6 +136,8 @@ class CreateTicketForm extends React.Component {
         if(this.props.userLogged) {
             store.dispatch(SessionActions.getUserData());
             setTimeout(() => {browserHistory.push('/dashboard')}, 2000);
+        } else {
+            setTimeout(() => {browserHistory.push('/check-ticket/' + email + '/' + result.data.ticketNumber)}, 2000);
         }
     }
 

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

@@ -1,12 +1,94 @@
 import React from 'react';
+import { browserHistory } from 'react-router';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+import SessionStore from 'lib-app/session-store';
+
+import Widget from 'core-components/widget';
+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 Captcha from 'app/main/captcha';
 
 class MainCheckTicketPage extends React.Component {
+
+    state = {
+        loading: false,
+        form: {
+            email: this.props.params.email || '',
+            ticketNumber: this.props.params.ticketNumber || ''
+        },
+        errors: {}
+    };
+
     render() {
         return (
             <div className="main-check-ticket-page">
-
+                <Widget>
+                    <Header title={i18n('CHECK_TICKET')} description={i18n('CHECK_TICKET_DESCRIPTION')} />
+                    <Form {...this.getFormProps()}>
+                        <div className="main-check-ticket-page__inputs">
+                            <div className="main-check-ticket-page__input">
+                                <FormField name="email" label={i18n('EMAIL')} validation="EMAIL" required fieldProps={{size: 'large'}}/>
+                            </div>
+                            <div className="main-check-ticket-page__input">
+                                <FormField name="ticketNumber" label={i18n('TICKET_NUMBER')} validation="DEFAULT" required fieldProps={{size: 'large'}}/>
+                            </div>
+                        </div>
+                        <div className="main-check-ticket-page__captcha">
+                            <Captcha ref="captcha"/>
+                        </div>
+                        <SubmitButton>{i18n('CHECK_TICKET')}</SubmitButton>
+                    </Form>
+                </Widget>
             </div>
-        )
+        );
+    }
+
+    getFormProps() {
+        return {
+            className: 'main-check-ticket-page__form',
+            loading: this.state.loading,
+            values: this.state.form,
+            errors: this.state.errors,
+            onChange: (form) => this.setState({form}),
+            onValidateErrors: (errors) => this.setState({errors}),
+            onSubmit: this.onFormSubmit.bind(this)
+        };
+    }
+
+    onFormSubmit(form) {
+        const captcha = this.refs.captcha.getWrappedInstance();
+
+        if (!captcha.getValue()) {
+            captcha.focus();
+        } else {
+            this.setState({
+                loading: true
+            });
+
+            API.call({
+                path: '/ticket/get',
+                data: {
+                    captcha: captcha && captcha.getValue(),
+                    ticketNumber: form.ticketNumber,
+                    email: form.email
+                }
+            }).then(this.onTicketGetSuccess.bind(this)).catch(() => this.setState({
+                loading: false,
+                errors: {
+                    email: i18n('INVALID_EMAIL_OR_TICKET_NUMBER'),
+                    ticketNumber: i18n('INVALID_EMAIL_OR_TICKET_NUMBER')
+                }
+            }));
+        }
+    }
+
+    onTicketGetSuccess(result) {
+        SessionStore.setItem('token', result.data.token);
+        setTimeout(() => {browserHistory.push('/view-ticket/' + this.state.form.email + '/' + this.state.form.ticketNumber)}, 2000);
     }
 }
 

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

@@ -0,0 +1,24 @@
+.main-check-ticket-page {
+    padding: 0 15px;
+
+    &__form {
+        margin: 0 auto;
+        max-width: 790px;
+    }
+
+    &__inputs {
+        display: inline-block;
+        margin: 0 auto;
+    }
+
+    &__input {
+        display: inline-block;
+        margin: 0 20px;
+    }
+
+    &__captcha {
+        margin: 20px auto 20px;
+        height: 78px;
+        width: 304px;
+    }
+}