Added checks for CLOUD_MODE.

components/layout/AppLayout.js

@@ -2,13 +2,15 @@ import { Container } from 'react-basics';
 import Head from 'next/head';
 import NavBar from 'components/layout/NavBar';
 import useRequireLogin from 'hooks/useRequireLogin';
+import useConfig from 'hooks/useConfig';
 import { UI_LAYOUT_BODY } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
 export default function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
+  const config = useConfig();
 
-  if (!user) {
+  if (!user || !config) {
     return null;
   }
 

components/layout/NavBar.js

@@ -10,9 +10,11 @@ import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
 import NavGroup from './NavGroup';
 import styles from './NavBar.module.css';
+import useConfig from 'hooks/useConfig';
 
 export default function NavBar() {
   const { user } = useUser();
+  const { cloudMode } = useConfig();
   const { formatMessage } = useIntl();
   const [minimized, setMinimized] = useState(false);
   const tooltipPosition = minimized ? 'right' : 'top';
@@ -24,13 +26,21 @@ export default function NavBar() {
   ];
 
   const settings = [
-    { label: formatMessage(labels.websites), url: '/settings/websites', icon: <Icons.Globe /> },
+    !cloudMode && {
+      label: formatMessage(labels.websites),
+      url: '/settings/websites',
+      icon: <Icons.Globe />,
+    },
     user?.isAdmin && {
       label: formatMessage(labels.users),
       url: '/settings/users',
       icon: <Icons.User />,
     },
-    { label: formatMessage(labels.teams), url: '/settings/teams', icon: <Icons.Users /> },
+    !cloudMode && {
+      label: formatMessage(labels.teams),
+      url: '/settings/teams',
+      icon: <Icons.Users />,
+    },
     { label: formatMessage(labels.profile), url: '/settings/profile', icon: <Icons.Profile /> },
   ].filter(n => n);
 
@@ -53,7 +63,7 @@ export default function NavBar() {
         <div className={styles.buttons}>
           <ThemeButton tooltipPosition={tooltipPosition} />
           <LanguageButton tooltipPosition={tooltipPosition} />
-          <LogoutButton tooltipPosition={tooltipPosition} />
+          {!cloudMode && <LogoutButton tooltipPosition={tooltipPosition} />}
         </div>
       </div>
     </div>

components/pages/settings/profile/ProfileSettings.js

@@ -4,14 +4,16 @@ import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from './ProfileDetails';
 import PasswordChangeButton from './PasswordChangeButton';
 import { labels } from 'components/messages';
+import useConfig from 'hooks/useConfig';
 
 export default function ProfileSettings() {
   const { formatMessage } = useIntl();
+  const { cloudMode } = useConfig();
 
   return (
     <Page>
       <PageHeader title={formatMessage(labels.profile)}>
-        <PasswordChangeButton />
+        {!cloudMode && <PasswordChangeButton />}
       </PageHeader>
       <ProfileDetails />
     </Page>

components/pages/settings/teams/TeamsList.js

@@ -65,7 +65,7 @@ export default function TeamsList() {
   return (
     <Page loading={isLoading} error={error}>
       {toast}
-      <PageHeader title={formatMessage(labels.team)}>
+      <PageHeader title={formatMessage(labels.teams)}>
         {hasData && (
           <Flexbox gap={10}>
             {joinButton}

components/pages/settings/websites/WebsiteData.js

@@ -1,10 +1,10 @@
-import { Button, Form, FormRow, Modal, ModalTrigger } from 'react-basics';
+import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
 import { useIntl } from 'react-intl';
 import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
 import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
 import { labels, messages } from 'components/messages';
 
-export default function WebsiteReset({ websiteId, onSave }) {
+export default function WebsiteData({ websiteId, onSave }) {
   const { formatMessage } = useIntl();
 
   const handleReset = async () => {
@@ -16,29 +16,33 @@ export default function WebsiteReset({ websiteId, onSave }) {
   };
 
   return (
-    <Form>
-      <FormRow label={formatMessage(labels.resetWebsite)}>
-        <p>{formatMessage(messages.resetWebsiteWarning)}</p>
+    <>
+      <ActionForm
+        label={formatMessage(labels.resetWebsite)}
+        description={formatMessage(messages.resetWebsiteWarning)}
+      >
         <ModalTrigger>
-          <Button>{formatMessage(labels.reset)}</Button>
+          <Button variant="secondary">{formatMessage(labels.reset)}</Button>
           <Modal title={formatMessage(labels.resetWebsite)}>
             {close => (
               <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
             )}
           </Modal>
         </ModalTrigger>
-      </FormRow>
-      <FormRow label={formatMessage(labels.deleteWebsite)}>
-        <p>{formatMessage(messages.deleteWebsiteWarning)}</p>
+      </ActionForm>
+      <ActionForm
+        label={formatMessage(labels.deleteWebsite)}
+        description={formatMessage(messages.deleteWebsiteWarning)}
+      >
         <ModalTrigger>
-          <Button>Delete</Button>
+          <Button variant="danger">Delete</Button>
           <Modal title={formatMessage(labels.deleteWebsite)}>
             {close => (
               <WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
             )}
           </Modal>
         </ModalTrigger>
-      </FormRow>
-    </Form>
+      </ActionForm>
+    </>
   );
 }

components/pages/settings/websites/WebsiteSettings.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteEditForm from 'components/pages/settings/websites/WebsiteEditForm';
-import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
+import WebsiteData from 'components/pages/settings/websites/WebsiteData';
 import TrackingCode from 'components/pages/settings/websites/TrackingCode';
 import ShareUrl from 'components/pages/settings/websites/ShareUrl';
 import useApi from 'hooks/useApi';
@@ -59,8 +59,8 @@ export default function WebsiteSettings({ websiteId }) {
           </Breadcrumbs>
         }
       >
-        <Link href={`/websites/${websiteId}`}>
-          <a>
+        <Link href={`/analytics/websites/${websiteId}`}>
+          <a target="_blank">
             <Button variant="primary">
               <Icon>
                 <Icons.External />
@@ -81,7 +81,7 @@ export default function WebsiteSettings({ websiteId }) {
       )}
       {tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
       {tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
-      {tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleReset} />}
+      {tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
     </Page>
   );
 }

lib/types.ts

@@ -24,6 +24,13 @@ export interface NextApiRequestAuth extends NextApiRequest {
   headers: any;
 }
 
+export interface User {
+  id: string;
+  username: string;
+  password?: string;
+  createdAt?: Date;
+}
+
 export interface Website {
   id: string;
   userId: string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/api/auth/login.ts

@@ -8,9 +8,9 @@ import {
   getRandomChars,
 } from 'next-basics';
 import redis from '@umami/redis-client';
-import { getUser, User } from 'queries';
+import { getUser } from 'queries';
 import { secret } from 'lib/crypto';
-import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiRequestQueryBody, User } from 'lib/types';
 import { NextApiResponse } from 'next';
 
 export interface LoginRequestBody {

pages/api/config.ts

@@ -7,6 +7,7 @@ export interface ConfigResponse {
   updatesDisabled: boolean;
   telemetryDisabled: boolean;
   adminDisabled: boolean;
+  cloudMode: boolean;
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>) => {
@@ -17,6 +18,7 @@ export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>)
       updatesDisabled: !!process.env.DISABLE_UPDATES,
       telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
       adminDisabled: !!process.env.DISABLE_ADMIN,
+      cloudMode: true, //!!process.env.CLOUD_MODE,
     });
   }
 

pages/api/me/index.ts

@@ -0,0 +1,13 @@
+import { NextApiResponse } from 'next';
+import { useAuth } from 'lib/middleware';
+import { NextApiRequestQueryBody, User } from 'lib/types';
+import { ok } from 'next-basics';
+
+export default async (
+  req: NextApiRequestQueryBody<unknown, unknown>,
+  res: NextApiResponse<User>,
+) => {
+  await useAuth(req, res);
+
+  return ok(res, req.auth.user);
+};

pages/api/me/password.ts

@@ -1,4 +1,4 @@
-import { NextApiRequestQueryBody } from 'lib/types';
+import { NextApiRequestQueryBody, User } from 'lib/types';
 import { canUpdateUser } from 'lib/auth';
 import { useAuth } from 'lib/middleware';
 import { NextApiResponse } from 'next';
@@ -7,10 +7,11 @@ import {
   checkPassword,
   hashPassword,
   methodNotAllowed,
+  forbidden,
   ok,
   unauthorized,
 } from 'next-basics';
-import { getUser, updateUser, User } from 'queries';
+import { getUser, updateUser } from 'queries';
 
 export interface UserPasswordRequestQuery {
   id: string;
@@ -25,6 +26,10 @@ export default async (
   req: NextApiRequestQueryBody<UserPasswordRequestQuery, UserPasswordRequestBody>,
   res: NextApiResponse<User>,
 ) => {
+  if (process.env.CLOUD_MODE) {
+    return forbidden(res);
+  }
+
   await useAuth(req, res);
 
   const { currentPassword, newPassword } = req.body;

pages/console/[[...id]].js

@@ -1,8 +1,8 @@
 import AppLayout from 'components/layout/AppLayout';
 import TestConsole from 'components/pages/console/TestConsole';
 
-export default function ConsolePage({ pageDisabled }) {
-  if (pageDisabled) {
+export default function ConsolePage({ disabled }) {
+  if (disabled) {
     return null;
   }
 
@@ -16,7 +16,7 @@ export default function ConsolePage({ pageDisabled }) {
 export async function getServerSideProps() {
   return {
     props: {
-      pageDisabled: !process.env.ENABLE_TEST_CONSOLE,
+      disabled: !process.env.ENABLE_TEST_CONSOLE,
     },
   };
 }

pages/login.js

@@ -1,8 +1,8 @@
 import LoginLayout from 'components/pages/login/LoginLayout';
 import LoginForm from 'components/pages/login/LoginForm';
 
-export default function LoginPage({ pageDisabled }) {
-  if (pageDisabled) {
+export default function LoginPage({ disabled }) {
+  if (disabled) {
     return null;
   }
 
@@ -16,7 +16,7 @@ export default function LoginPage({ pageDisabled }) {
 export async function getServerSideProps() {
   return {
     props: {
-      pageDisabled: !!process.env.DISABLE_LOGIN,
+      disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
     },
   };
 }

pages/logout.js

@@ -4,7 +4,7 @@ import useApi from 'hooks/useApi';
 import { setUser } from 'store/app';
 import { removeClientAuthToken } from 'lib/client';
 
-export default function LogoutPage() {
+export default function LogoutPage({ disabled }) {
   const router = useRouter();
   const { post } = useApi();
 
@@ -13,6 +13,7 @@ export default function LogoutPage() {
       await post('/logout');
     }
 
+    if (!disabled) {
       removeClientAuthToken();
 
       logout();
@@ -20,7 +21,16 @@ export default function LogoutPage() {
       router.push('/login');
 
       return () => setUser(null);
-  }, []);
+    }
+  }, [disabled, router, post]);
 
   return null;
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
+    },
+  };
+}

pages/settings/index.js

@@ -1,9 +1,11 @@
 export default () => null;
 
 export async function getServerSideProps() {
+  const destination = process.env.CLOUD_MODE ? 'https://cloud.umami.is' : '/settings/websites';
+
   return {
     redirect: {
-      destination: '/settings/websites',
+      destination,
       permanent: true,
     },
   };

pages/settings/teams/[id]/index.js

@@ -2,13 +2,25 @@ import AppLayout from 'components/layout/AppLayout';
 import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import { useRouter } from 'next/router';
 
-export default function TeamDetailPage() {
+export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
 
+  if (!id || disabled) {
+    return null;
+  }
+
   return (
     <AppLayout>
       <TeamSettings teamId={id} />
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

pages/settings/teams/index.js

@@ -1,10 +1,22 @@
 import AppLayout from 'components/layout/AppLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
 
-export default function TeamsPage() {
+export default function TeamsPage({ disabled }) {
+  if (disabled) {
+    return null;
+  }
+
   return (
     <AppLayout>
       <TeamsList />
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

pages/settings/users/[id]/index.js

@@ -2,13 +2,25 @@ import AppLayout from 'components/layout/AppLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import { useRouter } from 'next/router';
 
-export default function TeamDetailPage() {
+export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
 
+  if (!id || disabled) {
+    return null;
+  }
+
   return (
     <AppLayout>
       <UserSettings userId={id} />
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

pages/settings/users/index.js

@@ -1,12 +1,8 @@
 import AppLayout from 'components/layout/AppLayout';
-import useConfig from 'hooks/useConfig';
-
 import UsersList from 'components/pages/settings/users/UsersList';
 
-export default function UsersPage() {
-  const { adminDisabled } = useConfig();
-
-  if (adminDisabled) {
+export default function UsersPage({ disabled }) {
+  if (disabled) {
     return null;
   }
 
@@ -16,3 +12,11 @@ export default function UsersPage() {
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

pages/settings/websites/[id]/index.js

@@ -2,11 +2,11 @@ import { useRouter } from 'next/router';
 import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
 import AppLayout from 'components/layout/AppLayout';
 
-export default function WebsiteSettingsPage() {
+export default function WebsiteSettingsPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
 
-  if (!id) {
+  if (!id || disabled) {
     return null;
   }
 
@@ -16,3 +16,11 @@ export default function WebsiteSettingsPage() {
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

pages/settings/websites/index.js

@@ -1,10 +1,22 @@
 import AppLayout from 'components/layout/AppLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
 
-export default function WebsitesPage() {
+export default function WebsitesPage({ disabled }) {
+  if (disabled) {
+    return null;
+  }
+
   return (
     <AppLayout>
       <WebsitesList />
     </AppLayout>
   );
 }
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      disabled: !!process.env.CLOUD_MODE,
+    },
+  };
+}

queries/admin/user.ts

@@ -1,14 +1,7 @@
 import { Prisma, Team } from '@prisma/client';
 import cache from 'lib/cache';
 import prisma from 'lib/prisma';
-import { Website } from 'lib/types';
-
-export interface User {
-  id: string;
-  username: string;
-  password?: string;
-  createdAt?: Date;
-}
+import { Website, User } from 'lib/types';
 
 export async function getUser(
   where: Prisma.UserWhereUniqueInput,

styles/index.css

@@ -1,3 +1,8 @@
+html {
+  overflow-x: hidden;
+  margin-right: calc(-1 * (100vw - 100%));
+}
+
 html,
 body {
   font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,