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>
   );
 }