google oauth UI

packages/auth/src/db/utils.js

@@ -132,29 +132,30 @@ const determineScopedConfig = async function (db, { type, user, group }) {
       }
     )
   )
-  const configs = response.rows.map(row => {
+
+  function determineScore(row) {
     const config = row.doc
 
     // Config is specific to a user and a group
     if (config._id.includes(generateConfigID({ type, user, group }))) {
-      config.score = 4
+      return 4
     } else if (config._id.includes(generateConfigID({ type, user }))) {
       // Config is specific to a user only
-      config.score = 3
+      return 3
     } else if (config._id.includes(generateConfigID({ type, group }))) {
       // Config is specific to a group only
-      config.score = 2
+      return 2
     } else if (config._id.includes(generateConfigID({ type }))) {
       // Config is specific to a type only
-      config.score = 1
+      return 1
+    }
+    return 0
   }
-    return config
-  })
 
   // Find the config with the most granular scope based on context
-  const scopedConfig = configs.sort((a, b) => b.score - a.score)[0]
+  const scopedConfig = response.rows.sort((a, b) => determineScore(a) - determineScore(b))[0]
 
-  return scopedConfig
+  return scopedConfig.doc
 }
 
 exports.generateConfigID = generateConfigID

packages/builder/src/builderStore/index.js

@@ -2,6 +2,7 @@ import { getFrontendStore } from "./store/frontend"
 import { getAutomationStore } from "./store/automation"
 import { getHostingStore } from "./store/hosting"
 import { getThemeStore } from "./store/theme"
+import { getAdminStore } from "./store/admin"
 import { derived, writable } from "svelte/store"
 import analytics from "analytics"
 import { FrontendTypes, LAYOUT_NAMES } from "../constants"
@@ -11,6 +12,7 @@ export const store = getFrontendStore()
 export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()
 export const hostingStore = getHostingStore()
+export const adminPanelStore = getAdminStore()
 
 export const currentAsset = derived(store, $store => {
   const type = $store.currentFrontEndType

packages/builder/src/builderStore/store/admin.js

@@ -0,0 +1,47 @@
+import { writable } from "svelte/store"
+import api, { get } from "../api"
+
+const INITIAL_ADMIN_STATE = {
+  oauth: []
+}
+
+export const getAdminStore = () => {
+  const store = writable({ ...INITIAL_ADMIN_STATE })
+  store.actions = {
+    fetch: async () => {
+      const responses = await Promise.all([
+        api.get("/api/hosting/"),
+        api.get("/api/hosting/urls"),
+      ])
+      const [info, urls] = await Promise.all(responses.map(resp => resp.json()))
+      store.update(state => {
+        state.hostingInfo = info
+        state.appUrl = urls.app
+        return state
+      })
+      return info
+    },
+    save: async hostingInfo => {
+      const response = await api.post("/api/hosting", hostingInfo)
+      const revision = (await response.json()).rev
+      store.update(state => {
+        state.hostingInfo = {
+          ...hostingInfo,
+          _rev: revision,
+        }
+        return state
+      })
+    },
+    fetchDeployedApps: async () => {
+      let deployments = await (await get("/api/hosting/apps")).json()
+      store.update(state => {
+        state.deployedApps = deployments
+        state.deployedAppNames = Object.values(deployments).map(app => app.name)
+        state.deployedAppUrls = Object.values(deployments).map(app => app.url)
+        return state
+      })
+      return deployments
+    },
+  }
+  return store
+}

packages/builder/src/pages/builder/_layout.svelte

@@ -16,11 +16,14 @@
   {#if $auth.user}
     <div class="root">
       <div class="ui-nav">
-        <div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
+        <div class="home-logo">
+          <img src={Logo} alt="Budibase icon" />
+        </div>
         <div class="nav-section">
           <div class="nav-top">
             <Navigation>
               <Item href="/builder/" icon="Apps" selected>Apps</Item>
+              <Item href="/builder/oauth/" icon="OAuth" selected>OAuth</Item>
               <Item external href="https://portal.budi.live/" icon="Servers">
                 Hosting
               </Item>
@@ -30,15 +33,13 @@
               <Item
                 external
                 href="https://github.com/Budibase/budibase/discussions"
-                icon="PeopleGroup"
-              >
+                icon="PeopleGroup">
                 Community
               </Item>
               <Item
                 external
                 href="https://github.com/Budibase/budibase/issues/new/choose"
-                icon="Bug"
-              >
+                icon="Bug">
                 Raise an issue
               </Item>
             </Navigation>

packages/builder/src/pages/builder/oauth/index.svelte

@@ -0,0 +1,91 @@
+<script>
+  import { hostingStore } from "builderStore"
+  import { HostingTypes } from "constants/backend"
+  import GoogleLogo from "./logos/Google.svelte"
+  import {
+    Button,
+    Heading,
+    Divider,
+    notifications,
+    Input,
+    ModalContent,
+    Toggle,
+    Body,
+  } from "@budibase/bbui"
+  import ThemeEditor from "components/settings/ThemeEditor.svelte"
+  import analytics from "analytics"
+  import { onMount } from "svelte"
+  import api from "builderStore/api"
+
+  const ConfigTypes = {
+    Google: "google",
+    // Github: "github",
+    // AzureAD: "ad",
+  }
+
+  const ConfigFields = {
+    Google: ["clientID", "clientSecret", "callbackURL"],
+  }
+
+  let google
+
+  async function save(doc) {
+    try {
+      // Save an oauth config
+      const response = await api.post(`/api/admin/configs`, doc)
+      const json = await response.json()
+      if (response.status !== 200) throw new Error(json.message)
+
+      google._rev = json._rev
+      google._id = json._id
+      notifications.success(`Settings saved.`)
+    } catch (err) {
+      notifications.error(`Failed to update OAuth settings. ${err}`)
+    }
+  }
+
+  onMount(async () => {
+    // fetch the configs for oauth
+    const googleResponse = await api.get(
+      `/api/admin/configs/${ConfigTypes.Google}`
+    )
+    const googleDoc = await googleResponse.json()
+
+    if (!googleDoc._id) {
+      google = {
+        type: "google",
+        config: {},
+      }
+    } else {
+      google = googleDoc
+    }
+  })
+</script>
+
+<section class="container">
+  <Heading size="M">OAuth</Heading>
+  <Body size="S">
+    Every budibase app comes with basic authentication (email/password)
+    included. You can add additional authentication methods from the options
+    below.
+  </Body>
+  <Divider />
+  {#if google}
+    <div class="form">
+      <Heading size="S">
+        <GoogleLogo />
+        Google
+      </Heading>
+      {#each ConfigFields.Google as field}
+        <Input bind:value={google.config[field]} label={field} />
+      {/each}
+      <Button primary on:click={() => save(google)}>Save</Button>
+    </div>
+  {/if}
+</section>
+
+<style>
+  section {
+    margin: 40px 80px;
+  }
+</style>

packages/builder/src/pages/builder/oauth/logos/Google.svelte

@@ -0,0 +1,38 @@
+<svg
+  width="14"
+  height="14"
+  viewBox="0 0 268 268"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path
+      d="M58.8037 109.043C64.0284 93.2355 74.1116 79.4822 87.615 69.7447C101.118
+      60.0073 117.352 54.783 134 54.8172C152.872 54.8172 169.934 61.5172 183.334
+      72.4828L222.328 33.5C198.566 12.7858 168.114 0 134 0C81.1817 0 35.711
+      30.1277 13.8467 74.2583L58.8037 109.043Z"
+      fill="#EA4335" />
+    <path
+      d="M179.113 201.145C166.942 208.995 151.487 213.183 134 213.183C117.418
+      213.217 101.246 208.034 87.7727 198.369C74.2993 188.703 64.2077 175.044
+      58.9265 159.326L13.8132 193.574C24.8821 215.978 42.012 234.828 63.2572
+      247.984C84.5024 261.14 109.011 268.075 134 268C166.752 268 198.041 256.353
+      221.48 234.5L179.125 201.145H179.113Z"
+      fill="#34A853" />
+    <path
+      d="M221.48 234.5C245.991 211.631 261.903 177.595 261.903 134C261.903
+      126.072 260.686 117.552 258.866 109.634H134V161.414H205.869C202.329
+      178.823 192.804 192.301 179.125 201.145L221.48 234.5Z"
+      fill="#4A90E2" />
+    <path
+      d="M58.9265 159.326C56.1947 151.162 54.8068 142.609 54.8172 134C54.8172
+      125.268 56.213 116.882 58.8037 109.043L13.8467 74.2584C4.64957 92.825
+      -0.0915078 113.28 1.86708e-05 134C1.86708e-05 155.44 4.96919 175.652
+      13.8132 193.574L58.9265 159.326Z"
+      fill="#FBBC05" />
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="268" height="268" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

packages/worker/src/api/controllers/admin/configs.js

@@ -12,14 +12,11 @@ const GLOBAL_DB = StaticDatabases.GLOBAL.name
 
 exports.save = async function (ctx) {
   const db = new CouchDB(GLOBAL_DB)
-  const { type, config } = ctx.request.body
-  const { group, user } = config
-  // insert the type into the doc
-  config.type = type
+  const { type, group, user, config } = ctx.request.body
 
   // Config does not exist yet
-  if (!config._id) {
-    config._id = generateConfigID({
+  if (!ctx.request.body._id) {
+    ctx.request.body._id = generateConfigID({
       type,
       group,
       user,
@@ -34,7 +31,7 @@ exports.save = async function (ctx) {
   }
 
   try {
-    const response = await db.put(config)
+    const response = await db.put(ctx.request.body)
     ctx.body = {
       type,
       _id: response.id,

packages/worker/src/api/controllers/admin/email.js

@@ -65,7 +65,7 @@ exports.sendEmail = async ctx => {
   if (userId) {
     user = db.get(userId)
   }
-  const config = await determineScopedConfig(db, params)
+  const { config } = await determineScopedConfig(db, params)
   if (!config) {
     ctx.throw(400, "Unable to find SMTP configuration")
   }

packages/worker/src/api/routes/admin/configs.js

@@ -44,6 +44,9 @@ function googleValidation() {
 function buildConfigSaveValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
+    _id: Joi.string(),
+    _rev: Joi.string(),
+    group: Joi.string(),
     type: Joi.string().valid(...Object.values(Configs)).required(),
     config: Joi.alternatives()
       .conditional("type", {