Front End form for OIDC configuration

packages/builder/src/pages/builder/portal/manage/auth/_logos/OIDC.svelte

@@ -0,0 +1,20 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 268 268"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0)">
+    <path
+      d="M43,90c-88,-16,-21,-86,41,-51l9,-6v17h-26l8,-5c-55,-25,-86,29,-32,36z"
+      fill="#ccc"
+    />
+    <path d="M43,90v-75l14,-9v75z" fill="#f60" />
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="268" height="268" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

packages/builder/src/pages/builder/portal/manage/auth/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import GoogleLogo from "./_logos/Google.svelte"
+  import OIDCLogo from "./_logos/OIDC.svelte"
   import {
     Button,
     Heading,
@@ -9,20 +10,22 @@
     Layout,
     Input,
     Body,
+    Select
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import api from "builderStore/api"
 
   const ConfigTypes = {
     Google: "google",
+    OIDC: "oidc",
     // Github: "github",
     // AzureAD: "ad",
   }
 
-  const ConfigFields = {
+  const GoogleConfigFields = {
     Google: ["clientID", "clientSecret", "callbackURL"],
   }
-  const ConfigLabels = {
+  const GoogleConfigLabels = {
     Google: {
       clientID: "Client ID",
       clientSecret: "Client secret",
@@ -30,21 +33,58 @@
     },
   }
 
+  const OIDCConfigFields = {
+    Oidc: [
+      "issuer",
+      "authUrl",
+      "tokenUrl",
+      "userInfoUrl",
+      "clientId",
+      "clientSecret",
+      "callbackUrl",
+      "name"
+    ],
+  }
+  const OIDCConfigLabels = {
+    Oidc: {
+      issuer: "Issuer",
+      authUrl: "Authorization URL",
+      tokenUrl: "Token URL",
+      userInfoUrl: "User Info URL",
+      clientId: "Client ID",
+      clientSecret: "Client Secret",
+      callbackUrl: "Callback URL",
+      name: "Name"
+    },
+  }
+  
   let google
+  let oidc
+  const providers = {google, oidc}
 
-  async function save(doc) {
+  async function save(docs) {
-    try {
+    let calls = []
-      // Save an oauth config
+    docs.forEach(element => {
-      const response = await api.post(`/api/admin/configs`, doc)
+      calls.push(api.post(`/api/admin/configs`, element))
-      const json = await response.json()
+    })
-      if (response.status !== 200) throw new Error(json.message)
+    Promise.all(calls)
-      google._rev = json._rev
+      .then(responses => {
-      google._id = json._id
+        return Promise.all(responses.map(response => {
-
+          return response.json()
-      notifications.success(`Settings saved.`)
+        }))
-    } catch (err) {
+      }).then(data => {
-      notifications.error(`Failed to update OAuth settings. ${err}`)
+        data.forEach(res => {
-    }
+          providers[res.type]._rev = res._rev
+          providers[res.type]._id = res._id
+        })
+          //res.json()._rev = res.json()._rev
+          //res.json().id = res.json().id
+        notifications.success(`Settings saved.`)
+      })
+      .catch(err => {
+        notifications.error(`Failed to update OAuth settings. ${err}`)
+        throw new Error(err.message)
+      })
   }
 
   onMount(async () => {
@@ -55,14 +95,28 @@
     const googleDoc = await googleResponse.json()
 
     if (!googleDoc._id) {
-      google = {
+      providers.google = {
         type: ConfigTypes.Google,
         config: {},
       }
     } else {
-      google = googleDoc
+      providers.google = googleDoc
+    }
+
+    const oidcResponse = await api.get(`/api/admin/configs/${ConfigTypes.OIDC}`)
+    const oidcDoc = await oidcResponse.json()
+
+    if (!oidcDoc._id) {
+      providers.oidc = {
+        type: ConfigTypes.OIDC,
+        config: {},
+      }
+    } else {
+      providers.oidc = oidcDoc
     }
   })  
+  let fileInput
+
 </script>
 
 <Layout>
@@ -74,7 +128,7 @@
       below.
     </Body>
   </Layout>
-  {#if google}
+  {#if providers.google}
     <Divider />
     <Layout gap="XS" noPadding>
       <Heading size="S">
@@ -89,17 +143,50 @@
       </Body>
     </Layout>
     <Layout gap="XS" noPadding>
-      {#each ConfigFields.Google as field}
+      {#each GoogleConfigFields.Google as field}
         <div class="form-row">
-          <Label size="L">{ConfigLabels.Google[field]}</Label>
+          <Label size="L">{GoogleConfigLabels.Google[field]}</Label>
-          <Input bind:value={google.config[field]} />
+          <Input bind:value={providers.google.config[field]} />
         </div>
       {/each}
     </Layout>
-    <div>
-      <Button cta on:click={() => save(google)}>Save</Button>
-    </div>
   {/if}
+  {#if providers.oidc}
+    <Divider />
+    <Layout gap="XS" noPadding>
+      <Heading size="S">
+        <span>
+          <GoogleLogo />
+          OpenID Connect
+        </span>
+      </Heading>
+      <Body size="S">
+        To allow users to authenticate using OIDC, fill out the fields below.
+      </Body>
+    </Layout>
+    <Layout gap="XS" noPadding>
+      {#each OIDCConfigFields.Oidc as field}
+        <div class="form-row">
+          <Label size="L">{OIDCConfigLabels.Oidc[field]}</Label>
+          <Input bind:value={providers.oidc.config[field]} />
+        </div>
+      {/each}
+      <Body size="S">
+        To customize your login button, fill out the fields below. 
+      </Body>
+      <div class="form-row">
+        <Label size="L">{OIDCConfigLabels.Oidc['name']}</Label>
+        <Select
+          options={["Upload File"]}
+          placeholder={null}
+        />
+
+      </div>      
+    </Layout>
+  {/if}
+  <div>
+    <Button cta on:click={() => save([providers.google, providers.oidc])}>Save</Button>
+  </div>
 </Layout>
 
 <style>
@@ -109,7 +196,6 @@
     grid-gap: var(--spacing-l);
     align-items: center;
   }
-
   span {
     display: flex;
     align-items: center;