removing aws keys and modifying photo

Author: Sarah Stauber

.gitignore

@@ -12,6 +12,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

client/src/components/AddPhotoS3/AddPhotoS3.js

@@ -1,6 +1,23 @@
 import React, { Component } from "react";
 import {Link} from "react-router-dom";
 import axios from 'axios';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Icon from '@material-ui/core/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import CameraButton from "../PhotoButton";
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
+  },
+});
 
 class AddPhotoS3 extends Component{
     constructor(props){
@@ -60,8 +77,16 @@ class AddPhotoS3 extends Component{
             <input
               type="file"
               name="selectedFile"
+              id="file-input"
               onChange={this.onChange}
+              className=""
             />
+            {/* <CameraButton 
+            type="file"
+            name="selectedFile"
+            id="file-input"
+            onChange={this.onChange}/> */}
+            <br />
             <br />
             <input
               type="text"
@@ -71,7 +96,8 @@ class AddPhotoS3 extends Component{
               onChange={this.onChange}
             />
             <br />
-            <button type="submit">Submit</button>
+            <br />
+            <button type="submit" className="btn btn-success">Submit</button>
           </form>
 
 

client/src/components/PhotoButton/PhotoButton.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import {Link} from "react-router-dom";
+import axios from 'axios';
+
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Icon from '@material-ui/core/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
+  },
+});
+
+function PhotoButton(props) {
+  const { classes } = props;
+  return (
+    <div>
+      
+      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" name="selectedFile" />
+      <label htmlFor="icon-button-file">
+        <IconButton color="primary" className={classes.button} component="span" size="large">
+          <PhotoCamera />
+        </IconButton>
+      </label>
+    </div>
+  );
+}
+
+PhotoButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const CameraButton = withStyles(styles)(PhotoButton);
+
+export default CameraButton;

client/src/components/PhotoButton/index.js

@@ -0,0 +1 @@
+export { default } from "./PhotoButton";

client/src/pages/ChooseContentType/ChooseContentType.js

@@ -5,6 +5,7 @@ import TitleBar from "../../components/TitleBar";
 import EndButton from "../../components/EndButton";
 import AddPhotoS3 from "../../components/AddPhotoS3";
 import AddTextorPhoto from "../../components/AddTextorPhoto";
+import CameraButton from "../../components/PhotoButton";
 
 class ChooseContentType extends Component {
   state = {
@@ -37,14 +38,18 @@ class ChooseContentType extends Component {
       <div>
         <div className="wrapper">
             <TitleBar/>
-            <AddTextorPhoto />
+            {/* <AddTextorPhoto /> */}
             <br></br>
             <p>Story Name: {this.state.story.title}</p>
             <AddPhotoS3 
               key={this.state.story.id}
               storyId={this.state.story.id}
               title={this.state.story.title}
-            />
+              
+            >
+            
+            </AddPhotoS3>
+            
         </div>
         <div>
           <EndButton 

config/config.json

@@ -1,7 +1,7 @@
 {
     "development": {
       "username": "root",
-      "password": "root",
+      "password": "",
       "database": "story_db",
       "host": "127.0.0.1",
       "dialect": "mysql"

package.json

@@ -22,6 +22,7 @@
     "aws-sdk": "^2.238.1",
     "axios": "^0.18.0",
     "cors": "^2.8.4",
+    "dotenv": "^5.0.1",
     "express": "^4.15.4",
     "express-session": "^1.15.6",
     "multer": "^1.3.0",

routes/htmlRoutes.js

@@ -1,3 +1,4 @@
+require('dotenv').config();
 const express = require('express');
 var router = express.Router();
 var AWS = require('aws-sdk');
@@ -7,8 +8,8 @@ var db = require("../models");
 
 //AWS
 //aws keys
-var accessKeyId = process.env.AWS_ACCESS_KEY || "AKIAJSQNCM5K6YOIRMPA";
-var secretAccessKey = process.env.AWS_SECRET_KEY || "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";
+var accessKeyId = process.env.aws_access_key_id;
+var secretAccessKey = process.env.aws_secret_access_key;
 AWS.config.update({
   accessKeyId: accessKeyId,
   secretAccessKey: secretAccessKey

yarn.lock

@@ -641,6 +641,10 @@ dot-prop@^4.1.0:
   dependencies:
     is-obj "^1.0.0"
 
+dotenv@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+
 dottie@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dottie/-/dottie-2.0.0.tgz#da191981c8b8d713ca0115d5898cf397c2f0ddd0"