From 9260e5bc33277ca1c77b5d4adf02664f24d89c54 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 23 Mar 2023 16:33:10 -0700
Subject: [PATCH] Updated settings.

---
 components/layout/SettingsLayout.js           | 27 ++++++++++++-------
 components/layout/SettingsLayout.module.css   |  6 +++++
 components/layout/SideNav.js                  |  4 +--
 components/layout/SideNav.module.css          |  1 +
 components/metrics/WebsiteChart.js            |  2 +-
 components/pages/login/LoginForm.module.css   |  4 ++-
 .../pages/settings/profile/ProfileDetails.js  |  8 ++++++
 .../pages/settings/profile/ProfileSettings.js |  7 +----
 pages/login.js                                |  2 +-
 pages/settings/index.js                       |  4 ++-
 pages/settings/profile/index.js               |  6 ++---
 pages/settings/teams/[id]/index.js            |  6 ++---
 pages/settings/teams/index.js                 |  6 ++---
 pages/settings/users/[id]/index.js            |  6 ++---
 pages/settings/users/index.js                 |  6 ++---
 pages/settings/websites/[id]/index.js         |  6 ++---
 16 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/components/layout/SettingsLayout.js b/components/layout/SettingsLayout.js
index be4a07e3..b7cb093f 100644
--- a/components/layout/SettingsLayout.js
+++ b/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>
diff --git a/components/layout/SettingsLayout.module.css b/components/layout/SettingsLayout.module.css
index 5f0884c4..770d4b87 100644
--- a/components/layout/SettingsLayout.module.css
+++ b/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;
+}
diff --git a/components/layout/SideNav.js b/components/layout/SideNav.js
index 2706dc7f..e521fe42 100644
--- a/components/layout/SideNav.js
+++ b/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}>
diff --git a/components/layout/SideNav.module.css b/components/layout/SideNav.module.css
index e55f5d7a..b664194d 100644
--- a/components/layout/SideNav.module.css
+++ b/components/layout/SideNav.module.css
@@ -11,4 +11,5 @@
 
 .item {
   padding: 0;
+  border-radius: var(--border-radius);
 }
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index b66f8ac2..0bf23b16 100644
--- a/components/metrics/WebsiteChart.js
+++ b/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 />
diff --git a/components/pages/login/LoginForm.module.css b/components/pages/login/LoginForm.module.css
index 3e9268d9..0d3f981f 100644
--- a/components/pages/login/LoginForm.module.css
+++ b/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 {
diff --git a/components/pages/settings/profile/ProfileDetails.js b/components/pages/settings/profile/ProfileDetails.js
index 5569053c..9d2d8c0d 100644
--- a/components/pages/settings/profile/ProfileDetails.js
+++ b/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>
diff --git a/components/pages/settings/profile/ProfileSettings.js b/components/pages/settings/profile/ProfileSettings.js
index d2b73159..53fa48a5 100644
--- a/components/pages/settings/profile/ProfileSettings.js
+++ b/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>
   );
diff --git a/pages/login.js b/pages/login.js
index 9a1f3c45..88c19121 100644
--- a/pages/login.js
+++ b/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),
     },
   };
 }
diff --git a/pages/settings/index.js b/pages/settings/index.js
index 70e8d249..f76d6406 100644
--- a/pages/settings/index.js
+++ b/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,
     },
   };
diff --git a/pages/settings/profile/index.js b/pages/settings/profile/index.js
index 880e05a8..c5dbea4f 100644
--- a/pages/settings/profile/index.js
+++ b/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>
   );
 }
diff --git a/pages/settings/teams/[id]/index.js b/pages/settings/teams/[id]/index.js
index ba4e812c..6a33ff46 100644
--- a/pages/settings/teams/[id]/index.js
+++ b/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>
   );
 }
 
diff --git a/pages/settings/teams/index.js b/pages/settings/teams/index.js
index a4048454..2ce9c6c8 100644
--- a/pages/settings/teams/index.js
+++ b/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>
   );
 }
 
diff --git a/pages/settings/users/[id]/index.js b/pages/settings/users/[id]/index.js
index 8631baa6..311ae2de 100644
--- a/pages/settings/users/[id]/index.js
+++ b/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>
   );
 }
 
diff --git a/pages/settings/users/index.js b/pages/settings/users/index.js
index f4d75f29..635f7d9a 100644
--- a/pages/settings/users/index.js
+++ b/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>
   );
 }
 
diff --git a/pages/settings/websites/[id]/index.js b/pages/settings/websites/[id]/index.js
index 033bdab5..a00133fb 100644
--- a/pages/settings/websites/[id]/index.js
+++ b/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>
   );
 }