merge: #2835

2835: feat(web,dal,sdf): encrypt, store & fetch secrets in the database r=vbustamante a=fnichol Co-authored-by: Fletcher Nichol <[email protected]>
systeminit · Oct 6, 2023 · 1a59062 · 1a59062
2 parents d440b20 + 112b5f8
commit 1a59062
Show file tree

Hide file tree

Showing 16 changed files with 480 additions and 399 deletions.
diff --git a/app/web/package.json b/app/web/package.json
@@ -56,11 +56,13 @@
     "fontfaceobserver": "^2.3.0",
     "is-promise": "^4.0.0",
     "javascript-time-ago": "^2.5.7",
+    "js-base64": "^3.7.5",
     "js-beautify": "^1.14.9",
     "js-confetti": "^0.11.0",
     "jwt-decode": "^3.1.2",
     "konva": "^8.3.13",
     "less": "^4.1.3",
+    "libsodium-wrappers": "^0.7.13",
     "local-storage-fallback": "^4.1.2",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.3",
@@ -84,6 +86,7 @@
     "@types/fontfaceobserver": "^2.1.0",
     "@types/javascript-time-ago": "^2.0.3",
     "@types/js-beautify": "^1.14.1",
+    "@types/libsodium-wrappers": "^0.7.11",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^18.15.11",
     "@types/tinycolor2": "^1.4.3",

diff --git a/app/web/src/api/sdf/dal/key_pair.ts b/app/web/src/api/sdf/dal/key_pair.ts
@@ -1,3 +1,5 @@
+// TODO(fnichol): delete this!
+
 import { StandardModel } from "@/api/sdf/dal/standard_model";
 
 /**

diff --git a/app/web/src/api/sdf/dal/secret.ts b/app/web/src/api/sdf/dal/secret.ts
diff --git a/app/web/src/components/AddSecretForm.vue b/app/web/src/components/AddSecretForm.vue
@@ -32,7 +32,7 @@
             </div>
           </template>
         </VormInput>
-        <VormInput
+        <!--VormInput
           v-model="secretFormData.expiration"
           type="date"
           label="Expiration"
@@ -42,7 +42,7 @@
               Optional: Set an expiration date for this secret
             </div>
           </template>
-        </VormInput>
+        </VormInput-->
         <VormInput
           v-for="(field, index) in fields"
           :key="index"
@@ -91,7 +91,7 @@ import {
   useValidatedInputGroup,
   ErrorMessage,
 } from "@si/vue-lib/design-system";
-import { PropType, reactive, computed } from "vue";
+import { PropType, ref, computed } from "vue";
 import * as _ from "lodash-es";
 import clsx from "clsx";
 import {
@@ -124,28 +124,26 @@ const secretFormEmpty = {
   name: "",
   description: "",
   value: {} as Record<string, string>,
-  expiration: "",
 };
 
-const secretFormData = reactive(_.clone(secretFormEmpty));
+const secretFormData = ref(_.cloneDeep(secretFormEmpty));
 
 const saveSecret = async () => {
   if (validationMethods.hasError()) return;
 
   const res = await secretsStore.SAVE_SECRET(
     props.definitionId,
-    secretFormData.name,
-    secretFormData.value,
-    secretFormData.description,
-    secretFormData.expiration,
+    secretFormData.value.name,
+    secretFormData.value.value,
+    secretFormData.value.description,
   );
 
   if (res.result.success) {
     const secret = res.result.data;
     setTimeout(() => {
       secretsStore.clearRequestStatus("SAVE_SECRET");
 
-      _.assign(secretFormData, secretFormEmpty);
+      secretFormData.value = _.cloneDeep(secretFormEmpty);
 
       validationMethods.resetAll();
 

diff --git a/app/web/src/components/Workspace/WorkspaceCustomizeSecrets.vue b/app/web/src/components/Workspace/WorkspaceCustomizeSecrets.vue
@@ -4,34 +4,55 @@
     <div class="flex flex-col h-full">
       <div class="relative flex-grow">
         <CustomizeTabs tabContentSlug="secrets">
-          <AddSecretForm definitionId="Mocks" class="h-auto" />
-          <ul class="m-xs">
-            <li v-for="(definition, index) in secretDefinitions" :key="index">
-              <span>{{ definition }}</span>
-              <ul class="ml-md flex flex-col gap-1">
-                <li
-                  v-for="secret in secretsStore.secretsByDefinitionId[
-                    definition
-                  ]"
-                  :key="secret.id"
-                  class="text-sm"
-                >
-                  <b>{{ secret.name }}</b>
-                  <i class="text-xs text-neutral-500">
-                    by {{ secret.createdInfo.actor.label }}
-                  </i>
-                  <VButton
-                    :disabled="secretsStore.secretIsTransitioning[secret.id]"
-                    class="ml-2"
-                    size="xs"
-                    tone="neutral"
-                    icon="x-circle"
-                    @click="secretsStore.DELETE_SECRET(secret.id)"
-                  />
-                </li>
-              </ul>
-            </li>
-          </ul>
+          <template v-if="secretsStore.definitions.length > 0">
+            <VormInput
+              v-model="selectedDef"
+              class="mx-sm mt-sm"
+              label="Secret Definition"
+              type="dropdown"
+              :options="
+                _.map(secretsStore.definitions, (d) => ({ value: d, label: d }))
+              "
+            />
+            <AddSecretForm
+              v-if="selectedDef"
+              :definitionId="selectedDef"
+              class="h-auto"
+            />
+            <p v-else>Please select a secret definition above</p>
+            <ul class="m-xs">
+              <li v-for="(definition, index) in secretDefinitions" :key="index">
+                <span>{{ definition }}</span>
+                <ul class="ml-md flex flex-col gap-1">
+                  <li
+                    v-for="secret in secretsStore.secretsByDefinitionId[
+                      definition
+                    ]"
+                    :key="secret.id"
+                    class="text-sm"
+                  >
+                    <b>{{ secret.name }}</b>
+                    <i class="text-xs text-neutral-500">
+                      by {{ secret.createdInfo?.actor?.label || "UNDEF" }}
+                    </i>
+                    <VButton
+                      :disabled="secretsStore.secretIsTransitioning[secret.id]"
+                      class="ml-2"
+                      size="xs"
+                      tone="neutral"
+                      icon="x-circle"
+                      @click="secretsStore.DELETE_SECRET(secret.id)"
+                    />
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </template>
+          <template v-else>
+            <p>
+              You need to create secret defining schema before using this page
+            </p>
+          </template>
         </CustomizeTabs>
       </div>
     </div>
@@ -50,8 +71,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-import { ResizablePanel, VButton } from "@si/vue-lib/design-system";
+import { computed, ref } from "vue";
+import { ResizablePanel, VButton, VormInput } from "@si/vue-lib/design-system";
+import * as _ from "lodash-es";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
 import { useSecretsStore } from "@/store/secrets.store";
@@ -61,6 +83,8 @@ import CustomizeTabs from "../CustomizeTabs.vue";
 const secretsStore = useSecretsStore();
 const featureFlagsStore = useFeatureFlagsStore();
 
+const selectedDef = ref<string>();
+
 const FF_SECRETS = computed(() => featureFlagsStore.SECRETS);
 
 const secretDefinitions = computed(() => secretsStore.definitions);