From e26fca6176d1d97f3644c6d0a3d360d9ccfd8413 Mon Sep 17 00:00:00 2001
From: Jason Sherman <tools@usingtechnolo.gy>
Date: Mon, 10 Jun 2024 15:21:50 -0700
Subject: [PATCH] change layout of External API edit form. add configuration
 for deployment.

Signed-off-by: Jason Sherman <tools@usingtechnolo.gy>
---
 app/config/custom-environment-variables.json  |   8 +-
 .../components/forms/manage/ExternalAPIs.vue  | 347 ++++++++++--------
 openshift/README.md                           |  17 +-
 openshift/app.dc.yaml                         |  10 +
 4 files changed, 229 insertions(+), 153 deletions(-)

diff --git a/app/config/custom-environment-variables.json b/app/config/custom-environment-variables.json
index 00ba319a0..2c30cdefa 100755
--- a/app/config/custom-environment-variables.json
+++ b/app/config/custom-environment-variables.json
@@ -53,7 +53,11 @@
     },
     "logFile": "SERVER_LOGFILE",
     "logLevel": "SERVER_LOGLEVEL",
-    "port": "SERVER_PORT"
+    "port": "SERVER_PORT",
+    "encryption": {
+      "proxy": "SERVER_ENCRYPTION_PROXY",
+      "db": "SERVER_ENCRYPTION_DB"
+    }
   },
   "serviceClient": {
     "commonServices": {
@@ -71,4 +75,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/frontend/src/components/forms/manage/ExternalAPIs.vue b/app/frontend/src/components/forms/manage/ExternalAPIs.vue
index 314193553..131e9d27f 100644
--- a/app/frontend/src/components/forms/manage/ExternalAPIs.vue
+++ b/app/frontend/src/components/forms/manage/ExternalAPIs.vue
@@ -312,7 +312,9 @@ export default {
       <!-- Preview/Download File -->
       <template #item.name="{ item }">{{ item.name }}</template>
       <template #item.endpointUrl="{ item }">{{ item.endpointUrl }}</template>
-      <template #item.code="{ item }">{{ item.code }}</template>
+      <template #item.code="{ item }">{{
+        externalAPIStatusCodes.find((x) => x.code === item.code)['display']
+      }}</template>
       <!-- Actions -->
       <template #item.actions="{ item }">
         <span>
@@ -371,155 +373,200 @@ export default {
     ><template #title>{{ editDialog.title }}</template>
     <template #text>
       <v-form ref="form" @submit="saveItem()" @submit.prevent>
-        <v-text-field
-          v-model="editDialog.item.name"
-          autofocus
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formName')"
-          data-test="text-name"
-          :rules="nameRules"
-          :lang="lang"
-        />
-
-        <v-text-field
-          v-model="editDialog.item.endpointUrl"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formEndpointUrl')"
-          data-test="text-endpointUrl"
-          :rules="endpointUrlRules"
-          :lang="lang"
-        />
-
-        <v-checkbox v-model="editDialog.item.sendApiKey" class="my-0 pt-0">
-          <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.externalAPI.formSendApiKey') }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-text-field
-          v-model="editDialog.item.apiKeyHeader"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formApiKeyHeader')"
-          data-test="text-apiKeyHeader"
-          :lang="lang"
-          :rules="apiKeyHeaderRules"
-        />
-
-        <v-text-field
-          v-model="editDialog.item.apiKey"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formApiKey')"
-          data-test="text-apiKey"
-          :lang="lang"
-          :rules="apiKeyHeaderRules"
-        />
-
-        <v-checkbox v-model="editDialog.item.sendUserToken" class="my-0 pt-0">
-          <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.externalAPI.formSendUserToken') }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-text-field
-          v-model="editDialog.item.userTokenHeader"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formUserTokenHeader')"
-          data-test="text-userTokenHeader"
-          :lang="lang"
-          :rules="userTokenHeaderRules"
-        />
-
-        <v-checkbox v-model="editDialog.item.userTokenBearer" class="my-0 pt-0">
-          <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.externalAPI.formUserTokenBearer') }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-checkbox v-model="editDialog.item.sendUserInfo" class="my-0 pt-0">
-          <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.externalAPI.formSendUserInfo') }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-checkbox
-          v-model="editDialog.item.userInfoEncrypted"
-          class="my-0 pt-0"
-        >
-          <template #label>
-            <span :class="{ 'mr-2': isRTL }" :lang="lang">
-              {{ $t('trans.externalAPI.formUserInfoEncrypted') }}
-            </span>
-          </template>
-        </v-checkbox>
-
-        <v-text-field
-          v-model="editDialog.item.userInfoHeader"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formUserInfoHeader')"
-          data-test="text-userInfoHeader"
-          :lang="lang"
-          :rules="userInfoHeaderRules"
-        />
-
-        <v-select
-          v-model="editDialog.item.userInfoEncryptionAlgo"
-          :items="externalAPIAlgorithmList"
-          item-title="display"
-          item-value="code"
-          :label="$t('trans.externalAPI.formUserInfoEncryptionAlgo')"
-          density="compact"
-          solid
-          variant="outlined"
-          :rules="userInfoHeaderRules"
-          :lang="lang"
-        ></v-select>
-
-        <v-text-field
-          v-model="editDialog.item.userInfoEncryptionKey"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formUserInfoEncryptionKey')"
-          data-test="text-userInfoEncryptionKey"
-          :lang="lang"
-          :rules="userInfoHeaderRules"
-        />
-
-        <v-select
-          v-if="editDialog.item.id"
-          v-model="editDialog.item.code"
-          :items="externalAPIStatusCodes"
-          item-title="display"
-          item-value="code"
-          aria-readonly="true"
-          :readonly="true"
-          density="compact"
-          solid
-          variant="outlined"
-          :label="$t('trans.externalAPI.formStatus')"
-          data-test="text-code"
-          :lang="lang"
-        />
+        <v-row class="mt-4">
+          <v-col cols="4">
+            <v-text-field
+              v-model="editDialog.item.name"
+              autofocus
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formName')"
+              data-test="text-name"
+              :rules="nameRules"
+              :lang="lang"
+            />
+          </v-col>
+          <v-col cols="8">
+            <v-text-field
+              v-model="editDialog.item.endpointUrl"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formEndpointUrl')"
+              data-test="text-endpointUrl"
+              :rules="endpointUrlRules"
+              :lang="lang"
+            />
+          </v-col>
+        </v-row>
+        <v-row v-if="editDialog.item.id" class="mt-0">
+          <v-col cols="4"></v-col>
+          <v-col cols="8">
+            <v-select
+              v-if="editDialog.item.id"
+              v-model="editDialog.item.code"
+              :items="externalAPIStatusCodes"
+              item-title="display"
+              item-value="code"
+              aria-readonly="true"
+              :readonly="true"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formStatus')"
+              data-test="text-code"
+              :lang="lang"
+          /></v-col>
+        </v-row>
+        <!-- API Key -->
+        <hr />
+        <v-row>
+          <v-col cols="12" class="pb-0"
+            ><v-checkbox v-model="editDialog.item.sendApiKey" class="my-0 pt-0">
+              <template #label>
+                <span :class="{ 'mr-2': isRTL }" :lang="lang">
+                  {{ $t('trans.externalAPI.formSendApiKey') }}
+                </span>
+              </template>
+            </v-checkbox></v-col
+          >
+        </v-row>
+        <v-row class="mt-0">
+          <v-col cols="4"
+            ><v-text-field
+              v-model="editDialog.item.apiKeyHeader"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formApiKeyHeader')"
+              data-test="text-apiKeyHeader"
+              :lang="lang"
+              :rules="apiKeyHeaderRules"
+          /></v-col>
+          <v-col cols="8">
+            <v-text-field
+              v-model="editDialog.item.apiKey"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formApiKey')"
+              data-test="text-apiKey"
+              :lang="lang"
+              :rules="apiKeyHeaderRules"
+          /></v-col>
+        </v-row>
+        <!-- User Token -->
+        <hr />
+        <v-row>
+          <v-col cols="4" class="pb-0">
+            <v-checkbox
+              v-model="editDialog.item.sendUserToken"
+              class="my-0 pt-0"
+            >
+              <template #label>
+                <span :class="{ 'mr-2': isRTL }" :lang="lang">
+                  {{ $t('trans.externalAPI.formSendUserToken') }}
+                </span>
+              </template>
+            </v-checkbox></v-col
+          >
+          <v-col cols="8" class="pb-0">
+            <v-checkbox
+              v-model="editDialog.item.userTokenBearer"
+              class="my-0 pt-0"
+            >
+              <template #label>
+                <span :class="{ 'mr-2': isRTL }" :lang="lang">
+                  {{ $t('trans.externalAPI.formUserTokenBearer') }}
+                </span>
+              </template>
+            </v-checkbox></v-col
+          >
+        </v-row>
+        <v-row class="mt-0">
+          <v-col cols="4"></v-col>
+          <v-col cols="8">
+            <v-text-field
+              v-model="editDialog.item.userTokenHeader"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formUserTokenHeader')"
+              data-test="text-userTokenHeader"
+              :lang="lang"
+              :rules="userTokenHeaderRules"
+          /></v-col>
+        </v-row>
+        <!-- User Information -->
+        <hr />
+        <v-row>
+          <v-col cols="4" class="pb-0"
+            ><v-checkbox
+              v-model="editDialog.item.sendUserInfo"
+              class="my-0 pt-0"
+            >
+              <template #label>
+                <span :class="{ 'mr-2': isRTL }" :lang="lang">
+                  {{ $t('trans.externalAPI.formSendUserInfo') }}
+                </span>
+              </template>
+            </v-checkbox></v-col
+          >
+          <v-col cols="4" class="pb-0"
+            ><v-checkbox
+              v-model="editDialog.item.userInfoEncrypted"
+              class="my-0 pt-0"
+            >
+              <template #label>
+                <span :class="{ 'mr-2': isRTL }" :lang="lang">
+                  {{ $t('trans.externalAPI.formUserInfoEncrypted') }}
+                </span>
+              </template>
+            </v-checkbox></v-col
+          >
+        </v-row>
+        <v-row class="mt-0">
+          <v-col cols="4"></v-col>
+          <v-col cols="8"
+            ><v-text-field
+              v-model="editDialog.item.userInfoHeader"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formUserInfoHeader')"
+              data-test="text-userInfoHeader"
+              :lang="lang"
+              :rules="userInfoHeaderRules"
+          /></v-col>
+        </v-row>
+        <v-row class="mt-0">
+          <v-col cols="4">
+            <v-select
+              v-model="editDialog.item.userInfoEncryptionAlgo"
+              :items="externalAPIAlgorithmList"
+              item-title="display"
+              item-value="code"
+              :label="$t('trans.externalAPI.formUserInfoEncryptionAlgo')"
+              density="compact"
+              solid
+              variant="outlined"
+              :rules="userInfoHeaderRules"
+              :lang="lang"
+            ></v-select
+          ></v-col>
+          <v-col cols="8">
+            <v-text-field
+              v-model="editDialog.item.userInfoEncryptionKey"
+              density="compact"
+              solid
+              variant="outlined"
+              :label="$t('trans.externalAPI.formUserInfoEncryptionKey')"
+              data-test="text-userInfoEncryptionKey"
+              :lang="lang"
+              :rules="userInfoHeaderRules"
+          /></v-col>
+        </v-row>
       </v-form>
     </template>
     <template #button-text-continue>
diff --git a/openshift/README.md b/openshift/README.md
index 854edf140..3d647086a 100644
--- a/openshift/README.md
+++ b/openshift/README.md
@@ -84,7 +84,7 @@ oc create -n $NAMESPACE configmap $APP_NAME-oidc-config \
   --from-literal=OIDC_ISSUER=https://dev.loginproxy.gov.bc.ca/auth/realms/standard \
   --from-literal=OIDC_CLIENTID=chefs-frontend-5299 \
   --from-literal=OIDC_MAXTOKENAGE=300 \
-  --from-literal=OIDC_LOGOUTURL='https://logon7.gov.bc.ca/clp-cgi/logoff.cgi?retnow=1&returl=https%3A%2F%2Fdev.loginproxy.gov.bc.ca%2Fauth%2Frealms%2Fstandard%2Fprotocol%2Fopenid-connect%2Flogout' 
+  --from-literal=OIDC_LOGOUTURL='https://logon7.gov.bc.ca/clp-cgi/logoff.cgi?retnow=1&returl=https%3A%2F%2Fdev.loginproxy.gov.bc.ca%2Fauth%2Frealms%2Fstandard%2Fprotocol%2Fopenid-connect%2Flogout'
 ```
 
 _Note:_ We use the Common Services Object Storage for CHEFS. You will need to contact them to have your storage bucket created.
@@ -144,6 +144,21 @@ oc create -n $NAMESPACE secret generic $APP_NAME-objectstorage-secret \
   --from-literal=password=$password
 ```
 
+We need to store encryption keys as secrets. These keys are used to handle communication between the frontend and external APIS (proxy) and storing key data in the database (db). In both cases we will be using `aes-256-gcm` for the encryption and keys for `aes-256-gcm` should be sha256 hashes: 256 bits/32 bytes/64 characters.
+
+Using `node.js` you can generate keys: `crypto.createHash('sha256').update("some seed text").digest('hex');`
+
+```sh
+
+export proxy_key=<proxy generated hash value>
+export db_key=<db generated hash value>
+
+oc create -n $NAMESPACE secret generic $APP_NAME-encryption-keys \
+  --type=Opaque \
+  --from-literal=proxy=$proxy_key \
+  --from-literal=db=$db_key
+```
+
 ## Deployment
 
 This application is currently designed as a single application pod deployment. It will host a static frontend containing all of the Vue.js resources and assets, and a Node.js backend which serves the API that the frontend requires. We are currently leveraging Openshift Routes with path based filtering to forward incoming traffic to the right deployment service.
diff --git a/openshift/app.dc.yaml b/openshift/app.dc.yaml
index 14120d516..356a94e29 100644
--- a/openshift/app.dc.yaml
+++ b/openshift/app.dc.yaml
@@ -234,6 +234,16 @@ objects:
                     secretKeyRef:
                       key: password
                       name: "${APP_NAME}-objectstorage-secret"
+                - name: SERVER_ENCRYPTION_DB
+                  valueFrom:
+                    secretKeyRef:
+                      key: db
+                      name: "${APP_NAME}-encryption-keys"
+                - name: SERVER_ENCRYPTION_PROXY
+                  valueFrom:
+                    secretKeyRef:
+                      key: proxy
+                      name: "${APP_NAME}-encryption-keys"
                 - name: APITOKEN
                   valueFrom:
                     secretKeyRef: