-
-2. Next you will choose "GitHub" for the setup process
-
-
-
-3. Copy the SSH key from the bottom box
-
-
-
-4. Now go to your GitHub account and open the forked repository. Go to _settings_ and on the left go to _Deploy Keys_
-
-
-
-5. Click to add a new Deploy key. You will past the SSH key from CodeGrade into the "Key" input box. Then click "Add key". You will not need a name for the key, and it does not need "write" access
-
-
-
-6. In GitHub, still in _settings_, click on _Webhooks_ on the left.
-
-
-
-7. Click on "Add webhook"
-
-8. Go back to CodeGrade and click on the right arrow to go to the next step. Copy the "Payload url" string from the first box.
-
-
-
-9. In GitHub, add the url string to the "Payload url" input box.
-
-
-
-10. Now do the same for the secret. In CodeGrade, copy the secret from the second box and add it to the "secret" input in GitHub
-
-
-
-11. Click "Add webhook". Now you are all setup.
-
-12. You can test the setup by going to the 4th step in CodeGrade. Make your first commit to the main branch and push that commit. Then go back to CodeGrade and click the "Check for new git submission". It may take about 10 secoonds to find a new submission. After that point you should see that there is a new submission, and you're ready to work.
\ No newline at end of file
diff --git a/README.md b/README.md
index 2ec843396a..54111f2ac6 100644
--- a/README.md
+++ b/README.md
@@ -2,89 +2,128 @@
**Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.**
-This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project. This sprint explored **advanced web applications**. During this sprint, you studied **React testing, client-side auth, HTTP methods, and Vercel**.
+This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project.
-In your challenge this week, you will demonstrate your mastery of these skills by creating **a login page** and **basic CRUD application.**
+This is an individual assessment. All work must be your own. All projects will be submitted to codegrade for automated review. You will also be given feedback by code reviewers the Monday (Wednesday for PT) after challenge submissions. For more information on the review process [click here.](https://www.notion.so/lambdaschool/How-to-View-Feedback-in-CodeGrade-c5147cee220c4044a25de28bcb6bb54a)
-This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
+You are not allowed to collaborate during the sprint challenge.
-You are not allowed to collaborate during the sprint challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL if you need direction.
+## Introduction
-_You have **three hours** to complete this challenge. Plan your time accordingly._
+In this challenge you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the article data array, update data, and delete data.
+## Project Setup
+[ ] Run npm install to install your dependencies.
+[ ] Run npm start to run your frontend and backend code automatically.
+[ ] Note your backend code will run automatically when your run npm start. There is no need to seperately run a server.js file and no means to test the server through postman or the browser. Feel free to ignore any messages related to MSW or mock service workers.
-## Introduction
+## Project Instructions
+In this project, you will demonstrate your mastery of these skills by creating **a login page** and **basic CRUD application.** You will implement basic security using **token authentication** and build private routes within the applcation.
+
+## Project Requirements
+
+**See reference materials at the bottom of the this document for API Reference Details.**
+
+### Basic Routing
+> *Build the needed utilities to restrict access to private routes.*
+* [ ] Build a `Route` component that renders rendering `Login.js` to the path `/`.
+* [ ] Build a `Route` component that renders rendering `Login.js` to the path `/login`.
+* [ ] Build a `Route` component that renders rendering `View.js` to the path `/view`.
+* [ ] Build a `Route` component that renders rendering `Logout.js` to the path `/logout`.
-In this project you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the color data array, update data, and delete data, and watch the fun happen!
+### Login Authentication
+> *Build a login form to authenticate your users along with all the components and utilities needed to support authentication.*
-**Note** You can use the sites like the following to get color hex codes:
+* [ ] In `Login.js`, build all UI and state functionality needed to capture a username and password. On a successful login, redirect user to the `View.js` component.
+* [ ] **Make sure that the input for your username and password includes the id="username" and id="password" attributes. Codegrade autotests will fail without them.**
+* [ ] **Make sure that the submit button to your login form includes the id="submit" attribute. Codegrade autotests will fail without them.**
+* [ ] In `Login.js`, add a p tag that will display an error if one occurs. Add in all state functionality needed to support error display.
+* [ ] **Make sure your error p tag has an id="error" attribute attached. Codegrade autotests will fail without them.**
+* [ ] Construct an http request that retrieves an auth token from the server when the username `Lambda` and the password `School` is passed into the request. Complete successful login auth flow and redirect to `View.js.`
+* [ ] Display an appropriate error message when login is not successful.
-* [Color-Hex](https://www.color-hex.com/)
+### Route Authentication
+* [ ] Build a `PrivateRoute` component within the components folder.
+* [ ] Use the `PrivateRoute` component to build a route rendering `View.js` to the path `/view`.
+* [ ] Use the `PrivateRoute` component to build a route rendering `Logout.js` to the path `/logout`.
-### Commits
+### Request Authentication
+> *Complete the requests needed to execute all CRUD functions.*
+* [ ] Build a `axiosWithAuth` module within the utils folder to create an instance of axios with the authentication header.
+* [ ] Complete the `services/articleService.js` module. It should use make an authenticated call to retrieve and return all articles from the server.
-Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead as the evaluate your solution.
+* [ ] In `View.js`, when the component mounts, use `articleService` to make an http request and add all articles to state.
-## Instructions
+* [ ] In `View.js`, complete `handleDelete` so that a http request is made that deletes the article with the included id. After successfully deleting the article on the api, update local state to reflect these changes.
-### Task 1: Project Set Up
+* [ ] `editId` is passed into the `EditForm` component. In `EditForm.js`, make a http request on mount to get the article with the id `editId`. Save the result in state.
-- [ ] Create a forked copy of this project
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!)
-- [ ] Create a new branch: git checkout -b `
-
-
+
+
+ 
+
+
+
+
+
+
+
+
+
+
);
+}
+
+export default Article;
+
+
+const ArticleStyle = styled.div`
+ display: flex;
+ flex-direction: row;
+ padding: 0.5em;
+ background: grey;
+`
+
+const Container = styled.div`
+ padding: 0.5em;
+`
+
+const ButtonContainer = styled.div`
+ padding: 1em;
+ text-transform: uppercase;
+ text-align:right;
+
+ button {
+ width: 100px;
+ padding:0.5em;
+ }
+`
\ No newline at end of file
diff --git a/src/components/Article.test.js b/src/components/Article.test.js
new file mode 100644
index 0000000000..e0a145d0b5
--- /dev/null
+++ b/src/components/Article.test.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import userEvent from '@testing-library/user-event';
+import MutationObserver from 'mutationobserver-shim';
+
+import Article from './Article';
+
+test('renders component without errors', ()=> {
+});
+
+// test('renders headline, author from the article when passed in through props', ()=> {
+// });
+
+// test('renders "Associated Press" when no author is given', ()=> {
+// });
+
+// test('executes handleDelete when the delete button is pressed', ()=> {
+// });
+
+//Task List:
+//1. Complete all above tests. Create test article data when needed.
\ No newline at end of file
diff --git a/src/components/BubblePage.js b/src/components/BubblePage.js
deleted file mode 100644
index 9e46a92709..0000000000
--- a/src/components/BubblePage.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
-
-import Bubbles from "./Bubbles";
-import ColorList from "./ColorList";
-
-const BubblePage = () => {
- const [colorList, setColorList] = useState([]);
-
- return (
- <>
- {moment(article.createdOn).format("ddd, MMM Do YYYY")}
+{article.headline}
+By {article.author || "Associated Press"}
+{article.summary}
+{article.body}
+
-
- );
-};
-
-export default Bubbles;
diff --git a/src/components/Color.js b/src/components/Color.js
deleted file mode 100644
index d8673a5366..0000000000
--- a/src/components/Color.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-
-const Color = ({color, editing, editColor, deleteColor}) => {
- const handleClick = (e) => {
- e.stopPropagation();
- deleteColor(color);
- }
-
- return(bubbles
- -
- }
-
-
- );
-};
-
-export default ColorList;
-
-//Task List:
-//1. Complete the saveEdit functions by making a put request for saving colors. (Think about where will you get the id from...)
-//2. Complete the deleteColor functions by making a delete request for deleting colors.
\ No newline at end of file
diff --git a/src/components/EditForm.js b/src/components/EditForm.js
new file mode 100644
index 0000000000..d2d012c7db
--- /dev/null
+++ b/src/components/EditForm.js
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const initialArticle = {
+ id:"",
+ headline: "",
+ author: "",
+ summary: "",
+ body: ""
+};
+
+const EditForm = (props)=> {
+ const [article, setArticle] = useState(initialArticle);
+ const {handleEdit, handleEditCancel, editId} = props;
+
+ const handleChange = (e)=> {
+ setArticle({
+ ...article,
+ [e.target.name]: e.target.value
+ })
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ handleEdit(article);
+ }
+
+
+ const handleCancel = (e) => {
+ e.preventDefault();
+ handleEditCancel();
+ }
+
+ componentDidMount() {
+ // Simple GET request using axios
+ axios.get('http://localhost:5000/api/articles/editId')
+ .then(response => this.setState({ totalReactPackages: response.data.total }));
+ }
+
+ return(colors
--
- {colors.map(color => (
-
- editColor(color)}> - - { - e.stopPropagation(); - deleteColor(color) - } - }> - x - {" "} - {color.color} - - - - ))} -
Edit Article
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blogger Pro
+
+ Sprint Challenge 3.3
+ - Welcome to the Bubble App! -
Build a login page here
- - - ); -}; + const [credentials, setCredentials] = useState(state); + const {push} = useHistory(); + const state = { + + credentials: { + username: "", + password: "" + }, + errorMessage : "" + } + + axios.post("http://localhost:5000/api/login", this.state.credentials) + .then{resp => { + console.log(resp); + localStorage.setItem("token", resp.data.token); + push("/view"); + }) + .catch(err=> { + console.log(err); + setCredentials({ + ...state, + errorMessage: err.response.data.error; + }) + }) + + return(Welcome to Blogger Pro
+Please enter your account information.
+ ++{state.errorMessage} +
export default Login; -//Task List: -//1. Build a form containing a username and password field. -//2. Add whatever state nessiary for form functioning. -//3. MAKE SURE THAT FORM INPUTS INCLUDE THE LABEL TEXT "username" and "password" RESPECTIVELY. -//4. If either the username or password is not displaied display EXACTLY the following words: Username or Password not valid. -//5. If the username / password is equal to Lambda School / i<3Lambd4, save that token to localStorage. \ No newline at end of file +//Task List +//1. Build login form DOM from scratch, making use of styled components if needed. Make sure the username input has id="username" and the password input as id="password". +//2. Add in a p tag with the id="error" under the login form for use in error display. +//3. Add in necessary local state to support login form and error display. +//4. When login form is submitted, make an http call to the login route. Save the auth token on a successful response and redirect to view page. +//5. If the response is not successful, display an error statement. **a server provided error message can be found in ```err.response.data```** +//6. MAKE SURE TO ADD id="username", id="password", id="error" AND id="submit" TO THE APPROPRIATE DOM ELEMENTS. YOUR AUTOTESTS WILL FAIL WITHOUT THEM. + +const ComponentContainer = styled.div` + height: 70%; + justify-content: center; + align-items: center; + display:flex; +` + +const ModalContainer = styled.div` + width: 500px; + background: white; + padding: 2rem; + text-align: center; +` + +const Label = styled.label` + display: block; + text-align: left; + font-size: 1.5rem; +` + +const FormGroup = styled.form` + padding:1rem; +` + +const Input = styled.input` + font-size: 1rem; + padding: 1rem 0; + width:100%; +` + +const Button = styled.button` + padding:1rem; + width: 100%; +` diff --git a/src/components/Logout.js b/src/components/Logout.js new file mode 100644 index 0000000000..c5c589f4b1 --- /dev/null +++ b/src/components/Logout.js @@ -0,0 +1,24 @@ +import React from 'react'; +import {useHistory} from 'react-router'; + +const Logout = () => { + const {push}=useHistory(); + + axios.post ('http://localhost:5000/api/logout') + .then(response =>{ + localStorage.removeItem('token') + push("/") + }) + .then(data => this.setState({ totalReactPackages: data.total })); +return( + +