Merge pull request #10894 from Budibase/budi-7010/frontend-encrypt-app-imports

BUDI-7010 - Frontend decrypt app imports

packages/builder/src/components/start/CreateAppModal.svelte

@@ -1,6 +1,12 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Dropzone,
+    Modal,
+  } from "@budibase/bbui"
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { apps, admin, auth } from "stores/portal"
@@ -11,6 +17,7 @@
   import TemplateCard from "components/common/TemplateCard.svelte"
   import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
   import { Roles } from "constants/backend"
+  import { lowercase } from "helpers"
 
   export let template
 
@@ -19,6 +26,7 @@
 
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
+  const encryptionValidation = createValidationStore()
 
   $: {
     const { url } = $values
@@ -27,8 +35,11 @@
       ...$values,
       url: url?.[0] === "/" ? url.substring(1, url.length) : url,
     })
+    encryptionValidation.check({ ...$values })
   }
 
+  $: encryptedFile = $values.file?.name?.endsWith(".enc.tar.gz")
+
   onMount(async () => {
     const lastChar = $auth.user?.firstName
       ? $auth.user?.firstName[$auth.user?.firstName.length - 1]
@@ -87,6 +98,9 @@
     appValidation.name(validation, { apps: applications })
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
+
+    encryptionValidation.addValidatorType("encryptionPassword", "text", true)
+
     // init validation
     const { url } = $values
     validation.check({
@@ -110,6 +124,9 @@
         data.append("templateName", template.name)
         data.append("templateKey", template.key)
         data.append("templateFile", $values.file)
+        if ($values.encryptionPassword?.trim()) {
+          data.append("encryptionPassword", $values.encryptionPassword.trim())
+        }
       }
 
       // Create App
@@ -143,18 +160,57 @@
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false
-      console.error(error)
+      throw error
+    }
+  }
+
+  const Step = { CONFIG: "config", SET_PASSWORD: "set_password" }
+  let currentStep = Step.CONFIG
+  $: stepConfig = {
+    [Step.CONFIG]: {
+      title: "Create your app",
+      confirmText: template?.fromFile ? "Import app" : "Create app",
+      onConfirm: async () => {
+        if (encryptedFile) {
+          currentStep = Step.SET_PASSWORD
+          return false
+        } else {
+          try {
+            await createNewApp()
+          } catch (error) {
             notifications.error("Error creating app")
           }
         }
+      },
+      isValid: $validation.valid,
+    },
+    [Step.SET_PASSWORD]: {
+      title: "Provide the export password",
+      confirmText: "Import app",
+      onConfirm: async () => {
+        try {
+          await createNewApp()
+        } catch (e) {
+          let message = "Error creating app"
+          if (e.message) {
+            message += `: ${lowercase(e.message)}`
+          }
+          notifications.error(message)
+          return false
+        }
+      },
+      isValid: $encryptionValidation.valid,
+    },
+  }
 </script>
 
 <ModalContent
-  title={"Create your app"}
-  confirmText={template?.fromFile ? "Import app" : "Create app"}
-  onConfirm={createNewApp}
-  disabled={!$validation.valid}
+  title={stepConfig[currentStep].title}
+  confirmText={stepConfig[currentStep].confirmText}
+  onConfirm={stepConfig[currentStep].onConfirm}
+  disabled={!stepConfig[currentStep].isValid}
 >
+  {#if currentStep === Step.CONFIG}
     {#if template && !template?.fromFile}
       <TemplateCard
         name={template.name}
@@ -204,6 +260,19 @@
         </div>
       {/if}
     </span>
+  {/if}
+  {#if currentStep === Step.SET_PASSWORD}
+    <Input
+      autofocus={true}
+      label="Imported file password"
+      type="password"
+      bind:value={$values.encryptionPassword}
+      disabled={creating}
+      on:blur={() => ($encryptionValidation.touched.encryptionPassword = true)}
+      error={$encryptionValidation.touched.encryptionPassword &&
+        $encryptionValidation.errors.encryptionPassword}
+    />
+  {/if}
 </ModalContent>
 
 <style>

packages/server/src/api/controllers/application.ts

@@ -115,7 +115,18 @@ function checkAppName(
   }
 }
 
-async function createInstance(appId: string, template: any) {
+interface AppTemplate {
+  templateString: string
+  useTemplate: string
+  file?: {
+    type: string
+    path: string
+    password?: string
+  }
+  key?: string
+}
+
+async function createInstance(appId: string, template: AppTemplate) {
   const db = context.getAppDB()
   await db.put({
     _id: "_design/database",
@@ -240,19 +251,24 @@ export async function fetchAppPackage(ctx: UserCtx) {
 async function performAppCreate(ctx: UserCtx) {
   const apps = (await dbCore.getAllApps({ dev: true })) as App[]
   const name = ctx.request.body.name,
-    possibleUrl = ctx.request.body.url
+    possibleUrl = ctx.request.body.url,
+    encryptionPassword = ctx.request.body.encryptionPassword
+
   checkAppName(ctx, apps, name)
   const url = sdk.applications.getAppUrl({ name, url: possibleUrl })
   checkAppUrl(ctx, apps, url)
 
   const { useTemplate, templateKey, templateString } = ctx.request.body
-  const instanceConfig: any = {
+  const instanceConfig: AppTemplate = {
     useTemplate,
     key: templateKey,
     templateString,
   }
   if (ctx.request.files && ctx.request.files.templateFile) {
-    instanceConfig.file = ctx.request.files.templateFile
+    instanceConfig.file = {
+      ...(ctx.request.files.templateFile as any),
+      password: encryptionPassword,
+    }
   }
   const tenantId = tenancy.isMultiTenant() ? tenancy.getTenantId() : null
   const appId = generateDevAppID(generateAppID(tenantId))