Made cPanel mig form generic
This commit is contained in:
parent
812a9cfca6
commit
284f33292c
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
||||
|
||||
import ReportSingleMigration from "../common/Forms/ReportSingleMigration";
|
||||
import { callAPI } from "../../actions/API";
|
||||
import { GenericForm } from "../common/Forms/GenericForm";
|
||||
|
||||
// This class will populate a form from a UUID in the address bar,
|
||||
// e.g. /migrations/a7740b79-a7d9-4de7-b01e-00522fa4455a
|
||||
@ -14,6 +15,7 @@ export default class Reports extends Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
migs: [],
|
||||
timeslots: [],
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
@ -31,17 +33,28 @@ export default class Reports extends Component {
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
callAPI.get("/gettimeslots/").then((response) => {
|
||||
this.setState({
|
||||
timeslots: response.data,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{/* {this.state.migs} */}
|
||||
<ReportSingleMigration
|
||||
key={this.state.migs.id}
|
||||
item={this.state.migs}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
if (this.state.migs.id) {
|
||||
console.log(this.state.migs);
|
||||
return (
|
||||
<div>
|
||||
<h3>Update migration</h3>
|
||||
<GenericForm
|
||||
timeslots={this.state.timeslots}
|
||||
data={this.state.migs}
|
||||
type="update"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div></div>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ export const CPanelForm = (timeslots) => {
|
||||
validationSchema={Yup.object().shape({
|
||||
domain: Yup.string()
|
||||
.matches(
|
||||
/^((https?):\/\/)?(www.)?[a-z0-9\-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
|
||||
/^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
|
||||
"Required field"
|
||||
)
|
||||
.required("Required field"),
|
||||
@ -182,7 +182,7 @@ export const CPanelForm = (timeslots) => {
|
||||
>
|
||||
<option>Select</option>
|
||||
{timeslots.timeslots.map((slot) => (
|
||||
<option>{slot}</option>
|
||||
<option key={`${slot}`}>{slot}</option>
|
||||
))}
|
||||
</select>
|
||||
<ErrorMessage
|
||||
|
||||
@ -12,6 +12,7 @@ import classnames from "classnames";
|
||||
|
||||
import EmailBooking from "./EmailBooking";
|
||||
import { CPanelForm } from "./CPanelForm";
|
||||
import { GenericForm } from "./GenericForm";
|
||||
|
||||
const FormPage = ({ timeslots, item }) => {
|
||||
const [activeTab, setActiveTab] = useState("1");
|
||||
@ -51,7 +52,8 @@ const FormPage = ({ timeslots, item }) => {
|
||||
<TabPane tabId="1">
|
||||
<Row>
|
||||
<Col>
|
||||
<CPanelForm timeslots={timeslots} key={timeslots.id} />
|
||||
{/* <CPanelForm timeslots={timeslots} key={timeslots.id} /> */}
|
||||
<GenericForm timeslots={timeslots} key={timeslots.id}/>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
|
||||
471
src/components/root/common/Forms/GenericForm.js
Normal file
471
src/components/root/common/Forms/GenericForm.js
Normal file
@ -0,0 +1,471 @@
|
||||
import React, { useState } from "react";
|
||||
import { Formik, Form, ErrorMessage } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import moment from "moment";
|
||||
|
||||
import { callAPI } from "../../../actions/API";
|
||||
import Msgbox from "../../../actions/Msgbox";
|
||||
import { builfArrayFromObject } from "../../../actions/Error";
|
||||
|
||||
export const GenericForm = (props) => {
|
||||
const [respID, setRespID] = useState(0);
|
||||
const [error, setError] = useState(0);
|
||||
|
||||
const getInitial = () => {
|
||||
let initial = {};
|
||||
// console.log(migData);
|
||||
if (props.data) {
|
||||
initial = props.data;
|
||||
} else {
|
||||
initial = {
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
dateTime: "2019-03-11T12:00:00.000Z",
|
||||
migration_status: "Booked",
|
||||
domain: "",
|
||||
username: "",
|
||||
original_server: "",
|
||||
new_server: "",
|
||||
agent_booked: "",
|
||||
booked_time: "",
|
||||
ticket_id: "",
|
||||
brand: "",
|
||||
migration_type: "",
|
||||
booked_date: "",
|
||||
term_date: "",
|
||||
additional_domains: "",
|
||||
notes: "",
|
||||
};
|
||||
}
|
||||
return initial;
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={getInitial()}
|
||||
validationSchema={Yup.object().shape({
|
||||
domain: Yup.string()
|
||||
.matches(
|
||||
/^((https?):\/\/)?(www.)?[a-z0-9-]+(\.[a-z-{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
|
||||
"Required field"
|
||||
)
|
||||
.required("Required field"),
|
||||
username: Yup.string().min(2, "Too Short!").required("Required field"),
|
||||
original_server: Yup.string().required("Required field"),
|
||||
new_server: Yup.string().required("Required field"),
|
||||
agent_booked: Yup.string()
|
||||
.min(2, "Too short!")
|
||||
.required("Required field"),
|
||||
booked_time: Yup.string().required("Required field"),
|
||||
ticket_id: Yup.string().required("Required field"),
|
||||
brand: Yup.string().required("Required field"),
|
||||
migration_type: Yup.string().required("Required field"),
|
||||
booked_date: Yup.string().required("Required field"),
|
||||
})}
|
||||
onSubmit={(values, { resetForm }) => {
|
||||
console.log(values);
|
||||
if (values.term_date === "") {
|
||||
values.term_date = null; // Complains on dev but not on live #whocares
|
||||
}
|
||||
if (props.type === "update") {
|
||||
callAPI
|
||||
.put(`/${props.data.id}/`, values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.ticket_id);
|
||||
setError(0);
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
} else {
|
||||
callAPI
|
||||
.post("/book/", values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.id);
|
||||
resetForm({ values: "" });
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
}
|
||||
}}
|
||||
render={({
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
values,
|
||||
handleBlur,
|
||||
handleReset,
|
||||
}) => (
|
||||
<div className="container">
|
||||
<Form>
|
||||
<div className="row">
|
||||
{/* Only show this on update */}
|
||||
{props.type === "update" ? (
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="migrationStatus">Status *</label>
|
||||
<select
|
||||
name="migration_status"
|
||||
type="select"
|
||||
id="migrationStatus"
|
||||
placeholder="status placeholder"
|
||||
value={values.migration_status}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_status && touched.migration_status
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>Booked</option>
|
||||
<option>Waiting Termination</option>
|
||||
<option>Completed</option>
|
||||
<option>Cancelled</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_status"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDate">Date *</label>
|
||||
<input
|
||||
name="booked_date"
|
||||
type="date"
|
||||
id="bookedDate"
|
||||
placeholder="date placeholder"
|
||||
value={values.booked_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.booked_date && touched.booked_date
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="booked_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDomain">Domain *</label>
|
||||
<input
|
||||
name="domain"
|
||||
type="text"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
value={values.domain}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.domain && touched.domain ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="domain"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedSource">Original server *</label>
|
||||
<input
|
||||
name="original_server"
|
||||
type="text"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4 / example.com"
|
||||
value={values.original_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.original_server && touched.original_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="original_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTicket">Ticket ID *</label>
|
||||
<input
|
||||
name="ticket_id"
|
||||
type="text"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
value={values.ticket_id}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.ticket_id && touched.ticket_id ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="ticket_id"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTime">Timeslot *</label>
|
||||
<select
|
||||
name="booked_time"
|
||||
id="bookedTime"
|
||||
type="select"
|
||||
value={values.booked_time}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.booked_time && touched.booked_time
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
{props["timeslots"].map((slot) => (
|
||||
<option key={`${slot}`}>{slot}</option>
|
||||
))}
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="booked_time"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3 ">
|
||||
<label htmlFor="bookedUsername">cPanel username *</label>
|
||||
<input
|
||||
name="username"
|
||||
type="text"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
value={values.username}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.username && touched.username ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="username"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDestination">New server *</label>
|
||||
<input
|
||||
name="new_server"
|
||||
type="text"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4 / S111.SYD1"
|
||||
value={values.new_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.new_server && touched.new_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="new_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedBrand">Brand *</label>
|
||||
<select
|
||||
name="brand"
|
||||
type="select"
|
||||
id="bookedBrand"
|
||||
value={values.brand}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.brand && touched.brand ? " is-invalid" : "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="brand"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedAdditionalDomains">Addon Domains</label>
|
||||
<input
|
||||
name="additional_domains"
|
||||
type="text"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
value={values.additional_domains}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.additional_domains && touched.additional_domains
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="additional_domains"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedAgent">Agent Initials *</label>
|
||||
<input
|
||||
name="agent_booked"
|
||||
type="text"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
value={values.agent_booked}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.agent_booked && touched.agent_booked
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="agent_booked"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedType">Migration type *</label>
|
||||
<select
|
||||
name="migration_type"
|
||||
type="select"
|
||||
id="bookedType"
|
||||
value={values.migration_type}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_type && touched.migration_type
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_type"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</label>
|
||||
<input
|
||||
name="term_date"
|
||||
id="bookedTermDate"
|
||||
type="date"
|
||||
value={values.term_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.term_date && touched.term_date ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="term_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedNotes">Notes</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
id="notes"
|
||||
rows={4}
|
||||
value={values.notes}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.notes && touched.notes ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="notes"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-primary mr-2">
|
||||
SEND IT
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleReset}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
{respID ? (
|
||||
props.type === "update" ? (
|
||||
<Msgbox msg={respID}></Msgbox>
|
||||
) : (
|
||||
<Msgbox linkid={respID}></Msgbox>
|
||||
)
|
||||
) : null}
|
||||
{error ? <Msgbox error={error}></Msgbox> : null}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,229 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import "bootstrap/dist/css/bootstrap.min.css";
|
||||
import moment from "moment";
|
||||
import { Col, FormGroup, Row, Container, Label } from "reactstrap";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import { Input, Submit } from "formstrap";
|
||||
import { callAPI } from "../../../actions/API";
|
||||
import Msgbox from "../../../actions/Msgbox";
|
||||
import { builfArrayFromObject } from "../../../actions/Error";
|
||||
|
||||
// Main form and POST Request to add migrations
|
||||
// found at /book under the web hosting migration tab
|
||||
// Things to add:
|
||||
// better date time picking.
|
||||
|
||||
const InputValidation = Yup.object().shape({
|
||||
domain: Yup.string()
|
||||
.matches(
|
||||
/^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
|
||||
"Enter correct url!"
|
||||
)
|
||||
.required("Please enter a domain"),
|
||||
username: Yup.string().min(2, "Too Short!").required("Required"),
|
||||
original_server: Yup.string().required("Please enter a valid IPv4 or domain"),
|
||||
new_server: Yup.string().required("Please enter a valid IPv4 or domain"),
|
||||
agent_booked: Yup.string()
|
||||
.min(2, "Too short!")
|
||||
.required("Please enter your name!"),
|
||||
booked_time: Yup.string().required("Time is needed!"),
|
||||
ticket_id: Yup.string().required("Please add a ticket ID!"),
|
||||
brand: Yup.string().required("Bush Did 911"),
|
||||
migration_type: Yup.string().required("Type is required!"),
|
||||
booked_date: Yup.date().required("Please enter a date!"),
|
||||
});
|
||||
|
||||
export const CPanelBooking = (timeslots) => {
|
||||
const [respID, setRespID] = useState(0);
|
||||
const [error, setError] = useState(0);
|
||||
|
||||
const initialValues = {
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
dateTime: "2019-03-11T12:00:00.000Z",
|
||||
};
|
||||
|
||||
const onSubmit = async (values, { setSubmitting, resetForm }) => {
|
||||
console.log(values);
|
||||
callAPI
|
||||
.post("/book/", values)
|
||||
.then(function (response) {
|
||||
// console.log(response);
|
||||
// add function here
|
||||
setRespID(response.data.id);
|
||||
setError(0);
|
||||
resetForm({ values: "" });
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={onSubmit}
|
||||
validationSchema={InputValidation}
|
||||
>
|
||||
{({
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
values,
|
||||
touched,
|
||||
isValid,
|
||||
errors,
|
||||
}) => (
|
||||
<Form noValidate onSubmit={handleSubmit}>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDate">Date *</Label>
|
||||
<Input
|
||||
type="date"
|
||||
name="booked_date"
|
||||
id="bookedDate"
|
||||
placeholder="date placeholder"
|
||||
mindate={Date()}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedTime">Timeslot *</Label>
|
||||
<Input
|
||||
type="select"
|
||||
name="booked_time"
|
||||
id="bookedTime"
|
||||
className="has-success"
|
||||
>
|
||||
<option>Select</option>
|
||||
{timeslots.timeslots.map((slot) => (
|
||||
<option>{slot}</option>
|
||||
))}
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedDomain">Domain *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="domain"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedUsername">cPanel username *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="username"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedSource">Original server *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="original_server"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4 / example.com"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedDestination">New server *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="new_server"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4 / S111.SYD1"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedBrand">Brand *</Label>
|
||||
<Input type="select" name="brand" id="bookedBrand">
|
||||
<option>Select</option>
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedTicket">Ticket ID *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="ticket_id"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedAgent">Agent Initials *</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="agent_booked"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<FormGroup>
|
||||
<Label for="bookedType">Migration type *</Label>
|
||||
<Input type="select" name="migration_type" id="bookedType">
|
||||
<option>Select</option>
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="bookedAdditionalDomains">Addon Domains</Label>
|
||||
<Input
|
||||
type="text"
|
||||
name="additional_domains"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</Label>
|
||||
<Input type="date" name="term_date" id="bookedTermDate" />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={8}>
|
||||
<FormGroup>
|
||||
<Label for="bookedNotes">Notes</Label>
|
||||
<Input name="notes" id="notes" type="textarea" rows={6} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<Submit withSpinner>Submit</Submit>
|
||||
</Container>
|
||||
{respID ? <Msgbox linkid={respID}></Msgbox> : null}
|
||||
{error ? <Msgbox error={error}></Msgbox> : null}
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user