Adding authorization logic.

Implementing functionalities to get/post images.
zgevorg · Jul 31, 2018 · a196ba7 · a196ba7
1 parent 001e8cb
commit a196ba7
Show file tree

Hide file tree

Showing 17 changed files with 322 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "css-loader": "0.28.7",
+    "dateformat": "^3.0.3",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
     "eslint": "4.10.0",
@@ -43,6 +44,7 @@
     "react-fontawesome": "^1.6.1",
     "react-form-login": "^1.1.4",
     "react-loading-screen": "0.0.17",
+    "react-photo-feed": "^1.0.13",
     "react-router-dom": "^4.3.1",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",

diff --git a/src/Constants.js b/src/Constants.js
@@ -0,0 +1,6 @@
+const Constants = {
+    SERVER_URL: 'http://localhost:3003/' 
+};
+
+export default Constants;
+
diff --git a/src/components/App.js b/src/components/App.js
@@ -2,41 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {inject, observer} from 'mobx-react';
-// import LoadingScreen from 'react-loading-screen';
-//
-// import M from '../messages/messages';
+import LoadingScreen from 'react-loading-screen';
+
+import M from '../messages/messages';
 
 import Dashboard from './Dashboard/Dashboard';
+import Auth from './Auth';
 
-@inject('appStore')
+@inject('authStore')
 @observer
 class App extends React.Component {
 
     static propTypes = {
-        appStore: PropTypes.object.isRequired
+        authStore: PropTypes.object.isRequired
     };
 
-    componentDidMount() {
-        //TODO check user credentials
-    }
-
     render() {
-        //const store = this.props.appStore;
-        // let component = <LoadingScreen
-        //     loading={true}
-        //     bgColor='#f1f1f1'
-        //     spinnerColor='#9ee5f8'
-        //     textColor='#676767'
-        //     //logoSrc='/logo.png'
-        //     text={M.checkCredentials}
-        // />;
-
-        // if (store.authPassed) {
-        //     component = <Dashboard/>;
-        // }
+        const authStore = this.props.authStore;
+        let component = <Auth />;
+
+        if (authStore.successLogin) {
+            component = <Dashboard user={authStore.username}/>;
+        }
 
         return (
-            <Dashboard/>
+            component
         );
     }
 }

diff --git a/src/components/AuthTabs/SignIn.js b/src/components/AuthTabs/SignIn.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {withRouter} from 'react-router-dom';
 
 import FontAwesome from 'react-fontawesome';
 import {Row, FormGroup, FormControl, ControlLabel, Col, Button} from 'react-bootstrap';
@@ -24,10 +25,23 @@ class SignIn extends React.Component {
         this.props.store.setPassword(e.target.value);
     };
 
+    onSubmit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.target.elements) {
+            const data = {
+                username: this.props.store.username,
+                pwd: this.props.store.password
+            };
+            this.props.store.login(data);
+        }
+    };
+
     render() {
         const {store} = this.props;
+
         return (
-            <form>
+            <form  onSubmit={this.onSubmit}>
                 <FormGroup bsClass="authContainer col-sm-offset-4">
                     <Row bsClass="row login-row">
                         <Col sm={12}>
@@ -78,5 +92,5 @@ class SignIn extends React.Component {
     }
 }
 
-export default SignIn;
+export default withRouter(SignIn);
 
diff --git a/src/components/AuthTabs/SignUp.js b/src/components/AuthTabs/SignUp.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Row, FormGroup, FormControl, ControlLabel, Button} from 'react-bootstrap';
+import {Row, FormGroup, FormControl,
+    ControlLabel, Button, Modal} from 'react-bootstrap';
 import {inject, observer} from 'mobx-react';
 
 import M from '../../messages/messages';
@@ -27,21 +28,38 @@ class SignUp extends React.Component {
         this.props.store.setRepeatPassword(e.target.value);
     };
 
-    onSubmit = () => {
-        //this.props.store.submitForm();
+    handleHide = () => {
+        if (this.props.store.successSignUp) {
+            this.props.store.setTab(1);
+        }
+        this.props.store.hideModal();
+    };
+
+    onSubmit = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.target.elements) {
+			const data = {
+				username: this.props.store.usernameRegister,
+				pwd: this.props.store.passwordRegister,
+				pwd2: this.props.store.repeatPassword
+			}
+            this.props.store.registerUser(data);
+		}
     };
 
     render() {
         const {store} = this.props;
         return (
-            <form>
+            <form onSubmit={this.onSubmit}>
                 <FormGroup bsClass="authContainer col-sm-offset-4">
                     <Row bsClass="row register-row">
                         <ControlLabel bsClass="title-sign-up">{M.authBlock.signUp}</ControlLabel>
                     </Row>
                     <Row bsClass="row register-row">
                         <FormControl
                             type="text"
+							name="username"
                             value={store.usernameRegister}
                             placeholder={M.authBlock.usernamePlaceholder}
                             onChange={this.onUsernameChange}
@@ -50,6 +68,7 @@ class SignUp extends React.Component {
                     <Row bsClass="row register-row">
                         <FormControl
                             type="password"
+							name="pwd"
                             value={store.passwordRegister}
                             placeholder={M.authBlock.passwordPlaceholder}
                             onChange={this.onPasswordChange}
@@ -58,6 +77,7 @@ class SignUp extends React.Component {
                     <Row bsClass="row register-row">
                         <FormControl
                             type="password"
+							name="pwd2"
                             value={store.repeatPassword}
                             placeholder={M.authBlock.repeatPassword}
                             onChange={this.onRepeatPasswordChange}
@@ -67,10 +87,27 @@ class SignUp extends React.Component {
                         <Button
                             type="submit"
                             bsStyle="primary"
-                            disabled={!store.isSignUpFormValid}
-                            onSubmit={this.onSubmit}>
+                            disabled={!store.isSignUpFormValid}>
                             {M.authBlock.signUp}
                         </Button>
+                        <Modal
+                            show={store.showSignUpModal}
+                            container={this}
+                            onHide={this.handleHide}
+                            aria-labelledby="contained-modal-title"
+                        >
+                            <Modal.Header closeButton>
+                                <Modal.Title id="contained-modal-title">
+                                    {M.authBlock.register}
+                                </Modal.Title>
+                            </Modal.Header>
+                            <Modal.Body>
+                                {store.successSignUp ? M.authBlock.successSignUp : store.signUpError}
+                            </Modal.Body>
+                            <Modal.Footer>
+                                <Button onClick={this.handleHide}>Close</Button>
+                            </Modal.Footer>
+                        </Modal>
                     </Row>
                 </FormGroup>
             </form>

diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
@@ -7,6 +7,8 @@ import {inject, observer} from 'mobx-react';
 import M from '../../messages/messages';
 
 import Upload from './DashboardTabs/Upload';
+import View from './DashboardTabs/View';
+import LoadingScreen from "react-loading-screen";
 
 @inject('dashboardStore')
 @observer
@@ -15,28 +17,49 @@ class Dashboard extends React.Component {
     static propTypes = {
         dashboardStore: PropTypes.object.isRequired
     };
-    
+
     handleSelect = (key) => {
+        if (key === 1) {
+            this.props.dashboardStore.changeImagesLoaded(false);
+        }
         this.props.dashboardStore.setTab(key);
     };
 
+    loadImages = (user) => {
+        this.props.dashboardStore.getAllImages(user);
+    };
+
     render() {
+        let component =
+            <LoadingScreen
+                loading={true}
+                bgColor='#f1f1f1'
+                spinnerColor='#9ee5f8'
+                textColor='#676767'
+                text={M.loadingImages}
+            />;
+        if (this.props.dashboardStore.imagesLoaded) {
+            component =
+                <Grid fluid>
+                    <Tabs
+                        onSelect={this.handleSelect}
+                        activeKey={this.props.dashboardStore.tab}>
+                        <Tab eventKey={1} title={M.mainPage.viewImages}>
+                            <View />
+                        </Tab>
+                        <Tab eventKey={2} title={M.mainPage.uploadImages}>
+                            <Upload store={this.props.dashboardStore}/>
+                        </Tab>
+                        <Tab eventKey={3} title={M.mainPage.editImages}>
+                            Coming soon..
+                        </Tab>
+                    </Tabs>
+                </Grid>;
+        } else {
+            this.loadImages(this.props.user);
+        }
         return (
-            <Grid fluid>
-                <Tabs
-                    onSelect={this.handleSelect}
-                    activeKey={this.props.dashboardStore.tab}>
-                    <Tab eventKey={1} title={M.mainPage.uploadImages}>
-                        <Upload store={this.props.dashboardStore}/>
-                    </Tab>
-                    <Tab eventKey={2} title={M.mainPage.editImages}>
-                        Tab 2 content
-                    </Tab>
-                    <Tab eventKey={3} title={M.mainPage.viewImages}>
-                        Tab 3 content
-                    </Tab>
-                </Tabs>
-            </Grid>
+            component
         );
     }
 }

diff --git a/src/components/Dashboard/DashboardTabs/ImagesInfo.js b/src/components/Dashboard/DashboardTabs/ImagesInfo.js
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import {Col, ListGroup, ListGroupItem} from 'react-bootstrap';
 import {inject, observer} from 'mobx-react';
 
+import  dateFormat from 'dateformat';
+
 import M from '../../../messages/messages';
 
 import '../../../../node_modules/react-dropzone-component/styles/filepicker.css';
@@ -21,9 +23,9 @@ class ImagesInfo extends React.Component {
         const images = this.props.store.images.map(image => {
             return (
                 <ListGroupItem header={image.name} bsClass="list-group-item images-info">
-                    {`${M.uploadBlock.imagesBlock.info}  ${image.location.lng}\n`}
+                    {`${M.uploadBlock.imagesBlock.longitude}  ${image.location.lng}\n`}
                     {`${M.uploadBlock.imagesBlock.latitude}   ${image.location.lat}\n`}
-                    {`${M.uploadBlock.imagesBlock.state}      ${image.state}\n`}
+                    {`${M.uploadBlock.imagesBlock.date}      ${dateFormat(image.date, "dddd, mmmm dS, yyyy, h:MM TT")}\n`}
                     {`${M.uploadBlock.imagesBlock.title}      ${image.title}`}
                 </ListGroupItem>
             );

diff --git a/src/components/Dashboard/DashboardTabs/Upload.js b/src/components/Dashboard/DashboardTabs/Upload.js
@@ -20,16 +20,11 @@ class Upload extends React.Component {
 
     constructor() {
         super();
-        this.djsConfig = {
-            addRemoveLinks: true,
-            acceptedFiles: "image/jpeg,image/png",
-            autoProcessQueue: false
-        };
 
         this.componentConfig = {
             iconFiletypes: ['.jpg', '.png'],
             showFiletypeIcon: true,
-            postUrl: '/uploadHandler'
+            postUrl: 'http://localhost:3003/images'
         };
 
 
@@ -53,14 +48,23 @@ class Upload extends React.Component {
 
     render() {
         const config = this.componentConfig;
-        const djsConfig = this.djsConfig;
-
+        const djsConfig = this.djsConfig = {
+            addRemoveLinks: true,
+            acceptedFiles: "image/jpeg,image/png",
+            autoProcessQueue: false,
+            parallelUploads: 10,
+            params: {
+        		location: JSON.stringify(this.props.store.location)
+    		}
+        };
+
         const eventHandlers = {
             init: dz => this.dropzone = dz,
             addedfile: this.handleFile,
             removedfile: this.handleRemoveFile
         };
 
+
         return (
             <Grid>
                 <Row>

diff --git a/src/components/Dashboard/DashboardTabs/View.js b/src/components/Dashboard/DashboardTabs/View.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+import {Button, Grid, Row} from 'react-bootstrap';
+import {inject, observer} from 'mobx-react';
+
+import './Upload.css';
+import PhotoGrid from 'react-photo-feed';
+import 'react-photo-feed/library/style.css';
+import Constants from '../../../Constants';
+
+@inject('dashboardStore')
+@observer
+class View extends React.Component {
+
+    static propTypes = {
+        store: PropTypes.object.isRequired
+    };
+
+    render() {
+        const userImages = this.props.dashboardStore.userImages.map((image, index) => {
+            return {
+                id: index+1,
+                src: `${Constants.SERVER_URL}uploads/${image}`,
+                bigSrc: `${Constants.SERVER_URL}uploads/${image}`
+            }
+        });
+        let component = <span>
+            "You have not images, in order to add them click to "Upload" tab"
+        </span>;
+        if (userImages.length) {
+            component = <PhotoGrid columns={3} photos={userImages} />;
+        }
+        return (
+            <Grid>
+                {component}
+            </Grid>
+        );
+    }
+}
+
+export default View;
+