public/main.css

@@ -27,20 +27,3 @@ a.white-link:active {
 .nav-link {
   cursor: pointer;
 }
-
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: rgb(155, 155, 155);
-  opacity: 1; /* Firefox */
-}
-
-:-ms-input-placeholder { /* Internet Explorer 10-11 */
-  color: rgb(155, 155, 155);;
-}
-
-::-ms-input-placeholder { /* Microsoft Edge */
-  color: rgb(155, 155, 155);;
-}
-
-.input-field [type=text] {
-  color: white;
-}

src/components/App.js

@@ -15,6 +15,7 @@ import IDSingle from "./root/Pages/IDSingle";
 // Components
 import Home from "./root/Home";
 import Navigation from "./root/Navigation";
+import Autobook from "./root/Pages/Autobook";
 
 // Main app component, react-router comes from here,
 // and links to all of the sub pages
@@ -73,6 +74,7 @@ class App extends Component {
               path="/booked"
               render={(props) => <GenericList {...props} APILINK="/booked/" />}
             />
+            <Route exact path="/check" component={Autobook} />
           </Switch>
         </div>
       </Router>

src/components/root/Pages/Autobook.js

@@ -4,15 +4,13 @@ import FormPage from "../common/Forms/FormPage";
 import { callAPI } from "../../actions/API";
 import { GenericForm } from "../common/Forms/GenericForm";
 import moment from "moment";
-import Msgbox from "../../actions/Msgbox";
 
-export default class Autobook extends Component {
+export default class Book extends Component {
   constructor(props) {
     super(props);
     this.state = {
       data: null,
       timeslots: [],
-      error: "",
     };
   }
   preBookedData = {
@@ -39,24 +37,21 @@ export default class Autobook extends Component {
       this.setState({
         timeslots: response.data,
       });
+      // console.log(response.data);
     });
   }
 
   credCallback = (credData) => {
-    if (credData[0].data.Error) {
+    console.log(credData);
-      this.setState({
-        error: credData[0].data.Error,
-      });
-    } else {
     this.setState({
       data: credData,
-        error: "",
     });
+    console.log(this.state.data);
     this.preBookedData.domain = this.state.data[0].data.main_domain;
     this.preBookedData.additional_domains = this.state.data[0].data.other_domains;
     this.preBookedData.username = this.state.data[1].username;
     this.preBookedData.original_server = this.state.data[1].hostname;
-    }
+    console.log(this.preBookedData);
   };
   render() {
     if (this.state.data) {
@@ -74,12 +69,7 @@ export default class Autobook extends Component {
         </div>
       );
     } else {
-      return (
+      return <CredChecker credCallback={this.credCallback} />;
-        <div>
-          <CredChecker credCallback={this.credCallback} />
-          {this.state.error ? <Msgbox error={[this.state.error]} /> : null}
-        </div>
-      );
     }
   }
 }

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

@@ -2,38 +2,30 @@ import React from "react";
 import { callAPI } from "../../../actions/API";
 
 export const CredChecker = (props) => {
+
     const sendit = () => {
         let values = {
             hostname: document.getElementById("Host").value,
             username: document.getElementById("User").value,
             password: document.getElementById("Pass").value,
-    };
+        }
-    callAPI.post("/checkcpanel/", values).then((resp) => {
+        callAPI
-      props.credCallback([resp, values]);
+        .post('/checkcpanel/', values)
-    });
+        .then( (resp) => {
-    console.log();
+            props.credCallback([resp, values])
-  };
+        })
+        console.log()
+        
+    }
     return (
         <div>
             <div className="row">
-        <div className="col s3">
+                <div className="col s3"><label htmlFor="Host">Hostname</label><input id="Host" ></input></div>
-          <label htmlFor="Host">Hostname</label>
+                <div className="col s3"><label htmlFor="User">Username</label><input id="User" ></input></div>
-          <input id="Host"></input>
+                <div className="col s3"><label htmlFor="Pass">Password</label><input id="Pass" ></input></div>
             </div>
-        <div className="col s3">
+            <div className="row"><button className="" onClick={sendit}>Check Deets homie</button></div>
-          <label htmlFor="User">Username</label>
+           
-          <input id="User"></input>
         </div>
-        <div className="col s3">
+    )
-          <label htmlFor="Pass">Password</label>
+}
-          <input id="Pass"></input>
-        </div>
-      </div>
-      <div className="row">
-        <button className="btn btn-secondary" onClick={sendit}>
-          Check Deets homie
-        </button>
-      </div>
-    </div>
-  );
-};

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

@@ -12,7 +12,6 @@ import classnames from "classnames";
 
 import EmailBooking from "./EmailBooking";
 import { GenericForm } from "./GenericForm";
-import AutoBook from "../../Pages/Autobook";
 
 const FormPage = ({ timeslots, item }) => {
   const [activeTab, setActiveTab] = useState("1");
@@ -34,7 +33,7 @@ const FormPage = ({ timeslots, item }) => {
               toggle("1");
             }}
           >
-            Auto cPanel Booking
+            Web hosting Migration
           </NavLink>
         </NavItem>
         <NavItem>
@@ -43,16 +42,6 @@ const FormPage = ({ timeslots, item }) => {
             onClick={() => {
               toggle("2");
             }}
-          >
-            Web hosting Migration
-          </NavLink>
-        </NavItem>
-        <NavItem>
-          <NavLink
-            className={classnames({ active: activeTab === "3" })}
-            onClick={() => {
-              toggle("3");
-            }}
           >
             Email Migration
           </NavLink>
@@ -60,14 +49,6 @@ const FormPage = ({ timeslots, item }) => {
       </Nav>
       <TabContent activeTab={activeTab}>
         <TabPane tabId="1">
-          <Row>
-            <Col>
-              {/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
-              <AutoBook />
-            </Col>
-          </Row>
-        </TabPane>
-        <TabPane tabId="2">
           <Row>
             <Col>
               {/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
@@ -75,7 +56,7 @@ const FormPage = ({ timeslots, item }) => {
             </Col>
           </Row>
         </TabPane>
-        <TabPane tabId="3">
+        <TabPane tabId="2">
           <Row>
             <Col sm="12">
               <EmailBooking />{" "}

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

@@ -14,7 +14,11 @@ export const GenericForm = (props) => {
   const [set, setSet] = useState(false);
 
   useEffect(() => {
+    // console.log(initial);
+    // console.log(initial.domain);
+
     if (!set) {
+      console.log(typeof initial.domain);
       if (props.data) {
         setInitial(props.data);
         setSet(true);
@@ -42,6 +46,11 @@ export const GenericForm = (props) => {
     }
   });
 
+  const getInitial = () => {
+    // return initial;
+  };
+
+  console.log(initial);
   if (set) {
     return (
       <Formik
@@ -150,7 +159,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
-                      "form-control input-field" +
+                      "form-control" +
                       (errors.booked_date && touched.booked_date
                         ? " is-invalid"
                         : "")
@@ -173,6 +182,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.domain && touched.domain ? " is-invalid" : "")
                     }
                   />
@@ -193,6 +203,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.original_server && touched.original_server
                         ? " is-invalid"
                         : "")
@@ -215,6 +226,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.ticket_id && touched.ticket_id
                         ? " is-invalid"
                         : "")
@@ -267,6 +279,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.username && touched.username ? " is-invalid" : "")
                     }
                   />
@@ -288,6 +301,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.new_server && touched.new_server
                         ? " is-invalid"
                         : "")
@@ -337,6 +351,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.additional_domains && touched.additional_domains
                         ? " is-invalid"
                         : "")
@@ -360,6 +375,7 @@ export const GenericForm = (props) => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     className={
+                      "form-control" +
                       (errors.agent_booked && touched.agent_booked
                         ? " is-invalid"
                         : "")

src/redux/constants/action-types.js

@@ -0,0 +1,3 @@
+export const GET_MIGRATIONS = "GET_MIGRATIONS";
+export const DATA_LOADED = "DATA_LOADED";
+export const API_ERRORED = "API_ERRORED";

src/redux/middleware/index.js

@@ -0,0 +1,21 @@
+import { GET_MIGRATIONS } from "../constants/action-types";
+
+const forbiddenWords = ["spam", "money"];
+
+export function forbiddenWordsMiddleware({ dispatch }) {
+  return function (next) {
+    return function (action) {
+      // do your stuff
+      if (action.type === GET_MIGRATIONS) {
+        const foundWord = forbiddenWords.filter((word) =>
+          action.payload.title.includes(word)
+        );
+
+        if (foundWord.length) {
+          return dispatch({ type: "FOUND_BAD_WORD" });
+        }
+      }
+      return next(action);
+    };
+  };
+}

src/redux/reducers/index.js

@@ -0,0 +1,24 @@
+import { GET_MIGRATIONS, DATA_LOADED } from "../constants/action-types";
+
+const initialState = {
+  migs: [],
+  timeslots: [],
+  error: false,
+};
+
+function rootReducer(state = initialState, action) {
+  if (action.type === GET_MIGRATIONS) {
+    return Object.assign({}, state, {
+      migs: state.migs.concat(action.payload),
+    });
+  }
+
+  if (action.type === DATA_LOADED) {
+    return Object.assign({}, state, {
+      timeslots: state.timeslots.concat(action.payload),
+    });
+  }
+  return state;
+}
+
+export default rootReducer;

src/redux/store/index.js

@@ -0,0 +1,13 @@
+import { createStore, applyMiddleware, compose } from "redux";
+import rootReducer from "../reducers";
+import { forbiddenWordsMiddleware } from "../middleware";
+import thunk from "redux-thunk";
+
+const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(
+  rootReducer,
+  storeEnhancers(applyMiddleware(forbiddenWordsMiddleware, thunk))
+);
+
+export default store;