Added UL component

src/components/actions/Error.js

@@ -2,7 +2,7 @@ import React from "react";
 
 // Generic error
 
-const Error = () => (
+export const Error = () => (
   <div>
     <div className="card-panel blue-grey darken-1">
       <div className="card-content white-text">
@@ -16,4 +16,13 @@ const Error = () => (
   </div>
 );
 
-export default Error;
+export function buildErrorStringFromArray(error) {
+  let errors = []
+  for (let key in error) {
+    errors.push(key + ": " + error[key])
+    // console.log(key + ": " + error[key])
+  } 
+  return errors
+}
+
+// export default Error;

src/components/actions/Msgbox.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { UList } from "../root/common/Functionality/UnorderedList";
 // // Generic Msgbox
 
 function Msgbox(props) {
@@ -7,9 +8,11 @@ function Msgbox(props) {
       <div className="card-content white-link">
         <center>
           <span className="card-title">
-            { props.error ? <span> { "Unable to update: " + props.error } </span> : null }
-            { props.msg ? <span className="white-text">{ "Updated migration details for: " + props.msg }</span> : null }
-            { props.linkid ? <a href={ process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid } className="white-link">{process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid }</a> : null }
+            { props.error ? <span className="white-text"> { "Unable to update: " } <UList className="white-text" listItems={props.error}></UList> </span> 
+            : props.msg ? <span className="white-text">{ "Updated migration details for: " + props.msg }</span> 
+            : props.linkid ? <a href={ process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid } 
+                                className="white-link">{process.env.REACT_APP_SITE_URL + "migrations/" +  props.linkid }</a> 
+            : null}
         </span>
         </center>
       </div>

src/components/root/Pages/GenericList.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import CompTable from "../common/Tables/CompTable";
 import { callAPI } from "../../actions/API"
-import Error from "../../actions/Error";
+import { Error } from "../../actions/Error";
 
 // Missing parent page,
 // Most of the good stuff is happening in UpcomingSingle, which does the

src/components/root/common/Forms/CPanelBooking.js

@@ -7,6 +7,7 @@ import * as Yup from "yup";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
 import Msgbox from "../../../actions/Msgbox";
+import { buildErrorStringFromArray } from "../../../actions/Error";
 // import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker";
 
 // Main form and POST Request to add migrations
@@ -36,16 +37,22 @@ const InputValidation = Yup.object().shape({
   username: Yup.string().min(2, "Too Short!").required("Required"),
   original_server: Yup.string()
     .matches(
-      /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/,
-      "Please enter a valid IPv4 Address"
+      /^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)$/,
+      "Please enter a valid IPv4 Address or domain"
     )
-    .required("Please enter a valid IP"),
+    .required("Please enter a valid IPv4 or domain"),
   new_server: Yup.string()
     .matches(
-      /^(([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)$/,
-      "Please enter a valid IPv4 Address"
+      /^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)$/,
+      "Please enter a valid IPv4 Address or domain"
     )
-    .required("Please enter a valid IP"),
+    .required("Please enter a valid IPv4 or domain"),
+    agent_booked: Yup.string().min(2, "Too short!").required("Requried"),
+    booked_time: Yup.string().required("Requried"),
+    ticket_id: Yup.string().required("Requried"),
+    brand: Yup.string().required("Requried"),
+    migration_type: Yup.string().required("Requried"),
+    booked_date: Yup.date().required("Required")
 });
 
 export const CPanelBooking = () => {
@@ -61,13 +68,12 @@ export const CPanelBooking = () => {
     callAPI
       .post("/", values)
       .then(function (response) {
-        console.log(response.data.id);
+        // console.log(response);
         // add function here
         setRespID(response.data.id)
       })
       .catch(function (error) {
-        console.log(error);
-        setError(error)
+        setError(buildErrorStringFromArray(error.response.data))
       });
     setSubmitting(false);
     resetForm({ values: "" });

src/components/root/common/Forms/ReportSingleMigration.js

@@ -5,6 +5,7 @@ import { Formik, Form } from "formik";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
 import Msgbox from "../../../actions/Msgbox";
+import { buildErrorStringFromArray } from "../../../actions/Error";
 
 // Main form element for the UUID linking Migrations page,
 // Contians the PUT request to modify data from the API
@@ -37,10 +38,10 @@ const ReportSingleMigration = ({ item }) => {
       .then(function (response) {
         console.log(JSON.stringify(response.values));
         setRespID(response.data.ticket_id);
+        setError(0)
       })
       .catch(function (error) {
-        console.log(error);
-        setError(error);
+        setError(buildErrorStringFromArray(error.response.data));
       });
     setSubmitting(false);
   };

src/components/root/common/Functionality/UnorderedList.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function UList(props){
+    return (<div>
+        <ul>
+        {props.listItems.map((item) => (<li className="white-text">{item}</li>))}
+        </ul>
+    </div>)
+}