MVP, on to stretch

user-onboarding/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

user-onboarding/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

user-onboarding/README/README.md

@@ -0,0 +1,55 @@
+Module Project: Advanced Form Management - User Onboarding
+Project Description
+We've seen many different styles of form management by now -- simple to complex. Today we are going to unleash your inner form-wizard! 🧙
+
+Instructions
+
+Task 1: Set Up The Project
+ Fork and clone the repository and cd into the directory.
+ Start off by installing a blank React app by running npx create-react-app user-onboarding.
+ cd into the newly created user-onboarding folder.
+ Using npm, add the following as dependencies inside your React app:
+yup
+axios
+ Create a component file called Form.js, import it into your App.js file, and place the component in your JSX there.
+
+
+ ================================================================================================
+Task 2: MVP
+Create Your Advanced Form
+We want to create a form to onboard a new user to our system. We need at least the following pieces of information about our new user:
+
+ Name (first_name, last_name)
+ Email
+ Password
+ Terms of Service (checkbox)
+ A Submit button to send our form data to the server.
+Implement Form Validation and Error Messaging
+Form validation is one of the facets of an application that makes it feel polished and controlled from a user perspective. With that in mind, implement the following:
+
+ Using Yup, set up at least two different validations along with custom error messages that will display on screen when validation fails.
+Make a POST Request
+Being able to POST data is a key skill of any developer, no matter your skill level.
+
+ Craft a POST request using axios that sends your form data to the following endpoint: https://reqres.in/api/users
+ Verify using a console.log() that you are receiving a successful response back
+(Note: For those that are curious, we're using reqres.in for this assignment's API. It's a free API that allows us to simulate a POST request for any data that we send it. Pretty awesome!)
+
+Display Returned Data to Screen
+When you get your data back, you will want to do something with it, right? Let's display a list of users in our app.
+
+ Set up a state property called users that is initialized with an empty array
+ Every time you make a POST request, and get that new user data back, update your users state with the new user added to the array
+ Render users in your app. You can use the html pre tag and JSON.stringify() method to display your post request.
+
+=================================================================================================
+
+Task 3: Stretch Goals
+The following are stretch goals that you should attempt after you meet MVP for your project:
+
+ Add basic styling to your form in your app. Make it look pretty with any styling method you choose.
+ Implement a dropdown menu in your form. Add a role value to your state and add a dropdown with different roles for your users.
+ Create 3 new inputs inside your form of your choice along with corresponding validation and error messaging
+ Add to your existing handling so that, if a user inputs their email as waffle@syrup.com, they receive an error message in their form that says "That email is already taken."
+Submission Format
+ Submit a link to your github repository in canvas.

user-onboarding/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

user-onboarding/cypress/e2e/cypress.json

@@ -0,0 +1,4 @@
+{
+    "baseUrl":"http://localhost:3000"
+  }
+

user-onboarding/cypress/e2e/spec.cy.js

@@ -0,0 +1,94 @@
+
+
+
+describe('form', () => {
+    beforeEach(() => {
+        cy.visit("http://localhost:3000")
+    })
+
+    const firstName = () => cy.get('input[name="first_name"]')
+    const lastName = () => cy.get('input[name="last_name"]')
+    const email = () =>  cy.get('input[type="email"]')
+    const password = () => cy.get('input[type="password"]')
+    const checkbox = () => cy.get('input[type="checkbox"]')
+    const select = () => cy.get('select')
+    const button = () => cy.get('button')
+    it('make sure first name input has a string', function () {
+        firstName()
+        .type('FirstName')
+        .should('have.value', 'FirstName')
+    })
+
+    it('makes sure last name input has a string', () => {
+        lastName()
+        .type('LastName')
+        .should('have.value', 'LastName')
+    })
+
+    it('can type an email address into an input field', () => {
+        email()
+        .type('foo@bar.com')
+        .should('have.value', 'foo@bar.com')
+    })
+
+    it('types a password', () => {
+        password()
+        .type('password')
+        .should('have.value', 'password')
+    })
+
+        it('checks the checkbox', () => {
+            checkbox()
+            .check()
+            .should('have.value', 'on')
+        })
+
+    it('picks a choice in dropwdown', ()=>{
+        select()
+        .select('Cop')
+        .should('have.value', 'cop')
+    })
+
+    it('submits form', () => {
+        firstName()
+        .type('FirstName')
+        .should('have.value', 'FirstName')
+
+        lastName()
+        .type('LastName')
+        .should('have.value', 'LastName')
+
+        email()
+        .type('foo@bar.com')
+        .should('have.value', 'foo@bar.com')
+
+        password()
+        .type('password')
+        .should('have.value', 'password')
+
+        checkbox()
+            .check()
+            .should('have.value', 'on')
+
+        select()
+            .select('Cop')
+            .should('have.value', 'cop')
+
+            button().click()
+    })
+
+    it('checks if input is left open', () => {
+        cy.get('form > :nth-child(1)')
+        .should('have.class', 'red' )
+    })
+
+    it('also checks if inputs are emtpy', () => {
+        button().should('be.disabled')
+    })
+
+
+
+
+})
+
+

user-onboarding/cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl":"http://localhost:8080/"
+}

user-onboarding/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

user-onboarding/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')