Add reset website statistics to settings

components/forms/ResetForm.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Formik, Form, Field } from 'formik';
+import Button from 'components/common/Button';
+import FormLayout, {
+  FormButtons,
+  FormError,
+  FormMessage,
+  FormRow,
+} from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
+
+const CONFIRMATION_WORD = 'RESET';
+
+const validate = ({ confirmation }) => {
+  const errors = {};
+
+  if (confirmation !== CONFIRMATION_WORD) {
+    errors.confirmation = !confirmation ? (
+      <FormattedMessage id="label.required" defaultMessage="Required" />
+    ) : (
+      <FormattedMessage id="label.invalid" defaultMessage="Invalid" />
+    );
+  }
+
+  return errors;
+};
+
+export default function ResetForm({ values, onSave, onClose }) {
+  const post = usePost();
+  const [message, setMessage] = useState();
+
+  const handleSubmit = async ({ type, id }) => {
+    const { ok, data } = await post(`/api/${type}/${id}/reset`);
+
+    if (ok) {
+      onSave();
+    } else {
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
+    }
+  };
+
+  return (
+    <FormLayout>
+      <Formik
+        initialValues={{ confirmation: '', ...values }}
+        validate={validate}
+        onSubmit={handleSubmit}
+      >
+        {props => (
+          <Form>
+            <div>
+              <FormattedMessage
+                id="message.confirm-reset"
+                defaultMessage="Are your sure you want to reset {target}'s statistics?"
+                values={{ target: <b>{values.name}</b> }}
+              />
+            </div>
+            <div>
+              <FormattedMessage
+                id="message.reset-warning"
+                defaultMessage="All statistics for this website will be deleted, but your tracking code will remain intact."
+              />
+            </div>
+            <p>
+              <FormattedMessage
+                id="message.type-reset"
+                defaultMessage="Type {reset} in the box below to confirm."
+                values={{ reset: <b>{CONFIRMATION_WORD}</b> }}
+              />
+            </p>
+            <FormRow>
+              <div>
+                <Field name="confirmation" type="text" />
+                <FormError name="confirmation" />
+              </div>
+            </FormRow>
+            <FormButtons>
+              <Button
+                type="submit"
+                variant="danger"
+                disabled={props.values.confirmation !== CONFIRMATION_WORD}
+              >
+                <FormattedMessage id="label.reset" defaultMessage="Reset" />
+              </Button>
+              <Button onClick={onClose}>
+                <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
+              </Button>
+            </FormButtons>
+            <FormMessage>{message}</FormMessage>
+          </Form>
+        )}
+      </Formik>
+    </FormLayout>
+  );
+}

components/settings/WebsiteSettings.js

@@ -7,6 +7,7 @@ import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
 import Modal from 'components/common/Modal';
 import WebsiteEditForm from 'components/forms/WebsiteEditForm';
+import ResetForm from 'components/forms/ResetForm';
 import DeleteForm from 'components/forms/DeleteForm';
 import TrackingCodeForm from 'components/forms/TrackingCodeForm';
 import ShareUrlForm from 'components/forms/ShareUrlForm';
@@ -16,6 +17,7 @@ import Toast from 'components/common/Toast';
 import Favicon from 'components/common/Favicon';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
+import Reset from 'assets/redo.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
 import LinkIcon from 'assets/link.svg';
@@ -24,6 +26,7 @@ import styles from './WebsiteSettings.module.css';
 
 export default function WebsiteSettings() {
   const [editWebsite, setEditWebsite] = useState();
+  const [resetWebsite, setResetWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
   const [addWebsite, setAddWebsite] = useState();
   const [showCode, setShowCode] = useState();
@@ -55,6 +58,9 @@ export default function WebsiteSettings() {
       <Button icon={<Pen />} size="small" onClick={() => setEditWebsite(row)}>
         <FormattedMessage id="label.edit" defaultMessage="Edit" />
       </Button>
+      <Button icon={<Reset />} size="small" onClick={() => setResetWebsite(row)}>
+        <FormattedMessage id="label.reset" defaultMessage="Reset" />
+      </Button>
       <Button icon={<Trash />} size="small" onClick={() => setDeleteWebsite(row)}>
         <FormattedMessage id="label.delete" defaultMessage="Delete" />
       </Button>
@@ -96,6 +102,7 @@ export default function WebsiteSettings() {
   function handleClose() {
     setAddWebsite(null);
     setEditWebsite(null);
+    setResetWebsite(null);
     setDeleteWebsite(null);
     setShowCode(null);
     setShowUrl(null);
@@ -141,6 +148,17 @@ export default function WebsiteSettings() {
           <WebsiteEditForm onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
+      {resetWebsite && (
+        <Modal
+          title={<FormattedMessage id="label.reset-website" defaultMessage="Reset statistics" />}
+        >
+          <ResetForm
+            values={{ type: 'website', id: resetWebsite.website_id, name: resetWebsite.name }}
+            onSave={handleSave}
+            onClose={handleClose}
+          />
+        </Modal>
+      )}
       {deleteWebsite && (
         <Modal
           title={<FormattedMessage id="label.delete-website" defaultMessage="Delete website" />}

lang/en-US.json

@@ -19,6 +19,7 @@
   "label.delete": "Delete",
   "label.delete-account": "Delete account",
   "label.delete-website": "Delete website",
+  "label.reset-website": "Reset statistics",
   "label.dismiss": "Dismiss",
   "label.domain": "Domain",
   "label.edit": "Edit",
@@ -58,8 +59,10 @@
   "label.view-details": "View details",
   "label.websites": "Websites",
   "message.active-users": "{x} current {x, plural, one {visitor} other {visitors}}",
+  "message.confirm-reset": "Are your sure you want to reset {target}'s statistics?",
   "message.confirm-delete": "Are your sure you want to delete {target}?",
   "message.copied": "Copied!",
+  "message.reset-warning": "All statistics for this website will be deleted, but your tracking code will remain intact.",
   "message.delete-warning": "All associated data will be deleted as well.",
   "message.failure": "Something went wrong.",
   "message.get-share-url": "Get share URL",

lib/queries.js

@@ -141,6 +141,10 @@ export async function updateWebsite(website_id, data) {
   );
 }
 
+export async function resetWebsite(website_id) {
+  return runQuery(prisma.$queryRaw`delete from session where website_id=${website_id}`);
+}
+
 export async function deleteWebsite(website_id) {
   return runQuery(
     /* Prisma bug, does not cascade on non-nullable foreign keys

pages/api/website/[id]/reset.js

@@ -0,0 +1,20 @@
+import { resetWebsite } from 'lib/queries';
+import { methodNotAllowed, ok, unauthorized } from 'lib/response';
+import { allowQuery } from 'lib/auth';
+
+export default async (req, res) => {
+  const { id } = req.query;
+  const websiteId = +id;
+
+  if (req.method === 'POST') {
+    if (!(await allowQuery(req))) {
+      return unauthorized(res);
+    }
+
+    await resetWebsite(websiteId);
+
+    return ok(res);
+  }
+
+  return methodNotAllowed(res);
+};