General change

package-lock.json

@@ -2546,6 +2546,11 @@
         }
       }
     },
+    "@types/lodash": {
+      "version": "4.14.165",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.165.tgz",
+      "integrity": "sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg=="
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -11750,6 +11755,11 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@@ -13849,6 +13859,11 @@
         "warning": "^4.0.0"
       }
     },
+    "property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -17102,6 +17117,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "tough-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -19114,6 +19134,20 @@
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
         }
       }
+    },
+    "yup": {
+      "version": "0.32.5",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.5.tgz",
+      "integrity": "sha512-bLbkTrPrFEF4rg30lS8T3QqoVLSAJ1N/b6btn5HVM4y9Q2EVJr2VLk+3kcskqPB41OSPx0cGRLINklH7PNqSYg==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.11",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }

package.json

@@ -43,7 +43,8 @@
     "reactstrap-date-picker": "0.0.11",
     "redux": "^4.0.5",
     "styled-components": "^5.2.1",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/root/Navigation.js

@@ -33,16 +33,8 @@ export class Navigation extends Component {
               </li>
             </ul>
             {/* Inline UUID search bar is here */}
-            <ul className="right hide-on-med-and-down">
+            <ul className="right ">
-              <li style={{ paddingRight: "1em" }}>UUID:</li>
+              <InLineSearch />
-              <li>
-                <InLineSearch style={{ paddingRight: "4em" }}></InLineSearch>
-              </li>
-              {/* <li>
-                <Link>
-                  <IdSearchForm />
-                </Link>
-              </li> */}
             </ul>
           </div>
         </div>

src/components/root/Pages/Book.js

@@ -6,6 +6,12 @@ import FormPage from "../common/Forms/FormPage";
 // links directly to FormPage which contains the POST request
 
 export default class Book extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      migs: [],
+    };
+  }
   render() {
     return (
       <div className="container-fluid">

src/components/root/Pages/IDSingle.js

@@ -31,6 +31,7 @@ export default class Reports extends Component {
       .catch(function (error) {
         console.log(error);
       });
+    console.log(urlID);
   }
 
   render() {

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

@@ -3,6 +3,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import moment from "moment";
 import { Col, FormGroup, Row, Container, Label } from "reactstrap";
 import { Formik, Form } from "formik";
+import * as Yup from "yup";
 import { Input, Submit } from "formstrap";
 import { callAPI } from "../../../actions/API";
 
@@ -10,6 +11,10 @@ import { callAPI } from "../../../actions/API";
 // found at /book under the web hosting migration tab
 // Things to add:
 // better date time picking.
+const InputValidation = Yup.object().shape({
+  domain: Yup.string().min(2, "Too Short!").required("Required"),
+  username: Yup.string().min(2, "Too Short!").required("Required"),
+});
 
 export const CPanelBooking = () => {
   const initialValues = {
@@ -30,7 +35,12 @@ export const CPanelBooking = () => {
     resetForm({ values: "" });
   };
   return (
-    <Formik initialValues={initialValues} onSubmit={onSubmit}>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      validationSchema={InputValidation}
+    >
+      {({ errors, touched }) => (
         <Form>
           <Container>
             <Row>
@@ -176,6 +186,7 @@ export const CPanelBooking = () => {
             <Submit withSpinner>Submit</Submit>
           </Container>
         </Form>
+      )}
     </Formik>
   );
 };

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

@@ -13,7 +13,7 @@ import classnames from "classnames";
 import { CPanelBooking } from "./CPanelBooking";
 import EmailBooking from "./EmailBooking";
 
-const FormPage = (props) => {
+const FormPage = ({ item }) => {
   const [activeTab, setActiveTab] = useState("1");
 
   const toggle = (tab) => {

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

@@ -29,7 +29,11 @@ class InLineSearch extends React.Component {
           value={this.state.data}
           onChange={this.onChange}
           onKeyDown={this.onKeyPressed}
-        ></input>
+          placeholder="Enter Migration UUID"
+          id="search"
+          type="search"
+          required
+        />
       </span>
     );
   }