Max Red - Create login page [skip ci]

README.md

@@ -12,7 +12,7 @@ OpenSupports v4.0
     - `sudo apt-get install -y nodejs`
 3. Install npm `sudo apt-get install npm`
 4. Install gulp `sudo npm install -g gulp`
-5. Go to repo `cd os4-react`
+5. Go to repo `cd os4-react/client`
 6. Install dependences `npm install`
 7. Rebuild node-sass `npm rebuild node-sass`
 8. Run `gulp dev`

client/src/app/Routes.js

@@ -13,16 +13,16 @@ import MainSignUpPage from 'app/main/main-signup/main-signup-page';
 import MainRecoverPasswordPage from 'app/main/main-recover-password/main-recover-password-page';
 
 import DashboardLayout from 'app/main/dashboard/dashboard-layout';
-
 import DashboardListTicketsPage from 'app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page';
 import DashboardListArticlesPage from 'app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page';
-
 import DashboardCreateTicketPage from 'app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page';
 import DashboardEditProfilePage from 'app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page';
-
 import DashboardArticlePage from 'app/main/dashboard/dashboard-article/dashboard-article-page';
 import DashboardTicketPage from 'app/main/dashboard/dashboard-ticket/dashboard-ticket-page';
 
+import AdminLoginPage from 'app/admin/admin-login-page';
+import AdminPanel from 'app/admin/panel/admin-panel';
+
 const history = syncHistoryWithStore(browserHistory, store);
 
 export default (
@@ -43,6 +43,12 @@ export default (
                     <Route path='ticket/:ticketNumber' component={DashboardTicketPage}/>
                 </Route>
             </Route>
+            <Route path='admin'>
+                <IndexRoute component={AdminLoginPage} />
+                <Route path='panel' component={MainLayout}>
+                    <IndexRoute component={AdminPanel} />
+                </Route>
+            </Route>
 
             <Route name='Demo' path='demo' component={DemoPage} />
         </Route>

client/src/app/admin/admin-login-page.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
+
+class AdminLoginPage extends React.Component {
+    render(){
+        return (
+            <div className="admin-login-page">
+                <div className="admin-login-page__content">
+                    <div className="admin-login-page__image"><img width="100%" src="/images/logo.png" alt="OpenSupports Admin Panel"/></div>
+                    <div className="admin-login-page__login-form">
+                        <Form onSubmit={this.onSubmit.bind(this)}>
+                            <FormField name="email" label={i18n('EMAIL')} field="input" validation="EMAIL" fieldProps={{size:'large'}} required />
+                            <FormField name="password" label={i18n('PASSWORD')} field="input" validation="PASSWORD" fieldProps={{password:true, size:'large'}} required />
+                            <SubmitButton> {i18n('LOG_IN')} </SubmitButton>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    onSubmit(formState) {
+        
+    }
+}
+
+export default AdminLoginPage;

client/src/app/admin/admin-login-page.scss

@@ -0,0 +1,24 @@
+@import '../../scss/vars';
+
+.admin-login-page {
+    display: flex;
+
+    &__content {
+        margin: 0 auto;
+        display: inline-block;
+        background-color: white;
+        padding: 40px;
+        border-radius: 4px;
+        text-align: center;
+    }
+
+    &__image {
+        width: 365px;
+        margin-bottom: 30px;
+    }
+
+    &__login-form {
+        margin: 0 auto;
+        display: inline-block;
+    }
+}

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

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

client/src/data/languages/en.js

@@ -4,6 +4,8 @@ export default {
     'ARTICLES': 'Articles',
     'ACCOUNT': 'Account',
     'SUBMIT': 'Submit',
+    'EMAIL': 'Email',
+    'PASSWORD': 'Password',
     'LOG_IN': 'Log in',
     'SIGN_UP': 'Sign up',
     'FORGOT_PASSWORD': 'Forgot your password?',

server/data/mail-templates/user-recovered-password-en.html

@@ -1,3 +1,3 @@
 <div>
-    Hi {{name}} , OpenSupports' team wanna inform you that you password has been chageed successfully.
+    Hi {{name}} , OpenSupports' team wanna inform you that you password has been changed successfully.
 </div>

server/data/mail-templates/user-recovered-password-es.html

@@ -1,3 +1,3 @@
 <div>
-    Hola {{name}} , el equipo de OpenSupports te informa que tu contraseña ha sido cambiada
+    Hola {{name}} , el equipo de OpenSupports te informa que tu contraseña ha sido cambiada.
 </div>

server/models/DataStore.php

@@ -71,7 +71,6 @@ abstract class DataStore {
     }
 
     public function &__get($name) {
-        'hello';
         if (!array_key_exists($name, $this->properties) || !$this->properties[$name]) {
             $this->properties[$name] = $this->parseBeanProp($name);
         }