v1.39.2 (#1599)

* Fixed issue with realtime page rendering.

* fix auth, add pg extension (#1596)

* Fixed change password issue. API refactoring. Closes #1592.

* Fixed account lookup.

* Fixed issue with accessing user dashboards. Closes #1590

* fix sort on dashboard (#1600)

Co-authored-by: Brian Cao <[email protected]>

Author: mikecao

components/forms/ChangePasswordForm.js

@@ -9,7 +9,7 @@ import FormLayout, {
   FormRow,
 } from 'components/layout/FormLayout';
 import useApi from 'hooks/useApi';
-import useUser from '../../hooks/useUser';
+import useUser from 'hooks/useUser';
 
 const initialValues = {
   current_password: '',
@@ -43,13 +43,13 @@ export default function ChangePasswordForm({ values, onSave, onClose }) {
   const { user } = useUser();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`/accounts/${user.userId}/password`, values);
+    const { ok, error } = await post(`/accounts/${user.accountUuid}/password`, values);
 
     if (ok) {
       onSave();
     } else {
       setMessage(
-        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+        error || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
       );
     }
   };

components/forms/EventDataForm.js

@@ -22,7 +22,7 @@ export const filterOptions = [
   { label: 'Count', value: 'count' },
   { label: 'Average', value: 'avg' },
   { label: 'Minimum', value: 'min' },
-  { label: 'Maxmimum', value: 'max' },
+  { label: 'Maximum', value: 'max' },
   { label: 'Sum', value: 'sum' },
 ];
 

components/metrics/RealtimeHeader.js

@@ -9,11 +9,14 @@ import styles from './RealtimeHeader.module.css';
 
 export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
   const options = [
-    { label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 },
+    {
+      label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />,
+      value: null,
+    },
   ].concat(
-    websites.map(({ name, id }, index) => ({
+    websites.map(({ name, websiteUuid }, index) => ({
       label: name,
-      value: id,
+      value: websiteUuid,
       divider: index === 0,
     })),
   );

components/pages/Dashboard.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteList from 'components/pages/WebsiteList';
@@ -16,10 +15,7 @@ const messages = defineMessages({
   more: { id: 'label.more', defaultMessage: 'More' },
 });
 
-export default function Dashboard() {
-  const router = useRouter();
-  const { id } = router.query;
-  const userId = id?.[0];
+export default function Dashboard({ userId }) {
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);

components/pages/DashboardEdit.js

@@ -24,7 +24,7 @@ export default function DashboardEdit({ websites }) {
   const ordered = useMemo(
     () =>
       websites
-        .map(website => ({ ...website, order: order.indexOf(website.websiteId) }))
+        .map(website => ({ ...website, order: order.indexOf(website.websiteUuid) }))
         .sort(firstBy('order')),
     [websites, order],
   );
@@ -36,7 +36,7 @@ export default function DashboardEdit({ websites }) {
     const [removed] = orderedWebsites.splice(source.index, 1);
     orderedWebsites.splice(destination.index, 0, removed);
 
-    setOrder(orderedWebsites.map(website => website?.websiteId || 0));
+    setOrder(orderedWebsites.map(website => website?.websiteUuid || 0));
   }
 
   function handleSave() {
@@ -76,8 +76,12 @@ export default function DashboardEdit({ websites }) {
                 ref={provided.innerRef}
                 style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
               >
-                {ordered.map(({ websiteId, name, domain }, index) => (
-                  <Draggable key={websiteId} draggableId={`${dragId}-${websiteId}`} index={index}>
+                {ordered.map(({ websiteUuid, name, domain }, index) => (
+                  <Draggable
+                    key={websiteUuid}
+                    draggableId={`${dragId}-${websiteUuid}`}
+                    index={index}
+                  >
                     {(provided, snapshot) => (
                       <div
                         ref={provided.innerRef}

components/pages/RealtimeDashboard.js

@@ -32,7 +32,7 @@ export default function RealtimeDashboard() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
-  const [websiteId, setWebsiteId] = useState(0);
+  const [websiteUuid, setWebsiteUuid] = useState(null);
   const { data: init, loading } = useFetch('/realtime/init');
   const { data: updates } = useFetch('/realtime/update', {
     params: { start_at: data?.timestamp },
@@ -50,17 +50,18 @@ export default function RealtimeDashboard() {
     if (data) {
       const { pageviews, sessions, events } = data;
 
-      if (websiteId) {
+      if (websiteUuid) {
+        const { id } = init.websites.find(n => n.websiteUuid === websiteUuid);
         return {
-          pageviews: filterWebsite(pageviews, websiteId),
-          sessions: filterWebsite(sessions, websiteId),
-          events: filterWebsite(events, websiteId),
+          pageviews: filterWebsite(pageviews, id),
+          sessions: filterWebsite(sessions, id),
+          events: filterWebsite(events, id),
         };
       }
     }
 
     return data;
-  }, [data, websiteId]);
+  }, [data, websiteUuid]);
 
   const countries = useMemo(() => {
     if (realtimeData?.sessions) {
@@ -117,25 +118,20 @@ export default function RealtimeDashboard() {
     <Page>
       <RealtimeHeader
         websites={websites}
-        websiteId={websiteId}
+        websiteId={websiteUuid}
         data={{ ...realtimeData, countries }}
-        onSelect={setWebsiteId}
+        onSelect={setWebsiteUuid}
       />
       <div className={styles.chart}>
-        <RealtimeChart
-          websiteId={websiteId}
-          data={realtimeData}
-          unit="minute"
-          records={REALTIME_RANGE}
-        />
+        <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>
       <GridLayout>
         <GridRow>
           <GridColumn xs={12} lg={4}>
-            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
+            <RealtimeViews websiteId={websiteUuid} data={realtimeData} websites={websites} />
           </GridColumn>
           <GridColumn xs={12} lg={8}>
-            <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
+            <RealtimeLog websiteId={websiteUuid} data={realtimeData} websites={websites} />
           </GridColumn>
         </GridRow>
         <GridRow>

components/settings/AccountSettings.js

@@ -29,13 +29,15 @@ export default function AccountSettings() {
 
   const Checkmark = ({ isAdmin }) => (isAdmin ? <Icon icon={<Check />} size="medium" /> : null);
 
-  const DashboardLink = row => (
-    <Link href={`/dashboard/${row.userId}/${row.username}`}>
-      <a>
-        <Icon icon={<LinkIcon />} />
-      </a>
-    </Link>
-  );
+  const DashboardLink = row => {
+    return (
+      <Link href={`/dashboard/${row.accountUuid}/${row.username}`}>
+        <a>
+          <Icon icon={<LinkIcon />} />
+        </a>
+      </Link>
+    );
+  };
 
   const Buttons = row => (
     <ButtonLayout align="right">

db/postgresql/migrations/04_add_uuid/migration.sql

@@ -1,3 +1,5 @@
+-- CreateExtension
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
 
 -- AlterTable
 ALTER TABLE "account" ADD COLUMN "account_uuid" UUID NULL;

lib/auth.js

@@ -1,6 +1,6 @@
 import { parseSecureToken, parseToken } from 'next-basics';
-import { getWebsite } from 'queries';
-import { SHARE_TOKEN_HEADER } from 'lib/constants';
+import { getAccount, getWebsite } from 'queries';
+import { SHARE_TOKEN_HEADER, TYPE_ACCOUNT, TYPE_WEBSITE } from 'lib/constants';
 import { secret } from 'lib/crypto';
 
 export function getAuthToken(req) {
@@ -35,7 +35,7 @@ export function isValidToken(token, validation) {
   return false;
 }
 
-export async function allowQuery(req) {
+export async function allowQuery(req, type) {
   const { id } = req.query;
 
   const { userId, isAdmin, shareToken } = req.auth ?? {};
@@ -49,9 +49,15 @@ export async function allowQuery(req) {
   }
 
   if (userId) {
-    const website = await getWebsite({ id });
+    if (type === TYPE_WEBSITE) {
+      const website = await getWebsite({ websiteUuid: id });
 
-    return website && website.userId === userId;
+      return website && website.userId === userId;
+    } else if (type === TYPE_ACCOUNT) {
+      const account = await getAccount({ accountUuid: id });
+
+      return account && account.accountUuid === id;
+    }
   }
 
   return false;

lib/constants.js

@@ -21,6 +21,9 @@ export const DEFAULT_WEBSITE_LIMIT = 10;
 export const REALTIME_RANGE = 30;
 export const REALTIME_INTERVAL = 3000;
 
+export const TYPE_WEBSITE = 'website';
+export const TYPE_ACCOUNT = 'account';
+
 export const THEME_COLORS = {
   light: {
     primary: '#2680eb',