From a1cdb166f87f38f6ecaaeb4fe22ed17561d38df4 Mon Sep 17 00:00:00 2001 From: Brian Date: Mon, 21 Oct 2019 09:00:18 -0500 Subject: [PATCH 1/5] Enabled actual form fields and changed 'page not found' page. --- react_app/src/pages/Home.js | 2 +- react_app/src/pages/NoMatch.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/react_app/src/pages/Home.js b/react_app/src/pages/Home.js index 0d5c10c..65b5899 100644 --- a/react_app/src/pages/Home.js +++ b/react_app/src/pages/Home.js @@ -8,7 +8,7 @@ class Home extends Component { return (
- {/*<Form />*/} + <Form /> <PracticeForm /> </div> ) diff --git a/react_app/src/pages/NoMatch.js b/react_app/src/pages/NoMatch.js index 6b6dddb..b0ccc7d 100644 --- a/react_app/src/pages/NoMatch.js +++ b/react_app/src/pages/NoMatch.js @@ -5,7 +5,7 @@ class NoMatch extends Component { render() { return ( <div className={'container'}> - <h1>No Match Found</h1> + <h1>Page Not Found</h1> </div> ); } From 314e204763f1a6a7af0ee1882ebdeb61d8c313f9 Mon Sep 17 00:00:00 2001 From: Brian <brian.nickila@gmail.com> Date: Thu, 24 Oct 2019 12:05:52 -0500 Subject: [PATCH 2/5] Request and response are both going through the axios.post. Response is being console.logged right now. Now we need to display the response in the table. --- backend_app/app.py | 11 ++- react_app/src/components/Form.js | 134 +++++++++++++++++++++---------- react_app/src/pages/Home.js | 4 +- react_app/src/utils/API.js | 3 +- 4 files changed, 103 insertions(+), 49 deletions(-) diff --git a/backend_app/app.py b/backend_app/app.py index 6ca6003..db21e67 100644 --- a/backend_app/app.py +++ b/backend_app/app.py @@ -3,6 +3,8 @@ from backend_app.process_request import RequestHandler from backend_app import view from backend_app.resources import get_resource +from flask_cors import CORS, cross_origin + with open(get_resource('idp.yml')) as c_file: RequestHandler.idp_repo = yaml.safe_load(c_file) @@ -12,10 +14,13 @@ app = Flask(__name__, template_folder=get_resource('templates'), - static_folder=get_resource('static')) - + static_folder=get_resource('static'), + ) +CORS(app) app.register_blueprint(view.view) if __name__ == '__main__': app.debug = True - app.run() + app.run( + use_reloader=False + ) diff --git a/react_app/src/components/Form.js b/react_app/src/components/Form.js index 3565e36..f3826c3 100644 --- a/react_app/src/components/Form.js +++ b/react_app/src/components/Form.js @@ -1,51 +1,97 @@ -import React, { Component } from "react"; +import React, { Component } from 'react'; import "../index.css"; +import axios from "axios" class Form extends Component { - render() { - return ( - <div className={'container'}> - <form> - <div className="form-row"> - <div className="col-7"> - <div className="input-group mb-3 field"> - <div className="input-group-prepend"> - <span className="input-group-text">Upload</span> - </div> - <div className="custom-file"> - <input type="file" className="custom-file-input" id="inputGroupFile01" /> - <label className="custom-file-label" htmlFor="inputGroupFile01">Choose XML file</label> - </div> - </div> - </div> - <div className="col-3 field"> - <select - name="userIDP" - className="form-control" - // value={this.state.fields["userIDP"]} - // onChange={this.handleChange.bind(this, "userIDP")} - > - <option className={"grey-text"}>Select IDP...</option> - <option value="SecureAuth">SecureAuth</option> - <option value="AD FS">AD FS</option> - <option value="PingFederate">PingFederate</option> - <option value="Other">Other</option> - </select> - </div> - <div className={"col field"}> - <button - type="submit" - className="btn btn-warning" - onClick={this.handleFormSubmit} - > - SUBMIT - </button> + + state = { + saml_file: null, + idp_name: "" + } + + handleInputChange = event => { + const { name, value } = event.target; + this.setState({ + [name]: value + }); + console.log(this.state.idp_name) + } + + handleFile(e) { + let file = e.target.files[0] + this.setState({file: file}) + } + + handleUpload(e) { + let file = this.state.file + let idp_name = this.state.idp_name + let formdata = new FormData() + formdata.append('saml_file', file) + formdata.append('idp_name', idp_name) + console.log('handleUpload') + console.log(file) + + axios({ + url: "/upload", + method: "POST", + headers: { + authorization: 'your token' + }, + data: formdata + }).then((res)=> { + console.log('res') + console.log(res) + }, (err)=> { + console.log(err) + }) + } + + render() { + return ( + <div className="container"> + <form> + <div className="form-row"> + <div className="col-7"> + <div className="input-group mb-3 field"> + <div className="input-group-prepend"> + <span className="input-group-text">XML</span> + </div> + <div className="custom-file"> + <input + type="file" + name="file" + className="custom-file-input" + id="inputGroupFile01" + onChange={(e)=>this.handleFile(e)} + /> + <label className="custom-file-label" htmlFor="inputGroupFile01">Choose XML file...</label> + + </div> + </div> + </div> + + <div className="col-3 field"> + <select + className="form-control" + name="idp_name" + value={this.state.idp_name} + onChange={this.handleInputChange} + > + <option className={"grey-text"}>Select IDP...</option> + <option value="SecureAuth">SecureAuth</option> + <option value="adfs">AD FS</option> + <option value="PingFederate">PingFederate</option> + <option value="Other">Other</option> + </select> + </div> + <div className={"col field"}> + <button type="button" className="btn btn-warning mb-2" onClick={(e)=>this.handleUpload(e)}>SUBMIT</button> + </div> + </div> + </form> </div> - </div> - </form> - </div> - ); - } + ) + } } export default Form; \ No newline at end of file diff --git a/react_app/src/pages/Home.js b/react_app/src/pages/Home.js index 65b5899..dc83fba 100644 --- a/react_app/src/pages/Home.js +++ b/react_app/src/pages/Home.js @@ -2,6 +2,7 @@ import React, { Component } from "react"; import Form from "../components/Form" import Title from "../components/Title"; import PracticeForm from "../components/PracticeForm"; +import Table from "../components/Table" class Home extends Component { render() { @@ -9,7 +10,8 @@ class Home extends Component { <div> <Title /> <Form /> - <PracticeForm /> + <Table /> + {/*<PracticeForm />*/} </div> ) } diff --git a/react_app/src/utils/API.js b/react_app/src/utils/API.js index 57df48f..f8c7bb5 100644 --- a/react_app/src/utils/API.js +++ b/react_app/src/utils/API.js @@ -5,7 +5,8 @@ export default { addStuff: function (data) { console.log('data is'); console.log(data); - return axios.post("/api/data", data); + return axios.post("http://localhost:5000/upload", data); + } } \ No newline at end of file From e5e3593264e86b618cd753a8a7bf5c17364b1763 Mon Sep 17 00:00:00 2001 From: Brian <brian.nickila@gmail.com> Date: Thu, 24 Oct 2019 19:48:33 -0500 Subject: [PATCH 3/5] Removed all code from API.js --- react_app/src/utils/API.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/react_app/src/utils/API.js b/react_app/src/utils/API.js index f8c7bb5..e69de29 100644 --- a/react_app/src/utils/API.js +++ b/react_app/src/utils/API.js @@ -1,12 +0,0 @@ -import axios from "axios"; -require("dotenv").config(); - -export default { - addStuff: function (data) { - console.log('data is'); - console.log(data); - return axios.post("http://localhost:5000/upload", data); - - } - -} \ No newline at end of file From 6f0b519a331b2abadbe3afaddea60fe6ada78ac7 Mon Sep 17 00:00:00 2001 From: Brian <brian.nickila@gmail.com> Date: Tue, 29 Oct 2019 12:56:19 -0500 Subject: [PATCH 4/5] I'm able to grab the response and parse through it --- react_app/src/components/ErrorTable.js | 28 ++++++ react_app/src/components/Form.js | 120 ++++++++++++++++++++++--- react_app/src/components/Table.js | 39 ++------ react_app/src/index.css | 6 ++ react_app/src/pages/Home.js | 2 - 5 files changed, 148 insertions(+), 47 deletions(-) create mode 100644 react_app/src/components/ErrorTable.js diff --git a/react_app/src/components/ErrorTable.js b/react_app/src/components/ErrorTable.js new file mode 100644 index 0000000..2def33e --- /dev/null +++ b/react_app/src/components/ErrorTable.js @@ -0,0 +1,28 @@ +import React from "react"; +import "../index.css"; + +function ErrorTable(props) { + return ( + <div className={'container'}> + <div className={"row"}> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Value</th> + <th scope="col">Message</th> + </tr> + </thead> + <tbody> + <tr> + <td>{props.description}</td> + <td>{props.hint}</td> + <td>{props.link}</td> + </tr> + </tbody> + </div> + </div> + ); + +} + +export default ErrorTable; \ No newline at end of file diff --git a/react_app/src/components/Form.js b/react_app/src/components/Form.js index f3826c3..54d6bb0 100644 --- a/react_app/src/components/Form.js +++ b/react_app/src/components/Form.js @@ -1,12 +1,16 @@ import React, { Component } from 'react'; import "../index.css"; import axios from "axios" +import Table from "../components/Table"; +import ErrorTable from "../components/ErrorTable"; class Form extends Component { state = { saml_file: null, - idp_name: "" + idp_name: "", + data: [], + description: "" } handleInputChange = event => { @@ -14,7 +18,6 @@ class Form extends Component { this.setState({ [name]: value }); - console.log(this.state.idp_name) } handleFile(e) { @@ -28,25 +31,113 @@ class Form extends Component { let formdata = new FormData() formdata.append('saml_file', file) formdata.append('idp_name', idp_name) - console.log('handleUpload') - console.log(file) axios({ url: "/upload", method: "POST", - headers: { - authorization: 'your token' - }, data: formdata }).then((res)=> { - console.log('res') - console.log(res) + // console.log(res) + if (res.data) { + // res.data[0] = + this.setState({data: res.data}) + let jsonData = this.state.data + for (let key in jsonData) { + if (jsonData.hasOwnProperty(key)) { + // console.log(key + " description: " + JSON.stringify(jsonData[key].description)); + // console.log(key + " value: " + JSON.stringify(jsonData[key].value)); + // console.log(key + " errors: " + JSON.stringify(jsonData[key]["errors_found"])) + } + } + // Object.entries(this.state.data).map(([key, value]) =>{ + // return( + // <div>{key} : {value}</div> + // ) + // }) + } + + // this.setState({description: res.data.assertion_attributes.description}) + // console.log(this.state.description) + }, (err)=> { console.log(err) }) + } render() { + + let json = this.state.data; + let arr = []; + let valueArr = []; + let errorArr = []; + let simpleArr = []; + Object.keys(json).forEach(function(key) { + arr.push(json[key]) + + }) + for (let i=0; i < arr.length; i++) { + if ("errors_found" in arr[i]) { + Object.keys(arr[i]).forEach(function (key) { + errorArr.push(arr[i][key]) + if (typeof arr[i][key] === "object") { + console.log(arr) + console.log("==========================") + + } + }) + } + } + console.log(arr) + console.log("==========================") + // if (typeof arr[i].value === "object") { + // console.log(arr[i]) + // Object.keys(arr[i]).forEach(function (key) { + // valueArr.push(arr[i][key]) + // console.log(valueArr) + // }) + // } else { + // Object.keys(arr[i]).forEach(function (key) { + // simpleArr.push(json[key]) + // }); + // } + // } + // console.log("arr") + // console.log(arr) + // console.log("************** ERROR ARRAY **************") + // console.log(errorArr) + // console.log("*****************************************") + // console.log("************** SIMPLE ARRAY **************") + // console.log(simpleArr) + // console.log("*****************************************") + // console.log("************** VALUE ARRAY **************") + // console.log(valueArr) + // console.log("*****************************************") + // console.log("************** ALL ARRAY **************") + // console.log(arr) + // console.log("*****************************************") + + // THE FOLLOWING CODE WILL GRAB ALL NESTED KEYS AND VALUES AND CONSOLE LOG THEM + + // const group = (obj, fn) => { + // const values = Object.values(obj) + // const keys = Object.keys(obj) + // + // values.forEach(val => + // val && typeof val === "object" ? group(val, fn) : fn(val)) + // keys.forEach(key => + // key && typeof key === "object" ? group(key, fn) : fn(key)) + // } + // + // const print = (val) => console.log(val) + // console.log("+++++++++++++++++++++++++++++++++++") + // group(this.state.data, print) + // console.log("+++++++++++++++++++++++++++++++++++") + + + + + return ( <div className="container"> <form> @@ -78,15 +169,20 @@ class Form extends Component { onChange={this.handleInputChange} > <option className={"grey-text"}>Select IDP...</option> - <option value="SecureAuth">SecureAuth</option> <option value="adfs">AD FS</option> - <option value="PingFederate">PingFederate</option> - <option value="Other">Other</option> + <option value="azure">Azure</option> + <option value="shibboleth">Shibboleth</option> + <option value="google">Google</option> + <option value="wso2">WSO2</option> + <option value="okta">Okta</option> + <option value="other">Other</option> </select> </div> <div className={"col field"}> <button type="button" className="btn btn-warning mb-2" onClick={(e)=>this.handleUpload(e)}>SUBMIT</button> </div> + <table className="table borderless results-table col-9 mx-auto">{errorArr.map(item => <ErrorTable key={item.label} hint={item["hint"]} description={item.description} link={item.link} />)}</table> + <table className="table borderless results-table col-9 mx-auto">{arr.map(item => <Table key={item.label} description={item.description} value={item.value} />)}</table> </div> </form> </div> diff --git a/react_app/src/components/Table.js b/react_app/src/components/Table.js index b07b660..2c82813 100644 --- a/react_app/src/components/Table.js +++ b/react_app/src/components/Table.js @@ -1,12 +1,12 @@ import React from "react"; import "../index.css"; -class Table extends React.Component { - render() { +function Table(props) { return ( <div className={'container'}> <div className={"row"}> - <table className="table borderless results-table col-9 mx-auto"> + <li>{props.description + " === " + props.value}</li> + <thead> <tr> <th scope="col">Attribute</th> @@ -16,41 +16,14 @@ class Table extends React.Component { </thead> <tbody> <tr> - <td>FirstName</td> - <td>Samwell</td> - <td></td> - </tr> - <tr> - <td>LastName</td> - <td>Tarly</td> - <td></td> - </tr> - <tr> - <td>Email</td> - <td><span className={"error-red"}>bigsammyt@hotmail.biz</span></td> - <td><span className={"error-red"}>Email 'bigsammyt@hotmail.biz' does not match user</span></td> - </tr> - <tr> - <td>Larry</td> - <td>the Bird</td> - <td>@twitter</td> - </tr> - <tr> - <td>Larry</td> - <td>the Bird</td> - <td>@twitter</td> - </tr> - <tr> - <td>Larry</td> - <td>the Bird</td> - <td>@twitter</td> + <td>{props.description}</td> + <td>{props.value}</td> </tr> </tbody> - </table> </div> </div> ); - } + } export default Table; \ No newline at end of file diff --git a/react_app/src/index.css b/react_app/src/index.css index 40cda8d..6aa537e 100644 --- a/react_app/src/index.css +++ b/react_app/src/index.css @@ -1,5 +1,7 @@ body { background-color: rgb(32, 32, 32); + /*background-color: dimgray;*/ + } h1 { @@ -13,6 +15,10 @@ label { color: white; } +li { + color: white; +} + .grey-text { color: red; } diff --git a/react_app/src/pages/Home.js b/react_app/src/pages/Home.js index dc83fba..0d30787 100644 --- a/react_app/src/pages/Home.js +++ b/react_app/src/pages/Home.js @@ -10,8 +10,6 @@ class Home extends Component { <div> <Title /> <Form /> - <Table /> - {/*<PracticeForm />*/} </div> ) } From 0ce1197ec67f698ff4f63934d10e3d883f3a6dde Mon Sep 17 00:00:00 2001 From: Brian <brian.nickila@gmail.com> Date: Wed, 30 Oct 2019 15:47:42 -0500 Subject: [PATCH 5/5] Able to display the results in the correct order. --- react_app/src/components/AssertionCard.js | 67 +++++++++ react_app/src/components/DestinationCard.js | 37 +++++ react_app/src/components/Form.js | 142 +++++++------------- react_app/src/components/MappedCard.js | 39 ++++++ react_app/src/index.css | 27 ++-- react_app/src/pages/Home.js | 1 + 6 files changed, 213 insertions(+), 100 deletions(-) create mode 100644 react_app/src/components/AssertionCard.js create mode 100644 react_app/src/components/DestinationCard.js create mode 100644 react_app/src/components/MappedCard.js diff --git a/react_app/src/components/AssertionCard.js b/react_app/src/components/AssertionCard.js new file mode 100644 index 0000000..48f8b9c --- /dev/null +++ b/react_app/src/components/AssertionCard.js @@ -0,0 +1,67 @@ +import React from "react"; +import "../index.css"; + +function AssertionCard(props) { + + if (props.res.assertion_attributes) { + let link = props.res.assertion_attributes.errors_found.link; + let description = props.res.assertion_attributes.description; + let keyArr = []; + let values = props.res.assertion_attributes.value; + for (let key in values) { + if(values.hasOwnProperty(key)) { + keyArr.push(key) + } + } + const assertKeys = keyArr.map((key) => + <li>{key} : {values[key]}</li> + ); + + if (props.res.assertion_attributes.errors_found) { + let errors = props.res.assertion_attributes.errors_found; + let errorArr = []; + for (let key in errors) { + if (errors.hasOwnProperty(key)) { + errorArr.push(key) + } + } + const assertErrors = errorArr.map((key) => + <li>{errors[key]}</li> + ) + + return ( + <div className="card error-card"> + <div className="card-body"> + <h5 className="card-title error-title">Assertion Attributes</h5> + <p className="card-text">{description}</p> + <p className="card-text">{assertKeys}</p> + <p className="card-text">{assertErrors}</p> + <a href={link} className="card-link">{link}</a> + </div> + </div> + ); + } + + return ( + <div className="card"> + <div className="card-body"> + <h5 className="card-title">Assertion Attributes</h5> + <p className="card-text">{description}</p> + <p className="card-text">{assertKeys}</p> + <a href={link} className="card-link">{link}</a> + </div> + </div> + ); + } else { + return( + <div> + + </div> + ) + } + + + +} + +export default AssertionCard; \ No newline at end of file diff --git a/react_app/src/components/DestinationCard.js b/react_app/src/components/DestinationCard.js new file mode 100644 index 0000000..0a0ee62 --- /dev/null +++ b/react_app/src/components/DestinationCard.js @@ -0,0 +1,37 @@ +import React from "react"; +import "../index.css"; + +function DestinationCard(props) { + // console.log("Destination Card") + // console.log(props.res.destination) + if (props.res.destination) { + return ( + <div className={'container'}> + <div className={"row"}> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Value</th> + <th scope="col">Message</th> + </tr> + </thead> + <tbody> + <tr> + <td>{props.res.destination.description}</td> + <td>{props.res.destination.value}</td> + </tr> + </tbody> + </div> + </div> + ); + } else { + return( + <div> + + </div> + ) + } + +} + +export default DestinationCard; \ No newline at end of file diff --git a/react_app/src/components/Form.js b/react_app/src/components/Form.js index 54d6bb0..e2d2d3e 100644 --- a/react_app/src/components/Form.js +++ b/react_app/src/components/Form.js @@ -1,8 +1,10 @@ import React, { Component } from 'react'; import "../index.css"; -import axios from "axios" +import axios from "axios"; import Table from "../components/Table"; -import ErrorTable from "../components/ErrorTable"; +import MappedCard from "../components/MappedCard"; +import DestinationCard from "./DestinationCard"; +import AssertionCard from "./AssertionCard"; class Form extends Component { @@ -10,7 +12,7 @@ class Form extends Component { saml_file: null, idp_name: "", data: [], - description: "" + // description: "" } handleInputChange = event => { @@ -21,121 +23,72 @@ class Form extends Component { } handleFile(e) { - let file = e.target.files[0] + let file = e.target.files[0]; this.setState({file: file}) } handleUpload(e) { - let file = this.state.file - let idp_name = this.state.idp_name - let formdata = new FormData() - formdata.append('saml_file', file) - formdata.append('idp_name', idp_name) + let file = this.state.file; + let idp_name = this.state.idp_name; + let formdata = new FormData(); + formdata.append('saml_file', file); + formdata.append('idp_name', idp_name); axios({ url: "/upload", method: "POST", data: formdata }).then((res)=> { - // console.log(res) if (res.data) { // res.data[0] = this.setState({data: res.data}) - let jsonData = this.state.data - for (let key in jsonData) { - if (jsonData.hasOwnProperty(key)) { - // console.log(key + " description: " + JSON.stringify(jsonData[key].description)); - // console.log(key + " value: " + JSON.stringify(jsonData[key].value)); - // console.log(key + " errors: " + JSON.stringify(jsonData[key]["errors_found"])) - } - } + + // console.log("ARR BELOW") + // console.log(arr) // Object.entries(this.state.data).map(([key, value]) =>{ // return( // <div>{key} : {value}</div> // ) // }) } - - // this.setState({description: res.data.assertion_attributes.description}) - // console.log(this.state.description) - }, (err)=> { console.log(err) }) - } render() { - - let json = this.state.data; - let arr = []; - let valueArr = []; + let keyArr = []; let errorArr = []; - let simpleArr = []; - Object.keys(json).forEach(function(key) { - arr.push(json[key]) - - }) - for (let i=0; i < arr.length; i++) { - if ("errors_found" in arr[i]) { - Object.keys(arr[i]).forEach(function (key) { - errorArr.push(arr[i][key]) - if (typeof arr[i][key] === "object") { - console.log(arr) - console.log("==========================") + let jsonData = this.state.data; - } - }) - } + for (let key in jsonData) { + if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes" && !("errors_found" in jsonData[key])) { + keyArr.push(key); + } else if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes" && ("errors_found" in jsonData[key])) { + errorArr.push(key); } - console.log(arr) - console.log("==========================") - // if (typeof arr[i].value === "object") { - // console.log(arr[i]) - // Object.keys(arr[i]).forEach(function (key) { - // valueArr.push(arr[i][key]) - // console.log(valueArr) - // }) - // } else { - // Object.keys(arr[i]).forEach(function (key) { - // simpleArr.push(json[key]) - // }); - // } - // } - // console.log("arr") - // console.log(arr) - // console.log("************** ERROR ARRAY **************") - // console.log(errorArr) - // console.log("*****************************************") - // console.log("************** SIMPLE ARRAY **************") - // console.log(simpleArr) - // console.log("*****************************************") - // console.log("************** VALUE ARRAY **************") - // console.log(valueArr) - // console.log("*****************************************") - // console.log("************** ALL ARRAY **************") - // console.log(arr) - // console.log("*****************************************") - - // THE FOLLOWING CODE WILL GRAB ALL NESTED KEYS AND VALUES AND CONSOLE LOG THEM - - // const group = (obj, fn) => { - // const values = Object.values(obj) - // const keys = Object.keys(obj) - // - // values.forEach(val => - // val && typeof val === "object" ? group(val, fn) : fn(val)) - // keys.forEach(key => - // key && typeof key === "object" ? group(key, fn) : fn(key)) - // } - // - // const print = (val) => console.log(val) - // console.log("+++++++++++++++++++++++++++++++++++") - // group(this.state.data, print) - // console.log("+++++++++++++++++++++++++++++++++++") - - - + } + const mappedKeys = keyArr.map((key) => + <div className="card"> + <div className="card-body"> + <h5 className="card-title">{key}</h5> + <p className="card-text">{jsonData[key].description}</p> + <p className="card-text">{jsonData[key].value}</p> + </div> + </div> + ); + const errorKeys = errorArr.map((key) => + <div className="card error-card"> + <div className="card-body"> + <h5 className="card-title error-title">{key}</h5> + <p className="card-text">{jsonData[key].description}</p> + <p className="card-text">{jsonData[key].value}</p> + <p className="card-text">{jsonData[key].errors_found.description}</p> + <p className="card-text">{jsonData[key].errors_found.hint}</p> + <a href={jsonData[key].errors_found.link} className="card-text">{jsonData[key].errors_found.link}</a> + </div> + </div> + ); return ( @@ -181,8 +134,13 @@ class Form extends Component { <div className={"col field"}> <button type="button" className="btn btn-warning mb-2" onClick={(e)=>this.handleUpload(e)}>SUBMIT</button> </div> - <table className="table borderless results-table col-9 mx-auto">{errorArr.map(item => <ErrorTable key={item.label} hint={item["hint"]} description={item.description} link={item.link} />)}</table> - <table className="table borderless results-table col-9 mx-auto">{arr.map(item => <Table key={item.label} description={item.description} value={item.value} />)}</table> + <AssertionCard res={this.state.data} /> + {/*<MappedCard res={this.state.data}/>*/} + <li>{errorKeys}</li> + <li>{mappedKeys}</li> + + {/*<li>{arr.map(item => <MappedCard description={item.description} value={item.value} />)}</li>*/} + {/*<table className="table borderless results-table col-9 mx-auto">{arr.map(item => <Table key={item.label} description={item.description} value={item.value} />)}</table>*/} </div> </form> </div> diff --git a/react_app/src/components/MappedCard.js b/react_app/src/components/MappedCard.js new file mode 100644 index 0000000..793d7c5 --- /dev/null +++ b/react_app/src/components/MappedCard.js @@ -0,0 +1,39 @@ +// import React from "react"; +// import "../index.css"; +// +// function MappedCard(props) { +// if(props.res) { +// +// let description = "" +// let keyArr = []; +// let jsonData = props.res +// +// for (let key in jsonData) { +// console.log(key); +// if (jsonData.hasOwnProperty(key) && key !== "assertion_attributes") { +// console.log("KEY BELOW"); +// console.log(key); +// keyArr.push(key); +// } +// } +// const mappedKeys = keyArr.map((key) => +// <li>{key} : {jsonData[key].description} &&& {jsonData[key].value}</li> +// ); +// +// return ( +// <div className="card error-card"> +// <div className="card-body"> +// <h5 className="card-title error-title">Assertion Attributes</h5> +// <p className="card-text">{description}</p> +// <p className="card-text">{mappedKeys}</p> +// </div> +// </div> +// ) +// } +// } +// +// +// +// +// +// export default MappedCard; \ No newline at end of file diff --git a/react_app/src/index.css b/react_app/src/index.css index 6aa537e..22128cb 100644 --- a/react_app/src/index.css +++ b/react_app/src/index.css @@ -1,11 +1,10 @@ body { - background-color: rgb(32, 32, 32); - /*background-color: dimgray;*/ + /*background-color: rgb(32, 32, 32);*/ + background-color: white; } h1 { - color: white; text-align: center; margin-top: 50px; } @@ -15,10 +14,6 @@ label { color: white; } -li { - color: white; -} - .grey-text { color: red; } @@ -45,7 +40,8 @@ table { margin-top: 50px; } thead { - background-color: #ffc107; + /*background-color: #ffc107;*/ + background-color: white; border: none; } @@ -64,4 +60,19 @@ thead { .small-form { width: 400px; +} + +.error-title { + color: red; +} +.card { + width: 18rem; +} + +.error-card { + border: red 1px solid; +} + +li { + list-style-type: none; } \ No newline at end of file diff --git a/react_app/src/pages/Home.js b/react_app/src/pages/Home.js index 0d30787..57233bd 100644 --- a/react_app/src/pages/Home.js +++ b/react_app/src/pages/Home.js @@ -3,6 +3,7 @@ import Form from "../components/Form" import Title from "../components/Title"; import PracticeForm from "../components/PracticeForm"; import Table from "../components/Table" +import MappedCard from "../components/MappedCard"; class Home extends Component { render() {