Added tracking code form.

assets/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M234.8 511.7L196 500.4c-4.2-1.2-6.7-5.7-5.5-9.9L331.3 5.8c1.2-4.2 5.7-6.7 9.9-5.5L380 11.6c4.2 1.2 6.7 5.7 5.5 9.9L244.7 506.2c-1.2 4.3-5.6 6.7-9.9 5.5zm-83.2-121.1l27.2-29c3.1-3.3 2.8-8.5-.5-11.5L72.2 256l106.1-94.1c3.4-3 3.6-8.2.5-11.5l-27.2-29c-3-3.2-8.1-3.4-11.3-.4L2.5 250.2c-3.4 3.2-3.4 8.5 0 11.7L140.3 391c3.2 3 8.2 2.8 11.3-.4zm284.1.4l137.7-129.1c3.4-3.2 3.4-8.5 0-11.7L435.7 121c-3.2-3-8.3-2.9-11.3.4l-27.2 29c-3.1 3.3-2.8 8.5.5 11.5L503.8 256l-106.1 94.1c-3.4 3-3.6 8.2-.5 11.5l27.2 29c3.1 3.2 8.1 3.4 11.3.4z"/></svg>

components/Settings.js

@@ -1,22 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import Page from './layout/Page';
 import Table from './common/Table';
-import Button from './interface/Button';
+import Button from './common/Button';
 import PageHeader from './layout/PageHeader';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
+import Code from 'assets/code.svg';
 import { get } from 'lib/web';
 import Modal from './common/Modal';
 import WebsiteEditForm from './forms/WebsiteEditForm';
 import styles from './Settings.module.css';
 import WebsiteDeleteForm from './forms/WebsiteDeleteForm';
+import WebsiteCodeForm from './forms/WebsiteCodeForm';
 
 export default function Settings() {
   const [data, setData] = useState();
   const [edit, setEdit] = useState();
   const [del, setDelete] = useState();
   const [add, setAdd] = useState();
+  const [code, setCode] = useState();
   const [saved, setSaved] = useState(0);
 
   const columns = [
@@ -29,6 +32,9 @@ export default function Settings() {
       },
       render: row => (
         <>
+          <Button icon={<Code />} size="S" onClick={() => setCode(row)}>
+            <div>Get Code</div>
+          </Button>
           <Button icon={<Pen />} size="S" onClick={() => setEdit(row)}>
             <div>Edit</div>
           </Button>
@@ -49,6 +55,7 @@ export default function Settings() {
     setAdd(null);
     setEdit(null);
     setDelete(null);
+    setCode(null);
   }
 
   async function loadData() {
@@ -74,13 +81,13 @@ export default function Settings() {
       <Table columns={columns} rows={data} />
       {edit && (
         <Modal title="Edit website">
-          <WebsiteEditForm initialValues={edit} onSave={handleSave} onClose={handleClose} />
+          <WebsiteEditForm values={edit} onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
       {add && (
         <Modal title="Add website">
           <WebsiteEditForm
-            initialValues={{ name: '', domain: '' }}
+            values={{ name: '', domain: '' }}
             onSave={handleSave}
             onClose={handleClose}
           />
@@ -88,7 +95,12 @@ export default function Settings() {
       )}
       {del && (
         <Modal title="Delete website">
-          <WebsiteDeleteForm initialValues={del} onSave={handleSave} onClose={handleClose} />
+          <WebsiteDeleteForm values={del} onSave={handleSave} onClose={handleClose} />
+        </Modal>
+      )}
+      {code && (
+        <Modal title="Tracking code">
+          <WebsiteCodeForm values={code} onClose={handleClose} />
         </Modal>
       )}
     </Page>

components/WebsiteList.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import Link from './interface/Link';
+import Link from './common/Link';
 import WebsiteChart from './charts/WebsiteChart';
 import Page from './layout/Page';
-import Icon from './interface/Icon';
+import Icon from './common/Icon';
-import Button from './interface/Button';
+import Button from './common/Button';
 import PageHeader from './layout/PageHeader';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';

components/charts/QuickButtons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import Button from '../interface/Button';
+import Button from '../common/Button';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 

components/common/Button.js

@@ -10,7 +10,7 @@ export default function Button({
   variant,
   children,
   className,
-  onClick = () => {},
+  ...props
 }) {
   return (
     <button
@@ -21,7 +21,7 @@ export default function Button({
         [styles.action]: variant === 'action',
         [styles.danger]: variant === 'danger',
       })}
-      onClick={onClick}
+      {...props}
     >
       {icon && <Icon icon={icon} size={size} />}
       {children}

components/common/CopyButton.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import Button from './Button';
+
+const defaultText = 'Copy to clipboard';
+
+export default function CopyButton({ element, ...props }) {
+  const [text, setText] = useState(defaultText);
+
+  function handleClick() {
+    if (element?.current) {
+      element.current.select();
+      document.execCommand('copy');
+      setText('Copied!');
+      window.getSelection().removeAllRanges();
+    }
+  }
+
+  return (
+    <Button {...props} onClick={handleClick}>
+      {text}
+    </Button>
+  );
+}

components/common/DropDown.js

@@ -1,10 +1,10 @@
 import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
-import Menu from '../interface/Menu';
+import Menu from './Menu';
 import useDocumentClick from 'hooks/useDocumentClick';
 import Chevron from 'assets/chevron-down.svg';
 import styles from './Dropdown.module.css';
-import Icon from '../interface/Icon';
+import Icon from './Icon';
 
 export default function DropDown({
   value,

components/common/Table.module.css

@@ -12,6 +12,7 @@
   font-weight: 600;
   line-height: 40px;
   flex: 1;
+  border-bottom: 1px solid var(--gray300);
 }
 
 .body {

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>

components/layout/Header.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import Link from 'components/interface/Link';
+import Link from 'components/common/Link';
-import UserButton from '../interface/UserButton';
+import UserButton from '../common/UserButton';
-import Icon from '../interface/Icon';
+import Icon from '../common/Icon';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';
 

lib/crypto.js

@@ -16,7 +16,7 @@ export function secret() {
 export function uuid(...args) {
   if (!args.length) return v4();
 
-  return v5(args.join(''), v5(process.env.HASH_SALT, v5.DNS));
+  return v5(args.join(''), v5.DNS);
 }
 
 export function isValidId(s) {

lib/request.js

@@ -31,7 +31,7 @@ export function getDevice(screen, browser, os) {
     }
     return 'desktop';
   } else if (MOBILE_OS.includes(os)) {
-    if (os === 'Amazon OS' || width < MOBILE_SCREEN_WIDTH) {
+    if (os === 'Amazon OS' || width > MOBILE_SCREEN_WIDTH) {
       return 'tablet';
     }
     return 'mobile';

pages/login.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
 import LoginForm from 'components/forms/LoginForm';
-import Icon from 'components/interface/Icon';
+import Icon from 'components/common/Icon';
 import Logo from 'assets/logo.svg';
 
 export default function LoginPage() {

styles/index.css

@@ -54,7 +54,9 @@ textarea {
   line-height: 1.8;
   border: 1px solid var(--gray500);
   border-radius: 4px;
+  width: 100%;
   outline: none;
+  resize: none;
 }
 
 select {
@@ -80,3 +82,7 @@ main {
   padding-right: 0;
   padding-left: 0;
 }
+
+.center {
+  text-align: center;
+}