Post to endpoint

backend_app/app.py

@@ -3,6 +3,8 @@
 from backend_app.request_handler 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
+    )

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;

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;

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;

react_app/src/components/Form.js

@@ -1,51 +1,151 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import "../index.css";
+import axios from "axios";
+import Table from "../components/Table";
+import MappedCard from "../components/MappedCard";
+import DestinationCard from "./DestinationCard";
+import AssertionCard from "./AssertionCard";
 
 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>
+
+    state = {
+        saml_file: null,
+        idp_name: "",
+        data: [],
+        // description: ""
+    }
+
+    handleInputChange = event => {
+        const { name, value } = event.target;
+        this.setState({
+            [name]: value
+        });
+    }
+
+    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);
+
+        axios({
+            url: "/upload",
+            method: "POST",
+            data: formdata
+        }).then((res)=> {
+            if (res.data) {
+                // res.data[0] =
+                this.setState({data: res.data})
+
+                // console.log("ARR BELOW")
+                // console.log(arr)
+                // Object.entries(this.state.data).map(([key, value]) =>{
+                //     return(
+                //     <div>{key} : {value}</div>
+                //     )
+                // })
+            }
+        }, (err)=> {
+            console.log(err)
+        })
+    }
+
+    render() {
+        let keyArr = [];
+        let errorArr = [];
+        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);
+            }
+        }
+        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>
             </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>
+        );
+        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>
-            <div className={"col field"}>
-              <button
-                type="submit"
-                className="btn btn-warning"
-                onClick={this.handleFormSubmit}
-              >
-                SUBMIT
-              </button>
+        );
+
+
+        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="adfs">AD FS</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>
+                        <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>
-          </div>
-        </form>
-      </div>
-    );
-  }
+        )
+    }
 }
 
 export default Form;

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;