From 640e6c80073fff473973a59764ffe5e7160ca2ab Mon Sep 17 00:00:00 2001
From: Pranav C Balan <pranavxc@gmail.com>
Date: Mon, 31 May 2021 22:52:04 +0530
Subject: [PATCH] fix(gui): app config form validation

fix #199

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>
---
 .../project/appStore/appInstall.vue           | 188 +++++++++---------
 .../project/appStore/inputs/longTextField.vue |  13 +-
 .../project/appStore/inputs/passwordField.vue |  22 +-
 .../project/appStore/inputs/textField.vue     |   9 +-
 4 files changed, 127 insertions(+), 105 deletions(-)

diff --git a/packages/nc-gui/components/project/appStore/appInstall.vue b/packages/nc-gui/components/project/appStore/appInstall.vue
index ec2407162b..f158edbb93 100644
--- a/packages/nc-gui/components/project/appStore/appInstall.vue
+++ b/packages/nc-gui/components/project/appStore/appInstall.vue
@@ -1,77 +1,80 @@
 <template>
   <v-container fluid class="textColor--text">
-    <template v-if="formDetails">
-      <div class="title  d-flex align-center justify-center mb-4">
-        <div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
-             class="mr-1 d-flex align-center justify-center"
-             :class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
-          <img
-            :src="plugin.logo" height="25">
+    <v-form v-model="valid">
+      <template v-if="formDetails">
+        <div class="title  d-flex align-center justify-center mb-4">
+          <div :style="{ background : plugin.title === 'SES' ? '#242f3e' : '' }"
+               class="mr-1 d-flex align-center justify-center"
+               :class="{ 'pa-2' : plugin.title === 'SES'}" v-if="plugin.logo">
+            <img
+              :src="plugin.logo" height="25">
+          </div>
+          <v-icon
+            color="#242f3e" size="30" v-else-if="plugin.icon" class="mr-1">{{ plugin.icon }}
+          </v-icon>
+
+          <span @dblclick="copyDefault">{{ formDetails.title }}</span>
         </div>
-        <v-icon
-          color="#242f3e" size="30" v-else-if="plugin.icon" class="mr-1">{{ plugin.icon }}
-        </v-icon>
 
-        <span @dblclick="copyDefault">{{ formDetails.title }}</span>
-      </div>
+        <v-divider class="mb-7"></v-divider>
+        <div v-if="formDetails.array">
+
+          <table class="form-table mx-auto" >
+            <thead>
+            <tr>
+              <th v-for="(item,i) in formDetails.items" :key="i">
+                <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
+              </th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(set,j) in settings" :key="j">
+              <td v-for="(item,i) in formDetails.items" :key="i">
+                <form-input :input-details="item" v-model="set[item.key]"></form-input>
+              </td>
+              <td v-if="j">
+                <x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline
+                </x-icon>
+              </td>
+
+            </tr>
+
+            <tr>
+              <td :colspan="formDetails.items.length" class="text-center">
+                <x-icon iconClass="pointer" @click="settings.push({})">mdi-plus</x-icon>
+              </td>
+            </tr>
+            </tbody>
+          </table>
 
-      <v-divider class="mb-7"></v-divider>
-      <div v-if="formDetails.array">
 
-        <table class="form-table mx-auto">
-          <thead>
-          <tr>
-            <th v-for="(item,i) in formDetails.items" :key="i">
-              <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
-            </th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr v-for="(set,j) in settings" :key="j">
-            <td v-for="(item,i) in formDetails.items" :key="i">
-              <form-input :input-details="item" v-model="set[item.key]"></form-input>
-            </td>
-            <td v-if="j">
-              <x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline</x-icon>
-            </td>
-
-          </tr>
-
-          <tr>
-            <td :colspan="formDetails.items.length" class="text-center">
-              <x-icon iconClass="pointer" @click="settings.push({})">mdi-plus</x-icon>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-
-
-      </div>
-
-
-      <div class="form-grid" v-else>
-        <template v-for="(item,i) in formDetails.items">
-          <div :key="i" class="text-right">
-            <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
-          </div>
-          <div :key="i">
-            <form-input :input-details="item" v-model="settings[item.key]"></form-input>
-          </div>
-        </template>
-      </div>
+        </div>
 
 
-      <div class="d-flex mb-4 mt-7 justify-center">
+        <div class="form-grid" v-else>
+          <template v-for="(item,i) in formDetails.items">
+            <div :key="i" class="text-right form-input-label">
+              <label class="caption ">{{ item.label }} <span v-if="item.required" class="red--text">*</span></label>
+            </div>
+            <div :key="i">
+              <form-input :input-details="item" v-model="settings[item.key]"></form-input>
+            </div>
+          </template>
+        </div>
 
-        <v-btn small
-               :outlined="action.key !== 'save'"
-               v-for="action in formDetails.actions" @click="doAction(action)"
-               :key="action.key"
-               :color="action.key === 'save' ? 'primary' : '' "
-        >{{ action.label }}
-        </v-btn>
-      </div>
-    </template>
+
+        <div class="d-flex mb-4 mt-7 justify-center">
+          <v-btn small
+                 :outlined="action.key !== 'save'"
+                 v-for="action in formDetails.actions" @click="doAction(action)"
+                 :key="action.key"
+                 :color="action.key === 'save' ? 'primary' : '' "
+                 :disabled="action.key === 'save'  && !valid"
+          >{{ action.label }}
+          </v-btn>
+        </div>
+      </template>
+    </v-form>
   </v-container>
 </template>
 
@@ -81,13 +84,14 @@ import FormInput from "@/components/project/appStore/FormInput";
 export default {
   name: "appInstall",
   components: {FormInput},
-  props: ['title','defaultConfig'],
+  props: ['title', 'defaultConfig'],
   data: () => ({
     plugin: null,
     formDetails: null,
     settings: null,
     pluginId: null,
-    title: null
+    title: null,
+    valid: null
   }),
   methods: {
     simpleAnim() {
@@ -201,42 +205,48 @@ export default {
 <style scoped lang="scss">
 
 ::v-deep {
-  input,
-  select,
-  textarea {
-    border: 1px solid #7f828b33;
-    padding: 1px 5px;
-    font-size: .8rem;
-    border-radius: 4px;
-
-    &:focus {
-      border: 1px solid var(--v-primary-base);
-    }
-
-    &:hover:not(:focus) {
-      box-shadow: 0 0 2px dimgrey;
-    }
-  }
-
-
-  input, textarea {
-    min-width: 300px;
-  }
+  //input,
+  //select,
+  //textarea {
+  //  border: 1px solid #7f828b33;
+  //  padding: 1px 5px;
+  //  font-size: .8rem;
+  //  border-radius: 4px;
+  //
+  //  &:focus {
+  //    border: 1px solid var(--v-primary-base);
+  //  }
+  //
+  //  &:hover:not(:focus) {
+  //    box-shadow: 0 0 2px dimgrey;
+  //  }
+  //}
+  //
+  //
+  //input, textarea {
+  //  min-width: 300px;
+  //}
 }
 
 .form-grid {
   display: grid;
   grid-template-columns:auto auto;
   column-gap: 10px;
-  row-gap: 20px
+  row-gap: 20px;
+  align-items: center;
 }
 
 
 .form-table {
   border: none;
+  min-width: 400px;
 }
 
 tbody tr:nth-of-type(odd) {
   background-color: transparent;
 }
+
+.form-input-label{
+  padding-bottom: 16px;
+}
 </style>
diff --git a/packages/nc-gui/components/project/appStore/inputs/longTextField.vue b/packages/nc-gui/components/project/appStore/inputs/longTextField.vue
index 400083f814..63f154e4f0 100644
--- a/packages/nc-gui/components/project/appStore/inputs/longTextField.vue
+++ b/packages/nc-gui/components/project/appStore/inputs/longTextField.vue
@@ -1,8 +1,13 @@
 <template>
-    <textarea
-      :placeholder="inputDetails.placeholder || ''"
-      v-on="parentListeners" v-model="localState" class="caption" rows="3"
-             ></textarea>
+  <v-textarea
+    dense
+    outlined
+    :rules="[v => !!v || !inputDetails.required  || 'Required']"
+    :name="inputDetails.key"
+    :placeholder="inputDetails.placeholder || ''"
+    v-on="parentListeners" v-model="localState" class="caption" rows="3"
+    :required="inputDetails.valid"
+  ></v-textarea>
 
 </template>
 
diff --git a/packages/nc-gui/components/project/appStore/inputs/passwordField.vue b/packages/nc-gui/components/project/appStore/inputs/passwordField.vue
index 0d6d5d2756..5d20dcb023 100644
--- a/packages/nc-gui/components/project/appStore/inputs/passwordField.vue
+++ b/packages/nc-gui/components/project/appStore/inputs/passwordField.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="wrapper">
-    <input
-      :placeholder="inputDetails.placeholder || ''"
-      :type="show ? 'text' : 'password'"
-      v-on="parentListeners" v-model="localState" class="caption">
-    <v-icon small class="toggle-icon" @click="show = !show">
-
-      {{ show ? 'visibility_off' : 'visibility' }}
-    </v-icon>
-  </div>
+  <!--
+  todo : add toggle button
+  -->
+  <v-text-field
+    type="password"
+    dense
+    outlined
+    :rules="[v => !!v || !inputDetails.required  || 'Required']"
+    :name="inputDetails.key"
+    :required="inputDetails.valid"
+    :placeholder="inputDetails.placeholder || ''"
+    v-on="parentListeners" v-model="localState" class="caption"/>
 </template>
 
 <script>
diff --git a/packages/nc-gui/components/project/appStore/inputs/textField.vue b/packages/nc-gui/components/project/appStore/inputs/textField.vue
index 4d7a423643..645d87154c 100644
--- a/packages/nc-gui/components/project/appStore/inputs/textField.vue
+++ b/packages/nc-gui/components/project/appStore/inputs/textField.vue
@@ -1,7 +1,12 @@
 <template>
-  <input
+  <v-text-field
+    dense
+    outlined
+    :rules="[v => !!v || !inputDetails.required  || 'Required']"
+    :name="inputDetails.key"
+    :required="inputDetails.valid"
     :placeholder="inputDetails.placeholder || ''"
-    v-on="parentListeners" v-model="localState" class="caption">
+    v-on="parentListeners" v-model="localState" class="caption"/>
 </template>
 
 <script>