Updated settings.

components/layout/SettingsLayout.js

@@ -1,23 +1,32 @@
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import AppLayout from './AppLayout';
-import styles from './SettingsLayout.module.css';
-import useMessages from 'hooks/useMessages';
 import SideNav from './SideNav';
+import useUser from 'hooks/useUser';
+import useMessages from 'hooks/useMessages';
+import useConfig from 'hooks/useConfig';
+import styles from './SettingsLayout.module.css';
 
 export default function SettingsLayout({ children }) {
+  const { user } = useUser();
+  const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
+  const { cloudMode } = useConfig();
 
   const items = [
-    { label: formatMessage(labels.websites), url: '/settings/websites' },
-    { label: formatMessage(labels.teams), url: '/settings/teams' },
-    { label: formatMessage(labels.users), url: '/settings/users' },
-    { label: formatMessage(labels.profile), url: '/settings/profile' },
-  ];
+    { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
+    { key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+    user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
+    { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
+  ].filter(n => n);
+
+  const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
 
   return (
     <AppLayout>
       <div className={styles.container}>
-        <div className={styles.menu}>
-          <SideNav items={items} />
+        <div className={classNames(styles.menu, { [styles.hidden]: cloudMode })}>
+          <SideNav items={items} shallow={true} selectedKey={getKey()} />
         </div>
         <div className={styles.content}>{children}</div>
       </div>

components/layout/SettingsLayout.module.css

@@ -9,9 +9,15 @@
   flex-direction: column;
   width: 200px;
   padding: 40px 0;
+  margin-right: 20px;
 }
 
 .content {
   display: flex;
   flex-direction: column;
 }
+
+.menu.hidden {
+  visibility: hidden;
+  width: 0;
+}

components/layout/SideNav.js

@@ -2,9 +2,9 @@ import { Menu, Item } from 'react-basics';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
-export default function SideNav({ selectedKey, items, shallow }) {
+export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
   return (
-    <Menu items={items} selectedKey={selectedKey} className={styles.menu}>
+    <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
       {({ key, label, url }) => (
         <Item key={key} className={styles.item}>
           <Link href={url} shallow={shallow}>

components/layout/SideNav.module.css

@@ -11,4 +11,5 @@
 
 .item {
   padding: 0;
+  border-radius: var(--border-radius);
 }

components/metrics/WebsiteChart.js

@@ -71,7 +71,7 @@ export default function WebsiteChart({
       <WebsiteHeader websiteId={websiteId} title={title} domain={domain}>
         {showDetailsButton && (
           <Link href={`/websites/${websiteId}`}>
-            <Button>
+            <Button variant="primary">
               <Text>{formatMessage(labels.viewDetails)}</Text>
               <Icon>
                 <Icons.ArrowRight />

components/pages/login/LoginForm.module.css

@@ -1,5 +1,5 @@
 .login {
-  width: 300px;
+  width: 400px;
   margin: auto;
   transform: translateY(-25%);
 }
@@ -7,6 +7,8 @@
 .form {
   display: flex;
   flex-direction: column;
+  margin: 0 auto;
+  width: 300px;
 }
 
 .title {

components/pages/settings/profile/ProfileDetails.js

@@ -3,12 +3,15 @@ import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
 import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
 import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
+import PasswordChangeButton from './PasswordChangeButton';
 import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
+import useConfig from 'hooks/useConfig';
 
 export default function ProfileDetails() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
+  const { cloudMode } = useConfig();
 
   if (!user) {
     return null;
@@ -22,6 +25,11 @@ export default function ProfileDetails() {
       <FormRow label={formatMessage(labels.role)}>
         {formatMessage(labels[role] || labels.unknown)}
       </FormRow>
+      {!cloudMode && (
+        <FormRow label={formatMessage(labels.password)}>
+          <PasswordChangeButton />
+        </FormRow>
+      )}
       <FormRow label={formatMessage(labels.defaultDateRange)}>
         <DateRangeSetting />
       </FormRow>

components/pages/settings/profile/ProfileSettings.js

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

pages/login.js

@@ -16,7 +16,7 @@ export default function LoginPage({ disabled }) {
 export async function getServerSideProps() {
   return {
     props: {
-      disabled: !!process.env.DISABLE_LOGIN,
+      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 dest = process.env.CLOUD_MODE ? 'profile' : 'websites';
+
   return {
     redirect: {
-      destination: '/settings/websites',
+      destination: `/settings/${dest}`,
       permanent: true,
     },
   };

pages/settings/profile/index.js

@@ -1,10 +1,10 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
 
 export default function ProfilePage() {
   return (
-    <AppLayout>
+    <SettingsLayout>
       <ProfileSettings />
-    </AppLayout>
+    </SettingsLayout>
   );
 }

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

@@ -1,4 +1,4 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import { useRouter } from 'next/router';
 
@@ -11,9 +11,9 @@ export default function TeamDetailPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <TeamSettings teamId={id} />
-    </AppLayout>
+    </SettingsLayout>
   );
 }
 

pages/settings/teams/index.js

@@ -1,4 +1,4 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
 
 export default function TeamsPage({ disabled }) {
@@ -7,9 +7,9 @@ export default function TeamsPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <TeamsList />
-    </AppLayout>
+    </SettingsLayout>
   );
 }
 

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

@@ -1,4 +1,4 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import { useRouter } from 'next/router';
 
@@ -11,9 +11,9 @@ export default function TeamDetailPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <UserSettings userId={id} />
-    </AppLayout>
+    </SettingsLayout>
   );
 }
 

pages/settings/users/index.js

@@ -1,4 +1,4 @@
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 import UsersList from 'components/pages/settings/users/UsersList';
 
 export default function UsersPage({ disabled }) {
@@ -7,9 +7,9 @@ export default function UsersPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <UsersList />
-    </AppLayout>
+    </SettingsLayout>
   );
 }
 

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

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
-import AppLayout from 'components/layout/AppLayout';
+import SettingsLayout from 'components/layout/SettingsLayout';
 
 export default function WebsiteSettingsPage({ disabled }) {
   const router = useRouter();
@@ -11,9 +11,9 @@ export default function WebsiteSettingsPage({ disabled }) {
   }
 
   return (
-    <AppLayout>
+    <SettingsLayout>
       <WebsiteSettings websiteId={id} />
-    </AppLayout>
+    </SettingsLayout>
   );
 }