From e1ac3cd5d2903765e13229d331bf16e28a7c587b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 21 May 2021 11:00:08 +0100
Subject: [PATCH] Rename general settings to organisation and add builder theme
 to Theming page, add password changing and user info changing to avatar
 dropdown

---
 .../settings}/ChangePasswordModal.svelte      |  2 +-
 .../components/settings/ThemeEditor.svelte    | 12 ------
 .../settings/ThemeEditorDropdown.svelte       | 35 ----------------
 .../settings}/UpdateUserInfoModal.svelte      |  0
 .../start/BuilderSettingsModal.svelte         | 42 -------------------
 .../src/pages/builder/apps/index.svelte       |  7 ++--
 .../src/pages/builder/portal/_layout.svelte   | 32 +++++++++-----
 .../{general.svelte => organisation.svelte}   |  7 ++--
 .../builder/portal/settings/theming.svelte    | 36 ++++++++++++++++
 9 files changed, 66 insertions(+), 107 deletions(-)
 rename packages/builder/src/{pages/builder/apps/_components => components/settings}/ChangePasswordModal.svelte (91%)
 delete mode 100644 packages/builder/src/components/settings/ThemeEditor.svelte
 delete mode 100644 packages/builder/src/components/settings/ThemeEditorDropdown.svelte
 rename packages/builder/src/{pages/builder/apps/_components => components/settings}/UpdateUserInfoModal.svelte (100%)
 delete mode 100644 packages/builder/src/components/start/BuilderSettingsModal.svelte
 rename packages/builder/src/pages/builder/portal/settings/{general.svelte => organisation.svelte} (94%)
 create mode 100644 packages/builder/src/pages/builder/portal/settings/theming.svelte

diff --git a/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte b/packages/builder/src/components/settings/ChangePasswordModal.svelte
similarity index 91%
rename from packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
rename to packages/builder/src/components/settings/ChangePasswordModal.svelte
index b0cb74cb64..d78c4c7efd 100644
--- a/packages/builder/src/pages/builder/apps/_components/ChangePasswordModal.svelte
+++ b/packages/builder/src/components/settings/ChangePasswordModal.svelte
@@ -9,7 +9,7 @@
   const updatePassword = async () => {
     try {
       await auth.updateSelf({ ...$auth.user, password })
-      notifications.success("Information updated successfully")
+      notifications.success("Password changed successfully")
     } catch (error) {
       notifications.error("Failed to update password")
     }
diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte
deleted file mode 100644
index 8e387b6492..0000000000
--- a/packages/builder/src/components/settings/ThemeEditor.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { themeStore } from "builderStore"
-  import { Select } from "@budibase/bbui"
-  import { capitalise } from "../../helpers"
-</script>
-
-<Select
-  options={$themeStore.options}
-  bind:value={$themeStore.theme}
-  placeholder={null}
-  getOptionLabel={capitalise}
-/>
diff --git a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
deleted file mode 100644
index 8e1a9a4601..0000000000
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
-  import ThemeEditor from "./ThemeEditor.svelte"
-
-  let modal
-</script>
-
-<div class="topnavitemright" on:click={modal.show}>
-  <Icon hoverable name="ColorFill" />
-</div>
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Builder Theme"
-    confirmText="Done"
-    showCancelButton={false}
-  >
-    <ThemeEditor />
-  </ModalContent>
-</Modal>
-
-<style>
-  .topnavitemright {
-    cursor: pointer;
-    color: var(--grey-7);
-    margin: 0 12px 0 0;
-    font-weight: 500;
-    font-size: 1rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 24px;
-    width: 24px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte b/packages/builder/src/components/settings/UpdateUserInfoModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/apps/_components/UpdateUserInfoModal.svelte
rename to packages/builder/src/components/settings/UpdateUserInfoModal.svelte
diff --git a/packages/builder/src/components/start/BuilderSettingsModal.svelte b/packages/builder/src/components/start/BuilderSettingsModal.svelte
deleted file mode 100644
index 3026dc62cc..0000000000
--- a/packages/builder/src/components/start/BuilderSettingsModal.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-  import {
-    Heading,
-    Divider,
-    notifications,
-    ModalContent,
-    Toggle,
-    Body,
-  } from "@budibase/bbui"
-  import ThemeEditor from "components/settings/ThemeEditor.svelte"
-  import analytics from "analytics"
-
-  $: analyticsDisabled = analytics.disabled()
-
-  async function save() {
-    notifications.success(`Settings saved.`)
-  }
-
-  function toggleAnalytics() {
-    if (analyticsDisabled) {
-      analytics.optIn()
-    } else {
-      analytics.optOut()
-    }
-  }
-</script>
-
-<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
-  <Heading size="XS">Theme</Heading>
-  <ThemeEditor />
-  <Divider noMargin noGrid />
-  <Heading size="XS">Analytics</Heading>
-  <Body size="S">
-    If you would like to send analytics that help us make budibase better,
-    please let us know below.
-  </Body>
-  <Toggle
-    text="Send Analytics To Budibase"
-    value={!analyticsDisabled}
-    on:change={toggleAnalytics}
-  />
-</ModalContent>
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index cc10fc6e4a..c5a1218a63 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -17,8 +17,8 @@
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
-  import UpdateUserInfoModal from "./_components/UpdateUserInfoModal.svelte"
-  import ChangePasswordModal from "./_components/ChangePasswordModal.svelte"
+  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
 
   let loaded = false
   let userInfoModal
@@ -31,10 +31,11 @@
   })
 </script>
 
-{#if loaded}
+{#if $auth.user && loaded}
   <div class="container">
     <Page>
       <div class="content">
+        asdas
         <Layout noPadding>
           <img src={$organisation.logoUrl} />
           <div class="info-title">
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index bfb0e9606c..d1c9414f7f 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -13,11 +13,13 @@
   } from "@budibase/bbui"
   import ConfigChecklist from "components/common/ConfigChecklist.svelte"
   import { organisation, auth } from "stores/portal"
-  import BuilderSettingsModal from "components/start/BuilderSettingsModal.svelte"
   import { onMount } from "svelte"
+  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
 
-  let oldSettingsModal
   let loaded = false
+  let userInfoModal
+  let changePasswordModal
 
   const menu = [
     { title: "Apps", href: "/builder/portal/apps" },
@@ -25,12 +27,11 @@
     { title: "Auth", href: "/builder/portal/manage/auth" },
     { title: "Email", href: "/builder/portal/manage/email" },
     {
-      title: "General",
-      href: "/builder/portal/settings/general",
+      title: "Organisation",
+      href: "/builder/portal/settings/organisation",
       heading: "Settings",
     },
-    { title: "Theming", href: "/builder/portal/theming" },
-    { title: "Account", href: "/builder/portal/account" },
+    { title: "Theming", href: "/builder/portal/settings/theming" },
   ]
 
   onMount(async () => {
@@ -44,7 +45,7 @@
   })
 </script>
 
-{#if loaded}
+{#if $auth.user && loaded}
   <div class="container">
     <div class="nav">
       <Layout paddingX="L" paddingY="L">
@@ -77,8 +78,14 @@
             <Avatar size="M" name="John Doe" />
             <Icon size="XL" name="ChevronDown" />
           </div>
-          <MenuItem icon="Settings" on:click={oldSettingsModal.show}>
-            Old settings
+          <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
+            Update user information
+          </MenuItem>
+          <MenuItem
+            icon="LockClosed"
+            on:click={() => changePasswordModal.show()}
+          >
+            Update password
           </MenuItem>
           <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
             Close developer mode
@@ -91,8 +98,11 @@
       </div>
     </div>
   </div>
-  <Modal bind:this={oldSettingsModal} width="30%">
-    <BuilderSettingsModal />
+  <Modal bind:this={userInfoModal}>
+    <UpdateUserInfoModal />
+  </Modal>
+  <Modal bind:this={changePasswordModal}>
+    <ChangePasswordModal />
   </Modal>
 {/if}
 
diff --git a/packages/builder/src/pages/builder/portal/settings/general.svelte b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
similarity index 94%
rename from packages/builder/src/pages/builder/portal/settings/general.svelte
rename to packages/builder/src/pages/builder/portal/settings/organisation.svelte
index bfd6c57b8d..ec278fa0e4 100644
--- a/packages/builder/src/pages/builder/portal/settings/general.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@@ -66,10 +66,11 @@
 
 <Layout>
   <Layout gap="XS" noPadding>
-    <Heading size="M">General</Heading>
+    <Heading size="M">Organisation</Heading>
     <Body>
-      General is the place where you edit your organisation name, logo. You can
-      also configure your platform URL as well as turn on or off analytics.
+      Organisation settings is where you can edit your organisation name and
+      logo. You can also configure your platform URL and enable or disable
+      analytics.
     </Body>
   </Layout>
   <Divider size="S" />
diff --git a/packages/builder/src/pages/builder/portal/settings/theming.svelte b/packages/builder/src/pages/builder/portal/settings/theming.svelte
new file mode 100644
index 0000000000..17b811b1fd
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/settings/theming.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { capitalise } from "helpers"
+</script>
+
+<Layout>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">Theming</Heading>
+    <Body>Customize how Budibase looks and feels.</Body>
+  </Layout>
+  <Divider size="S" />
+  <div class="fields">
+    <div class="field">
+      <Label size="L">Builder theme</Label>
+      <Select
+        options={$themeStore.options}
+        bind:value={$themeStore.theme}
+        placeholder={null}
+        getOptionLabel={capitalise}
+      />
+    </div>
+  </div>
+</Layout>
+
+<style>
+  .fields {
+    display: grid;
+    grid-gap: var(--spacing-m);
+  }
+  .field {
+    display: grid;
+    grid-template-columns: 33% 1fr;
+    align-items: center;
+  }
+</style>