Added tracking code form.

components/forms/LoginForm.js

@@ -2,9 +2,8 @@ import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import Router from 'next/router';
 import { post } from 'lib/web';
-import Button from '../interface/Button';
+import Button from '../common/Button';
 import FormLayout, { FormButtons, FormError, FormMessage, FormRow } from '../layout/FormLayout';
-import styles from './LoginForm.module.css';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -44,7 +43,7 @@ export default function LoginForm() {
       >
         {() => (
           <Form>
-            <h1 className={styles.title}>umami</h1>
+            <h1 className="center">umami</h1>
             <FormRow>
               <label htmlFor="username">Username</label>
               <Field name="username" type="text" />

components/forms/LoginForm.module.css

@@ -1,13 +0,0 @@
-.title {
-  font-size: var(--font-size-xlarge);
-  text-align: center;
-}
-
-.button {
-  color: var(--gray50);
-  background: var(--gray900);
-}
-
-.button:hover {
-  background: var(--gray800);
-}

components/forms/WebsiteCodeForm.js

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react';
+import Button from 'components/common/Button';
+import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
+import CopyButton from '../common/CopyButton';
+
+export default function WebsiteCodeForm({ values, onClose }) {
+  const ref = useRef();
+
+  return (
+    <FormLayout>
+      <p>
+        To track stats for <b>{values.name}</b>, place the following code in the &lt;head&gt;
+        section of your website.
+      </p>
+      <FormRow>
+        <textarea
+          ref={ref}
+          rows={3}
+          cols={60}
+          defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}/umami.js" />`}
+          readOnly
+        />
+      </FormRow>
+      <FormButtons>
+        <CopyButton type="submit" variant="action" element={ref} />
+        <Button onClick={onClose}>Cancel</Button>
+      </FormButtons>
+    </FormLayout>
+  );
+}

components/forms/WebsiteDeleteForm.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import { del } from 'lib/web';
-import Button from 'components/interface/Button';
+import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
   FormError,
@@ -19,7 +19,7 @@ const validate = ({ confirmation }) => {
   return errors;
 };
 
-export default function WebsiteDeleteForm({ initialValues, onSave, onClose }) {
+export default function WebsiteDeleteForm({ values, onSave, onClose }) {
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ website_id }) => {
@@ -35,21 +35,20 @@ export default function WebsiteDeleteForm({ initialValues, onSave, onClose }) {
   return (
     <FormLayout>
       <Formik
-        initialValues={{ confirmation: '', ...initialValues }}
+        initialValues={{ confirmation: '', ...values }}
         validate={validate}
         onSubmit={handleSubmit}
       >
         {() => (
           <Form>
             <div>
-              Are your sure you want to delete <b>{initialValues.name}</b>?
+              Are your sure you want to delete <b>{values.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>

components/forms/WebsiteEditForm.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Formik, Form, Field } from 'formik';
 import { post } from 'lib/web';
-import Button from 'components/interface/Button';
+import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
   FormError,
@@ -22,7 +22,7 @@ const validate = ({ name, domain }) => {
   return errors;
 };
 
-export default function WebsiteEditForm({ initialValues, onSave, onClose }) {
+export default function WebsiteEditForm({ values, onSave, onClose }) {
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
@@ -37,7 +37,7 @@ export default function WebsiteEditForm({ initialValues, onSave, onClose }) {
 
   return (
     <FormLayout>
-      <Formik initialValues={initialValues} validate={validate} onSubmit={handleSubmit}>
+      <Formik initialValues={values} validate={validate} onSubmit={handleSubmit}>
         {() => (
           <Form>
             <FormRow>