next.config.ts

@@ -5,7 +5,7 @@ const TRACKER_SCRIPT = '/script.js';
 
 const basePath = process.env.BASE_PATH;
 const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT;
-const cloudMode = !!process.env.CLOUD_MODE;
+const cloudUrl = process.env.CLOUD_URL;
 const corsMaxAge = process.env.CORS_MAX_AGE;
 const defaultLocale = process.env.DEFAULT_LOCALE;
 const forceSSL = process.env.FORCE_SSL;
@@ -157,12 +157,20 @@ if (trackerScriptName) {
   }
 }
 
+if (cloudUrl) {
+  redirects.push({
+    source: '/login',
+    destination: cloudUrl,
+    permanent: false,
+  });
+}
+
 /** @type {import('next').NextConfig} */
 export default {
   reactStrictMode: false,
   env: {
     basePath,
-    cloudMode,
+    cloudUrl,
     currentVersion: pkg.version,
     defaultLocale,
   },

pnpm-lock.yaml

@@ -364,8 +364,6 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
-  dist: {}
-
 packages:
 
   '@ampproject/remapping@2.3.0':

src/app/(collect)/p/[slug]/route.ts

@@ -29,7 +29,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ slug
 
   const req = new Request(request.url, {
     method: 'POST',
-    headers: request.headers,
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload),
   });
 

src/app/(collect)/q/[slug]/route.ts

@@ -27,7 +27,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ slug
 
   const req = new Request(request.url, {
     method: 'POST',
-    headers: request.headers,
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload),
   });
 

src/app/(main)/UpdateNotice.tsx

@@ -18,7 +18,7 @@ export function UpdateNotice({ user, config }) {
     !config?.updatesDisabled &&
     !config?.privateMode &&
     !pathname.includes('/share/') &&
-    !process.env.cloudMode &&
+    !process.env.cloudUrl &&
     !dismissed;
 
   const updateCheck = useCallback(() => {

src/app/(main)/admin/AdminLayout.tsx

@@ -11,7 +11,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
   const { formatMessage, labels } = useMessages();
   const { pathname } = useNavigation();
 
-  if (!user.isAdmin || process.env.cloudMode) {
+  if (!user.isAdmin || process.env.cloudUrl) {
     return null;
   }
 

src/app/(main)/admin/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import { AdminLayout } from './AdminLayout';
 
 export default function ({ children }) {
-  if (process.env.cloudMode) {
+  if (process.env.cloudUrl) {
     return null;
   }
 

src/app/(main)/links/LinkAddButton.tsx

@@ -1,10 +1,17 @@
-import { useMessages } from '@/components/hooks';
+import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Modal, Dialog, DialogTrigger, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { LinkEditForm } from './LinkEditForm';
 
 export function LinkAddButton({ teamId }: { teamId?: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = async () => {
+    toast(formatMessage(messages.saved));
+    touch('links');
+  };
 
   return (
     <DialogTrigger>
@@ -16,7 +23,7 @@ export function LinkAddButton({ teamId }: { teamId?: string }) {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addLink)} style={{ width: 600 }}>
-          {({ close }) => <LinkEditForm teamId={teamId} onClose={close} />}
+          {({ close }) => <LinkEditForm teamId={teamId} onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/links/LinkEditForm.tsx

@@ -139,9 +139,7 @@ export function LinkEditForm({
                   {formatMessage(labels.cancel)}
                 </Button>
               )}
-              <FormSubmitButton isDisabled={false} isLoading={isPending}>
+              <FormSubmitButton isDisabled={false}>{formatMessage(labels.save)}</FormSubmitButton>
-                {formatMessage(labels.save)}
-              </FormSubmitButton>
             </Row>
           </>
         );

src/app/(main)/pixels/PixelAddButton.tsx

@@ -1,10 +1,17 @@
-import { useMessages } from '@/components/hooks';
+import { useMessages, useModified } from '@/components/hooks';
-import { Button, Icon, Modal, Dialog, DialogTrigger, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
 import { Plus } from '@/components/icons';
 import { PixelEditForm } from './PixelEditForm';
 
 export function PixelAddButton({ teamId }: { teamId?: string }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
+  const { toast } = useToast();
+  const { touch } = useModified();
+
+  const handleSave = async () => {
+    toast(formatMessage(messages.saved));
+    touch('pixels');
+  };
 
   return (
     <DialogTrigger>
@@ -16,7 +23,7 @@ export function PixelAddButton({ teamId }: { teamId?: string }) {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.addPixel)} style={{ width: 600 }}>
-          {({ close }) => <PixelEditForm teamId={teamId} onClose={close} />}
+          {({ close }) => <PixelEditForm teamId={teamId} onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/settings/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import { SettingsLayout } from './SettingsLayout';
 
 export default function ({ children }) {
-  if (process.env.cloudMode) {
+  if (process.env.cloudUrl) {
     return null;
   }
 

src/app/(main)/websites/[websiteId]/cohorts/CohortEditForm.tsx

@@ -114,7 +114,10 @@ export function CohortEditForm({
 
             <Column>
               <Label>{formatMessage(labels.filters)}</Label>
-              <FormField name="parameters.filters">
+              <FormField
+                name="parameters.filters"
+                rules={{ required: formatMessage(labels.required) }}
+              >
                 <FieldFilters websiteId={websiteId} exclude={['path', 'event']} />
               </FormField>
             </Column>

src/app/api/config/route.ts

@@ -9,7 +9,8 @@ export async function GET(request: Request) {
   }
 
   return json({
-    cloudMode: !!process.env.CLOUD_MODE,
+    cloudMode: !!process.env.CLOUD_URL,
+    cloudUrl: process.env.CLOUD_URL,
     faviconUrl: process.env.FAVICON_URL,
     linksUrl: process.env.LINKS_URL,
     pixelsUrl: process.env.PIXELS_URL,

src/app/login/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import { LoginPage } from './LoginPage';
 
 export default async function () {
-  if (process.env.DISABLE_LOGIN || process.env.CLOUD_MODE) {
+  if (process.env.DISABLE_LOGIN) {
     return null;
   }
 

src/app/logout/page.tsx

@@ -1,8 +1,8 @@
-import { Metadata } from 'next';
 import { LogoutPage } from './LogoutPage';
+import { Metadata } from 'next';
 
 export default function () {
-  if (process.env.DISABLE_LOGIN || process.env.CLOUD_MODE) {
+  if (process.env.DISABLE_LOGIN) {
     return null;
   }
 

src/components/hooks/useConfig.ts

@@ -4,6 +4,7 @@ import { useApi } from '@/components/hooks/useApi';
 
 export type Config = {
   cloudMode: boolean;
+  cloudUrl?: string;
   faviconUrl?: string;
   linksUrl?: string;
   pixelsUrl?: string;

src/components/input/ProfileButton.tsx

@@ -11,13 +11,14 @@ import {
   Text,
   Row,
 } from '@umami/react-zen';
-import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
+import { useMessages, useLoginQuery, useNavigation, useConfig } from '@/components/hooks';
 import { LogOut, UserCircle, LockKeyhole } from '@/components/icons';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
   const { renderUrl } = useNavigation();
+  const { cloudUrl } = useConfig();
 
   const items = [
     {
@@ -27,7 +28,7 @@ export function ProfileButton() {
       icon: <UserCircle />,
     },
     user.isAdmin &&
-      !process.env.cloudMode && {
+      !cloudUrl && {
         id: 'admin',
         label: formatMessage(labels.admin),
         path: '/admin',

src/components/input/SettingsButton.tsx

@@ -16,12 +16,12 @@ export function SettingsButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
   const { router, renderUrl } = useNavigation();
-  const { cloudMode } = useConfig();
+  const { cloudMode, cloudUrl } = useConfig();
 
   const handleAction = (id: Key) => {
     if (id === 'settings') {
       if (cloudMode) {
-        window.location.href = `/settings`;
+        window.location.href = `${cloudUrl}/settings`;
         return;
       }
     }

src/components/messages.ts

@@ -359,7 +359,7 @@ export const labels = defineMessages({
   invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
   environment: { id: 'label.environment', defaultMessage: 'Environment' },
   criteria: { id: 'label.criteria', defaultMessage: 'Criteria' },
-  share: { id: 'label.share', defaultMessage: 'Share' },
+  share: { defaultMessage: 'label.share', id: 'Share' },
 });
 
 export const messages = defineMessages({

src/lib/auth.ts

@@ -18,10 +18,10 @@ export function getBearerToken(request: Request) {
 export async function checkAuth(request: Request) {
   const token = getBearerToken(request);
   const payload = parseSecureToken(token, secret());
-  const shareToken = await parseShareToken(request);
+  const shareToken = await parseShareToken(request.headers);
 
   let user = null;
-  const { userId, authKey } = payload || {};
+  const { userId, authKey, grant } = payload || {};
 
   if (userId) {
     user = await getUser(userId);
@@ -33,7 +33,7 @@ export async function checkAuth(request: Request) {
     }
   }
 
-  log({ token, payload, authKey, shareToken, user });
+  log({ token, shareToken, payload, user, grant });
 
   if (!user?.id && !shareToken) {
     log('User not authorized');
@@ -45,10 +45,11 @@ export async function checkAuth(request: Request) {
   }
 
   return {
-    token,
-    authKey,
-    shareToken,
     user,
+    grant,
+    token,
+    shareToken,
+    authKey,
   };
 }
 
@@ -70,9 +71,9 @@ export async function hasPermission(role: string, permission: string | string[])
   return ensureArray(permission).some(e => ROLE_PERMISSIONS[role]?.includes(e));
 }
 
-export function parseShareToken(request: Request) {
+export function parseShareToken(headers: Headers) {
   try {
-    return parseToken(request.headers.get(SHARE_TOKEN_HEADER), secret());
+    return parseToken(headers.get(SHARE_TOKEN_HEADER), secret());
   } catch (e) {
     log(e);
     return null;

src/lib/types.ts

@@ -1,5 +1,5 @@
 import { UseQueryOptions } from '@tanstack/react-query';
-import { DATA_TYPE, ROLES, OPERATORS } from './constants';
+import { DATA_TYPE, PERMISSIONS, ROLES, OPERATORS } from './constants';
 import { TIME_UNIT } from './date';
 
 export type ObjectValues<T> = T[keyof T];
@@ -7,6 +7,7 @@ export type ObjectValues<T> = T[keyof T];
 export type ReactQueryOptions<T = any> = Omit<UseQueryOptions<T, Error, T>, 'queryKey' | 'queryFn'>;
 
 export type TimeUnit = ObjectValues<typeof TIME_UNIT>;
+export type Permission = ObjectValues<typeof PERMISSIONS>;
 export type Role = ObjectValues<typeof ROLES>;
 export type DynamicDataType = ObjectValues<typeof DATA_TYPE>;
 export type Operator = (typeof OPERATORS)[keyof typeof OPERATORS];
@@ -18,6 +19,7 @@ export interface Auth {
     role: string;
     isAdmin: boolean;
   };
+  grant?: Permission[];
   shareToken?: {
     websiteId: string;
   };

src/permissions/team.ts

@@ -3,6 +3,8 @@ import { PERMISSIONS } from '@/lib/constants';
 import { getTeamUser } from '@/queries';
 import { hasPermission } from '@/lib/auth';
 
+const cloudMode = !!process.env.CLOUD_URL;
+
 export async function canViewTeam({ user }: Auth, teamId: string) {
   if (user.isAdmin) {
     return true;
@@ -11,7 +13,11 @@ export async function canViewTeam({ user }: Auth, teamId: string) {
   return getTeamUser(teamId, user.id);
 }
 
-export async function canCreateTeam({ user }: Auth) {
+export async function canCreateTeam({ user, grant }: Auth) {
+  if (cloudMode) {
+    return !!grant?.find(a => a === PERMISSIONS.teamCreate);
+  }
+
   if (user.isAdmin) {
     return true;
   }
@@ -19,11 +25,15 @@ export async function canCreateTeam({ user }: Auth) {
   return !!user;
 }
 
-export async function canUpdateTeam({ user }: Auth, teamId: string) {
+export async function canUpdateTeam({ user, grant }: Auth, teamId: string) {
   if (user.isAdmin) {
     return true;
   }
 
+  if (cloudMode) {
+    return !!grant?.find(a => a === PERMISSIONS.teamUpdate);
+  }
+
   const teamUser = await getTeamUser(teamId, user.id);
 
   return teamUser && hasPermission(teamUser.role, PERMISSIONS.teamUpdate);
@@ -39,7 +49,11 @@ export async function canDeleteTeam({ user }: Auth, teamId: string) {
   return teamUser && hasPermission(teamUser.role, PERMISSIONS.teamDelete);
 }
 
-export async function canAddUserToTeam({ user }: Auth) {
+export async function canAddUserToTeam({ user, grant }: Auth) {
+  if (cloudMode) {
+    return !!grant?.find(a => a === PERMISSIONS.teamUpdate);
+  }
+
   return user.isAdmin;
 }
 

src/permissions/website.ts

@@ -3,6 +3,8 @@ import { PERMISSIONS } from '@/lib/constants';
 import { hasPermission } from '@/lib/auth';
 import { getTeamUser, getWebsite } from '@/queries';
 
+const cloudMode = !!process.env.CLOUD_URL;
+
 export async function canViewWebsite({ user, shareToken }: Auth, websiteId: string) {
   if (user?.isAdmin) {
     return true;
@@ -31,7 +33,11 @@ export async function canViewAllWebsites({ user }: Auth) {
   return user.isAdmin;
 }
 
-export async function canCreateWebsite({ user }: Auth) {
+export async function canCreateWebsite({ user, grant }: Auth) {
+  if (cloudMode) {
+    return !!grant?.find(a => a === PERMISSIONS.websiteCreate);
+  }
+
   if (user.isAdmin) {
     return true;
   }