Rewrite admin. (#1713)

* Rewrite admin.

* Clean up password forms.

* Fix naming issues.

* CSS Naming.

components/forms/ShareUrlForm.js

@@ -1,42 +1,85 @@
-import React, { useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
-import Button from 'components/common/Button';
-import FormLayout, { FormButtons, FormRow } from 'components/layout/FormLayout';
-import CopyButton from 'components/common/CopyButton';
+import { useMutation } from '@tanstack/react-query';
+import { getAuthToken } from 'lib/client';
+import { getRandomChars, useApi } from 'next-basics';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Button,
+  Form,
+  FormButtons,
+  FormRow,
+  HiddenInput,
+  SubmitButton,
+  TextField,
+  Toggle,
+} from 'react-basics';
 
-export default function TrackingCodeForm({ values, onClose }) {
-  const ref = useRef();
-  const { basePath } = useRouter();
-  const { name, shareId } = values;
+export default function ShareUrlForm({ websiteId, data, onSave }) {
+  const { name, shareId } = data;
+  const [id, setId] = useState(shareId);
+  const { post } = useApi(getAuthToken());
+  const { mutate, error } = useMutation(({ shareId }) =>
+    post(`/websites/${websiteId}`, { shareId }),
+  );
+  const ref = useRef(null);
+  const url = useMemo(
+    () => `${process.env.analyticsUrl}/share/${id}/${encodeURIComponent(name)}`,
+    [id, name],
+  );
+
+  const generateId = () => getRandomChars(16);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+        ref.current.reset(data);
+      },
+    });
+  };
+
+  const handleGenerate = () => {
+    const id = generateId();
+    ref.current.setValue('shareId', id, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+    setId(id);
+  };
+
+  const handleChange = checked => {
+    const data = { shareId: checked ? generateId() : null };
+    mutate(data, {
+      onSuccess: async () => {
+        onSave(data);
+      },
+    });
+    setId(data.shareId);
+  };
+
+  useEffect(() => {
+    if (id && id !== shareId) {
+      ref.current.setValue('shareId', id);
+    }
+  }, [id, shareId]);
 
   return (
-    <FormLayout>
-      <p>
-        <FormattedMessage
-          id="message.share-url"
-          defaultMessage="This is the publicly shared URL for {target}."
-          values={{ target: <b>{values.name}</b> }}
-        />
-      </p>
-      <FormRow>
-        <textarea
-          ref={ref}
-          rows={3}
-          cols={60}
-          spellCheck={false}
-          defaultValue={`${
-            document.location.origin
-          }${basePath}/share/${shareId}/${encodeURIComponent(name)}`}
-          readOnly
-        />
-      </FormRow>
-      <FormButtons>
-        <CopyButton type="submit" variant="action" element={ref} />
-        <Button onClick={onClose}>
-          <FormattedMessage id="label.cancel" defaultMessage="Cancel" />
-        </Button>
-      </FormButtons>
-    </FormLayout>
+    <>
+      <Toggle checked={Boolean(id)} onChange={handleChange}>
+        Enable share URL
+      </Toggle>
+      {id && (
+        <Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
+          <FormRow>
+            <p>Your website stats are publically available at the following URL:</p>
+            <TextField value={url} readOnly allowCopy />
+          </FormRow>
+          <HiddenInput name="shareId" />
+          <FormButtons>
+            <SubmitButton variant="primary">Save</SubmitButton>
+            <Button onClick={handleGenerate}>Regenerate URL</Button>
+          </FormButtons>
+        </Form>
+      )}
+    </>
   );
 }