general changes

public/main.css

@@ -27,3 +27,20 @@ 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,7 +15,6 @@ 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
@@ -74,7 +73,6 @@ 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,13 +4,15 @@ 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 Book extends Component {
+export default class Autobook extends Component {
   constructor(props) {
     super(props);
     this.state = {
       data: null,
       timeslots: [],
+      error: "",
     };
   }
   preBookedData = {
@@ -37,21 +39,24 @@ export default class Book extends Component {
       this.setState({
         timeslots: response.data,
       });
-      // console.log(response.data);
     });
   }
 
   credCallback = (credData) => {
-    console.log(credData);
+    if (credData[0].data.Error) {
-    this.setState({
+      this.setState({
-      data: credData,
+        error: credData[0].data.Error,
-    });
+      });
-    console.log(this.state.data);
+    } else {
-    this.preBookedData.domain = this.state.data[0].data.main_domain;
+      this.setState({
-    this.preBookedData.additional_domains = this.state.data[0].data.other_domains;
+        data: credData,
-    this.preBookedData.username = this.state.data[1].username;
+        error: "",
-    this.preBookedData.original_server = this.state.data[1].hostname;
+      });
-    console.log(this.preBookedData);
+      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;
+    }
   };
   render() {
     if (this.state.data) {
@@ -69,7 +74,12 @@ export default class Book extends Component {
         </div>
       );
     } else {
-      return <CredChecker credCallback={this.credCallback} />;
+      return (
+        <div>
+          <CredChecker credCallback={this.credCallback} />
+          {this.state.error ? <Msgbox error={[this.state.error]} /> : null}
+        </div>
+      );
     }
   }
 }

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

@@ -2,30 +2,38 @@ import React from "react";
 import { callAPI } from "../../../actions/API";
 
 export const CredChecker = (props) => {
-
+  const sendit = () => {
-    const sendit = () => {
+    let values = {
-        let values = {
+      hostname: document.getElementById("Host").value,
-            hostname: document.getElementById("Host").value,
+      username: document.getElementById("User").value,
-            username: document.getElementById("User").value,
+      password: document.getElementById("Pass").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])
+  };
-        })
+  return (
-        console.log()
+    <div>
-        
+      <div className="row">
-    }
+        <div className="col s3">
-    return (
+          <label htmlFor="Host">Hostname</label>
-        <div>
+          <input id="Host"></input>
-            <div className="row">
-                <div className="col s3"><label htmlFor="Host">Hostname</label><input id="Host" ></input></div>
-                <div className="col s3"><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="" onClick={sendit}>Check Deets homie</button></div>
-           
         </div>
-    )
+        <div className="col s3">
-}
+          <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,6 +12,7 @@ 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");
@@ -33,7 +34,7 @@ const FormPage = ({ timeslots, item }) => {
               toggle("1");
             }}
           >
-            Web hosting Migration
+            Auto cPanel Booking
           </NavLink>
         </NavItem>
         <NavItem>
@@ -42,6 +43,16 @@ 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>
@@ -52,11 +63,19 @@ const FormPage = ({ timeslots, item }) => {
           <Row>
             <Col>
               {/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
-              <GenericForm timeslots={timeslots} key={timeslots.id} />
+              <AutoBook />
             </Col>
           </Row>
         </TabPane>
         <TabPane tabId="2">
+          <Row>
+            <Col>
+              {/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
+              <GenericForm timeslots={timeslots} key={timeslots.id} />
+            </Col>
+          </Row>
+        </TabPane>
+        <TabPane tabId="3">
           <Row>
             <Col sm="12">
               <EmailBooking />{" "}

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

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

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

src/redux/middleware/index.js

@@ -1,21 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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;