Initial Commit

src/components/Login/Cookie.js

@@ -0,0 +1,74 @@
+export default class Cookie
+{
+
+	static setCookie(name, value, expireDateinMin)
+	{
+		var expireTime;
+
+		if (expireDateinMin === 0)
+			expireTime = "";
+		else 
+		{
+			var date = new Date();
+			date.setTime(date.getTime() + expireDateinMin *(60 * 60 * 1000));
+			expireTime = ";expire=" + date.toUTCString();
+		}
+
+		document.cookie = name + "=" + value +";" + expireTime + ";path = /";
+	}
+
+	static setJCookie(name, value, expireDateinMin)
+	{
+		var expireTime;
+
+		if (expireDateinMin === 0)
+			expireTime = "";
+		else 
+		{
+			var date = new Date();
+			date.setTime(date.getTime() + expireDateinMin *(60 * 60 * 1000));
+			console.log(date.toUTCString() );
+			expireTime = ";expire=" + date.toUTCString();
+		}
+
+		document.cookie = name + "=" + JSON.stringify(value) +";" + expireTime + ";path = /";
+	}
+
+	static getCookie(cookieName)
+	{
+		// split by each pair. turn to array
+		let cList = document.cookie.split(';');
+		var l;
+		for (let i = 0; i < cList.length; i++)
+		{
+			l = cList[i].indexOf(cookieName);
+
+			if ( l === 1 || l === 0)
+				return cList[i];
+		}
+
+		return null;	
+	}
+
+	static cookieVal(cookie)
+	{
+		if (cookie == null)
+			return "";
+		return cookie.split('=')[1];
+	}
+
+	static cToJson(cookie)
+	{
+
+		if (cookie == null)
+			return null;
+		var a = cookie.split('=')[1];
+		return JSON.parse(a);
+	}
+
+	static delCookie(name)
+	{	
+		document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
+	}
+
+}

src/components/Login/ForgotPassword.js

@@ -0,0 +1,65 @@
+import {
+	Dialog, 
+	TextField,
+	Button,
+	Typography
+} from '@material-ui/core';
+import axios from 'axios';
+import {useState} from 'react';
+
+
+const ForgPass = (props) =>
+{
+	const [email, setEmail] = useState("");
+	const [msg, setMsg] =  useState("");
+	const [submitted, setSubmit] = useState(false);
+
+	const handleSubmit = async () => {
+		let res = {data: {message: ""}};
+
+		try {
+			res = await axios.post("https://chordeo-grapher.herokuapp.com/user/reset-password", { email })
+
+			setSubmit(true);
+			setMsg(`Password reset link sent to ${email}.`);
+		}
+		catch (err)
+		{
+			setMsg("Something went wrong.");
+		}
+
+	};
+
+	const formChange = (e) =>
+	{
+		setEmail(e.target.value);
+	};
+
+	const style = {display:'flex', flexDirection:'column',
+		alignText:'center', justifyContent:'center', 
+		margin:'4vw', borderRadius:'20px', border:'1px',	
+	};
+
+	return (
+		<Dialog open={props.toggle} onClose={props.toggle} >
+			<div style={style} >
+				{
+					!submitted?
+					<div style={style}>
+						<Typography style={{width: '40vw'}} variant="h4">
+							Enter Recovery Email
+						</Typography>
+						{/* <h1 style={{width:'40vw'}} >Enter Recovery Email</h1> */}
+						<TextField placeholder="Email" onChange={formChange} />
+						<Button onClick={handleSubmit}>Try Reset</Button>
+					</div>
+					: null
+				}
+				<Typography>{msg}</Typography>
+
+			</div>
+		</Dialog>
+	);
+}
+
+export default ForgPass;

src/components/Login/LoginForm.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { makeStyles, Typography } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import axios from 'axios';
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.spacing(2),
+
+    '& .MuiTextField-root': {
+      margin: theme.spacing(1),
+      width: '300px',
+    },
+    '& .MuiButtonBase-root': {
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
+const LoginForm = ({ handleClose }) => {
+  const classes = useStyles();
+  // create state variables for each input
+  const [firstName, setFirstName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errMsg, setErr] = useState("");
+
+  const handleSubmit = e => {
+    e.preventDefault();
+	const tempUser =
+	{
+		nickname: firstName,
+		email: email,
+		password: password,
+	}
+
+	axios.post("https://chordeo-grapher.herokuapp.com/user/signup", tempUser)
+	.then( response =>
+		{
+			if(response.data.hasOwnProperty('message'))
+			{
+				if (response.data.message.length == 43)
+				{
+					handleClose();
+					return;
+				}
+				setErr(response.data.message);
+			}
+			else
+			{
+				handleClose();
+			}
+
+		}
+	)
+	.catch( err => console.log("somethings wrong mate"))
+
+  };
+
+  return (
+    <form className={classes.root} onSubmit={handleSubmit}>
+      <TextField
+        label="Nickname"
+        variant="filled"
+        required
+        value={firstName}
+        onChange={e => setFirstName(e.target.value, setErr(""))}
+      />
+      <TextField
+        label="Email"
+        variant="filled"
+        type="email"
+        required
+        value={email}
+        onChange={e => setEmail(e.target.value, setErr(""))}
+      />
+      <TextField
+        label="Password"
+        variant="filled"
+        type="password"
+        required
+        value={password}
+        onChange={e => setPassword(e.target.value, setErr(""))}
+      />
+	  <Typography>{errMsg}</Typography>
+      <div>
+        <Button variant="contained" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained" color="primary">
+          Signup
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export default LoginForm;

src/components/Login/Login_SignUp.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import Button from '@material-ui/core/Button';
+import ModalDialog from './ModalDialog';
+
+const Login_SignUp = (props) => {
+	// declare a new state variable for modal open
+	const [open, setOpen] = useState(false);
+
+	// function to handle modal open
+	const handleOpen = () => {
+		setOpen(true);
+	};
+
+	// function to handle modal close
+	const handleClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div className="Login-SignUp" style={{ textAlign: 'center' }, props.style}>
+			<Button
+				style={{ height: 50, padding: 25, backgroundColor:'#EBAF82' }}
+				variant="contained"
+				color="default"
+				onClick={handleOpen}>
+				{props.buttonText}
+			</Button>
+			<ModalDialog open={open} handleClose={handleClose} />
+		</div>
+	);
+};
+
+export default Login_SignUp;

src/components/Login/ModalDialog.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog';
+import Form from './LoginForm';
+
+const ModalDialog = ({ open, handleClose }) => {
+  return (
+    // props received from App.js
+    <Dialog open={open} onClose={handleClose}>
+      <Form handleClose={handleClose} />
+    </Dialog>
+  );
+};
+
+export default ModalDialog;

src/components/Looper/Chordbox.js

@@ -13,7 +13,6 @@ import {
 	CardActionArea,	
 } from '@material-ui/core'
 import getAllSuggestions from '../Script/Suggest'
-// import test from '../Script/Suggest'
 import { makeStyles } from '@material-ui/core/styles'
 import EditOutlined from '@material-ui/icons/EditOutlined';
 import DeleteOutlined from '@material-ui/icons/DeleteOutline'

src/components/Looper/CustomModal.js

@@ -4,7 +4,7 @@ import {Button, IconButton, Modal} from '@material-ui/core';
 import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
 import EditOutlined from '@material-ui/icons/EditOutlined';
-import ChordSelector from './ChordSelector';
+import ChordSelector from '../Swap/ChordSelector';
 import { AddOutlined, ModeComment, Title } from '@material-ui/icons';
 
 const useStyles = makeStyles((theme) => ({

src/components/Looper/ProgLoop.js

@@ -20,12 +20,11 @@ import AudioPlayer from './AudioPlayer';
 import IconConfirm from '../Tools/IconConfirm';
 
 const ProgLoop = ({deleteLoop, id, loopData, previewFlag, updateLoop}) => {
-	// const [title, setTitle] = useState("")
+	const [title, setTitle] = useState("")
 
 	return (
 		<div>
-			<Card>
-				<Card style={{justifyContent: "center", backgroundColor: '#ffe3cf', borderRadius: '0px', marginBottom: '0.5rem'}}>
+				<Card style={{justifyContent: "center", backgroundColor: '#ffe3cf', boxShadow: '8px 8px 15px #c8bcb2, -10px -10px 30px #fffef0', borderRadius: '20px', margin: '3rem'}}>
 					<CardHeader
 						action={
 							<ButtonGroup>
@@ -73,8 +72,6 @@ const ProgLoop = ({deleteLoop, id, loopData, previewFlag, updateLoop}) => {
 
 
 				</Card>
-
-			</Card>
 		</div>
 	)
 }

src/components/Looper/ProjSelector.js

@@ -4,7 +4,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-import Cookie from '../Cookie'
+import Cookie from '../Login/Cookie'
 
 const ProjSelector = ({loadProj}) => {
 

src/components/NavBar.js

@@ -15,9 +15,9 @@ import MenuIcon from '@material-ui/icons/Menu';
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic';
 import axios from 'axios';
 import { RestoreOutlined } from '@material-ui/icons';
-import Login_SignUp from './Login_SignUp';
-import Cookie from "./Cookie"
-import ForgotPassword from './ForgotPassword'
+import Login_SignUp from './Login/Login_SignUp';
+import Cookie from "./Login/Cookie"
+import ForgotPassword from './Login/ForgotPassword'
 
 const useStyles = makeStyles((theme) => ({
 	root: {