Added Logo Upload and Design Improvements

api/admin.js

@@ -10,6 +10,7 @@ The above users endpoints are not present in this file as they are all the users
 endpoints this API has, they are present in a separate file, users.js
 All those still come under the ADMIN endpoints
 
+POST /logo
 POST /topics
 PUT /topics
 DELETE /topics
@@ -17,10 +18,22 @@ DELETE /articles
 */
 
 
+var multer  = require('multer');
+var path = require('path');
+var storage = multer.diskStorage({
+        destination: function(req, file, cb) {
+            cb(null, './client/assets'); // Make sure this folder exists
+        },
+        filename: function(req, file, cb) {
+            cb(null, "logo.png");
+        }
+    });
+var upload = multer({ storage: storage }).single('logo');
+
+
 // Importing the topics model
 var Topics = require('../models/topic.js');
 var Articles = require('../models/article.js');
-
 var db = require('../db.js'); //this file contains the knex file import. it's equal to knex=require('knex')
 
 module.exports = function(app) {
@@ -160,4 +173,33 @@ module.exports = function(app) {
         });
     });
 
+    app.post('/logo', function (req, res) {
+      upload(req, res, function (err) {
+          if(err) {
+            res.json({
+              error: {
+                error: true,
+                message: "There was a problem uploading the logo"
+              },
+              code: 'LOGODIDNTUPLOAD',
+              data: {
+
+              }
+            });
+          }
+          else {
+            res.json({
+              error: {
+                error: false,
+                message: ''
+              },
+              code: 'LOGOUPLOADED',
+              data: {
+
+              }
+            });
+          }
+      });
+    });
+
 }

client/app/static/admin.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {hashHistory, Link} from 'react-router';
 import Alert from 'react-s-alert';
 import Loader from './loader.jsx';
+import LogoUpload from './logo_upload.jsx';
 
 class Admin extends React.Component {
 
@@ -286,7 +287,7 @@ class Admin extends React.Component {
               </div>
             </div>
           </div>
-
+          <LogoUpload />
         </div>);
   }
 }

client/app/static/app.jsx

@@ -25,8 +25,7 @@ class App extends React.Component {
     var that = this;
     return(
       <div>
-      <nav className="navbar container navbar-default">
-        <div className="container-fluid">
+      <nav className="navbar container-fluid navbar-default">
           {(window.localStorage.getItem('userToken')) ?
           <div className="navbar-header">
             <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
@@ -64,7 +63,6 @@ class App extends React.Component {
             </ul>
           </div>
           : <div/>}
-        </div>
       </nav>
         <div className="content container">
           {that.props.children}

client/app/static/home.jsx

@@ -25,7 +25,7 @@ class Home extends React.Component {
     if(this.state.loading)
       return <Loader/>;
     else
-    return(<div className="row container">
+    return(<div className="row">
 
       <div className="col-md-3">
           <BrowseTopics topicChange={this.handleUpdate} />

client/app/static/logo_upload.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Alert from 'react-s-alert';
+
+class LogoUpload extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.handleUpload = this.handleUpload.bind(this);
+  }
+
+  handleUpload(e) {
+    e.preventDefault();
+    var logo = this.refs.logo.files[0];
+    console.log(logo);
+    var formData = new FormData();
+    formData.append('logo', logo);
+    console.log(formData);
+    var myHeaders = new Headers({
+        "x-access-token": window.localStorage.getItem('userToken')
+    });
+    var myInit = { method: 'POST',
+                headers: myHeaders,
+               body: formData
+               };
+    var that = this;
+    fetch('/api/logo/',myInit)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(response) {
+      if(response.error.error) {
+        Alert.error(response.error.message);
+      }
+      else {
+        Alert.success("Your logo has been successfully updated.")
+      }
+    });
+  }
+
+  render () {
+    return(
+      <div className="row">
+        <div className="col-md-6 col-sd-12">
+        <h2><b>Change Logo</b></h2>
+        <hr/>
+        <form method="POST" encType="multipart/form-data" onSubmit={this.handleUpload}>
+            <input type="file" name="logo" ref="logo" className="form-control"/>
+            <p className="help-block">Please reload the page for the changes to reflect throughout the site.</p>
+            <br/>
+            <input type="submit" value="Upload Logo" className="btn btn-default btn-block btn-lg"/>
+        </form>
+        </div>
+      </div>
+  );
+  }
+}
+
+export default LogoUpload;

client/assets/bootstrap.css

@@ -2550,7 +2550,7 @@ output {
 .form-control {
   display: block;
   width: 100%;
-  height: 50px;
+  min-height: 50px;
   padding: 10px 20px;
   font-size: 20px;
   line-height: 1.42857143;

client/assets/style.css

@@ -12,7 +12,6 @@ body{
 }
 
 .content {
-  margin-top: 3em;
   margin-bottom: 3em;
 }
 
@@ -44,7 +43,7 @@ body{
 }
 
 .article-list {
-padding: 0em 2em;
+padding: 10px 20px;
 }
 
 .article-item {
@@ -195,7 +194,7 @@ textarea {
 }
 
 .navbar-login-logo img {
-  height: 40px;
+  max-height: 70px;
   width: auto;
   margin-top: 3em;
 }
@@ -289,6 +288,10 @@ textarea {
   height: 500px;
 }
 
+.bordered-box {
+  border: 1px solid #ccc;
+}
+
 
 /*React-s-alert package css */
 

index.js

@@ -10,6 +10,7 @@ var express = require('express');
 var bodyParser = require('body-parser'); //body parser to parse the request body
 var db = require('./db.js'); //this file contains the knex file import. it's equal to knex=require('knex')
 var app = express();
+var fs = require('fs');
 var apiRoutes = express.Router();
 var apiRoutesAdmin = express.Router();
 var jwt = require('jsonwebtoken');

package.json

@@ -37,6 +37,7 @@
     "express": "4.14.0",
     "jsonwebtoken": "7.1.9",
     "knex": "0.11.10",
+    "multer": "^1.2.1",
     "react": "15.3.0",
     "react-dom": "15.3.0",
     "react-router": "2.8.1",