Merge pull request #50 from TryShape/issue-46-security-features

Issue 46 security features

Author: atapas

components/core/App.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from "react";
-import dynamic from "next/dynamic";
 
-// harperDb fetch call
-import { harperFetch } from "../../utils/HarperFetch";
+// axios
+import axios from "axios";
 
-// Dummy Shape Data
-// import { shapes } from "../../data/shapes";
+// dynamic from next
+import dynamic from "next/dynamic";
 
 // loader
 import Loader from "react-loader-spinner";
@@ -33,36 +32,30 @@ const App = (props) => {
     let shapes = [];
 
     if(user.length === 0) {
-      // User is not logged In. Fetch all the public shapes
-      shapes = await harperFetch({
-        operation: "sql",
-        sql: `SELECT * 
-          FROM tryshape.shapes s 
-          INNER JOIN tryshape.users u 
-          ON s.createdBy=u.email 
-          WHERE s.private=false
-          ORDER BY s.likes DESC`,
+      // User is not logged In. Fetch all the public shapes 
+      const response = await axios.get("/api/GET/shapes", {
+        params: {
+          type: 'private'
+        }
       });
+      shapes = response.data;
     } else {
       // User is logged in. Let's fetch the private shape and other public shapes.
-      shapes = await harperFetch({
-        operation: "sql",
-        sql: `SELECT *
-          FROM tryshape.shapes s
-          INNER JOIN tryshape.users u 
-          ON s.createdBy=u.email 
-          WHERE s.private=false 
-          OR createdBy = '${user.email}'
-          ORDER BY s.likes DESC`,
+      const response = await axios.get("/api/GET/shapes", {
+        params: {
+          type: 'public-logged-in',
+          email: user.email
+        }
       });
+      shapes = response.data;
 
       // Fetch the shapes liked by the logged-in user
-      const likedShapes = await harperFetch({
-        operation: "sql",
-        sql: `SELECT *
-          FROM tryshape.likes 
-          WHERE email = '${user.email}'`,
+      const likedResponse = await axios.get("/api/GET/likes", {
+        params: {
+          email: user.email
+        }
       });
+      const likedShapes = likedResponse.data;
 
       // If there are liked shapes, take out the shape_id
       if (likedShapes.length > 0) {

components/core/CreateShape.js

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from "react";
 
+// axios
+import axios from "axios";
+
 // Bootstrap
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
@@ -13,9 +16,6 @@ import { ShapeForm, ShapePreview } from "..";
 // Toast
 import toast from "react-hot-toast";
 
-// harperDb fetch call
-import { harperFetch } from "../../utils/HarperFetch";
-
 const CreateShape = (props) => {
 
     // Store the default state as a variable so resetting form is easier
@@ -74,7 +74,7 @@ const CreateShape = (props) => {
                 "name": props.shape.name, 
                 "formula": props.shape.formula,
                 "vertices": props.shape.vertices,
-                "private": true,
+                "private": props.shape.private,
                 "edges": props.shape.edges, 
                 "notes": props.shape.notes, 
                 "clipPathType": props.shape.type,
@@ -88,8 +88,6 @@ const CreateShape = (props) => {
     // Changes shapeInformation when something in ShapeForm or ShapePreview is altered
     const handleChange = (event, data, number) => {
 
-        // console.log(event, data);
-        
         const name = event.target.name || event.type;
         const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
 
@@ -131,7 +129,25 @@ const CreateShape = (props) => {
                     ...shapeInformation, 
                     "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
                     "vertices": 4, 
-                    "edges": 4, 
+                    "edges": 4,
+                    "verticeCoordinates" : [
+                        {
+                            "x": "10%", 
+                            "y": "10%", 
+                        }, 
+                        {
+                            "x": "90%", 
+                            "y": "10%", 
+                        }, 
+                        {
+                            "x": "90%", 
+                            "y": "90%", 
+                        }, 
+                        {
+                            "x": "10%", 
+                            "y": "80%", 
+                        }, 
+                    ]
                 });
             }
 
@@ -163,7 +179,7 @@ const CreateShape = (props) => {
         }
 
         // If DraggableVertice is moved, adjust verticeCoordinates and formula
-        if (name === "mousemove") {
+        if (name === "mousemove" || name === "touchmove") {
 
             const newVerticeCoordinates = addNewVerticeCoordinates(data.x, data.y, number);
             const newFormula = generateNewFormula(newVerticeCoordinates);
@@ -193,7 +209,8 @@ const CreateShape = (props) => {
         }
 
         // If delete button is pressed and passes a number that corresponds to the vertice, remove the corresponding verticeCoordinate and adjust formula
-        if (event.target.id.includes("deleteButton") && number !== undefined) {
+        if ((event.target.id.includes("deleteButton") 
+            || event.target.parentElement.id.includes("deleteButton")) && number !== undefined) {
 
             let newVerticeCoordinates = []; 
 
@@ -302,34 +319,28 @@ const CreateShape = (props) => {
         // Editing Shape
         if (props.edit) {
 
-            const editShape = await harperFetch({
-                operation: "sql", 
-                sql: `
-                    UPDATE tryshape.shapes
-                    SET
-                        name = '${shapeInformation.name}', 
-                        formula = '${shapeInformation.formula}', 
-                        vertices = '${shapeInformation.vertices}', 
-                        private = '${shapeInformation.private}', 
-                        edges = '${shapeInformation.edges}', 
-                        notes = '${shapeInformation.notes}', 
-                        type = '${shapeInformation.clipPathType}', 
-                        backgroundColor = '${shapeInformation.backgroundColor}'
-                    WHERE
-                        shape_id === '${props.shape.shape_id}'
-                `
+            const updateShapeResponse = await axios.post('/api/PUT/shape', {
+                shapeId: props.shape.shape_id,
+                name: shapeInformation.name, 
+                formula: shapeInformation.formula, 
+                vertices: shapeInformation.vertices, 
+                visibility: shapeInformation.private, 
+                edges: shapeInformation.edges, 
+                notes: shapeInformation.notes, 
+                type: shapeInformation.clipPathType, 
+                backgroundColor: shapeInformation.backgroundColor
             });
+            const editShape = updateShapeResponse.data;
+            console.log({editShape});
 
-            console.log(editShape);
-
-            if (editShape["update_hashes"].length > 0) {
+            if (editShape.data["update_hashes"].length > 0) {
                 props.handleClose();
                 toast.success(`Shape ${shapeInformation.name} edited successfully.`);
                 props.setShapeAction({
                     ...props.shapeAction, 
                     "action": "edit",
                     "payload": {
-                        "shape_id": editShape['update_hashes']
+                        "shape_id": editShape.data['update_hashes']
                     } 
                 });
             } else {
@@ -340,30 +351,43 @@ const CreateShape = (props) => {
         } else { 
 
             // Create the shape in the DB
-            const insertShape = await harperFetch({
-                operation: "sql",
-                sql: `INSERT into tryshape.shapes(backgroundColor, createdAt, createdBy, edges, email, formula, likes, name, notes, private, type, vertices) 
-                values('${shapeInformation.backgroundColor}', null, '${props.user.email}', ${shapeInformation.edges}, null, '${shapeInformation.formula}', 0, '${shapeInformation.name}', '${shapeInformation.notes}', ${shapeInformation.private}, '${shapeInformation.clipPathType}', ${shapeInformation.vertices})`,
+            const insertShapeResponse = await axios.post('/api/POST/shape', {
+                name: shapeInformation.name, 
+                formula: shapeInformation.formula, 
+                vertices: shapeInformation.vertices, 
+                visibility: shapeInformation.private, 
+                edges: shapeInformation.edges, 
+                notes: shapeInformation.notes, 
+                type: shapeInformation.clipPathType, 
+                backgroundColor: shapeInformation.backgroundColor,
+                createdBy: props.user.email,
+                likes: 0
             });
+            const insertShape = insertShapeResponse.data
 
-            console.log(insertShape);
+            console.log({insertShape});
 
             // Create the user in the db
-            if (insertShape['inserted_hashes'].length > 0) {
+            if (insertShape.data['inserted_hashes'].length > 0) {
                 // First check if the user exist
-                const result = await harperFetch({
-                    operation: "sql",
-                    sql: `SELECT count(*) from tryshape.users WHERE email='${props.user.email}'`,
-                });
-                const count = (result[0]['COUNT(*)']);
+                const userResponse = await axios.get("/api/GET/user", {
+                    params: {
+                      email: props.user.email
+                    }
+                  });
+                const result = userResponse.data;
+                const count = result.length;
                 console.log({count});
+
                 // If doesn't exist, create in db
                 if (count === 0) {
-                    const insertUser = await harperFetch({
-                        operation: "sql",
-                        sql: `INSERT into tryshape.users(email, name, photoURL) 
-                            values('${props.user.email}', '${props.user.displayName}', '${props.user.photoURL}')`,
+                    const insertUserResponse = await axios.post('/api/POST/user', {
+                        displayName: props.user.displayName, 
+                        email: props.user.email, 
+                        photoURL: props.user.photoURL
                     });
+                    const insertUser = insertUserResponse.data;
+                    console.log({insertUser});
                 } else {
                     console.log(`The user ${props.user.email} present in DB`);
                 }
@@ -378,7 +402,7 @@ const CreateShape = (props) => {
                     ...props.shapeAction, 
                     "action": "add",
                     "payload": {
-                        "shape_id": insertShape['inserted_hashes']
+                        "shape_id": insertShape.data['inserted_hashes']
                     } 
                 });
 

components/core/DeleteShape.js

@@ -1,12 +1,15 @@
 import React from "react";
 
+// axios
+import axios from "axios";
+
+// bootstrap
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 
+// toast
 import toast from "react-hot-toast";
 
-import { harperFetch } from "../../utils/HarperFetch";
-
 // Styled Component
 import styled from "styled-components";
 
@@ -46,25 +49,20 @@ const ContentWrapper = styled.div`
 const DeleteShape = ({ show, setShow, shape, shapeAction, setShapeAction }) => {
 
     const handleDelete = async() => {
-        const deleteShape = await harperFetch({
-            operation: "sql", 
-                sql: `
-                    DELETE FROM tryshape.shapes
-                    WHERE
-                        shape_id === '${shape.shape_id}'
-                `
+        const deleteShapeResponse = await axios.post('/api/DELETE/shape', {
+            shapeId: shape.shape_id
         });
+        const deleteShape = deleteShapeResponse.data;
+        console.log({deleteShape});
 
-        console.log(deleteShape);
-
-        if (deleteShape["deleted_hashes"].length > 0) {
+        if (deleteShape.data["deleted_hashes"].length > 0) {
             setShow(false);
             toast.success(`Shape ${shape.name} deleted successfully.`);
             setShapeAction({
                 ...shapeAction, 
                 "action": "delete",
                 "payload": {
-                    "shape_id": deleteShape["deleted_hashes"]
+                    "shape_id": deleteShape.data["deleted_hashes"]
                 } 
             });
         } else {

components/core/Landing.js

@@ -460,7 +460,7 @@ const Landing = ({ setOpen, user, setUser }) => {
                         </p>
                         <BannerBodyActions>
                           <Link href="/app"><Button className="banner-action--primary"><FiPenTool/>Try Now</Button></Link>
-                          <Link href="/app"><Button variant="outline-secondary"><FiGithub />GitHub</Button></Link>
+                          <a href="https://github.com/TryShape" target="_blank" rel="noopener noreferrer"><Button variant="outline-secondary"><FiGithub />GitHub</Button></a>
                         </BannerBodyActions>
                       </Col>
                     </Row>
@@ -557,11 +557,11 @@ const Landing = ({ setOpen, user, setUser }) => {
             <SectionContact id="contact">
               <Container>
                 <SocialLinks>
-                  <a href="https://github.com/TryShape" target="_blank"><FiGithub /></a>
-                  <a href="https://twitter.com/tapasadhikary" target="_blank"><FiTwitter /></a>
-                  <a href="https://www.linkedin.com/in/tapasadhikary/" target="_blank"><FiLinkedin /></a>
-                  <a href="https://www.youtube.com/c/TapasAdhikary/featured"><FiYoutube /></a>
-                  <a href="mailto:tapas.adhikary@gmail.com"><FiMail /></a>
+                  <a href="https://github.com/TryShape" target="_blank" rel="noopener noreferrer"><FiGithub /></a>
+                  <a href="https://twitter.com/tapasadhikary" target="_blank" rel="noopener noreferrer"><FiTwitter /></a>
+                  <a href="https://www.linkedin.com/in/tapasadhikary/" target="_blank" rel="noopener noreferrer"><FiLinkedin /></a>
+                  <a href="https://www.youtube.com/c/TapasAdhikary/featured" rel="noopener noreferrer"><FiYoutube /></a>
+                  <a href="mailto:tapas.adhikary@gmail.com" rel="noopener noreferrer"><FiMail /></a>
                 </SocialLinks>
                 <SectionContactCredits className="text-center"><small>TryShape is an opensource project developed by <a href="https://tapasadhikary.com/" target="_blank">Tapas Adhikary</a> and friends.</small></SectionContactCredits>
               </Container>

components/utils/DraggableVertice.js

@@ -3,6 +3,9 @@ import React, { useRef } from "react";
 // react-draggable npm
 import Draggable from "react-draggable";
 
+// icon
+import { FiDelete } from "react-icons/fi";
+
 // Styled Component
 import styled from "styled-components";
 
@@ -56,14 +59,28 @@ const DraggableVertice = (props) => {
                             } else {
                                 props.setFocusNumber(-1);
                             }
-                        }} 
+                        }}
+                        onTouchStart={() => {
+                            if (show === false) {
+                                props.setFocusNumber(props.number);
+                            } else {
+                                props.setFocusNumber(-1);
+                            }
+                        }}
                         ref={target}
                     />
             </Draggable>
 
-            <Overlay target={target.current} show={show} placement="right">
+            <Overlay target={target.current} 
+                show={show} 
+                placement={x > 250 ? "left" : "right"}>
                 <Tooltip>
-                    <span id={"deleteButton" + props.number} onMouseUp={handleDelete} style={{ cursor: "pointer" }}>X</span>
+                <FiDelete
+                    size="24px"
+                    id={"deleteButton" + props.number}
+                    onMouseUp={handleDelete}
+                    style={{ cursor: "pointer" }}
+                    />
                 </Tooltip>
             </Overlay>
         </>