Handle website delete. Added response helper functions.

components/forms/LoginForm.js

@@ -56,7 +56,7 @@ export default function LoginForm() {
               <FormError name="password" />
             </FormRow>
             <FormButtons>
-              <Button className={styles.button} type="submit">
+              <Button type="submit" variant="action">
                 Login
               </Button>
             </FormButtons>

components/forms/WebsiteDeleteForm.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Formik, Form, Field } from 'formik';
+import { del } from 'lib/web';
+import Button from 'components/interface/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+
+const validate = ({ confirmation }) => {
+  const errors = {};
+
+  if (confirmation !== 'DELETE') {
+    errors.confirmation = !confirmation ? 'Required' : 'Invalid';
+  }
+
+  return errors;
+};
+
+export default function WebsiteDeleteForm({ initialValues, onSave, onClose }) {
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ website_id }) => {
+    const response = await del(`/api/website/${website_id}`);
+
+    if (response) {
+      onSave();
+    } else {
+      setMessage('Something went wrong.');
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ confirmation: '', ...initialValues }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {() => (
+          <Form>
+            <div>
+              Are your sure you want to delete <b>{initialValues.name}</b>?
+            </div>
+            <div>All associated data will be deleted as well.</div>
+            <p>
+              Type <b>DELETE</b> in the box below to confirm.
+            </p>
+            <FormRow>
+              <label htmlFor="confirmation">Confirm</label>
+              <Field name="confirmation" />
+              <FormError name="confirmation" />
+            </FormRow>
+            <FormButtons>
+              <Button type="submit" variant="danger">
+                Delete
+              </Button>
+              <Button onClick={onClose}>Cancel</Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}

components/forms/WebsiteEditForm.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
-import Router from 'next/router';
 import { post } from 'lib/web';
 import Button from 'components/interface/Button';
 import FormLayout, {
@@ -23,7 +22,7 @@ const validate = ({ name, domain }) => {
   return errors;
 };
 
-export default function WebsiteForm({ initialValues, onSave, onClose }) {
+export default function WebsiteEditForm({ initialValues, onSave, onClose }) {
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
@@ -52,7 +51,9 @@ export default function WebsiteForm({ initialValues, onSave, onClose }) {
               <FormError name="domain" />
             </FormRow>
             <FormButtons>
-              <Button type="submit">Save</Button>
+              <Button type="submit" variant="action">
+                Save
+              </Button>
               <Button onClick={onClose}>Cancel</Button>
             </FormButtons>
             <FormMessage>{message}</FormMessage>