diff --git a/README.md b/README.md index 3d3ae18..17cbf89 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ https://app.circleci.com/pipelines/github/CPSECapstone ## Glossary -**UserInterface-as-a-Service** Date and UI compenents that can be effortlessly inserted into any apllications UI +**UserInterface-as-a-Service** Date and UI components that can be effortlessly inserted into any apllications UI **Tokenization** The process of turning sensitive pieces of data into a non-sensitive random string of characters that has no value if breached. diff --git a/frontend/package.json b/frontend/package.json index 16ee675..3ae06ba 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "prop-types": "^15.7.2", "react": "^16.13.1", "react-bootstrap": "^1.0.1", + "react-chat-plugin": "^0.1.17", "react-dom": "^16.13.1", "react-icons": "^4.2.0", "react-redux": "^7.2.0", diff --git a/frontend/src/app/app.js b/frontend/src/app/app.js index bd8dad7..8f9630e 100644 --- a/frontend/src/app/app.js +++ b/frontend/src/app/app.js @@ -43,7 +43,7 @@ if (localStorage.jwtToken) { } function App () { - return ( + return ( diff --git a/frontend/src/components/DropDownMenu/DropDownMenu.jsx b/frontend/src/components/DropDownMenu/DropDownMenu.jsx new file mode 100644 index 0000000..855287a --- /dev/null +++ b/frontend/src/components/DropDownMenu/DropDownMenu.jsx @@ -0,0 +1,42 @@ +import React, { Component, useState } from "react"; +import { + Container, + DropDownHeader, + DropDownListContainer, + DropDownList, + ListItem +} from "./DropDownMenu.styled"; + +const options = ["Apps", "Account", "Questions"]; + +export default function DropDownMenu() { + const [isOpen, setIsOpen] = useState(false); + + const [selectedOption, setSelectedOption] = useState(null); + + const toggling = () => setIsOpen(!isOpen); + + const onOptionClicked = value => () => { + setSelectedOption(value); + setIsOpen(false); + }; + + return ( + + + {selectedOption || "Welcome, Joe!"} + + {isOpen && ( + + + {options.map(option => ( + onOptionClicked() } key={Math.random()}> + {option} + + ))} + + + )} + + ); +} diff --git a/frontend/src/components/DropDownMenu/DropDownMenu.styled.js b/frontend/src/components/DropDownMenu/DropDownMenu.styled.js new file mode 100644 index 0000000..6d4330e --- /dev/null +++ b/frontend/src/components/DropDownMenu/DropDownMenu.styled.js @@ -0,0 +1,48 @@ +import styled from 'styled-components'; + + +export const Container = styled.div` + padding-top: 12px; + flex: 1; + background-color: transparent; + + &:hover { + cursor: pointer; + } +`; + +export const DropDownHeader = styled.div` + padding-top: 12px; + margin-bottom: 10px; + padding: 5px 16px 5px 20px; + font-weight: 500; + font-size: 20px; + color: #3faffa; + background: #ffffff; +`; + +export const DropDownListContainer = styled.div` + padding-top: 12px; + width: 160px; + margin: 0 auto; +`; + +export const DropDownList = styled.ul` + padding: 0; + margin: 0; + padding-left: 0px; + background: #ffffff; + border: 2px solid #e5e5e5; + box-sizing: border-box; + color: #3faffa; + font-size: 20px; + font-weight: 600; + &:first-child { + padding-top: 8px; + } +`; + +export const ListItem = styled.ul` + list-style: none; + margin-bottom: 8px; +`; \ No newline at end of file diff --git a/frontend/src/components/NavBar/NavBar.jsx b/frontend/src/components/NavBar/NavBar.jsx index 6b85bdc..47bec13 100644 --- a/frontend/src/components/NavBar/NavBar.jsx +++ b/frontend/src/components/NavBar/NavBar.jsx @@ -2,6 +2,7 @@ import React, { Component } from "react"; import { withRouter } from "react-router-dom"; import PropTypes from "prop-types"; import { connect } from "react-redux"; +import DropDownMenu from "../DropDownMenu/DropDownMenu"; import { logoutUser } from "../../actions/authActions"; import { Container, @@ -33,7 +34,7 @@ class NavBar extends Component { {auth.isAuthenticated ? ( - {`Logged in as: ${userName}`} + ) : ( diff --git a/frontend/src/images/gray.jpg b/frontend/src/images/gray.jpg new file mode 100644 index 0000000..f31f5ca Binary files /dev/null and b/frontend/src/images/gray.jpg differ diff --git a/frontend/src/images/logo.png b/frontend/src/images/logo.png new file mode 100644 index 0000000..cf923dd Binary files /dev/null and b/frontend/src/images/logo.png differ diff --git a/frontend/src/images/real.png b/frontend/src/images/real.png new file mode 100644 index 0000000..8476805 Binary files /dev/null and b/frontend/src/images/real.png differ diff --git a/frontend/src/images/test.PNG b/frontend/src/images/test.PNG new file mode 100644 index 0000000..78834ab Binary files /dev/null and b/frontend/src/images/test.PNG differ diff --git a/frontend/src/images/testLOGO.jpg b/frontend/src/images/testLOGO.jpg new file mode 100644 index 0000000..0fee250 Binary files /dev/null and b/frontend/src/images/testLOGO.jpg differ diff --git a/frontend/src/pages/Login/Login.styled.js b/frontend/src/pages/Login/Login.styled.js new file mode 100644 index 0000000..aa8fbff --- /dev/null +++ b/frontend/src/pages/Login/Login.styled.js @@ -0,0 +1,98 @@ +import styled from 'styled-components' +import gray from '../../images/gray.jpg'; + +export const MainHeader = styled.h1` + position: absolute; + font-family: 'Trebuchet MS', sans-serif; + text-align: center; + left: 27%; + color: white; + top: 1%; +`; + +export const TextWrapper = styled.body` + position: absolute; + top: 50%; + left: 35%; + width: 900px; + height: 600px; + padding: 40px; + padding-top: 50px; + box-sizing: border-box; + transform: translate(-50%, -50%); + box-shadow: 0 1px 15px; + color: #FFFFE0; + border-radius: 20px; + +`; + +export const Button = styled.button` + /* This renders the buttons above... Edit me! */ + display: inline-block; + font-family: 'Trebuchet MS', sans-serif; + border-radius: 20px; //button shape + padding: 8px; + margin: 10px 60px; + width: 150px; + color: black; + border: 2px solid black; + background-color: #A9A9A9; + :hover { + cursor: pointer; + background: #FFFFE0; + transition: 0.2s ease-in-out; + } +`; + +export const Input = styled.input` + display: block; + text-align: left; + font-family: 'Trebuchet MS', sans-serif; + width: 200px; + padding: 10px 10px; //inside padding + margin: 20px auto; + background: transparent; + border: 2px solid #FFFFE0 +; + color: white; + cursor: pointer; + font-size: 15px; + border-radius: 20px; + outline: none; + ::placeholder { + font-family: 'Trebuchet MS', sans-serif; + } +`; + +export const Label = styled.label` + position: absolute; + top: 5%; + left: 34%; + margin: 0 0 30px; + font-family: 'Trebuchet MS', sans-serif; + color: white; + text-align: center; + font-size: 30px; + font-weight: bold; +`; + +export const LoginWrapper = styled.body` + position: absolute; + top: 50%; + left: 80%; + width: 350px; + height: 270px; + padding: 40px; + padding-top: 50px; + box-sizing: border-box; + transform: translate(-50%, -50%); + box-shadow: 0 15px 25px rgba(0,0,0,1); + border-radius: 20px; +`; + +export const LoginContainer = styled.div` + background-image: url(${gray}); + height: 100vh; + background-position: center; + background-size: cover; +`; \ No newline at end of file diff --git a/frontend/src/pages/Login/Login.test.js b/frontend/src/pages/Login/Login.test.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/Register/Register.styled.js b/frontend/src/pages/Register/Register.styled.js new file mode 100644 index 0000000..cfbcf4b --- /dev/null +++ b/frontend/src/pages/Register/Register.styled.js @@ -0,0 +1,72 @@ +import styled from 'styled-components' +import gray from '../../images/gray.jpg'; + +export const Button = styled.button` + display: inline-block; + font-family: 'Trebuchet MS', sans-serif; + border-radius: 20px; //button shape + padding: 8px; + margin: 10px 60px; + width: 150px; + color: black; + border: 2px solid black; + background-color: #A9A9A9; + :hover { + cursor: pointer; + background: #FFFFE0; + transition: 0.2s ease-in-out; + } +`; + +export const Input = styled.input` + display: block; + text-align: left; + font-family: 'Trebuchet MS', sans-serif; + width: 200px; + padding: 10px 10px; //inside padding + margin: 20px auto; + background: transparent; + border: 2px solid #FFFFE0 +; + color: white; + cursor: pointer; + font-size: 15px; + border-radius: 20px; + outline: none; + ::placeholder { + font-family: 'Trebuchet MS', sans-serif; + } +`; + +export const Label = styled.label` + position: absolute; + top: 5%; + left: 34%; + margin: 0 0 30px; + font-family: 'Trebuchet MS', sans-serif; + color: white; + text-align: center; + font-size: 30px; + font-weight: bold; +`; + +export const Wrapper = styled.body` + position: absolute; + top: 40%; + left: 50%; + width: 350px; + height: 400px; + padding: 40px; + padding-top: 50px; + box-sizing: border-box; + transform: translate(-50%, -50%); + box-shadow: 0 15px 25px rgba(0,0,0,1); + border-radius: 20px; +`; + +export const LoginContainer = styled.div` + background-image: url(${gray}); + height: 100vh; + background-position: center; + background-size: cover; +`; diff --git a/frontend/src/pages/Register/Register.test.js b/frontend/src/pages/Register/Register.test.js new file mode 100644 index 0000000..e69de29