feat: Improve ui styling

ui/src/components/AppConfig.vue

@@ -1,15 +1,19 @@
 <template>
-  <v-footer class="d-flex flex-column">
+  <v-footer class="flex-column">
     <div class="px-1 py-1">
       <small
         v-if="fetchConfigsSuccessful"
         class="text-muted"
       >
         <template
-          v-for="(value, key, index) in configs"
+          v-for="(value, key) in configs"
           :key="key"
         >
-          <span v-if="index != 0"> ∙ </span><span>{{ key }}: {{ value }}</span>
+          <v-chip variant="plain" size="small">
+            <span>{{ key }}:   
+              {{ value }}
+            </span>
+          </v-chip>
         </template>
       </small>
       <small
@@ -25,10 +29,6 @@
         ⏳ Loading application properties.
       </small>
     </div>
-
-    <div class="px-1 py-1">
-      <small>{{ new Date().getFullYear() }} — Kubeseal-Webgui</small>
-    </div>
   </v-footer>
 </template>
 
@@ -54,8 +54,8 @@ async function fetchConfigs() {
     let response = await fetch(`${apiUrl}/config`);
     fetchConfigsSuccessful.value = (response.ok && response_config.ok)
     configs.value = await response.json();
-    configs.value.kubeseal_webgui_ui_version = kubeseal_webgui_ui_version;
-    configs.value.kubeseal_webgui_api_version = kubeseal_webgui_api_version;
+    configs.value.uiVersion = kubeseal_webgui_ui_version;
+    configs.value.apiVersion = kubeseal_webgui_api_version;
   } catch (error) {
     errorMessage.value = error;
   }

ui/src/components/Secrets.vue

@@ -24,6 +24,7 @@
               :items="namespaces"
               label="Namespace name"
               :disabled="['strict', 'namespace-wide'].indexOf(scope) === -1"
+              variant="solo-inverted"
             />
             <v-container
               id="password-help-block"
@@ -44,6 +45,7 @@
               label="Secret name"
               trim
               clearable
+              variant="solo-inverted"
               :rules="rules.validDnsSubdomain"
               :disabled="['strict'].indexOf(scope) === -1"
             />
@@ -70,6 +72,7 @@
               :select-size="1"
               :plain="true"
               label="Scope"
+              variant="solo-inverted"
             />
             <v-container
               id="scope-help-block"
@@ -100,6 +103,7 @@
               rows="1"
               clearable
               prepend-icon="mdi-delete"
+              variant="solo-inverted"
               :rules="rules.validSecretKey"
               @click:prepend="removeSecret(counter)"
             />
@@ -115,6 +119,7 @@
               auto-grow
               clearable
               label="Secret value"
+              variant="solo-inverted"
               :disabled="hasFile[counter]"
             />
           </v-col>
@@ -130,6 +135,7 @@
               clearable
               label="Upload File"
               prepend-icon="mdi-file-upload-outline"
+              variant="solo-inverted"
               :rules="rules.fileSize"
               :disabled="hasValue[counter]"
               :multiple="false"
@@ -172,7 +178,7 @@
               border="start"
               type="warning"
               icon="mdi-flash"
-              title="Error while encoding sensitive data"
+              title="An Error occurred:"
             >
               <v-container>
                 <p>Please contact your administrator and try again later.</p>
@@ -191,14 +197,24 @@
           >
             <v-btn
               block
-              variant="tonal"
+              variant="plain"
+              size="x-large"
               prepend-icon="mdi-lock"
               color="blue lighten-1"
               :disabled="notReadyToEncode"
               @click="fetchEncodedSecrets()"
             >
               Encrypt
             </v-btn>
+            <v-card
+              v-if="!isEncryptButtonEnabled && !hasErrorMessage"
+              variant="text"
+              class="text-subtitle-2 mt-5"
+              color="light-blue-accent-4"
+              align="center"
+            >
+              Fill out the form before encrypting.
+            </v-card>
           </v-col>
         </v-row>
       </v-form>
@@ -207,8 +223,8 @@
       <v-row>
         <v-col>
           <v-card
-            title="Complete sealed secret"
-            class="ma-2"
+            title="Generated sealed secret"
+            class="ma-1"
           >
             <template #text>
               <v-code
@@ -233,16 +249,11 @@ spec:
               <v-btn
                 v-if="clipboardAvailable"
                 variant="text"
+                prepend-icon="mdi-content-copy"
                 @click="copyRenderedSecrets()"
               >
                 Copy to clipboard
               </v-btn>
-              <v-spacer />
-              <v-btn
-                v-if="clipboardAvailable"
-                icon="mdi-content-copy"
-                @click="copyRenderedSecrets()"
-              />
             </template>
           </v-card>
         </v-col>
@@ -269,29 +280,22 @@ spec:
             <v-btn
               v-if="clipboardAvailable"
               variant="text"
+              prepend-icon="mdi-content-copy"
               @click="copySealedSecret(counter)"
             >
               Copy to clipboard
             </v-btn>
-            <v-spacer />
-            <v-btn
-              v-if="clipboardAvailable"
-              icon="mdi-content-copy"
-              variant="text"
-              @click="copySealedSecret(counter)"
-            />
           </template>
         </v-card>
       </v-row>
       <v-row>
         <v-col class="d-flex">
           <v-btn
             block
-            variant="tonal"
+            variant="plain"
             class="flex-fill"
-            @click="
-              displayCreateSealedSecretForm = !displayCreateSealedSecretForm
-              "
+            prepend-icon="mdi-autorenew"
+            @click="resetForm"
           >
             Encrypt more secrets
           </v-btn>
@@ -319,6 +323,17 @@ const sealedSecrets = ref([])
 const sealedSecret = ref()
 const clipboardAvailable = ref(false)
 
+const resetForm = () => {
+  displayCreateSealedSecretForm.value = true;
+  secretName.value = "";
+  namespaceName.value = "";
+  scope.value = "strict";
+  secrets.value = [{ key: "", value: "", file: [] }];
+  sealedSecrets.value = [];
+  hasErrorMessage.value = false;
+  errorMessage.value = "";
+};
+
 onBeforeMount(async () => {
   const config = await fetchConfig();
   await fetchNamespaces(config);
@@ -443,12 +458,24 @@ function setErrorMessage(newErrorMessage) {
   hasErrorMessage.value = !!newErrorMessage;
 }
 
+const isEncryptButtonEnabled = computed(() => {
+  return (
+    secretName.value &&
+    namespaceName.value &&
+    secrets.value.every(secret => secret.key && (secret.value || secret.file.length))
+  );
+});
+
 async function fetchConfig() {
   try {
-    const response = await fetch("/config.json")
+    const response = await fetch("/config.json");
+    if (!response.ok) {
+      throw Error(`Failed to fetch config.json: ${response.statusText}`);
+    }
     return await response.json();
   } catch (error) {
-    setErrorMessage(error)
+    setErrorMessage(error.message);
+    return {};
   }
 }
 
@@ -460,7 +487,7 @@ async function fetchNamespaces(config) {
       const response = await fetch(`${config.api_url}/namespaces`);
       namespaces.value = await response.json();
     } catch (error) {
-      setErrorMessage(error);
+      setErrorMessage(`Failed to fetch namespaces. Error Message: ${error.message}.`);
     }
   }
 }
@@ -517,6 +544,7 @@ async function fetchEncodedSecrets() {
     } else {
       sealedSecrets.value = await response.json();
       displayCreateSealedSecretForm.value = false;
+      setErrorMessage("");
     }
   } catch (error) {
     setErrorMessage(error);