fix(gui): app config form validation

fix #199

Signed-off-by: Pranav C Balan <pranavxc@gmail.com>

packages/nc-gui/components/project/appStore/appInstall.vue

@@ -1,5 +1,6 @@
 <template>
   <v-container fluid class="textColor--text">
+    <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' : '' }"
@@ -18,7 +19,7 @@
         <v-divider class="mb-7"></v-divider>
         <div v-if="formDetails.array">
 
-        <table class="form-table mx-auto">
+          <table class="form-table mx-auto" >
             <thead>
             <tr>
               <th v-for="(item,i) in formDetails.items" :key="i">
@@ -32,7 +33,8 @@
                 <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>
+                <x-icon small iconClass="pointer" color="error" @click="settings.splice(j,1)">mdi-delete-outline
+                </x-icon>
               </td>
 
             </tr>
@@ -51,7 +53,7 @@
 
         <div class="form-grid" v-else>
           <template v-for="(item,i) in formDetails.items">
-          <div :key="i" class="text-right">
+            <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">
@@ -62,16 +64,17 @@
 
 
         <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>

packages/nc-gui/components/project/appStore/inputs/longTextField.vue

@@ -1,8 +1,13 @@
 <template>
-    <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"
-             ></textarea>
+    :required="inputDetails.valid"
+  ></v-textarea>
 
 </template>
 

packages/nc-gui/components/project/appStore/inputs/passwordField.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="wrapper">
-    <input
+  <!--
+  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 || ''"
-      :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>
+    v-on="parentListeners" v-model="localState" class="caption"/>
 </template>
 
 <script>

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>