From 5f5e01f012e040d51f358b339efab21ad94bfa88 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 9 Jun 2021 21:08:57 +0800
Subject: [PATCH 1/3] feat: add i18n to Project page (External DB)

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../nc-gui/components/createOrEditProject.vue | 155 +++++++++++-------
 packages/nc-gui/static/lang/en.json           |  43 ++++-
 packages/nc-gui/static/lang/ja.json           |  43 ++++-
 packages/nc-gui/static/lang/zh.json           |  43 ++++-
 4 files changed, 219 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/components/createOrEditProject.vue b/packages/nc-gui/components/createOrEditProject.vue
index 9fec432e4f..a4b3d83c97 100644
--- a/packages/nc-gui/components/createOrEditProject.vue
+++ b/packages/nc-gui/components/createOrEditProject.vue
@@ -33,20 +33,30 @@
                      style="width: 100%; border-bottom: 1px solid var(--v-backgroundColor-base)">
 
             <v-toolbar-title class="title ">
-              <span v-if="edit">Edit Project</span><span v-else>Create Project</span>
+			  <!-- Edit Project -->
+              <span v-if="edit">{{ $t('project.ext_db.title.edit') }}</span>
+			  <!-- Create Project -->
+			  <span v-else>{{ $t('project.ext_db.title.create') }}</span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
-            <x-btn tooltip="Cancel and Return"
+			<!-- Cancel and Return -->
+            <x-btn 
+				v-bind:tooltip="$t('project.ext_db.button.cancel_tooltip')"
                    to="/"
                    v-ge="['project','cancel']"
-                   class="elevation-20">Cancel
+                   class="elevation-20">
+				   <!-- Cancel -->
+				   {{ $t('project.ext_db.button.cancel') }}
             </x-btn>
             <x-btn
               :disabled="!valid || !envStatusValid"
               class="primary"
               v-ge="['project','save']"
               @click="createOrUpdateProject()">
-              <span v-if="edit">Update & Restart</span><span v-else>Save Project</span>
+			  <!-- Update & Restart -->
+              <span v-if="edit">{{ $t('project.ext_db.button.update_and_restart') }}</span>
+			  <!-- Save Project -->
+			  <span v-else>{{ $t('project.ext_db.button.save_project') }}</span>
             </x-btn>
             <v-progress-linear
               v-if="projectReloading"
@@ -143,18 +153,19 @@
               <v-row>
                 <v-col cols="12" class="mb-0 pb-0">
                   <div style="max-width: 360px" class="mx-auto mb-3">
+				    <!-- Enter Project Name -->
                     <v-text-field
                       ref="name"
                       v-ge="['project','name']"
-                      :rules="form.titleRequiredRule" :height="20" v-model="project.title" label="Enter Project Name"
+                      :rules="form.titleRequiredRule" :height="20" v-model="project.title" v-bind:label="$t('project.ext_db.project_name')"
                       autofocus>
                       <!--                      <v-icon color="info" class="blink_me mt-n1" slot="prepend">-->
                       <!--                        mdi-lightbulb-on-->
                       <!--                      </v-icon>-->
                     </v-text-field>
 
-
-                    <label class="caption">Access Project via</label>
+					<!-- Access Project via -->
+                    <label class="caption"> {{ $t('project.ext_db.project_name') }}</label>
                     <v-radio-group row hide-details dense v-model="project.projectType" class="mb-0 mt-0">
                       <v-radio v-for="(type,i) in projectTypes" :key="type.value" :color="type.iconColor"
                                :value="type.value">
@@ -192,8 +203,7 @@
                                 {{ project.title && project.title.toUpperCase() }}'s
                                 Environments</h2> -->
 
-                  <p :class="{'text-center mb-2 mt-3':!edit,'text-center mb-2 mt-3 grey--text':edit}">
-                    Database Credentials</p>
+                  <p :class="{'text-center mb-2 mt-3':!edit,'text-center mb-2 mt-3 grey--text':edit}"> {{ $t('project.ext_db.credentials') }} </p>
                   <v-expansion-panels v-model="panel" focusable accordion="" class="elevation-20"
                                       style="border: 1px solid white">
                     <v-expansion-panel
@@ -309,12 +319,13 @@
                                         </v-overlay>
 
                                         <v-col cols="4" class="py-0">
+										<!-- Database Type -->
                                           <v-select
                                             v-ge="['project','env-db-change']"
                                             class="body-2 db-select"
                                             :items="Object.keys(databaseNames)"
                                             v-model="client[dbIndex]"
-                                            label="Database Type"
+                                            v-bind:label="$t('project.ext_db.credentials.label_1')"
                                             @change="onDatabaseTypeChanged(client[dbIndex],db,dbIndex,envKey)"
 
                                           >
@@ -344,12 +355,12 @@
 
                                           </v-select>
                                         </v-col>
-
+										<!-- SQLite File -->
                                         <v-col class="py-0" v-if="db.client === 'sqlite3'">
                                           <v-text-field
                                             :rules="form.folderRequiredRule"
                                             v-model="db.connection.connection.filename"
-                                            label="SQLite File"
+                                            v-bind:label="$t('project.ext_db.credentials.label_2')"
                                             v-ge="['project','env-db-file']"
                                             @click="selectSqliteFile(db)">
                                             <v-icon color="info" slot="prepend">
@@ -358,34 +369,37 @@
                                           </v-text-field>
 
                                         </v-col>
-
+										<!-- Host Address -->
                                         <v-col cols="4" v-if="db.client !== 'sqlite3'" class="py-0">
                                           <v-text-field
                                             v-ge="['project','env-db-host']"
                                             class="body-2"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.host"
-                                            label="Host address"
+                                            v-bind:label="$t('project.ext_db.credentials.label_3')"
                                           ></v-text-field>
                                         </v-col>
+										<!-- Port Number -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2"
                                             v-ge="['project','env-db-port']"
                                             v-model="db.connection.port"
-                                            label="Port number"
+                                            v-bind:label="$t('project.ext_db.credentials.label_4')"
                                             :rules="form.portValidationRule"
                                           ></v-text-field>
                                         </v-col>
+										<!-- Username -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2"
                                             v-ge="['project','env-db-user']"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.user"
-                                            label="Username"
+                                            v-bind:label="$t('project.ext_db.credentials.label_5')"
                                           ></v-text-field>
                                         </v-col>
+										<!-- Password -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2 db-password"
@@ -393,7 +407,7 @@
                                             :ref="`password${envKey}`"
                                             v-ge="['project','env-db-password']"
                                             v-model="db.connection.password"
-                                            label="Password"
+                                            v-bind:label="$t('project.ext_db.credentials.label_6')"
                                           >
                                             <template v-slot:append>
                                               <v-icon small
@@ -407,6 +421,7 @@
 
                                           </v-text-field>
                                         </v-col>
+										<!-- Database : create if not exists -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2 database-field"
@@ -414,7 +429,7 @@
                                             v-model="db.connection.database"
 
                                             v-ge="['project','env-db-name']"
-                                            label="Database : create if not exists"
+                                            v-bind:label="$t('project.ext_db.credentials.label_7')"
                                           ></v-text-field>
                                         </v-col>
                                         <v-col class="" v-if="db.client !== 'sqlite3'">
@@ -422,7 +437,8 @@
                                             <v-expansion-panel
                                               style="border: 1px solid wheat">
                                               <v-expansion-panel-header>
-                                                <span class="grey--text caption">SSL & Advanced parameters</span>
+											  <!-- SSL & Advanced parameters -->
+                                                <span class="grey--text caption">{{ $t('project.ext_db.credentials.advanced') }}</span>
                                               </v-expansion-panel-header>
                                               <v-expansion-panel-content>
                                                 <v-card class="elevation-0">
@@ -442,7 +458,9 @@
                                                       <input type="file" ref="certFilePath" class="d-none"
                                                              @change="readFileContent(db,'ssl','cert',dbIndex)"
                                                       />
-                                                      <x-btn tooltip="Select .cert file"
+													  <!-- Select .cert file -->
+                                                      <x-btn 
+															 v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option2.toolip')"
                                                              small
                                                              color="primary"
                                                              outlined
@@ -451,10 +469,11 @@
                                                              v-ge="['project','env-db-cert']"
                                                       >{{ db.ui.ssl.cert }}
                                                       </x-btn>
-
+													  <!-- Select .key file -->
                                                       <input type="file" ref="keyFilePath" class="d-none"
                                                              @change="readFileContent(db,'ssl','key',dbIndex)"/>
-                                                      <x-btn tooltip="Select .key file"
+                                                      <x-btn 
+															v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option1.toolip')"
                                                              small
                                                              color="primary"
                                                              outlined
@@ -463,10 +482,11 @@
                                                              class="elevation-5"
                                                       >{{ db.ui.ssl.key }}
                                                       </x-btn>
-
+													  <!-- Select CA file -->
                                                       <input type="file" ref="caFilePath" class="d-none"
                                                              @change="readFileContent(db,'ssl','ca',dbIndex)"/>
-                                                      <x-btn tooltip="Select CA file"
+                                                      <x-btn 
+															 v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option3.toolip')"
                                                              small
                                                              color="primary"
                                                              outlined
@@ -479,9 +499,10 @@
 
                                                     <v-row>
                                                       <v-col>
+														<!-- Inflection - Table name -->
                                                         <v-select
                                                           class="caption"
-                                                          label="Inflection - Table name"
+														  v-bind:label="$t('project.ext_db.credentials.advanced.inflection.table_name')"
                                                           multiple
                                                           :items="['camelize']"
                                                           v-model="db.meta.inflection.tn"
@@ -492,9 +513,9 @@
                                                         </v-select>
                                                       </v-col>
                                                       <v-col>
+														<!-- Inflection - Column name -->
                                                         <v-select
-                                                          class="caption"
-                                                          label="Inflection - Column name"
+                                                          class="caption"v-bind:label="$t('project.ext_db.credentials.advanced.inflection.column_name')"
                                                           multiple
                                                           :items="['camelize']"
                                                           v-model="db.meta.inflection.cn"
@@ -507,10 +528,12 @@
                                                       <v-col class="d-flex align-center flex-shrink-1 flex-grow-0">
                                                         <x-btn small
                                                                btn.class="text-capitalize"
+															   v-bind:tooltip="$t('project.ext_db.credentials.advanced.button.edit_conn_json')"
                                                                outlined
                                                                @click="$set(showMonaco,dbIndex,!showMonaco[dbIndex])">
                                                           <v-icon small class="mr-1">mdi-database-edit</v-icon>
-                                                          Edit connection JSON
+                                                          <!-- Edit connection JSON -->
+														  {{ $t('project.ext_db.credentials.advanced.button.edit_conn_json') }}
                                                         </x-btn>
                                                       </v-col>
                                                     </v-row>
@@ -523,14 +546,19 @@
                                       </v-row>
 
                                       <v-row class="text-right justify-end">
-                                        <x-btn tooltip="Test Database Connection"
+									    <!-- Test Database Connection -->
+                                        <x-btn 
+												v-bind:tooltip="$t('project.ext_db.credentials.button.test_db_conn')"
                                                outlined
                                                small
                                                v-ge="['project','env-db-test-connection']"
                                                @click="testConnection(db,envKey,panelIndex)">
-                                          Test Database Connection
+                                          <!-- Test Database Connection -->
+										  {{ $t('project.ext_db.credentials.button.test_db_conn') }}
                                         </x-btn>
-                                        <x-btn tooltip="Remove Database from environment"
+										<!-- Remove Database from environment -->
+                                        <x-btn
+												v-bind:tooltip="$t('project.ext_db.credentials.button.remove_db_from_env')"
                                                text
                                                small
                                                v-if="dbIndex"
@@ -927,9 +955,9 @@ export default {
                 ui: {
                   setup: -1,
                   ssl: {
-                    key: "Client Key",
-                    cert: "Client Cert",
-                    ca: "Server CA"
+                    key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+					cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+					ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
                   },
                   sslUse: 'Preferred'
                 }
@@ -1099,8 +1127,6 @@ export default {
         }
 
       },
-
-
       dialog: {
         show: false,
         title: '',
@@ -1108,6 +1134,8 @@ export default {
         mtdOk: this.testConnectionMethodSubmit,
         type: 'primary'
       },
+	  // TODO: apply i18n for sslUsage
+	  // See project.ext_db.credentials.advanced.ssl.usage.option1 - 5 in en.json
       sslUsage: {
         No: "No",
         Preferred: "Preferred",
@@ -1115,11 +1143,11 @@ export default {
         "Required-CA": "Required-CA",
         "Required-IDENTITY": "Required-IDENTITY"
       },
-      sslUse: "Preferred",
+      sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
       ssl: {
-        key: "Client Key",
-        cert: "Client Cert",
-        ca: "Server CA"
+        key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+		cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+		ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
       },
       databaseNames: {
         MySQL: "mysql2",
@@ -1159,10 +1187,10 @@ export default {
       },
 
       compErrorMessages: [
-        'Invalid character in folder path.',
-        'Invalid database credentials.',
-        'Unable to connect to database, please check your database is up.',
-        'User does not exist or have sufficient permission to create schema.',
+        this.$t('project.ext_db.error.message_1'), // Invalid character in folder path
+        this.$t('project.ext_db.error.message_2'), // Invalid database credentials
+        this.$t('project.ext_db.error.message_3'), // Unable to connect to database, please check your database is up
+        this.$t('project.ext_db.error.message_4')  // User does not exist or have sufficient permission to create schema
       ],
       compErrorMessage: ''
     }
@@ -1385,11 +1413,11 @@ export default {
           Vue.set(db, 'ui', {
             setup: 0,
             ssl: {
-              key: "Client Key",
-              cert: "Client Cert",
-              ca: "Server CA"
+              key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+              cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+              ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
             },
-            sslUse: 'Preferred'
+            sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred') // Preferred
           });
         }
       }
@@ -1525,11 +1553,11 @@ export default {
                 ui: {
                   setup: 0,
                   ssl: {
-                    key: "Client Key",
-                    cert: "Client Cert",
-                    ca: "Server CA"
-                  },
-                  sslUse: 'Preferred'
+					  key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+					  cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+					  ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
+				},
+				sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred') // Preferred
                 }
               },
             ],
@@ -1571,11 +1599,11 @@ export default {
         },
         ui: {
           setup: 0,
-          sslUse: 'Preferred',
+          sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
           ssl: {
-            key: "Client Key",
-            cert: "Client Cert",
-            ca: "Server CA"
+			key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+			cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+			ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
           },
         }
       })
@@ -1703,7 +1731,8 @@ export default {
             if (passed) {
               this.panel = null;
             } else {
-              this.dialog.heading = "Connection was successful"
+              // Connection was successful
+              this.dialog.heading = this.$t('project.ext_db.dialog.success')
               this.dialog.type = 'success';
               this.dialog.show = true;
             }
@@ -1711,7 +1740,8 @@ export default {
 
           } else {
             db.ui.setup = -1;
-            this.dialog.heading = "Connection Failure: \n\n" + result.message;
+            // Connection Failure:
+            this.dialog.heading = this.$t('project.ext_db.dialog.failure') + result.message;
             this.dialog.type = 'error';
             this.dialog.show = true;
           }
@@ -1799,7 +1829,7 @@ export default {
             } else {
               db.ui.setup = -1;
               // this.activeDbNode.testConnectionStatus = false;
-              this.dialog.heading = "Connection Failure: \n\n" + result.message;
+              this.dialog.heading = this.$t('project.ext_db.dialog.failure') + result.message;
               this.dialog.type = 'error';
               this.dialog.show = true;
             }
@@ -1983,7 +2013,7 @@ export default {
   },
   head() {
     return {
-      title: 'Create Project | XC',
+      title: this.$t('project.ext_db.head.title'),
     }
   },
   props: {
@@ -2086,6 +2116,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -2103,4 +2134,4 @@ export default {
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
--->
+-->
\ No newline at end of file
diff --git a/packages/nc-gui/static/lang/en.json b/packages/nc-gui/static/lang/en.json
index 34250b1c58..90ebf1811a 100644
--- a/packages/nc-gui/static/lang/en.json
+++ b/packages/nc-gui/static/lang/en.json
@@ -37,5 +37,46 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco"
+  "signin.head.meta.content": "Log In To Noco",
+  "project.ext_db.title.edit": "Edit Project",
+  "project.ext_db.title.create": "Create Project",
+  "project.ext_db.project_name": "Enter Project Name",
+  "project.ext_db.project_type": "Access Project via",
+  "project.ext_db.button.save_project": "Save Project",
+  "project.ext_db.button.update_and_restart": "Update & Restart",
+  "project.ext_db.button.cancel": "Cancel",
+  "project.ext_db.button.cancel_tooltip": "Cancel and Return",
+  "project.ext_db.credentials": "Database Credentials",
+  "project.ext_db.credentials.label_1": "Database Type",
+  "project.ext_db.credentials.label_2": "SQLite File",
+  "project.ext_db.credentials.label_3": "Host Address",
+  "project.ext_db.credentials.label_4": "Port Number",
+  "project.ext_db.credentials.label_5": "Username",
+  "project.ext_db.credentials.label_6": "Password",
+  "project.ext_db.credentials.label_7": "Database : create if not exists",
+  "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+  "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+  "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
+  "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
+  "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+  "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
+  "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+  "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+  "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+  "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+  "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
+  "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+  "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+  "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+  "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+  "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+  "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+  "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+  "project.ext_db.error.message_1": "Invalid character in folder path.",
+  "project.ext_db.error.message_2": "Invalid database credentials.",
+  "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+  "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+  "project.ext_db.head.title": "Create Project | Noco",
+  "project.ext_db.dialog.success": "Connection was successful",
+  "project.ext_db.dialog.failure": "Connection Failure:"
 }
diff --git a/packages/nc-gui/static/lang/ja.json b/packages/nc-gui/static/lang/ja.json
index f3ceed4dd3..9ca8e0dedf 100644
--- a/packages/nc-gui/static/lang/ja.json
+++ b/packages/nc-gui/static/lang/ja.json
@@ -37,5 +37,46 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco"
+  "signin.head.meta.content": "Log In To Noco",
+  "project.ext_db.title.edit": "Edit Project",
+  "project.ext_db.title.create": "Create Project",
+  "project.ext_db.project_name": "Enter Project Name",
+  "project.ext_db.project_type": "Access Project via",
+  "project.ext_db.button.save_project": "Save Project",
+  "project.ext_db.button.update_and_restart": "Update & Restart",
+  "project.ext_db.button.cancel": "Cancel",
+  "project.ext_db.button.cancel_tooltip": "Cancel and Return",
+  "project.ext_db.credentials": "Database Credentials",
+  "project.ext_db.credentials.label_1": "Database Type",
+  "project.ext_db.credentials.label_2": "SQLite File",
+  "project.ext_db.credentials.label_3": "Host Address",
+  "project.ext_db.credentials.label_4": "Port Number",
+  "project.ext_db.credentials.label_5": "Username",
+  "project.ext_db.credentials.label_6": "Password",
+  "project.ext_db.credentials.label_7": "Database : create if not exists",
+  "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+  "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+  "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
+  "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
+  "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+  "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
+  "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+  "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+  "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+  "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+  "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
+  "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+  "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+  "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+  "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+  "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+  "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+  "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+  "project.ext_db.error.message_1": "Invalid character in folder path.",
+  "project.ext_db.error.message_2": "Invalid database credentials.",
+  "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+  "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+  "project.ext_db.head.title": "Create Project | Noco",
+  "project.ext_db.dialog.success": "Connection was successful",
+  "project.ext_db.dialog.failure": "Connection Failure:"
 }
diff --git a/packages/nc-gui/static/lang/zh.json b/packages/nc-gui/static/lang/zh.json
index 6d6e38d2b0..d256b04133 100644
--- a/packages/nc-gui/static/lang/zh.json
+++ b/packages/nc-gui/static/lang/zh.json
@@ -37,6 +37,47 @@
     "signin.head.title": "Log In | Noco",
     "signin.head.meta.hid": "Log In To Noco",
     "signin.head.meta.name": "Log In To Noco",
-    "signin.head.meta.content": "Log In To Noco"
+    "signin.head.meta.content": "Log In To Noco",
+    "project.ext_db.title.edit": "Edit Project",
+    "project.ext_db.title.create": "Create Project",
+    "project.ext_db.project_name": "Enter Project Name",
+    "project.ext_db.project_type": "Access Project via",
+    "project.ext_db.button.save_project": "Save Project",
+    "project.ext_db.button.update_and_restart": "Update & Restart",
+    "project.ext_db.button.cancel": "Cancel",
+    "project.ext_db.button.cancel_tooltip": "Cancel and Return",
+    "project.ext_db.credentials": "Database Credentials",
+    "project.ext_db.credentials.label_1": "Database Type",
+    "project.ext_db.credentials.label_2": "SQLite File",
+    "project.ext_db.credentials.label_3": "Host Address",
+    "project.ext_db.credentials.label_4": "Port Number",
+    "project.ext_db.credentials.label_5": "Username",
+    "project.ext_db.credentials.label_6": "Password",
+    "project.ext_db.credentials.label_7": "Database : create if not exists",
+    "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+    "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+    "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
+    "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
+    "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+    "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
+    "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+    "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+    "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+    "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+    "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
+    "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+    "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+    "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+    "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+    "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+    "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+    "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+    "project.ext_db.error.message_1": "Invalid character in folder path.",
+    "project.ext_db.error.message_2": "Invalid database credentials.",
+    "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+    "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+    "project.ext_db.head.title": "Create Project | Noco",
+    "project.ext_db.dialog.success": "Connection was successful",
+    "project.ext_db.dialog.failure": "Connection Failure:"
   }
   
\ No newline at end of file

From 52e1f45918ccf81f14bd847203fbf376bfcbd8f9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 9 Jun 2021 21:17:48 +0800
Subject: [PATCH 2/3] chore: format createOrEditProject.vue

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../nc-gui/components/createOrEditProject.vue | 1477 +++++++++--------
 1 file changed, 819 insertions(+), 658 deletions(-)

diff --git a/packages/nc-gui/components/createOrEditProject.vue b/packages/nc-gui/components/createOrEditProject.vue
index a4b3d83c97..0453248323 100644
--- a/packages/nc-gui/components/createOrEditProject.vue
+++ b/packages/nc-gui/components/createOrEditProject.vue
@@ -1,23 +1,22 @@
 <template>
   <v-container fluid>
-
     <v-col
-      :class="{'col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12' : !edit}" style="position: relative">
-      <v-form
-        :class="{'mt-8 pt-8':!edit}"
-        ref="form"
-        v-model="valid">
-        <v-card class="elevation-5"
-                ref="mainCard">
+      :class="{ 'col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12': !edit }"
+      style="position: relative"
+    >
+      <v-form :class="{ 'mt-8 pt-8': !edit }" ref="form" v-model="valid">
+        <v-card class="elevation-5" ref="mainCard">
           <div
             v-if="!edit"
-            style="position: absolute;top:-30px;
-                  left:-moz-calc(50% - 30px);
-                  left:-webkit-calc(50% - 30px);
-                  left:calc(50% - 30px);
-                  z-index: 999;
-                  border-radius: 10px;
-                  "
+            style="
+              position: absolute;
+              top: -30px;
+              left: -moz-calc(50% - 30px);
+              left: -webkit-calc(50% - 30px);
+              left: calc(50% - 30px);
+              z-index: 999;
+              border-radius: 10px;
+            "
             class="primary"
           >
             <v-img
@@ -29,34 +28,39 @@
             >
             </v-img>
           </div>
-          <v-toolbar flat color="" class="mb-3"
-                     style="width: 100%; border-bottom: 1px solid var(--v-backgroundColor-base)">
-
-            <v-toolbar-title class="title ">
-			  <!-- Edit Project -->
+          <v-toolbar
+            flat
+            color=""
+            class="mb-3"
+            style="width: 100%; border-bottom: 1px solid var(--v-backgroundColor-base)"
+          >
+            <v-toolbar-title class="title">
+              <!-- Edit Project -->
               <span v-if="edit">{{ $t('project.ext_db.title.edit') }}</span>
-			  <!-- Create Project -->
-			  <span v-else>{{ $t('project.ext_db.title.create') }}</span>
+              <!-- Create Project -->
+              <span v-else>{{ $t('project.ext_db.title.create') }}</span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
-			<!-- Cancel and Return -->
-            <x-btn 
-				v-bind:tooltip="$t('project.ext_db.button.cancel_tooltip')"
-                   to="/"
-                   v-ge="['project','cancel']"
-                   class="elevation-20">
-				   <!-- Cancel -->
-				   {{ $t('project.ext_db.button.cancel') }}
+            <!-- Cancel and Return -->
+            <x-btn
+              v-bind:tooltip="$t('project.ext_db.button.cancel_tooltip')"
+              to="/"
+              v-ge="['project', 'cancel']"
+              class="elevation-20"
+            >
+              <!-- Cancel -->
+              {{ $t('project.ext_db.button.cancel') }}
             </x-btn>
             <x-btn
               :disabled="!valid || !envStatusValid"
               class="primary"
-              v-ge="['project','save']"
-              @click="createOrUpdateProject()">
-			  <!-- Update & Restart -->
+              v-ge="['project', 'save']"
+              @click="createOrUpdateProject()"
+            >
+              <!-- Update & Restart -->
               <span v-if="edit">{{ $t('project.ext_db.button.update_and_restart') }}</span>
-			  <!-- Save Project -->
-			  <span v-else>{{ $t('project.ext_db.button.save_project') }}</span>
+              <!-- Save Project -->
+              <span v-else>{{ $t('project.ext_db.button.save_project') }}</span>
             </x-btn>
             <v-progress-linear
               v-if="projectReloading"
@@ -65,13 +69,11 @@
               color="success"
               indeterminate
               height="3"
-              style="top:-3px"
+              style="top: -3px"
             ></v-progress-linear>
-
           </v-toolbar>
 
           <div ref="panelContainer" style="">
-
             <api-overlay :project-created="projectCreated" v-show="projectReloading"></api-overlay>
             <!--            <v-overlay absolute color="grey" opacity="0.4"-->
             <!--                       class="create-project-overlay">-->
@@ -148,27 +150,40 @@
             </div>-->
             <!--            </v-overlay>-->
 
-
             <v-container fluid>
               <v-row>
                 <v-col cols="12" class="mb-0 pb-0">
                   <div style="max-width: 360px" class="mx-auto mb-3">
-				    <!-- Enter Project Name -->
+                    <!-- Enter Project Name -->
                     <v-text-field
                       ref="name"
-                      v-ge="['project','name']"
-                      :rules="form.titleRequiredRule" :height="20" v-model="project.title" v-bind:label="$t('project.ext_db.project_name')"
-                      autofocus>
+                      v-ge="['project', 'name']"
+                      :rules="form.titleRequiredRule"
+                      :height="20"
+                      v-model="project.title"
+                      v-bind:label="$t('project.ext_db.project_name')"
+                      autofocus
+                    >
                       <!--                      <v-icon color="info" class="blink_me mt-n1" slot="prepend">-->
                       <!--                        mdi-lightbulb-on-->
                       <!--                      </v-icon>-->
                     </v-text-field>
 
-					<!-- Access Project via -->
+                    <!-- Access Project via -->
                     <label class="caption"> {{ $t('project.ext_db.project_name') }}</label>
-                    <v-radio-group row hide-details dense v-model="project.projectType" class="mb-0 mt-0">
-                      <v-radio v-for="(type,i) in projectTypes" :key="type.value" :color="type.iconColor"
-                               :value="type.value">
+                    <v-radio-group
+                      row
+                      hide-details
+                      dense
+                      v-model="project.projectType"
+                      class="mb-0 mt-0"
+                    >
+                      <v-radio
+                        v-for="(type, i) in projectTypes"
+                        :key="type.value"
+                        :color="type.iconColor"
+                        :value="type.value"
+                      >
                         <template v-slot:label>
                           <v-chip :color="i ? colors[3] : colors[7]">
                             <v-icon small class="mr-1">{{ type.icon }}</v-icon>
@@ -193,55 +208,78 @@
                                 </template>
 
                               </v-select>-->
-
-
                 </v-col>
 
-                <v-col cols="10" offset="1" v-show="isTitle"
-                       :class="{'mt-0 pt-0':!edit,'mt-3 pt-3':edit}">
+                <v-col
+                  cols="10"
+                  offset="1"
+                  v-show="isTitle"
+                  :class="{ 'mt-0 pt-0': !edit, 'mt-3 pt-3': edit }"
+                >
                   <!--            <h2 :class="{'text-center mb-2':!edit,'text-center mb-2 grey&#45;&#45;text':edit}">
                                 {{ project.title && project.title.toUpperCase() }}'s
                                 Environments</h2> -->
 
-                  <p :class="{'text-center mb-2 mt-3':!edit,'text-center mb-2 mt-3 grey--text':edit}"> {{ $t('project.ext_db.credentials') }} </p>
-                  <v-expansion-panels v-model="panel" focusable accordion="" class="elevation-20"
-                                      style="border: 1px solid white">
+                  <p
+                    :class="{
+                      'text-center mb-2 mt-3': !edit,
+                      'text-center mb-2 mt-3 grey--text': edit,
+                    }"
+                  >
+                    {{ $t('project.ext_db.credentials') }}
+                  </p>
+                  <v-expansion-panels
+                    v-model="panel"
+                    focusable
+                    accordion=""
+                    class="elevation-20"
+                    style="border: 1px solid white"
+                  >
                     <v-expansion-panel
-
-                      v-for="(envData,envKey,panelIndex) in project.envs" :key="panelIndex"
-                      @change="onPanelToggle(panelIndex,envKey)"
+                      v-for="(envData, envKey, panelIndex) in project.envs"
+                      :key="panelIndex"
+                      @change="onPanelToggle(panelIndex, envKey)"
                       :ref="`panel${envKey}`"
                     >
                       <v-expansion-panel-header disable-icon-rotate>
                         <p class="pa-0 ma-0">
                           <!--                          <v-icon>mdi-test-tube</v-icon> &nbsp;-->
                           <!--                          <span class="title">&nbsp;<b>'{{ envKey }}'</b> environment : </span>-->
-                          <v-tooltip v-for="(db,tabIndex) in envData.db"
-                                     :key="tabIndex"
-                                     bottom
-                          >
+                          <v-tooltip v-for="(db, tabIndex) in envData.db" :key="tabIndex" bottom>
                             <template v-slot:activator="{ on }">
-                              <v-icon small @click.native.stop="showDBTabInEnvPanel(panelIndex,tabIndex)" v-on="on"
-                                      :color="getDbStatusColor(db)"
-                              >mdi-database
+                              <v-icon
+                                small
+                                @click.native.stop="showDBTabInEnvPanel(panelIndex, tabIndex)"
+                                v-on="on"
+                                :color="getDbStatusColor(db)"
+                                >mdi-database
                               </v-icon>
                             </template>
                             {{ getDbStatusTooltip(db) }}
                           </v-tooltip>
 
-                          <span class="caption" v-if="project.ui[envKey]" :class="project.ui[envKey].color + '--text'">
-                      <i>{{ project.ui[envKey].msg }}</i>
-                    </span>
-
-
-                          <x-btn small text v-if="panelIndex"
-                                 btn.class="float-right"
-                                 tooltip="Click here to remove environment"
-                                 @click.native.stop="removeEnv(envKey)"
-                                 v-ge="['project','env-delete']"
+                          <span
+                            class="caption"
+                            v-if="project.ui[envKey]"
+                            :class="project.ui[envKey].color + '--text'"
+                          >
+                            <i>{{ project.ui[envKey].msg }}</i>
+                          </span>
+
+                          <x-btn
+                            small
+                            text
+                            v-if="panelIndex"
+                            btn.class="float-right"
+                            tooltip="Click here to remove environment"
+                            @click.native.stop="removeEnv(envKey)"
+                            v-ge="['project', 'env-delete']"
                           >
                             <v-hover v-slot:default="{ hover }">
-                              <v-icon :color="hover ? 'error' : 'grey'" @click.native.stop="removeEnv(envKey)">
+                              <v-icon
+                                :color="hover ? 'error' : 'grey'"
+                                @click.native.stop="removeEnv(envKey)"
+                              >
                                 mdi-delete
                               </v-icon>
                             </v-hover>
@@ -260,16 +298,18 @@
                             </template>
                             <span>Environment setup pending</span>
                           </v-tooltip>
-
                         </template>
                       </v-expansion-panel-header>
                       <v-expansion-panel-content eager>
                         <v-col>
                           <v-card flat="">
                             <v-tabs height="34" v-model="databases[panelIndex]" background-color="">
-                              <v-tab v-for="(db,dbIndex) in project.envs[envKey].db" :key="dbIndex"
+                              <v-tab
+                                v-for="(db, dbIndex) in project.envs[envKey].db"
+                                :key="dbIndex"
                               >
-                                <v-icon small>mdi-database</v-icon> &nbsp; <span class="text-capitalize caption">{{
+                                <v-icon small>mdi-database</v-icon> &nbsp;
+                                <span class="text-capitalize caption">{{
                                   db.connection.database
                                 }}</span>
                               </v-tab>
@@ -289,59 +329,89 @@
                                                 </v-tooltip>
                   -->
                               <v-tabs-items v-model="databases[panelIndex]">
-                                <v-tab-item v-for="(db,dbIndex) in project.envs[envKey].db" :key="dbIndex">
+                                <v-tab-item
+                                  v-for="(db, dbIndex) in project.envs[envKey].db"
+                                  :key="dbIndex"
+                                >
                                   <v-card flat>
                                     <!--                            <form ref="form" class="pa-3">-->
                                     <v-container class="justify-center">
-
-
-                                      <v-row style="position:relative">
-
-
-                                        <v-overlay v-if="showMonaco[dbIndex]" absolute class="monaco-overlay">
+                                      <v-row style="position: relative">
+                                        <v-overlay
+                                          v-if="showMonaco[dbIndex]"
+                                          absolute
+                                          class="monaco-overlay"
+                                        >
                                           <v-container fluid class="h-100">
                                             <v-card style="position: relative" class="h-100">
-                                              <v-icon class="monaco-overlay-close pointer"
-                                                      color="error"
-                                                      @click="$set(showMonaco,dbIndex,false)">
+                                              <v-icon
+                                                class="monaco-overlay-close pointer"
+                                                color="error"
+                                                @click="$set(showMonaco, dbIndex, false)"
+                                              >
                                                 mdi-close-circle
                                               </v-icon>
 
-                                              <span class="ml-2 caption grey--text">Refer knex documentation <a
-                                                href="https://knexjs.org/#Installation-client" target="_blank"
-                                                class="grey--text">here</a> .</span>
+                                              <span class="ml-2 caption grey--text"
+                                                >Refer knex documentation
+                                                <a
+                                                  href="https://knexjs.org/#Installation-client"
+                                                  target="_blank"
+                                                  class="grey--text"
+                                                  >here</a
+                                                >
+                                                .</span
+                                              >
 
                                               <monaco-json-object-editor
-                                                style="height:calc(100% - 20px);width:100%"
-                                                v-model="project.envs[envKey].db[dbIndex]"></monaco-json-object-editor>
+                                                style="height: calc(100% - 20px); width: 100%"
+                                                v-model="project.envs[envKey].db[dbIndex]"
+                                              ></monaco-json-object-editor>
                                             </v-card>
                                           </v-container>
                                         </v-overlay>
 
                                         <v-col cols="4" class="py-0">
-										<!-- Database Type -->
+                                          <!-- Database Type -->
                                           <v-select
-                                            v-ge="['project','env-db-change']"
+                                            v-ge="['project', 'env-db-change']"
                                             class="body-2 db-select"
                                             :items="Object.keys(databaseNames)"
                                             v-model="client[dbIndex]"
                                             v-bind:label="$t('project.ext_db.credentials.label_1')"
-                                            @change="onDatabaseTypeChanged(client[dbIndex],db,dbIndex,envKey)"
-
+                                            @change="
+                                              onDatabaseTypeChanged(
+                                                client[dbIndex],
+                                                db,
+                                                dbIndex,
+                                                envKey
+                                              )
+                                            "
                                           >
-
-                                            <template v-slot:selection="{item}">
+                                            <template v-slot:selection="{ item }">
                                               <v-chip
                                                 small
-                                                :color="colors[Object.keys(databaseNames).indexOf(item) % colors.length]"
-                                                class="">{{ item }}
+                                                :color="
+                                                  colors[
+                                                    Object.keys(databaseNames).indexOf(item) %
+                                                      colors.length
+                                                  ]
+                                                "
+                                                class=""
+                                                >{{ item }}
                                               </v-chip>
                                             </template>
 
                                             <template slot="item" slot-scope="data">
                                               <v-chip
-                                                :color="colors[Object.keys(databaseNames).indexOf(data.item) % colors.length]"
-                                                class="caption">{{ data.item }}
+                                                :color="
+                                                  colors[
+                                                    Object.keys(databaseNames).indexOf(data.item) %
+                                                      colors.length
+                                                  ]
+                                                "
+                                                class="caption"
+                                                >{{ data.item }}
                                               </v-chip>
                                               <!--                                              <div class="d-flex flex-column mx-auto "-->
                                               <!--                                                   style="width:100%;border-bottom: 1px solid #ddd">-->
@@ -352,93 +422,103 @@
                                               <!--                                                  Coming soon</p>-->
                                               <!--                                              </div>-->
                                             </template>
-
                                           </v-select>
                                         </v-col>
-										<!-- SQLite File -->
+                                        <!-- SQLite File -->
                                         <v-col class="py-0" v-if="db.client === 'sqlite3'">
                                           <v-text-field
                                             :rules="form.folderRequiredRule"
                                             v-model="db.connection.connection.filename"
                                             v-bind:label="$t('project.ext_db.credentials.label_2')"
-                                            v-ge="['project','env-db-file']"
-                                            @click="selectSqliteFile(db)">
+                                            v-ge="['project', 'env-db-file']"
+                                            @click="selectSqliteFile(db)"
+                                          >
                                             <v-icon color="info" slot="prepend">
                                               mdi-file-outline
                                             </v-icon>
                                           </v-text-field>
-
                                         </v-col>
-										<!-- Host Address -->
+                                        <!-- Host Address -->
                                         <v-col cols="4" v-if="db.client !== 'sqlite3'" class="py-0">
                                           <v-text-field
-                                            v-ge="['project','env-db-host']"
+                                            v-ge="['project', 'env-db-host']"
                                             class="body-2"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.host"
                                             v-bind:label="$t('project.ext_db.credentials.label_3')"
                                           ></v-text-field>
                                         </v-col>
-										<!-- Port Number -->
+                                        <!-- Port Number -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2"
-                                            v-ge="['project','env-db-port']"
+                                            v-ge="['project', 'env-db-port']"
                                             v-model="db.connection.port"
                                             v-bind:label="$t('project.ext_db.credentials.label_4')"
                                             :rules="form.portValidationRule"
                                           ></v-text-field>
                                         </v-col>
-										<!-- Username -->
+                                        <!-- Username -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2"
-                                            v-ge="['project','env-db-user']"
+                                            v-ge="['project', 'env-db-user']"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.user"
                                             v-bind:label="$t('project.ext_db.credentials.label_5')"
                                           ></v-text-field>
                                         </v-col>
-										<!-- Password -->
+                                        <!-- Password -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2 db-password"
-                                            :type="showPass[`${panelIndex}_${dbIndex}`] ?   'text' : 'password'"
+                                            :type="
+                                              showPass[`${panelIndex}_${dbIndex}`]
+                                                ? 'text'
+                                                : 'password'
+                                            "
                                             :ref="`password${envKey}`"
-                                            v-ge="['project','env-db-password']"
+                                            v-ge="['project', 'env-db-password']"
                                             v-model="db.connection.password"
                                             v-bind:label="$t('project.ext_db.credentials.label_6')"
                                           >
                                             <template v-slot:append>
-                                              <v-icon small
-                                                      @click="$set(showPass,`${panelIndex}_${dbIndex}` , !showPass[`${panelIndex}_${dbIndex}`])"
-                                              >{{
-                                                  showPass[`${panelIndex}_${dbIndex}`] ? 'visibility_off' :
-                                                    'visibility'
+                                              <v-icon
+                                                small
+                                                @click="
+                                                  $set(
+                                                    showPass,
+                                                    `${panelIndex}_${dbIndex}`,
+                                                    !showPass[`${panelIndex}_${dbIndex}`]
+                                                  )
+                                                "
+                                                >{{
+                                                  showPass[`${panelIndex}_${dbIndex}`]
+                                                    ? 'visibility_off'
+                                                    : 'visibility'
                                                 }}
                                               </v-icon>
                                             </template>
-
                                           </v-text-field>
                                         </v-col>
-										<!-- Database : create if not exists -->
+                                        <!-- Database : create if not exists -->
                                         <v-col cols="4" class="py-0" v-if="db.client !== 'sqlite3'">
                                           <v-text-field
                                             class="body-2 database-field"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.database"
-
-                                            v-ge="['project','env-db-name']"
+                                            v-ge="['project', 'env-db-name']"
                                             v-bind:label="$t('project.ext_db.credentials.label_7')"
                                           ></v-text-field>
                                         </v-col>
                                         <v-col class="" v-if="db.client !== 'sqlite3'">
                                           <v-expansion-panels>
-                                            <v-expansion-panel
-                                              style="border: 1px solid wheat">
+                                            <v-expansion-panel style="border: 1px solid wheat">
                                               <v-expansion-panel-header>
-											  <!-- SSL & Advanced parameters -->
-                                                <span class="grey--text caption">{{ $t('project.ext_db.credentials.advanced') }}</span>
+                                                <!-- SSL & Advanced parameters -->
+                                                <span class="grey--text caption">{{
+                                                  $t('project.ext_db.credentials.advanced')
+                                                }}</span>
                                               </v-expansion-panel-header>
                                               <v-expansion-panel-content>
                                                 <v-card class="elevation-0">
@@ -448,92 +528,178 @@
                                                       :items="Object.keys(sslUsage)"
                                                       v-model="db.ui.sslUse"
                                                     >
-                                                      <template v-slot:item="{item}">
+                                                      <template v-slot:item="{ item }">
                                                         <span class="caption">{{ item }}</span>
                                                       </template>
                                                     </v-select>
 
                                                     <v-row class="pa-0 ma-0">
-
-                                                      <input type="file" ref="certFilePath" class="d-none"
-                                                             @change="readFileContent(db,'ssl','cert',dbIndex)"
+                                                      <input
+                                                        type="file"
+                                                        ref="certFilePath"
+                                                        class="d-none"
+                                                        @change="
+                                                          readFileContent(
+                                                            db,
+                                                            'ssl',
+                                                            'cert',
+                                                            dbIndex
+                                                          )
+                                                        "
                                                       />
-													  <!-- Select .cert file -->
-                                                      <x-btn 
-															 v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option2.toolip')"
-                                                             small
-                                                             color="primary"
-                                                             outlined
-                                                             @click="selectFile(db,'ssl', 'certFilePath',dbIndex)"
-                                                             class="elevation-5"
-                                                             v-ge="['project','env-db-cert']"
-                                                      >{{ db.ui.ssl.cert }}
+                                                      <!-- Select .cert file -->
+                                                      <x-btn
+                                                        v-bind:tooltip="
+                                                          $t(
+                                                            'project.ext_db.credentials.advanced.ssl.option2.toolip'
+                                                          )
+                                                        "
+                                                        small
+                                                        color="primary"
+                                                        outlined
+                                                        @click="
+                                                          selectFile(
+                                                            db,
+                                                            'ssl',
+                                                            'certFilePath',
+                                                            dbIndex
+                                                          )
+                                                        "
+                                                        class="elevation-5"
+                                                        v-ge="['project', 'env-db-cert']"
+                                                        >{{ db.ui.ssl.cert }}
                                                       </x-btn>
-													  <!-- Select .key file -->
-                                                      <input type="file" ref="keyFilePath" class="d-none"
-                                                             @change="readFileContent(db,'ssl','key',dbIndex)"/>
-                                                      <x-btn 
-															v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option1.toolip')"
-                                                             small
-                                                             color="primary"
-                                                             outlined
-                                                             @click="selectFile(db,'ssl', 'keyFilePath',dbIndex)"
-                                                             v-ge="['project','env-db-key']"
-                                                             class="elevation-5"
-                                                      >{{ db.ui.ssl.key }}
+                                                      <!-- Select .key file -->
+                                                      <input
+                                                        type="file"
+                                                        ref="keyFilePath"
+                                                        class="d-none"
+                                                        @change="
+                                                          readFileContent(db, 'ssl', 'key', dbIndex)
+                                                        "
+                                                      />
+                                                      <x-btn
+                                                        v-bind:tooltip="
+                                                          $t(
+                                                            'project.ext_db.credentials.advanced.ssl.option1.toolip'
+                                                          )
+                                                        "
+                                                        small
+                                                        color="primary"
+                                                        outlined
+                                                        @click="
+                                                          selectFile(
+                                                            db,
+                                                            'ssl',
+                                                            'keyFilePath',
+                                                            dbIndex
+                                                          )
+                                                        "
+                                                        v-ge="['project', 'env-db-key']"
+                                                        class="elevation-5"
+                                                        >{{ db.ui.ssl.key }}
                                                       </x-btn>
-													  <!-- Select CA file -->
-                                                      <input type="file" ref="caFilePath" class="d-none"
-                                                             @change="readFileContent(db,'ssl','ca',dbIndex)"/>
-                                                      <x-btn 
-															 v-bind:tooltip="$t('project.ext_db.credentials.advanced.ssl.option3.toolip')"
-                                                             small
-                                                             color="primary"
-                                                             outlined
-                                                             @click="selectFile(db,'ssl', 'caFilePath',dbIndex)"
-                                                             v-ge="['project','env-db-ca']"
-                                                      >{{ db.ui.ssl.ca }}
+                                                      <!-- Select CA file -->
+                                                      <input
+                                                        type="file"
+                                                        ref="caFilePath"
+                                                        class="d-none"
+                                                        @change="
+                                                          readFileContent(db, 'ssl', 'ca', dbIndex)
+                                                        "
+                                                      />
+                                                      <x-btn
+                                                        v-bind:tooltip="
+                                                          $t(
+                                                            'project.ext_db.credentials.advanced.ssl.option3.toolip'
+                                                          )
+                                                        "
+                                                        small
+                                                        color="primary"
+                                                        outlined
+                                                        @click="
+                                                          selectFile(
+                                                            db,
+                                                            'ssl',
+                                                            'caFilePath',
+                                                            dbIndex
+                                                          )
+                                                        "
+                                                        v-ge="['project', 'env-db-ca']"
+                                                        >{{ db.ui.ssl.ca }}
                                                       </x-btn>
-
                                                     </v-row>
 
                                                     <v-row>
                                                       <v-col>
-														<!-- Inflection - Table name -->
+                                                        <!-- Inflection - Table name -->
                                                         <v-select
                                                           class="caption"
-														  v-bind:label="$t('project.ext_db.credentials.advanced.inflection.table_name')"
+                                                          v-bind:label="
+                                                            $t(
+                                                              'project.ext_db.credentials.advanced.inflection.table_name'
+                                                            )
+                                                          "
                                                           multiple
                                                           :items="['camelize']"
                                                           v-model="db.meta.inflection.tn"
                                                         >
-                                                          <template v-slot:item="{item}">
+                                                          <template v-slot:item="{ item }">
                                                             <span class="caption">{{ item }}</span>
                                                           </template>
                                                         </v-select>
                                                       </v-col>
                                                       <v-col>
-														<!-- Inflection - Column name -->
+                                                        <!-- Inflection - Column name -->
                                                         <v-select
-                                                          class="caption"v-bind:label="$t('project.ext_db.credentials.advanced.inflection.column_name')"
+                                                          class="caption"
+                                                          v-bind:label="
+                                                            $t(
+                                                              'project.ext_db.credentials.advanced.inflection.column_name'
+                                                            )
+                                                          "
                                                           multiple
                                                           :items="['camelize']"
                                                           v-model="db.meta.inflection.cn"
                                                         >
-                                                          <template v-slot:item="{item}">
+                                                          <template v-slot:item="{ item }">
                                                             <span class="caption">{{ item }}</span>
                                                           </template>
                                                         </v-select>
                                                       </v-col>
-                                                      <v-col class="d-flex align-center flex-shrink-1 flex-grow-0">
-                                                        <x-btn small
-                                                               btn.class="text-capitalize"
-															   v-bind:tooltip="$t('project.ext_db.credentials.advanced.button.edit_conn_json')"
-                                                               outlined
-                                                               @click="$set(showMonaco,dbIndex,!showMonaco[dbIndex])">
-                                                          <v-icon small class="mr-1">mdi-database-edit</v-icon>
+                                                      <v-col
+                                                        class="
+                                                          d-flex
+                                                          align-center
+                                                          flex-shrink-1 flex-grow-0
+                                                        "
+                                                      >
+                                                        <x-btn
+                                                          small
+                                                          btn.class="text-capitalize"
+                                                          v-bind:tooltip="
+                                                            $t(
+                                                              'project.ext_db.credentials.advanced.button.edit_conn_json'
+                                                            )
+                                                          "
+                                                          outlined
+                                                          @click="
+                                                            $set(
+                                                              showMonaco,
+                                                              dbIndex,
+                                                              !showMonaco[dbIndex]
+                                                            )
+                                                          "
+                                                        >
+                                                          <v-icon small class="mr-1"
+                                                            >mdi-database-edit</v-icon
+                                                          >
                                                           <!-- Edit connection JSON -->
-														  {{ $t('project.ext_db.credentials.advanced.button.edit_conn_json') }}
+                                                          {{
+                                                            $t(
+                                                              'project.ext_db.credentials.advanced.button.edit_conn_json'
+                                                            )
+                                                          }}
                                                         </x-btn>
                                                       </v-col>
                                                     </v-row>
@@ -546,27 +712,35 @@
                                       </v-row>
 
                                       <v-row class="text-right justify-end">
-									    <!-- Test Database Connection -->
-                                        <x-btn 
-												v-bind:tooltip="$t('project.ext_db.credentials.button.test_db_conn')"
-                                               outlined
-                                               small
-                                               v-ge="['project','env-db-test-connection']"
-                                               @click="testConnection(db,envKey,panelIndex)">
+                                        <!-- Test Database Connection -->
+                                        <x-btn
+                                          v-bind:tooltip="
+                                            $t('project.ext_db.credentials.button.test_db_conn')
+                                          "
+                                          outlined
+                                          small
+                                          v-ge="['project', 'env-db-test-connection']"
+                                          @click="testConnection(db, envKey, panelIndex)"
+                                        >
                                           <!-- Test Database Connection -->
-										  {{ $t('project.ext_db.credentials.button.test_db_conn') }}
+                                          {{ $t('project.ext_db.credentials.button.test_db_conn') }}
                                         </x-btn>
-										<!-- Remove Database from environment -->
+                                        <!-- Remove Database from environment -->
                                         <x-btn
-												v-bind:tooltip="$t('project.ext_db.credentials.button.remove_db_from_env')"
-                                               text
-                                               small
-                                               v-if="dbIndex"
-                                               @click="removeDBFromEnv(db,envKey,panelIndex,dbIndex)"
-                                               v-ge="['project','env-db-delete']"
+                                          v-bind:tooltip="
+                                            $t(
+                                              'project.ext_db.credentials.button.remove_db_from_env'
+                                            )
+                                          "
+                                          text
+                                          small
+                                          v-if="dbIndex"
+                                          @click="removeDBFromEnv(db, envKey, panelIndex, dbIndex)"
+                                          v-ge="['project', 'env-db-delete']"
                                         >
                                           <v-hover v-slot:default="{ hover }">
-                                            <v-icon :color="hover ? 'error' : 'grey'">mdi-database-remove
+                                            <v-icon :color="hover ? 'error' : 'grey'"
+                                              >mdi-database-remove
                                             </v-icon>
                                           </v-hover>
                                         </x-btn>
@@ -582,7 +756,6 @@
                       </v-expansion-panel-content>
                     </v-expansion-panel>
 
-
                     <!--  <v-expansion-panel>
                         <v-expansion-panel-header disable-icon-rotate>
                           <v-tooltip bottom>
@@ -601,12 +774,9 @@
                           </template>
                         </v-expansion-panel-header>
                       </v-expansion-panel>-->
-
                   </v-expansion-panels>
-
                 </v-col>
 
-
                 <!--                <v-col cols="10" offset="1" v-show="isTitle"
                                        :class="{'mt-0 pt-0':!edit,'mt-3 pt-3':edit}">
                                   &lt;!&ndash;                  <h2 :class="{'text-center mb-2':!edit,'text-center mb-2 grey&#45;&#45;text':edit}">&ndash;&gt;
@@ -744,10 +914,7 @@
             </v-container>
           </div>
         </v-card>
-
       </v-form>
-
-
     </v-col>
     <dlgOk
       v-if="dialog.show"
@@ -757,17 +924,15 @@
       :type="dialog.type"
     />
 
-
     <dlg-ok-new
       v-model="testSuccess"
       heading="Connection was successful"
       ok-label="Ok & Save Project"
-      @ok="createOrUpdateProject "
+      @ok="createOrUpdateProject"
       type="success"
-      :btnAttr="{small:false, }"
+      :btnAttr="{ small: false }"
     />
 
-
     <textDlgSubmitCancel
       v-if="dialogGetEnvName.dialogShow"
       :dialogShow="dialogGetEnvName.dialogShow"
@@ -776,50 +941,51 @@
       :mtdDialogCancel="mtdDialogGetEnvNameCancel"
     />
 
-
     <div class="floating-button" v-if="isTitle && !edit">
       <v-tooltip top>
         <template v-slot:activator="{ on }">
-          <v-btn v-on="on" fab dark large tooltip="Scroll to top"
-                 :disabled="!valid || !envStatusValid"
-                 class="primary"
-                 v-ge="['project','save']"
-                 @click="createOrUpdateProject()">
-
+          <v-btn
+            v-on="on"
+            fab
+            dark
+            large
+            tooltip="Scroll to top"
+            :disabled="!valid || !envStatusValid"
+            class="primary"
+            v-ge="['project', 'save']"
+            @click="createOrUpdateProject()"
+          >
             <v-icon>save</v-icon>
           </v-btn>
         </template>
-        <span>
-        Save Project
-          </span>
+        <span> Save Project </span>
       </v-tooltip>
     </div>
-
   </v-container>
 </template>
 <script>
-import MonacoJsonEditor from "@/components/monaco/MonacoJsonEditor";
+import MonacoJsonEditor from '@/components/monaco/MonacoJsonEditor';
 import JSON5 from 'json5';
 
-const {uniqueNamesGenerator, starWars, adjectives, animals} = require('unique-names-generator');
-import readFile from "@/helpers/fileReader";
+const { uniqueNamesGenerator, starWars, adjectives, animals } = require('unique-names-generator');
+import readFile from '@/helpers/fileReader';
 
-import {mapGetters, mapActions, mapState, mapMutations} from "vuex";
+import { mapGetters, mapActions, mapState, mapMutations } from 'vuex';
 import Vue from 'vue';
-import textDlgSubmitCancel from "./utils/dlgTextSubmitCancel";
+import textDlgSubmitCancel from './utils/dlgTextSubmitCancel';
 
-import {v4 as uuidv4} from 'uuid';
-import dlgOk from "./utils/dlgOk.vue";
-import XBtn from "./global/xBtn";
+import { v4 as uuidv4 } from 'uuid';
+import dlgOk from './utils/dlgOk.vue';
+import XBtn from './global/xBtn';
 
 import axios from 'axios';
-import CreateProjectComingSoon from "@/components/createProjectComingSoon";
-import MonacoJsonObjectEditor from "@/components/monaco/MonacoJsonObjectEditor";
-import ApiOverlay from "@/components/apiOverlay";
-import colors from "@/mixins/colors";
-import DlgOkNew from "@/components/utils/dlgOkNew";
+import CreateProjectComingSoon from '@/components/createProjectComingSoon';
+import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor';
+import ApiOverlay from '@/components/apiOverlay';
+import colors from '@/mixins/colors';
+import DlgOkNew from '@/components/utils/dlgOkNew';
 
-const homeDir = ''
+const homeDir = '';
 
 export default {
   layout: 'empty',
@@ -832,11 +998,10 @@ export default {
     MonacoJsonEditor,
     XBtn,
     dlgOk,
-    textDlgSubmitCancel
+    textDlgSubmitCancel,
   },
   mixins: [colors],
   data() {
-
     return {
       testSuccess: false,
       projectCreated: false,
@@ -844,7 +1009,7 @@ export default {
       showMonaco: [],
       smtpConfiguration: {
         from: '',
-        options: ''
+        options: '',
       },
       showSecret: false,
       loaderMessages: [
@@ -872,14 +1037,14 @@ export default {
       loaderMessage: '',
       projectReloading: false,
       authTypes: [
-        {text: "JWT", value: "jwt"},
-        {text: "Master Key", value: "masterKey"},
-        {text: "Middleware", value: "middleware"},
-        {text: "Disabled", value: "none"},
+        { text: 'JWT', value: 'jwt' },
+        { text: 'Master Key', value: 'masterKey' },
+        { text: 'Middleware', value: 'middleware' },
+        { text: 'Disabled', value: 'none' },
       ],
       projectTypes: [
-        {text: 'REST APIs', value: 'rest', icon: 'mdi-json', iconColor: 'green'},
-        {text: 'GRAPHQL APIs', value: 'graphql', icon: 'mdi-graphql', iconColor: 'pink'},
+        { text: 'REST APIs', value: 'rest', icon: 'mdi-json', iconColor: 'green' },
+        { text: 'GRAPHQL APIs', value: 'graphql', icon: 'mdi-graphql', iconColor: 'pink' },
         // {
         //   text: 'Automatic gRPC APIs on database',
         //   value: 'grpc',
@@ -901,11 +1066,11 @@ export default {
         portValidationRule: [v => /^\d+$/.test(v) || `Not a valid port`],
         titleRequiredRule: [v => !!v || `Title is required`],
         requiredRule: [v => !!v || `Field is required`],
-        folderRequiredRule: [v => !!v || `Folder path is required`]
+        folderRequiredRule: [v => !!v || `Folder path is required`],
       },
       valid: null,
       panel: 0,
-      client: ["Sqlite"],
+      client: ['Sqlite'],
       baseFolder: homeDir,
 
       tab: null,
@@ -915,7 +1080,7 @@ export default {
       auth: {
         authSecret: uuidv4(),
         authType: 'jwt',
-        webhook: null
+        webhook: null,
       },
       project: {},
       defaultProject: {
@@ -923,238 +1088,235 @@ export default {
         version: '0.6',
         folder: homeDir,
         envs: {
-          "dev": {
+          dev: {
             db: [
               {
-                "client": "pg",
-                "connection": {
-                  "host": "localhost",
-                  "port": "5432",
-                  "user": "postgres",
-                  "password": "password",
-                  "database": "_dev",
+                client: 'pg',
+                connection: {
+                  host: 'localhost',
+                  port: '5432',
+                  user: 'postgres',
+                  password: 'password',
+                  database: '_dev',
                   ssl: {
-                    ca: "",
-                    key: "",
-                    cert: ""
-                  }
+                    ca: '',
+                    key: '',
+                    cert: '',
+                  },
                 },
-                "meta": {
-                  "tn": "nc_evolutions",
-                  "dbAlias": "db",
+                meta: {
+                  tn: 'nc_evolutions',
+                  dbAlias: 'db',
                   api: {
-                    type: "rest",
-                    prefix: "",
-                    graphqlDepthLimit: 10
+                    type: 'rest',
+                    prefix: '',
+                    graphqlDepthLimit: 10,
                   },
                   inflection: {
                     tn: ['camelize'],
                     cn: ['camelize'],
-                  }
+                  },
                 },
                 ui: {
                   setup: -1,
                   ssl: {
                     key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-					cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-					ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
+                    cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+                    ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
                   },
-                  sslUse: 'Preferred'
-                }
-              }
+                  sslUse: 'Preferred',
+                },
+              },
             ],
             apiClient: {
-              data: []
-            }
-          }
+              data: [],
+            },
+          },
         },
-        "workingEnv": "dev",
+        workingEnv: 'dev',
         ui: {
           envs: {
             dev: {},
-
-          }
+          },
         },
         meta: {
           version: '0.6',
           seedsFolder: 'seeds',
           queriesFolder: 'queries',
           apisFolder: 'apis',
-          projectType: "rest",
+          projectType: 'rest',
           type: 'mvc',
-          language: 'ts'
+          language: 'ts',
         },
         seedsFolder: 'seeds',
         queriesFolder: 'queries',
         apisFolder: 'apis',
-        projectType: "rest",
+        projectType: 'rest',
         type: 'mvc',
         language: 'ts',
         apiClient: {
-          data: []
-        }
+          data: [],
+        },
       },
 
       sampleConnectionData: {
         Postgres: {
-          "host": "localhost",
-          "port": "5432",
-          "user": "postgres",
-          "password": "password",
-          "database": "_test",
+          host: 'localhost',
+          port: '5432',
+          user: 'postgres',
+          password: 'password',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         MySQL: {
-          "host": "localhost",
-          "port": "3306",
-          "user": "root",
-          "password": "password",
-          "database": "_test",
+          host: 'localhost',
+          port: '3306',
+          user: 'root',
+          password: 'password',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         Vitess: {
-          "host": "localhost",
-          "port": "15306",
-          "user": "root",
-          "password": "password",
-          "database": "_test",
+          host: 'localhost',
+          port: '15306',
+          user: 'root',
+          password: 'password',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         TiDB: {
-          "host": "localhost",
-          "port": "4000",
-          "user": "root",
-          "password": "",
-          "database": "_test",
+          host: 'localhost',
+          port: '4000',
+          user: 'root',
+          password: '',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         Yugabyte: {
-          "host": "localhost",
-          "port": "5432",
-          "user": "postgres",
-          "password": "",
-          "database": "_test",
+          host: 'localhost',
+          port: '5432',
+          user: 'postgres',
+          password: '',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         CitusDB: {
-          "host": "localhost",
-          "port": "5432",
-          "user": "postgres",
-          "password": "",
-          "database": "_test",
+          host: 'localhost',
+          port: '5432',
+          user: 'postgres',
+          password: '',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         CockroachDB: {
-          "host": "localhost",
-          "port": "5432",
-          "user": "postgres",
-          "password": "",
-          "database": "_test",
+          host: 'localhost',
+          port: '5432',
+          user: 'postgres',
+          password: '',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         Greenplum: {
-          "host": "localhost",
-          "port": "5432",
-          "user": "postgres",
-          "password": "",
-          "database": "_test",
+          host: 'localhost',
+          port: '5432',
+          user: 'postgres',
+          password: '',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         MsSQL: {
-          "host": "localhost",
-          "port": 1433,
-          "user": "sa",
-          "password": "Password123.",
-          "database": "_test",
+          host: 'localhost',
+          port: 1433,
+          user: 'sa',
+          password: 'Password123.',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         Oracle: {
-          "host": "localhost",
-          "port": "1521",
-          "user": "system",
-          "password": "Oracle18",
-          "database": "_test",
+          host: 'localhost',
+          port: '1521',
+          user: 'system',
+          password: 'Oracle18',
+          database: '_test',
           ssl: {
-            ca: "",
-            key: "",
-            cert: ""
-          }
+            ca: '',
+            key: '',
+            cert: '',
+          },
         },
         Sqlite: {
-          client: "sqlite3",
+          client: 'sqlite3',
           database: homeDir,
           connection: {
-            filename: homeDir
+            filename: homeDir,
           },
-          useNullAsDefault: true
-
-        }
-
+          useNullAsDefault: true,
+        },
       },
       dialog: {
         show: false,
         title: '',
         heading: '',
         mtdOk: this.testConnectionMethodSubmit,
-        type: 'primary'
+        type: 'primary',
       },
-	  // TODO: apply i18n for sslUsage
-	  // See project.ext_db.credentials.advanced.ssl.usage.option1 - 5 in en.json
+      // TODO: apply i18n for sslUsage
+      // See project.ext_db.credentials.advanced.ssl.usage.option1 - 5 in en.json
       sslUsage: {
-        No: "No",
-        Preferred: "Preferred",
-        Required: "pg",
-        "Required-CA": "Required-CA",
-        "Required-IDENTITY": "Required-IDENTITY"
+        No: 'No',
+        Preferred: 'Preferred',
+        Required: 'pg',
+        'Required-CA': 'Required-CA',
+        'Required-IDENTITY': 'Required-IDENTITY',
       },
       sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
       ssl: {
         key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-		cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-		ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
+        cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+        ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
       },
       databaseNames: {
-        MySQL: "mysql2",
-        Postgres: "pg",
+        MySQL: 'mysql2',
+        Postgres: 'pg',
         // Oracle: "oracledb",
-        MsSQL: "mssql",
-        Sqlite: "sqlite3",
+        MsSQL: 'mssql',
+        Sqlite: 'sqlite3',
         // Vitess: "mysql2",
         // TiDB: "mysql2",
         // Yugabyte: "pg",
@@ -1168,54 +1330,57 @@ export default {
         pg: 'postgres',
         oracledb: 'xe',
         mssql: undefined,
-        sqlite3: "a.sqlite"
+        sqlite3: 'a.sqlite',
       },
       dbIcons: {
-        Oracle: "temp/db/oracle.png",
-        Postgres: "temp/db/postgre.png",
-        MySQL: "temp/db/mysql.png",
-        MsSQL: "temp/db/mssql.png",
-        Sqlite: "temp/db/sqlite.svg",
-        'Salesforce': 'temp/salesforce-3-569548.webp',
-        'SAP': 'temp/sap.png',
-        'Stripe': 'temp/stripe.svg',
+        Oracle: 'temp/db/oracle.png',
+        Postgres: 'temp/db/postgre.png',
+        MySQL: 'temp/db/mysql.png',
+        MsSQL: 'temp/db/mssql.png',
+        Sqlite: 'temp/db/sqlite.svg',
+        Salesforce: 'temp/salesforce-3-569548.webp',
+        SAP: 'temp/sap.png',
+        Stripe: 'temp/stripe.svg',
       },
       dialogGetEnvName: {
         dialogShow: false,
-        heading: "Enter New Environment Name",
-        field: "Environment Name"
+        heading: 'Enter New Environment Name',
+        field: 'Environment Name',
       },
 
       compErrorMessages: [
         this.$t('project.ext_db.error.message_1'), // Invalid character in folder path
         this.$t('project.ext_db.error.message_2'), // Invalid database credentials
         this.$t('project.ext_db.error.message_3'), // Unable to connect to database, please check your database is up
-        this.$t('project.ext_db.error.message_4')  // User does not exist or have sufficient permission to create schema
+        this.$t('project.ext_db.error.message_4'), // User does not exist or have sufficient permission to create schema
       ],
-      compErrorMessage: ''
-    }
+      compErrorMessage: '',
+    };
   },
   computed: {
-    ...mapGetters({sqlMgr: "sqlMgr/sqlMgr"}),
+    ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }),
     isTitle() {
       return this.project.title && this.project.title.trim().length;
     },
     envStatusValid() {
-      return this.project.envs && Object.values(this.project.envs).every(this.getEnvironmentStatusAggregatedNew)
+      return (
+        this.project.envs &&
+        Object.values(this.project.envs).every(this.getEnvironmentStatusAggregatedNew)
+      );
     },
     typeIcon() {
       if (this.project.projectType) {
-        return this.projectTypes.find(({value}) => value === this.project.projectType)
+        return this.projectTypes.find(({ value }) => value === this.project.projectType);
       } else {
-        return {'icon': 'mdi-server', iconColor: 'primary'}
+        return { icon: 'mdi-server', iconColor: 'primary' };
       }
     },
     databaseNamesReverse() {
       return Object.entries(this.databaseNames).reduce((newObj, [value, key]) => {
         newObj[key] = value;
         return newObj;
-      }, {})
-    }
+      }, {});
+    },
   },
   methods: {
     async enableAllSchemas() {
@@ -1227,9 +1392,8 @@ export default {
       });
     },
 
-
     ...mapActions({
-      loadProjects: "project/loadProjects",
+      loadProjects: 'project/loadProjects',
     }),
     onAdvancePanelToggle() {
       if (this.$refs.monacoEditor) {
@@ -1243,12 +1407,12 @@ export default {
       // shell.openItem(path.join(this.project.folder, 'config.xc.json'));
     },
     readFileContent(db, obj, key, index) {
-      readFile(this.$refs[`${key}FilePath`][index], (data) => {
-        Vue.set(db.connection[obj], key, data)
-      })
+      readFile(this.$refs[`${key}FilePath`][index], data => {
+        Vue.set(db.connection[obj], key, data);
+      });
     },
     selectFile(db, obj, key, index) {
-      this.$refs[key][index].click()
+      this.$refs[key][index].click();
 
       // console.log(obj, key);
       // const file = dialog.showOpenDialog({
@@ -1268,10 +1432,18 @@ export default {
         if (this.panel !== undefined) {
           const panelContainer = this.$refs.panelContainer;
           const panel = this.$refs[`panel${envKey}`][0].$el;
-          setTimeout(() => panelContainer.scrollTop = (panel.getBoundingClientRect().top + panelContainer.scrollTop) - panelContainer.getBoundingClientRect().top - 50, 500);
+          setTimeout(
+            () =>
+              (panelContainer.scrollTop =
+                panel.getBoundingClientRect().top +
+                panelContainer.scrollTop -
+                panelContainer.getBoundingClientRect().top -
+                50),
+            500
+          );
           setTimeout(() => this.$refs[`password${envKey}`][0].focus());
         }
-      })
+      });
     },
     scrollToTop() {
       document.querySelector('html').scrollTop = 0;
@@ -1281,7 +1453,6 @@ export default {
       Vue.set(this.databases, panelIndex, tabIndex);
     },
     getProjectJson() {
-
       console.log('Project json before creating', this.project);
 
       /**
@@ -1292,12 +1463,14 @@ export default {
       console.log('Project json after parsing', xcConfig);
       delete xcConfig.ui;
 
-
       for (let env in xcConfig.envs) {
         for (let i = 0; i < xcConfig.envs[env].db.length; ++i) {
           xcConfig.envs[env].db[i].meta.api.type = this.project.projectType;
           console.log('getProjectJson:', env, i, xcConfig.envs[env].db[i]);
-          if (xcConfig.envs[env].db[i].client === 'mysql' || xcConfig.envs[env].db[i].client === 'mysql2') {
+          if (
+            xcConfig.envs[env].db[i].client === 'mysql' ||
+            xcConfig.envs[env].db[i].client === 'mysql2'
+          ) {
             xcConfig.envs[env].db[i].connection.multipleStatements = true;
           }
           this.handleSSL(xcConfig.envs[env].db[i], false);
@@ -1310,7 +1483,8 @@ export default {
           }
           if (xcConfig.envs[env].db[i].client === 'oracledb') {
             xcConfig.envs[env].db[i].pool = {
-              min: 0, max: 50
+              min: 0,
+              max: 50,
             };
 
             xcConfig.envs[env].db[i].acquireConnectionTimeout = 60000;
@@ -1320,43 +1494,40 @@ export default {
 
           if (inflectionObj) {
             if (Array.isArray(inflectionObj.tn)) {
-              inflectionObj.tn = inflectionObj.tn.join(',')
+              inflectionObj.tn = inflectionObj.tn.join(',');
             }
             if (Array.isArray(inflectionObj.cn)) {
-              inflectionObj.cn = inflectionObj.cn.join(',')
+              inflectionObj.cn = inflectionObj.cn.join(',');
             }
 
             inflectionObj.tn = inflectionObj.tn || 'none';
             inflectionObj.cn = inflectionObj.cn || 'none';
-
           }
 
           if (this.allSchemas) {
             delete xcConfig.envs[env].db[i].connection.database;
             xcConfig.envs[env].db[i].meta.allSchemas = true;
           }
-
-
         }
       }
 
       xcConfig.auth = {};
       switch (this.auth.authType) {
-        case "jwt":
+        case 'jwt':
           xcConfig.auth.jwt = {
             secret: this.auth.authSecret,
-            dbAlias: xcConfig.envs[Object.keys(xcConfig.envs)[0]].db[0].meta.dbAlias
+            dbAlias: xcConfig.envs[Object.keys(xcConfig.envs)[0]].db[0].meta.dbAlias,
           };
           break;
-        case "masterKey":
+        case 'masterKey':
           xcConfig.auth.masterKey = {
-            secret: this.auth.authSecret
+            secret: this.auth.authSecret,
           };
           sessionStorage.setItem('masterKey', this.auth.authSecret);
           break;
-        case "middleware":
+        case 'middleware':
           xcConfig.auth.masterKey = {
-            url: this.auth.webhook
+            url: this.auth.webhook,
           };
           break;
         default:
@@ -1364,50 +1535,49 @@ export default {
           break;
       }
 
-      xcConfig.type = this.$store.state.project.projectInfo ? this.$store.state.project.projectInfo.type : 'docker';
+      xcConfig.type = this.$store.state.project.projectInfo
+        ? this.$store.state.project.projectInfo.type
+        : 'docker';
 
-
-      if (this.smtpConfiguration && this.smtpConfiguration.from && this.smtpConfiguration.options.trim()) {
+      if (
+        this.smtpConfiguration &&
+        this.smtpConfiguration.from &&
+        this.smtpConfiguration.options.trim()
+      ) {
         try {
           xcConfig.mailer = {
             options: JSON5.parse(this.smtpConfiguration.options),
-            from: this.smtpConfiguration.from
-          }
-        } catch (e) {
-        }
+            from: this.smtpConfiguration.from,
+          };
+        } catch (e) {}
       }
 
-
       xcConfig.meta = xcConfig.meta || {};
       xcConfig.meta.db = {
-        "client": "sqlite3",
-        "connection": {
-          "filename": "xc.db"
+        client: 'sqlite3',
+        connection: {
+          filename: 'xc.db',
         },
-      }
-
+      };
 
       console.log('Project json : after', xcConfig);
       return xcConfig;
-
     },
 
     constructProjectJsonFromProject(project) {
-
       // const {projectJson: envs, ...rest} = project;
 
       // let p = {...rest, ...envs};
-      let p = project //JSON.parse(JSON.stringify(project.projectJson));
+      let p = project; //JSON.parse(JSON.stringify(project.projectJson));
 
       p.ui = {
         envs: {
           dev: {},
-        }
+        },
       };
       for (let env in p.envs) {
         let i = 0;
         for (let db of p.envs[env].db) {
-
           Vue.set(this.client, i++, this.databaseNamesReverse[db.client]);
 
           Vue.set(db, 'ui', {
@@ -1415,49 +1585,45 @@ export default {
             ssl: {
               key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
               cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-              ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
+              ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
             },
-            sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred') // Preferred
+            sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
           });
         }
       }
       // delete p.projectJson;
 
-
       if (p.auth) {
         if (p.auth.jwt) {
-          this.auth.authType = 'jwt'
+          this.auth.authType = 'jwt';
           this.auth.authSecret = p.auth.jwt.secret;
         } else if (p.auth.masterKey) {
           if (p.auth.masterKey.secret) {
             this.auth.authSecret = p.auth.masterKey.secret;
-            this.auth.authType = 'masterKey'
+            this.auth.authType = 'masterKey';
           } else if (p.auth.masterKey.url) {
             this.auth.webhook = p.auth.masterKey.url;
-            this.auth.authType = 'middleware'
+            this.auth.authType = 'middleware';
           } else {
-            this.auth.authType = 'none'
+            this.auth.authType = 'none';
           }
         } else {
-          this.auth.authType = 'none'
+          this.auth.authType = 'none';
         }
       } else {
-        this.auth.authType = 'none'
+        this.auth.authType = 'none';
       }
 
-
       this.project = p;
       if (p.mailer) {
         this.smtpConfiguration = {
           from: p.mailer.from,
-          options: JSON.stringify(p.mailer.options, 0, 2)
-        }
+          options: JSON.stringify(p.mailer.options, 0, 2),
+        };
       }
       delete p.mailer;
-
     },
 
-
     async createOrUpdateProject() {
       const projectJson = this.getProjectJson();
       delete projectJson.folder;
@@ -1465,11 +1631,11 @@ export default {
       let i = 0;
       const toast = this.$toast.info(this.loaderMessages[0]);
       const interv = setInterval(() => {
-        if (this.edit) return
+        if (this.edit) return;
         if (i < this.loaderMessages.length - 1) i++;
         if (toast) {
           if (!this.allSchemas) {
-            toast.text(this.loaderMessages[i])
+            toast.text(this.loaderMessages[i]);
           } else {
             toast.goAway(100);
           }
@@ -1481,27 +1647,23 @@ export default {
       let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
         {
           query: {
-            skipProjectHasDb: 1
-          }
+            skipProjectHasDb: 1,
+          },
         },
-        this.edit ? 'projectUpdateByWeb' : "projectCreateByWeb",
+        this.edit ? 'projectUpdateByWeb' : 'projectCreateByWeb',
         {
           project: {
             title: projectJson.title,
             folder: 'config.xc.json',
-            type: 'pg'
+            type: 'pg',
           },
-          projectJson
-        }]);
+          projectJson,
+        },
+      ]);
 
       clearInterval(interv);
       toast.goAway(100);
-      console.log(
-        "project created redirect to project page",
-        projectJson,
-        result,
-      );
-
+      console.log('project created redirect to project page', projectJson, result);
 
       await this.$store.dispatch('project/ActLoadProjectInfo');
 
@@ -1511,8 +1673,8 @@ export default {
         this.$router.push({
           path: `/nc/${result.id}`,
           query: {
-            new: 1
-          }
+            new: 1,
+          },
         });
       }
 
@@ -1523,51 +1685,49 @@ export default {
 
     mtdDialogGetEnvNameSubmit(envName, cookie) {
       console.log(envName);
-      this.dialogGetEnvName.dialogShow = false
+      this.dialogGetEnvName.dialogShow = false;
       if (envName in this.project.envs) {
         console.log('Environment exists');
       } else {
-        Vue.set(this.project.envs, envName,
-          {
-            db: [
-              {
-                "client": "pg",
-                "connection": {
-                  "host": "localhost",
-                  "port": "5432",
-                  "user": "postgres",
-                  "password": "password",
-                  "database": "new_database"
+        Vue.set(this.project.envs, envName, {
+          db: [
+            {
+              client: 'pg',
+              connection: {
+                host: 'localhost',
+                port: '5432',
+                user: 'postgres',
+                password: 'password',
+                database: 'new_database',
+              },
+              meta: {
+                tn: 'nc_evolutions',
+                dbAlias: 'db',
+                inflection: {
+                  tn: ['camelize'],
+                  cn: ['camelize'],
                 },
-                "meta": {
-                  "tn": "nc_evolutions",
-                  "dbAlias": "db",
-                  inflection: {
-                    tn: ['camelize'],
-                    cn: ['camelize'],
-                  },
-                  api: {
-                    type: ''
-                  }
+                api: {
+                  type: '',
                 },
-                ui: {
-                  setup: 0,
-                  ssl: {
-					  key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-					  cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-					  ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
-				},
-				sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred') // Preferred
-                }
               },
-            ],
-            apiClient: {data: []}
-          });
+              ui: {
+                setup: 0,
+                ssl: {
+                  key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+                  cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+                  ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+                },
+                sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
+              },
+            },
+          ],
+          apiClient: { data: [] },
+        });
       }
-
     },
     mtdDialogGetEnvNameCancel() {
-      console.log("mtdDialogGetTableNameCancel cancelled");
+      console.log('mtdDialogGetTableNameCancel cancelled');
       this.dialogGetEnvName.dialogShow = false;
     },
 
@@ -1577,48 +1737,50 @@ export default {
     addNewDB(envKey, panelIndex) {
       let len = this.project.envs[envKey].db.length;
       let lastDbName = `${this.project.title}_${envKey}_${len}`;
-      const dbType = this.client[len] = this.client[len] || this.client[len - 1];
+      const dbType = (this.client[len] = this.client[len] || this.client[len - 1]);
       const newlyCreatedIndex = this.project.envs[envKey].db.length;
-      const dbAlias = this.project.envs[envKey].db.length <= 0 ? 'db' : `db${this.project.envs[envKey].db.length + 1}`;
+      const dbAlias =
+        this.project.envs[envKey].db.length <= 0
+          ? 'db'
+          : `db${this.project.envs[envKey].db.length + 1}`;
       this.project.envs[envKey].db.push({
-        "client": this.databaseNames[dbType],
-        "connection": {
+        client: this.databaseNames[dbType],
+        connection: {
           ...this.sampleConnectionData[dbType],
           database: `${this.project.title}_${envKey}_${newlyCreatedIndex + 1}`,
         },
-        "meta": {
-          "tn": "nc_evolutions",
-          "dbAlias": dbAlias,
+        meta: {
+          tn: 'nc_evolutions',
+          dbAlias: dbAlias,
           inflection: {
             tn: ['camelize'],
             cn: ['camelize'],
           },
           api: {
-            type: "",
-          }
+            type: '',
+          },
         },
         ui: {
           setup: 0,
           sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
           ssl: {
-			key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-			cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-			ca: this.$t('project.ext_db.credentials.advanced.ssl.option3') // Server CA
+            key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
+            cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+            ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
           },
-        }
-      })
+        },
+      });
       // set active tab as newly created
       this.databases[panelIndex] = newlyCreatedIndex;
     },
 
-
     testConnectionMethodSubmit() {
       this.dialog.show = false;
     },
     selectDir(ev) {
       // console.log(ev)
       const file = dialog.showOpenDialog({
-        properties: ["openDirectory"]
+        properties: ['openDirectory'],
       });
       if (file && file[0]) {
         this.baseFolder = file[0];
@@ -1639,13 +1801,13 @@ export default {
     getDbStatusColor(db) {
       switch (db.ui.setup) {
         case -1:
-          return "red"
+          return 'red';
           break;
         case 0:
-          return "orange"
+          return 'orange';
           break;
         case 1:
-          return "green"
+          return 'green';
           break;
         default:
           break;
@@ -1655,13 +1817,13 @@ export default {
     getDbStatusTooltip(db) {
       switch (db.ui.setup) {
         case -1:
-          return "DB Connection NOT successful"
+          return 'DB Connection NOT successful';
           break;
         case 0:
-          return "MySql Database Detected - Test your connection"
+          return 'MySql Database Detected - Test your connection';
           break;
         case 1:
-          return "DB Connection successful"
+          return 'DB Connection successful';
           break;
         default:
           break;
@@ -1669,31 +1831,39 @@ export default {
     },
     async newTestConnection(db, env, panelIndex) {
       console.log(this.project.envs[env][0]);
-      if (db.connection.host === 'localhost'
-        && !this.edit
-        && env === 'dev'
-        && this.project.envs[env].db.length === 1
-        && this.project.envs[env].db[0].connection.user === 'postgres'
-        && this.project.envs[env].db[0].connection.database === `${this.project.title}_${env}_${this.project.envs[env].length}`) {
-
+      if (
+        db.connection.host === 'localhost' &&
+        !this.edit &&
+        env === 'dev' &&
+        this.project.envs[env].db.length === 1 &&
+        this.project.envs[env].db[0].connection.user === 'postgres' &&
+        this.project.envs[env].db[0].connection.database ===
+          `${this.project.title}_${env}_${this.project.envs[env].length}`
+      ) {
         this.handleSSL(db);
         if (db.client === 'sqlite3') {
           db.ui.setup = 1;
         } else {
           const c1 = {
-            connection: {...db.connection, ...(db.client !== 'pg' ? {database: this.testDatabaseNames[db.client]} : {})},
-            client: db.client
+            connection: {
+              ...db.connection,
+              ...(db.client !== 'pg' ? { database: this.testDatabaseNames[db.client] } : {}),
+            },
+            client: db.client,
           };
 
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            query: {
-              skipProjectHasDb: 1
-            }
-          }, 'testConnection', c1]);
-          console.log("test connection result", result);
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            {
+              query: {
+                skipProjectHasDb: 1,
+              },
+            },
+            'testConnection',
+            c1,
+          ]);
+          console.log('test connection result', result);
 
           if (result.code === 0) {
-
             db.ui.setup = 1;
             let passed = true;
             /**
@@ -1704,14 +1874,12 @@ export default {
 
             for (let e in this.project.envs) {
               if (e === env) {
-
               } else {
-
                 console.log(this.project.envs[e]);
 
                 const c2 = {
-                  connection: {...this.project.envs[e].db[0].connection, database: undefined},
-                  client: this.project.envs[e].db[0].client
+                  connection: { ...this.project.envs[e].db[0].connection, database: undefined },
+                  client: this.project.envs[e].db[0].client,
                 };
 
                 this.handleSSL(c2);
@@ -1732,12 +1900,10 @@ export default {
               this.panel = null;
             } else {
               // Connection was successful
-              this.dialog.heading = this.$t('project.ext_db.dialog.success')
+              this.dialog.heading = this.$t('project.ext_db.dialog.success');
               this.dialog.type = 'success';
               this.dialog.show = true;
             }
-
-
           } else {
             db.ui.setup = -1;
             // Connection Failure:
@@ -1748,7 +1914,6 @@ export default {
         }
 
         return true;
-
       } else {
         return false;
       }
@@ -1775,7 +1940,6 @@ export default {
         db.connection.ssl = undefined;
       }
 
-
       if (db.connection.ssl) {
         // db.connection.ssl.caFilePath = db.connection.ssl.ca;
         // db.connection.ssl.keyFilePath = db.connection.ssl.key;
@@ -1787,14 +1951,11 @@ export default {
         // }
       }
     },
-    getDatabaseForTestConnection(dbType) {
-
-    },
+    getDatabaseForTestConnection(dbType) {},
     async testConnection(db, env, panelIndex) {
-
-      this.$store.commit('notification/MutToggleProgressBar', true)
+      this.$store.commit('notification/MutToggleProgressBar', true);
       try {
-        if (!await this.newTestConnection(db, env, panelIndex)) {
+        if (!(await this.newTestConnection(db, env, panelIndex))) {
           // this.activeDbNode.testConnectionStatus = false;
           //
 
@@ -1806,21 +1967,25 @@ export default {
           } else {
             const c1 = {
               connection: {
-                ...db.connection, ...(db.client !== 'pg' ? {database: this.testDatabaseNames[db.client]} : {})
+                ...db.connection,
+                ...(db.client !== 'pg' ? { database: this.testDatabaseNames[db.client] } : {}),
               },
-              client: db.client
+              client: db.client,
             };
 
             // const result = await this.sqlMgr.testConnection(c1);
-            const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-              query: {
-                skipProjectHasDb: 1
-              }
-            }, 'testConnection', c1]);
+            const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+              {
+                query: {
+                  skipProjectHasDb: 1,
+                },
+              },
+              'testConnection',
+              c1,
+            ]);
 
-            console.log("test connection result", result);
-            if (result.code === 0
-            ) {
+            console.log('test connection result', result);
+            if (result.code === 0) {
               db.ui.setup = 1;
               // this.dialog.heading = "Connection was successful"
               // this.dialog.type = 'success';
@@ -1837,43 +2002,35 @@ export default {
             console.log('testconnection params : after', db);
           }
         }
-      } catch
-        (e) {
+      } catch (e) {
         console.log(e);
       } finally {
-        this.$store.commit('notification/MutToggleProgressBar', false)
+        this.$store.commit('notification/MutToggleProgressBar', false);
       }
-
-
-    }
-    ,
+    },
     getEnvironmentStatusAggregated(dbs) {
-      return dbs.every(db => db.ui.setup === 1)
+      return dbs.every(db => db.ui.setup === 1);
     },
 
     getEnvironmentStatusAggregatedNew(dbs) {
-      return dbs.db.every(db => db.ui.setup === 1)
-    }
-    ,
+      return dbs.db.every(db => db.ui.setup === 1);
+    },
     openFirstPanel() {
       if (!this.edit) this.panel = 0;
     },
     onDatabaseTypeChanged(client, db1, index, env) {
-
-
       for (let env in this.project.envs) {
         if (this.project.envs[env].db.length > index) {
           const db = this.project.envs[env].db[index];
-          Vue.set(db, 'client', this.databaseNames[client])
+          Vue.set(db, 'client', this.databaseNames[client]);
           if (client !== 'Sqlite') {
-            const {ssl, ...connectionDet} = this.sampleConnectionData[client];
-
+            const { ssl, ...connectionDet } = this.sampleConnectionData[client];
 
             Vue.set(db, 'connection', {
               ...connectionDet,
               database: `${this.project.title}_${env}_${index + 1}`,
-              ssl: {...ssl}
-            })
+              ssl: { ...ssl },
+            });
 
             for (let env in this.project.envs) {
               if (this.project.envs[env].length > index) {
@@ -1885,25 +2042,30 @@ export default {
             Vue.set(db, 'connection', {
               client: 'sqlite3',
               // connection: {filename: path.join(this.project.folder, `${this.project.title}_${env}_${index + 1}`)},
-              connection: {filename: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join('/')},
-              database: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join('/'),
+              connection: {
+                filename: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join(
+                  '/'
+                ),
+              },
+              database: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join(
+                '/'
+              ),
               // database: path.join(this.project.folder, `${this.project.title}_${env}_${index + 1}`),
-              useNullAsDefault: true
-            })
+              useNullAsDefault: true,
+            });
             // Vue.set(db.connection, 'connection', {filename: `${this.project.folder}/${this.project.title}_${env}_${index + 1}`})
             // Vue.set(db.connection, 'database', `${this.project.folder}/${this.project.title}_${env}_${index + 1}`)
           }
-
         }
       }
-    }, selectDatabaseClient(database, index = 0) {
+    },
+    selectDatabaseClient(database, index = 0) {
       if (this.client) this.client[index] = database;
     },
     setDBStatus(db, status) {
       db.ui.setup = status;
     },
     removeDBFromEnv(db, env, panelIndex, dbIndex) {
-
       console.log(db, env, panelIndex, dbIndex);
 
       for (let env in this.project.envs) {
@@ -1911,20 +2073,17 @@ export default {
           this.project.envs[env].db.splice(dbIndex, 1);
         }
       }
-
     },
     removeEnv(envKey) {
       delete this.project.envs[envKey];
-      Vue.set(this.project, 'envs', {...this.project.envs})
-    }
-  },
-  fetch({store, params}) {
-  },
-  beforeCreated() {
+      Vue.set(this.project, 'envs', { ...this.project.envs });
+    },
   },
+  fetch({ store, params }) {},
+  beforeCreated() {},
   async created() {
-
-    this.compErrorMessage = this.compErrorMessages[Math.floor(Math.random() * this.compErrorMessages.length)];
+    this.compErrorMessage =
+      this.compErrorMessages[Math.floor(Math.random() * this.compErrorMessages.length)];
 
     if (this.edit) {
       // this.edit = true;
@@ -1936,7 +2095,7 @@ export default {
         this.constructProjectJsonFromProject(data);
         this.$set(this.project, 'folder', data.folder);
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
     } else {
       this.project = JSON.parse(JSON.stringify(this.defaultProject));
@@ -1949,7 +2108,7 @@ export default {
        *
        *
        */
-      let dbsAvailable = [];//await PortScanner.getOpenDbPortsAsList();
+      let dbsAvailable = []; //await PortScanner.getOpenDbPortsAsList();
       // // setting MySQL as default value if no databases are available
       // if (!dbsAvailable || !dbsAvailable.length) {
       dbsAvailable = ['MySQL'];
@@ -1961,20 +2120,19 @@ export default {
       // on first available database
       for (let env in this.project.envs) {
         for (let db of this.project.envs[env].db) {
-
           db.client = this.databaseNames[dbsAvailable[0]];
 
           if (db.client === 'sqlite3') {
             db.connection = {
-              ...this.sampleConnectionData[dbsAvailable[0]]
-            }
+              ...this.sampleConnectionData[dbsAvailable[0]],
+            };
 
             db.ui.setup = 0;
           } else {
             db.connection = {
               ...this.sampleConnectionData[dbsAvailable[0]],
-              ssl: {...this.sampleConnectionData[dbsAvailable[0]].ssl}
-            }
+              ssl: { ...this.sampleConnectionData[dbsAvailable[0]].ssl },
+            };
             // db.ui.setup = await PortScanner.isAlive(db.connection.host, parseInt(db.connection.port)) ? 0 : -1;
           }
         }
@@ -1986,58 +2144,63 @@ export default {
       //     console.log('testing port', env, db.connection.database, db.ui.setup);
       //   }
       // }
-
     }
-
-
-  },
-  beforeMount() {
   },
+  beforeMount() {},
   mounted() {
-    this.$set(this.project, 'title', uniqueNamesGenerator({
-      dictionaries: [[starWars], [adjectives, animals]][Math.floor(Math.random() * 2)]
-    }).toLowerCase().replace(/[ -]/g, '_'));
+    this.$set(
+      this.project,
+      'title',
+      uniqueNamesGenerator({
+        dictionaries: [[starWars], [adjectives, animals]][Math.floor(Math.random() * 2)],
+      })
+        .toLowerCase()
+        .replace(/[ -]/g, '_')
+    );
 
     this.$nextTick(() => {
       const input = this.$refs.name.$el.querySelector('input');
-      input.setSelectionRange(0, this.project.title.length)
+      input.setSelectionRange(0, this.project.title.length);
       input.focus();
-    })
+    });
   },
-  beforeDestroy() {
-  },
-  destroy() {
-  },
-  validate({params}) {
-    return true
+  beforeDestroy() {},
+  destroy() {},
+  validate({ params }) {
+    return true;
   },
   head() {
     return {
       title: this.$t('project.ext_db.head.title'),
-    }
+    };
   },
   props: {
     edit: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   watch: {
     'project.title': function (newValue, oldValue) {
       if (!newValue) return;
       if (!this.edit) {
         // Vue.set(this.project, 'folder', slash(path.join(this.baseFolder, newValue)))
-        Vue.set(this.project, 'folder', [this.baseFolder, newValue].join('/'))
+        Vue.set(this.project, 'folder', [this.baseFolder, newValue].join('/'));
         // }//this.project.folder = `${this.baseFolder}/${newValue}`;
 
         for (let env in this.project.envs) {
           for (let [index, db] of this.project.envs[env].db.entries()) {
             //db.connection.database = `${this.project.title}_${env}_${index}`
             if (db.client !== 'sqlite3') {
-              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`)
+              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`);
             } else {
-              Vue.set(db.connection, 'connection', {filename: path.join(this.project.folder, `${this.project.title}_${env}_${index + 1}`)})
-              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`)
+              Vue.set(db.connection, 'connection', {
+                filename: path.join(
+                  this.project.folder,
+                  `${this.project.title}_${env}_${index + 1}`
+                ),
+              });
+              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`);
             }
           }
         }
@@ -2048,14 +2211,14 @@ export default {
       handler(envs) {
         if (typeof envs === 'object' && envs)
           Object.entries(envs).forEach(([key, env]) => {
-            let res = 1, msg = {};
+            let res = 1,
+              msg = {};
             for (let db of env.db) {
               res = db.ui.setup < res ? db.ui.setup : res;
             }
             if (this.edit) {
               Vue.set(this.project.ui, key, '');
             } else {
-
               switch (res) {
                 case -1:
                   msg.color = 'red';
@@ -2063,29 +2226,28 @@ export default {
                   break;
                 case 0:
                   msg.color = 'warning';
-                  msg.msg = ' ( Click to validate database credentials )'
+                  msg.msg = ' ( Click to validate database credentials )';
                   break;
                 case 1:
                   msg.color = 'green';
-                  msg.msg = ' ( Environment Validated )'
+                  msg.msg = ' ( Environment Validated )';
                   break;
               }
               Vue.set(this.project.ui, key, msg);
-
             }
-          })
-      }
-    }
+          });
+      },
+    },
   },
-  directives: {}
-}
+  directives: {},
+};
 </script>
 
 <style scoped>
 .floating-button {
   position: fixed;
   right: 7%;
-  bottom: 100px
+  bottom: 100px;
 }
 
 /deep/ .v-expansion-panel-header {
@@ -2108,7 +2270,6 @@ export default {
   z-index: 999;
   cursor: pointer !important;
 }
-
 </style>
 <!--
 /**
@@ -2134,4 +2295,4 @@ export default {
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
--->
\ No newline at end of file
+-->

From 47eaadbb29e75cb13d1b86b307c67dae6fd0d384 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 9 Jun 2021 21:24:19 +0800
Subject: [PATCH 3/3] chore: revise i18n keys

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../nc-gui/components/createOrEditProject.vue | 110 +++++++-------
 packages/nc-gui/pages/projects/index.vue      |  58 ++++----
 packages/nc-gui/static/lang/en.json           | 134 +++++++++---------
 packages/nc-gui/static/lang/ja.json           | 134 +++++++++---------
 packages/nc-gui/static/lang/zh.json           | 134 +++++++++---------
 5 files changed, 285 insertions(+), 285 deletions(-)

diff --git a/packages/nc-gui/components/createOrEditProject.vue b/packages/nc-gui/components/createOrEditProject.vue
index 0453248323..ef26be9ae3 100644
--- a/packages/nc-gui/components/createOrEditProject.vue
+++ b/packages/nc-gui/components/createOrEditProject.vue
@@ -36,20 +36,20 @@
           >
             <v-toolbar-title class="title">
               <!-- Edit Project -->
-              <span v-if="edit">{{ $t('project.ext_db.title.edit') }}</span>
+              <span v-if="edit">{{ $t('projects.ext_db.title.edit') }}</span>
               <!-- Create Project -->
-              <span v-else>{{ $t('project.ext_db.title.create') }}</span>
+              <span v-else>{{ $t('projects.ext_db.title.create') }}</span>
             </v-toolbar-title>
             <v-spacer></v-spacer>
             <!-- Cancel and Return -->
             <x-btn
-              v-bind:tooltip="$t('project.ext_db.button.cancel_tooltip')"
+              v-bind:tooltip="$t('projects.ext_db.button.cancel_tooltip')"
               to="/"
               v-ge="['project', 'cancel']"
               class="elevation-20"
             >
               <!-- Cancel -->
-              {{ $t('project.ext_db.button.cancel') }}
+              {{ $t('projects.ext_db.button.cancel') }}
             </x-btn>
             <x-btn
               :disabled="!valid || !envStatusValid"
@@ -58,9 +58,9 @@
               @click="createOrUpdateProject()"
             >
               <!-- Update & Restart -->
-              <span v-if="edit">{{ $t('project.ext_db.button.update_and_restart') }}</span>
+              <span v-if="edit">{{ $t('projects.ext_db.button.update_and_restart') }}</span>
               <!-- Save Project -->
-              <span v-else>{{ $t('project.ext_db.button.save_project') }}</span>
+              <span v-else>{{ $t('projects.ext_db.button.save_project') }}</span>
             </x-btn>
             <v-progress-linear
               v-if="projectReloading"
@@ -161,7 +161,7 @@
                       :rules="form.titleRequiredRule"
                       :height="20"
                       v-model="project.title"
-                      v-bind:label="$t('project.ext_db.project_name')"
+                      v-bind:label="$t('projects.ext_db.project_name')"
                       autofocus
                     >
                       <!--                      <v-icon color="info" class="blink_me mt-n1" slot="prepend">-->
@@ -170,7 +170,7 @@
                     </v-text-field>
 
                     <!-- Access Project via -->
-                    <label class="caption"> {{ $t('project.ext_db.project_name') }}</label>
+                    <label class="caption"> {{ $t('projects.ext_db.project_name') }}</label>
                     <v-radio-group
                       row
                       hide-details
@@ -226,7 +226,7 @@
                       'text-center mb-2 mt-3 grey--text': edit,
                     }"
                   >
-                    {{ $t('project.ext_db.credentials') }}
+                    {{ $t('projects.ext_db.credentials') }}
                   </p>
                   <v-expansion-panels
                     v-model="panel"
@@ -378,7 +378,7 @@
                                             class="body-2 db-select"
                                             :items="Object.keys(databaseNames)"
                                             v-model="client[dbIndex]"
-                                            v-bind:label="$t('project.ext_db.credentials.label_1')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_1')"
                                             @change="
                                               onDatabaseTypeChanged(
                                                 client[dbIndex],
@@ -429,7 +429,7 @@
                                           <v-text-field
                                             :rules="form.folderRequiredRule"
                                             v-model="db.connection.connection.filename"
-                                            v-bind:label="$t('project.ext_db.credentials.label_2')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_2')"
                                             v-ge="['project', 'env-db-file']"
                                             @click="selectSqliteFile(db)"
                                           >
@@ -445,7 +445,7 @@
                                             class="body-2"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.host"
-                                            v-bind:label="$t('project.ext_db.credentials.label_3')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_3')"
                                           ></v-text-field>
                                         </v-col>
                                         <!-- Port Number -->
@@ -454,7 +454,7 @@
                                             class="body-2"
                                             v-ge="['project', 'env-db-port']"
                                             v-model="db.connection.port"
-                                            v-bind:label="$t('project.ext_db.credentials.label_4')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_4')"
                                             :rules="form.portValidationRule"
                                           ></v-text-field>
                                         </v-col>
@@ -465,7 +465,7 @@
                                             v-ge="['project', 'env-db-user']"
                                             :rules="form.requiredRule"
                                             v-model="db.connection.user"
-                                            v-bind:label="$t('project.ext_db.credentials.label_5')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_5')"
                                           ></v-text-field>
                                         </v-col>
                                         <!-- Password -->
@@ -480,7 +480,7 @@
                                             :ref="`password${envKey}`"
                                             v-ge="['project', 'env-db-password']"
                                             v-model="db.connection.password"
-                                            v-bind:label="$t('project.ext_db.credentials.label_6')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_6')"
                                           >
                                             <template v-slot:append>
                                               <v-icon
@@ -508,7 +508,7 @@
                                             :rules="form.requiredRule"
                                             v-model="db.connection.database"
                                             v-ge="['project', 'env-db-name']"
-                                            v-bind:label="$t('project.ext_db.credentials.label_7')"
+                                            v-bind:label="$t('projects.ext_db.credentials.label_7')"
                                           ></v-text-field>
                                         </v-col>
                                         <v-col class="" v-if="db.client !== 'sqlite3'">
@@ -517,7 +517,7 @@
                                               <v-expansion-panel-header>
                                                 <!-- SSL & Advanced parameters -->
                                                 <span class="grey--text caption">{{
-                                                  $t('project.ext_db.credentials.advanced')
+                                                  $t('projects.ext_db.credentials.advanced')
                                                 }}</span>
                                               </v-expansion-panel-header>
                                               <v-expansion-panel-content>
@@ -551,7 +551,7 @@
                                                       <x-btn
                                                         v-bind:tooltip="
                                                           $t(
-                                                            'project.ext_db.credentials.advanced.ssl.option2.toolip'
+                                                            'projects.ext_db.credentials.advanced.ssl.option2.toolip'
                                                           )
                                                         "
                                                         small
@@ -581,7 +581,7 @@
                                                       <x-btn
                                                         v-bind:tooltip="
                                                           $t(
-                                                            'project.ext_db.credentials.advanced.ssl.option1.toolip'
+                                                            'projects.ext_db.credentials.advanced.ssl.option1.toolip'
                                                           )
                                                         "
                                                         small
@@ -611,7 +611,7 @@
                                                       <x-btn
                                                         v-bind:tooltip="
                                                           $t(
-                                                            'project.ext_db.credentials.advanced.ssl.option3.toolip'
+                                                            'projects.ext_db.credentials.advanced.ssl.option3.toolip'
                                                           )
                                                         "
                                                         small
@@ -637,7 +637,7 @@
                                                           class="caption"
                                                           v-bind:label="
                                                             $t(
-                                                              'project.ext_db.credentials.advanced.inflection.table_name'
+                                                              'projects.ext_db.credentials.advanced.inflection.table_name'
                                                             )
                                                           "
                                                           multiple
@@ -655,7 +655,7 @@
                                                           class="caption"
                                                           v-bind:label="
                                                             $t(
-                                                              'project.ext_db.credentials.advanced.inflection.column_name'
+                                                              'projects.ext_db.credentials.advanced.inflection.column_name'
                                                             )
                                                           "
                                                           multiple
@@ -679,7 +679,7 @@
                                                           btn.class="text-capitalize"
                                                           v-bind:tooltip="
                                                             $t(
-                                                              'project.ext_db.credentials.advanced.button.edit_conn_json'
+                                                              'projects.ext_db.credentials.advanced.button.edit_conn_json'
                                                             )
                                                           "
                                                           outlined
@@ -697,7 +697,7 @@
                                                           <!-- Edit connection JSON -->
                                                           {{
                                                             $t(
-                                                              'project.ext_db.credentials.advanced.button.edit_conn_json'
+                                                              'projects.ext_db.credentials.advanced.button.edit_conn_json'
                                                             )
                                                           }}
                                                         </x-btn>
@@ -715,7 +715,7 @@
                                         <!-- Test Database Connection -->
                                         <x-btn
                                           v-bind:tooltip="
-                                            $t('project.ext_db.credentials.button.test_db_conn')
+                                            $t('projects.ext_db.credentials.button.test_db_conn')
                                           "
                                           outlined
                                           small
@@ -723,13 +723,13 @@
                                           @click="testConnection(db, envKey, panelIndex)"
                                         >
                                           <!-- Test Database Connection -->
-                                          {{ $t('project.ext_db.credentials.button.test_db_conn') }}
+                                          {{ $t('projects.ext_db.credentials.button.test_db_conn') }}
                                         </x-btn>
                                         <!-- Remove Database from environment -->
                                         <x-btn
                                           v-bind:tooltip="
                                             $t(
-                                              'project.ext_db.credentials.button.remove_db_from_env'
+                                              'projects.ext_db.credentials.button.remove_db_from_env'
                                             )
                                           "
                                           text
@@ -1120,9 +1120,9 @@ export default {
                 ui: {
                   setup: -1,
                   ssl: {
-                    key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-                    cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-                    ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+                    key: this.$t('projects.ext_db.credentials.advanced.ssl.option1'), // Client Key
+                    cert: this.$t('projects.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+                    ca: this.$t('projects.ext_db.credentials.advanced.ssl.option3'), // Server CA
                   },
                   sslUse: 'Preferred',
                 },
@@ -1297,7 +1297,7 @@ export default {
         type: 'primary',
       },
       // TODO: apply i18n for sslUsage
-      // See project.ext_db.credentials.advanced.ssl.usage.option1 - 5 in en.json
+      // See projects.ext_db.credentials.advanced.ssl.usage.option1 - 5 in en.json
       sslUsage: {
         No: 'No',
         Preferred: 'Preferred',
@@ -1305,11 +1305,11 @@ export default {
         'Required-CA': 'Required-CA',
         'Required-IDENTITY': 'Required-IDENTITY',
       },
-      sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
+      sslUse: this.$t('projects.ext_db.credentials.advanced.ssl.preferred'), // Preferred
       ssl: {
-        key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-        cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-        ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+        key: this.$t('projects.ext_db.credentials.advanced.ssl.option1'), // Client Key
+        cert: this.$t('projects.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+        ca: this.$t('projects.ext_db.credentials.advanced.ssl.option3'), // Server CA
       },
       databaseNames: {
         MySQL: 'mysql2',
@@ -1349,10 +1349,10 @@ export default {
       },
 
       compErrorMessages: [
-        this.$t('project.ext_db.error.message_1'), // Invalid character in folder path
-        this.$t('project.ext_db.error.message_2'), // Invalid database credentials
-        this.$t('project.ext_db.error.message_3'), // Unable to connect to database, please check your database is up
-        this.$t('project.ext_db.error.message_4'), // User does not exist or have sufficient permission to create schema
+        this.$t('projects.ext_db.error.message_1'), // Invalid character in folder path
+        this.$t('projects.ext_db.error.message_2'), // Invalid database credentials
+        this.$t('projects.ext_db.error.message_3'), // Unable to connect to database, please check your database is up
+        this.$t('projects.ext_db.error.message_4'), // User does not exist or have sufficient permission to create schema
       ],
       compErrorMessage: '',
     };
@@ -1583,11 +1583,11 @@ export default {
           Vue.set(db, 'ui', {
             setup: 0,
             ssl: {
-              key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-              cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-              ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+              key: this.$t('projects.ext_db.credentials.advanced.ssl.option1'), // Client Key
+              cert: this.$t('projects.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+              ca: this.$t('projects.ext_db.credentials.advanced.ssl.option3'), // Server CA
             },
-            sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
+            sslUse: this.$t('projects.ext_db.credentials.advanced.ssl.preferred'), // Preferred
           });
         }
       }
@@ -1714,11 +1714,11 @@ export default {
               ui: {
                 setup: 0,
                 ssl: {
-                  key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-                  cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-                  ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+                  key: this.$t('projects.ext_db.credentials.advanced.ssl.option1'), // Client Key
+                  cert: this.$t('projects.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+                  ca: this.$t('projects.ext_db.credentials.advanced.ssl.option3'), // Server CA
                 },
-                sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
+                sslUse: this.$t('projects.ext_db.credentials.advanced.ssl.preferred'), // Preferred
               },
             },
           ],
@@ -1762,11 +1762,11 @@ export default {
         },
         ui: {
           setup: 0,
-          sslUse: this.$t('project.ext_db.credentials.advanced.ssl.preferred'), // Preferred
+          sslUse: this.$t('projects.ext_db.credentials.advanced.ssl.preferred'), // Preferred
           ssl: {
-            key: this.$t('project.ext_db.credentials.advanced.ssl.option1'), // Client Key
-            cert: this.$t('project.ext_db.credentials.advanced.ssl.option2'), // Client Cert
-            ca: this.$t('project.ext_db.credentials.advanced.ssl.option3'), // Server CA
+            key: this.$t('projects.ext_db.credentials.advanced.ssl.option1'), // Client Key
+            cert: this.$t('projects.ext_db.credentials.advanced.ssl.option2'), // Client Cert
+            ca: this.$t('projects.ext_db.credentials.advanced.ssl.option3'), // Server CA
           },
         },
       });
@@ -1900,14 +1900,14 @@ export default {
               this.panel = null;
             } else {
               // Connection was successful
-              this.dialog.heading = this.$t('project.ext_db.dialog.success');
+              this.dialog.heading = this.$t('projects.ext_db.dialog.success');
               this.dialog.type = 'success';
               this.dialog.show = true;
             }
           } else {
             db.ui.setup = -1;
             // Connection Failure:
-            this.dialog.heading = this.$t('project.ext_db.dialog.failure') + result.message;
+            this.dialog.heading = this.$t('projects.ext_db.dialog.failure') + result.message;
             this.dialog.type = 'error';
             this.dialog.show = true;
           }
@@ -1994,7 +1994,7 @@ export default {
             } else {
               db.ui.setup = -1;
               // this.activeDbNode.testConnectionStatus = false;
-              this.dialog.heading = this.$t('project.ext_db.dialog.failure') + result.message;
+              this.dialog.heading = this.$t('projects.ext_db.dialog.failure') + result.message;
               this.dialog.type = 'error';
               this.dialog.show = true;
             }
@@ -2171,7 +2171,7 @@ export default {
   },
   head() {
     return {
-      title: this.$t('project.ext_db.head.title'),
+      title: this.$t('projects.ext_db.head.title'),
     };
   },
   props: {
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index a6018317a8..cfd46052da 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -23,7 +23,7 @@
 
                 <!--                <v-icon large>mdi-folder-multiple-outline</v-icon>&nbsp;-->
                 <!-- My Projects -->
-                <b>{{ $t('home.my_projects') }}</b>
+                <b>{{ $t('projects.my_projects') }}</b>
 
                 <!--                <x-btn-->
                 <!--                  large-->
@@ -34,7 +34,7 @@
                   small
                   color="primary grey"
                   @click="projectsLoad"
-                  v-bind:tooltip="$t('home.reload_projects_tooltip')"
+                  v-bind:tooltip="$t('projects.reload_projects_tooltip')"
                 >
                   mdi-refresh </x-icon
                 >&nbsp;
@@ -48,7 +48,7 @@
                 ref="search1"
                 v-model="search"
                 class="caption pt-0 mt-0"
-                v-bind:placeholder="$t('home.search_project')"
+                v-bind:placeholder="$t('projects.search_project')"
                 single-line
                 hide-details
                 v-ge="['home', 'project-search']"
@@ -61,7 +61,7 @@
               <v-spacer></v-spacer>
               <!-- Import NocoDB Project by uploading metadata zip file -->
               <x-btn
-                vbind:tooltip="$t('home.import_button.text')"
+                vbind:tooltip="$t('projects.import_button.text')"
                 outlined
                 color="grey"
                 @click="
@@ -93,7 +93,7 @@
                               v-ge="['home','project-new']"
                               @click="onCreateProject()">
                               <v-icon class="mr-1" small>mdi-plus</v-icon>
-                              {{ $t('home.create_new_project_button.text') }}
+                              {{ $t('projects.create_new_project_button.text') }}
                             </x-btn>-->
 
               <template v-if="connectToExternalDB">
@@ -109,7 +109,7 @@
                         v-on="on"
                       >
                         <!-- New Project -->
-                        {{ $t('home.create_new_project_button.text') }}
+                        {{ $t('projects.create_new_project_button.text') }}
                         <v-icon class="mr-1" small>mdi-menu-down</v-icon>
                       </x-btn>
                     </div>
@@ -125,7 +125,7 @@
                       <v-list-item-title>
                         <!-- Create -->
                         <span class="caption font-weight-regular">{{
-                          $t('home.create_new_project_button.subtext_1')
+                          $t('projects.create_new_project_button.subtext_1')
                         }}</span>
                       </v-list-item-title>
                       <v-spacer></v-spacer>
@@ -137,7 +137,7 @@
                         </template>
                         <!-- Create a new project -->
                         <span class="caption">{{
-                          $t('home.create_new_project_button.subtext_1_tooltip')
+                          $t('projects.create_new_project_button.subtext_1_tooltip')
                         }}</span>
                       </v-tooltip>
                     </v-list-item>
@@ -155,7 +155,7 @@
                         <span
                           class="caption font-weight-regular"
                           v-html="
-                            $t('home.create_new_project_button.subtext_2')
+                            $t('projects.create_new_project_button.subtext_2')
                           "
                         ></span>
                       </v-list-item-title>
@@ -168,7 +168,7 @@
                         </template>
                         <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
                         <span class="caption">{{
-                          $t('home.create_new_project_button.subtext_2_tooltip')
+                          $t('projects.create_new_project_button.subtext_2_tooltip')
                         }}</span>
                       </v-tooltip>
                     </v-list-item>
@@ -184,7 +184,7 @@
                 v-ge="['home', 'project-new']"
               >
                 <!-- New Project -->
-                {{ $t('home.create_new_project_button.text') }}
+                {{ $t('projects.create_new_project_button.text') }}
               </x-btn>
             </v-row>
 
@@ -225,8 +225,8 @@
                         small
                         :tooltip="
                           props.item.projectType === 'graphql'
-                            ? $t('home.project_api_type_tooltip_graphql')
-                            : $t('home.project_api_type_tooltip_rest')
+                            ? $t('projects.project_api_type_tooltip_graphql')
+                            : $t('projects.project_api_type_tooltip_rest')
                         "
                         icon.class="mr-2"
                         :color="
@@ -259,7 +259,7 @@
                         <!-- Stop Project -->
                         <x-icon
                           v-bind:tooltip="
-                            $t('home.project_horizontal_option_1')
+                            $t('projects.horizontal_option_1')
                           "
                           class="pointer mr-2"
                           color="orange grey"
@@ -270,7 +270,7 @@
                         <!-- Start Project -->
                         <x-icon
                           v-bind:tooltip="
-                            $t('home.project_horizontal_option_2')
+                            $t('projects.horizontal_option_2')
                           "
                           class="pointer mr-2"
                           color="green grey"
@@ -290,7 +290,7 @@
                         <!-- Restart Project -->
                         <x-icon
                           v-bind:tooltip="
-                            $t('home.project_horizontal_option_3')
+                            $t('projects.horizontal_option_3')
                           "
                           class="pointer mr-2"
                           color="primary grey"
@@ -301,7 +301,7 @@
                         <!-- Delete Project -->
                         <x-icon
                           v-bind:tooltip="
-                            $t('home.project_horizontal_option_4')
+                            $t('projects.horizontal_option_4')
                           "
                           class="pointer mr-2"
                           color="red grey"
@@ -330,7 +330,7 @@
                               <v-list-item-title>
                                 <!-- Import Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('home.project_verticial_option_1')
+                                  $t('projects.verticial_option_1')
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -344,7 +344,7 @@
                               <v-list-item-title>
                                 <!-- Export Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('home.project_verticial_option_2')
+                                  $t('projects.verticial_option_2')
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -358,7 +358,7 @@
                               <v-list-item-title>
                                 <!-- Clear Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('home.project_verticial_option_3')
+                                  $t('projects.verticial_option_3')
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -374,7 +374,7 @@
                   :value="true"
                   color="error"
                   icon="warning"
-                  >{{ $t('home.search.no_result', { search }) }}
+                  >{{ $t('projects.search.no_result', { search }) }}
                 </v-alert>
                 <!--                <template v-slot:no-data>-->
                 <!--                  <v-alert :value="true" outlined color="success" icon="mdi-information-outline">Create a new project-->
@@ -396,7 +396,7 @@
                   icon="mdi-information-outline"
                 >
                   <!-- Get started by creating a new project -->
-                  {{ $t('home.project_empty_message') }}
+                  {{ $t('projects.project_empty_message') }}
                 </v-alert>
               </v-col>
             </v-row>
@@ -423,7 +423,7 @@
                 "
               >
                 <!-- Create By Connecting <br>To An External Database -->
-                <span v-html="$t('home.create_new_project_button.subtext_2')">
+                <span v-html="$t('projects.create_new_project_button.subtext_2')">
                 </span>
               </p>
               <v-card-actions class="justify-center pb-10">
@@ -438,7 +438,7 @@
                     mdi-lightbulb-on </v-icon
                   >&nbsp;
                   <!-- New Project -->
-                  {{ $t('home.create_new_project_button.text') }}
+                  {{ $t('projects.create_new_project_button.text') }}
                 </x-btn>
               </v-card-actions>
             </v-card>
@@ -493,10 +493,10 @@
           </v-list-item-icon>
           <v-list-item-title>
             <!-- Star -->
-            {{ $t('home.show_community_message_1_1') }}
+            {{ $t('projects.show_community_message_1_1') }}
             <v-icon small>mdi-star-outline</v-icon>
             <!-- us on Github -->
-            {{ $t('home.show_community_message_1_2') }}
+            {{ $t('projects.show_community_message_1_2') }}
           </v-list-item-title>
         </v-list-item>
         <v-divider></v-divider>
@@ -512,7 +512,7 @@
           </v-list-item-icon>
           <!-- Book a Free DEMO -->
           <v-list-item-title>{{
-            $t('home.show_community_message_2')
+            $t('projects.show_community_message_2')
           }}</v-list-item-title>
         </v-list-item>
         <v-divider></v-divider>
@@ -522,7 +522,7 @@
           </v-list-item-icon>
           <!-- Get your questions answered -->
           <v-list-item-title>{{
-            $t('home.show_community_message_3')
+            $t('projects.show_community_message_3')
           }}</v-list-item-title>
         </v-list-item>
         <v-divider></v-divider>
@@ -532,7 +532,7 @@
           </v-list-item-icon>
           <!-- Follow NocoDB -->
           <v-list-item-title>{{
-            $t('home.show_community_message_4')
+            $t('projects.show_community_message_4')
           }}</v-list-item-title>
         </v-list-item>
       </v-list>
diff --git a/packages/nc-gui/static/lang/en.json b/packages/nc-gui/static/lang/en.json
index 90ebf1811a..4c30f449a3 100644
--- a/packages/nc-gui/static/lang/en.json
+++ b/packages/nc-gui/static/lang/en.json
@@ -1,29 +1,70 @@
 {
-  "home.my_projects": "My Projects",
-  "home.reload_projects_tooltip": "Refresh projects",
-  "home.create_new_project_button.text": "New Project",
-  "home.create_new_project_button.subtext_1": "Create",
-  "home.create_new_project_button.subtext_1_tooltip": "Create a new project",
-  "home.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
-  "home.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
-  "home.search_project": "Search Project",
-  "home.project_verticial_option_1": "Import Metadata",
-  "home.project_verticial_option_2": "Export Metadata",
-  "home.project_verticial_option_3": "Clear Metadata",
-  "home.project_horizontal_option_1": "Stop Project",
-  "home.project_horizontal_option_2": "Start Project",
-  "home.project_horizontal_option_3": "Restart Project",
-  "home.project_horizontal_option_4": "Delete Project",
-  "home.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
-  "home.project_api_type_tooltip_rest": "Accessible via REST APIs",
-  "home.project_empty_message": "Get started by creating a new project",
-  "home.import_button.text": "Import NocoDB Project by uploading metadata zip file",
-  "home.show_community_message_1_1": "Star",
-  "home.show_community_message_1_2": "us on Github",
-  "home.show_community_message_2": "Book a Free DEMO",
-  "home.show_community_message_3": "Get your questions answered",
-  "home.show_community_message_4": "Follow NocoDB",
-  "home.search.no_result": "Your search for {search} found no results",
+  "projects.my_projects": "My Projects",
+  "projects.reload_projects_tooltip": "Refresh projects",
+  "projects.create_new_project_button.text": "New Project",
+  "projects.create_new_project_button.subtext_1": "Create",
+  "projects.create_new_project_button.subtext_1_tooltip": "Create a new project",
+  "projects.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
+  "projects.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
+  "projects.search_project": "Search Project",
+  "projects.verticial_option_1": "Import Metadata",
+  "projects.verticial_option_2": "Export Metadata",
+  "projects.verticial_option_3": "Clear Metadata",
+  "projects.horizontal_option_1": "Stop Project",
+  "projects.horizontal_option_2": "Start Project",
+  "projects.horizontal_option_3": "Restart Project",
+  "projects.horizontal_option_4": "Delete Project",
+  "projects.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
+  "projects.project_api_type_tooltip_rest": "Accessible via REST APIs",
+  "projects.project_empty_message": "Get started by creating a new project",
+  "projects.import_button.text": "Import NocoDB Project by uploading metadata zip file",
+  "projects.show_community_message_1_1": "Star",
+  "projects.show_community_message_1_2": "us on Github",
+  "projects.show_community_message_2": "Book a Free DEMO",
+  "projects.show_community_message_3": "Get your questions answered",
+  "projects.show_community_message_4": "Follow NocoDB",
+  "projects.search.no_result": "Your search for {search} found no results",
+  "projects.ext_db.title.edit": "Edit Project",
+  "projects.ext_db.title.create": "Create Project",
+  "projects.ext_db.project_name": "Enter Project Name",
+  "projects.ext_db.project_type": "Access Project via",
+  "projects.ext_db.button.save_project": "Save Project",
+  "projects.ext_db.button.update_and_restart": "Update & Restart",
+  "projects.ext_db.button.cancel": "Cancel",
+  "projects.ext_db.button.cancel_tooltip": "Cancel and Return",
+  "projects.ext_db.credentials": "Database Credentials",
+  "projects.ext_db.credentials.label_1": "Database Type",
+  "projects.ext_db.credentials.label_2": "SQLite File",
+  "projects.ext_db.credentials.label_3": "Host Address",
+  "projects.ext_db.credentials.label_4": "Port Number",
+  "projects.ext_db.credentials.label_5": "Username",
+  "projects.ext_db.credentials.label_6": "Password",
+  "projects.ext_db.credentials.label_7": "Database : create if not exists",
+  "projects.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+  "projects.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+  "projects.ext_db.credentials.advanced": "SSL & Advanced parameters",
+  "projects.ext_db.credentials.advanced.ssl.option1": "Client Key",
+  "projects.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+  "projects.ext_db.credentials.advanced.ssl.option3": "Server CA",
+  "projects.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+  "projects.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+  "projects.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+  "projects.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+  "projects.ext_db.credentials.advanced.ssl.usage.option1": "No",
+  "projects.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+  "projects.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+  "projects.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+  "projects.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+  "projects.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+  "projects.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+  "projects.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+  "projects.ext_db.error.message_1": "Invalid character in folder path.",
+  "projects.ext_db.error.message_2": "Invalid database credentials.",
+  "projects.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+  "projects.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+  "projects.ext_db.head.title": "Create Project | Noco",
+  "projects.ext_db.dialog.success": "Connection was successful",
+  "projects.ext_db.dialog.failure": "Connection Failure:",
   "signin.title": "SIGN IN",
   "signin.input_1": "Enter your work email",
   "signin.input_2": "Enter your password",
@@ -37,46 +78,5 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco",
-  "project.ext_db.title.edit": "Edit Project",
-  "project.ext_db.title.create": "Create Project",
-  "project.ext_db.project_name": "Enter Project Name",
-  "project.ext_db.project_type": "Access Project via",
-  "project.ext_db.button.save_project": "Save Project",
-  "project.ext_db.button.update_and_restart": "Update & Restart",
-  "project.ext_db.button.cancel": "Cancel",
-  "project.ext_db.button.cancel_tooltip": "Cancel and Return",
-  "project.ext_db.credentials": "Database Credentials",
-  "project.ext_db.credentials.label_1": "Database Type",
-  "project.ext_db.credentials.label_2": "SQLite File",
-  "project.ext_db.credentials.label_3": "Host Address",
-  "project.ext_db.credentials.label_4": "Port Number",
-  "project.ext_db.credentials.label_5": "Username",
-  "project.ext_db.credentials.label_6": "Password",
-  "project.ext_db.credentials.label_7": "Database : create if not exists",
-  "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
-  "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
-  "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
-  "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
-  "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
-  "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
-  "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
-  "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
-  "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
-  "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
-  "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
-  "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
-  "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
-  "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
-  "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
-  "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
-  "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
-  "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
-  "project.ext_db.error.message_1": "Invalid character in folder path.",
-  "project.ext_db.error.message_2": "Invalid database credentials.",
-  "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
-  "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
-  "project.ext_db.head.title": "Create Project | Noco",
-  "project.ext_db.dialog.success": "Connection was successful",
-  "project.ext_db.dialog.failure": "Connection Failure:"
+  "signin.head.meta.content": "Log In To Noco"
 }
diff --git a/packages/nc-gui/static/lang/ja.json b/packages/nc-gui/static/lang/ja.json
index 9ca8e0dedf..6dad981aa9 100644
--- a/packages/nc-gui/static/lang/ja.json
+++ b/packages/nc-gui/static/lang/ja.json
@@ -1,29 +1,70 @@
 {
-  "home.my_projects": "My Projects",
-  "home.reload_projects_tooltip": "Refresh projects",
-  "home.create_new_project_button.text": "新しいプロジェクトを作成する",
-  "home.create_new_project_button.subtext_1": "Create",
-  "home.create_new_project_button.subtext_1_tooltip": "Create a new project",
-  "home.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
-  "home.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
-  "home.search_project": "Search Project",
-  "home.project_verticial_option_1": "Import Metadata",
-  "home.project_verticial_option_2": "Export Metadata",
-  "home.project_verticial_option_3": "Clear Metadata",
-  "home.project_horizontal_option_1": "Stop Project",
-  "home.project_horizontal_option_2": "Start Project",
-  "home.project_horizontal_option_3": "Restart Project",
-  "home.project_horizontal_option_4": "Delete Project",
-  "home.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
-  "home.project_api_type_tooltip_rest": "Accessible via REST APIs",
-  "home.project_empty_message": "Get started by creating a new project",
-  "home.import_button.text": "Import NocoDB Project by uploading metadata zip file",
-  "home.show_community_message_1_1": "Star",
-  "home.show_community_message_1_2": "us on Github",
-  "home.show_community_message_2": "Book a Free DEMO",
-  "home.show_community_message_3": "Get your questions answered",
-  "home.show_community_message_4": "Follow NocoDB",
-  "home.search.no_result": "Your search for {search} found no results",
+  "projects.my_projects": "My Projects",
+  "projects.reload_projects_tooltip": "Refresh projects",
+  "projects.create_new_project_button.text": "新しいプロジェクトを作成する",
+  "projects.create_new_project_button.subtext_1": "Create",
+  "projects.create_new_project_button.subtext_1_tooltip": "Create a new project",
+  "projects.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
+  "projects.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
+  "projects.search_project": "Search Project",
+  "projects.verticial_option_1": "Import Metadata",
+  "projects.verticial_option_2": "Export Metadata",
+  "projects.verticial_option_3": "Clear Metadata",
+  "projects.horizontal_option_1": "Stop Project",
+  "projects.horizontal_option_2": "Start Project",
+  "projects.horizontal_option_3": "Restart Project",
+  "projects.horizontal_option_4": "Delete Project",
+  "projects.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
+  "projects.project_api_type_tooltip_rest": "Accessible via REST APIs",
+  "projects.project_empty_message": "Get started by creating a new project",
+  "projects.import_button.text": "Import NocoDB Project by uploading metadata zip file",
+  "projects.show_community_message_1_1": "Star",
+  "projects.show_community_message_1_2": "us on Github",
+  "projects.show_community_message_2": "Book a Free DEMO",
+  "projects.show_community_message_3": "Get your questions answered",
+  "projects.show_community_message_4": "Follow NocoDB",
+  "projects.search.no_result": "Your search for {search} found no results",
+  "projects.ext_db.title.edit": "Edit Project",
+  "projects.ext_db.title.create": "Create Project",
+  "projects.ext_db.project_name": "Enter Project Name",
+  "projects.ext_db.project_type": "Access Project via",
+  "projects.ext_db.button.save_project": "Save Project",
+  "projects.ext_db.button.update_and_restart": "Update & Restart",
+  "projects.ext_db.button.cancel": "Cancel",
+  "projects.ext_db.button.cancel_tooltip": "Cancel and Return",
+  "projects.ext_db.credentials": "Database Credentials",
+  "projects.ext_db.credentials.label_1": "Database Type",
+  "projects.ext_db.credentials.label_2": "SQLite File",
+  "projects.ext_db.credentials.label_3": "Host Address",
+  "projects.ext_db.credentials.label_4": "Port Number",
+  "projects.ext_db.credentials.label_5": "Username",
+  "projects.ext_db.credentials.label_6": "Password",
+  "projects.ext_db.credentials.label_7": "Database : create if not exists",
+  "projects.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+  "projects.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+  "projects.ext_db.credentials.advanced": "SSL & Advanced parameters",
+  "projects.ext_db.credentials.advanced.ssl.option1": "Client Key",
+  "projects.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+  "projects.ext_db.credentials.advanced.ssl.option3": "Server CA",
+  "projects.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+  "projects.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+  "projects.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+  "projects.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+  "projects.ext_db.credentials.advanced.ssl.usage.option1": "No",
+  "projects.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+  "projects.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+  "projects.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+  "projects.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+  "projects.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+  "projects.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+  "projects.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+  "projects.ext_db.error.message_1": "Invalid character in folder path.",
+  "projects.ext_db.error.message_2": "Invalid database credentials.",
+  "projects.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+  "projects.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+  "projects.ext_db.head.title": "Create Project | Noco",
+  "projects.ext_db.dialog.success": "Connection was successful",
+  "projects.ext_db.dialog.failure": "Connection Failure:",
   "signin.title": "SIGN IN",
   "signin.input_1": "Enter your work email",
   "signin.input_2": "Enter your password",
@@ -37,46 +78,5 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco",
-  "project.ext_db.title.edit": "Edit Project",
-  "project.ext_db.title.create": "Create Project",
-  "project.ext_db.project_name": "Enter Project Name",
-  "project.ext_db.project_type": "Access Project via",
-  "project.ext_db.button.save_project": "Save Project",
-  "project.ext_db.button.update_and_restart": "Update & Restart",
-  "project.ext_db.button.cancel": "Cancel",
-  "project.ext_db.button.cancel_tooltip": "Cancel and Return",
-  "project.ext_db.credentials": "Database Credentials",
-  "project.ext_db.credentials.label_1": "Database Type",
-  "project.ext_db.credentials.label_2": "SQLite File",
-  "project.ext_db.credentials.label_3": "Host Address",
-  "project.ext_db.credentials.label_4": "Port Number",
-  "project.ext_db.credentials.label_5": "Username",
-  "project.ext_db.credentials.label_6": "Password",
-  "project.ext_db.credentials.label_7": "Database : create if not exists",
-  "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
-  "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
-  "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
-  "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
-  "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
-  "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
-  "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
-  "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
-  "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
-  "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
-  "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
-  "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
-  "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
-  "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
-  "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
-  "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
-  "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
-  "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
-  "project.ext_db.error.message_1": "Invalid character in folder path.",
-  "project.ext_db.error.message_2": "Invalid database credentials.",
-  "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
-  "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
-  "project.ext_db.head.title": "Create Project | Noco",
-  "project.ext_db.dialog.success": "Connection was successful",
-  "project.ext_db.dialog.failure": "Connection Failure:"
+  "signin.head.meta.content": "Log In To Noco"
 }
diff --git a/packages/nc-gui/static/lang/zh.json b/packages/nc-gui/static/lang/zh.json
index d256b04133..7270e19655 100644
--- a/packages/nc-gui/static/lang/zh.json
+++ b/packages/nc-gui/static/lang/zh.json
@@ -1,29 +1,70 @@
 {
-    "home.my_projects": "My Projects",
-    "home.reload_projects_tooltip": "Refresh projects",
-    "home.create_new_project_button.text": "创建新项目",
-    "home.create_new_project_button.subtext_1": "Create",
-    "home.create_new_project_button.subtext_1_tooltip": "Create a new project",
-    "home.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
-    "home.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
-    "home.search_project": "Search Project",
-    "home.project_verticial_option_1": "Import Metadata",
-    "home.project_verticial_option_2": "Export Metadata",
-    "home.project_verticial_option_3": "Clear Metadata",
-    "home.project_horizontal_option_1": "Stop Project",
-    "home.project_horizontal_option_2": "Start Project",
-    "home.project_horizontal_option_3": "Restart Project",
-    "home.project_horizontal_option_4": "Delete Project",
-    "home.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
-    "home.project_api_type_tooltip_rest": "Accessible via REST APIs",
-    "home.project_empty_message": "Get started by creating a new project",
-    "home.import_button.text": "Import NocoDB Project by uploading metadata zip file",
-    "home.show_community_message_1_1": "Star",
-    "home.show_community_message_1_2": "us on Github",
-    "home.show_community_message_2": "Book a Free DEMO",
-    "home.show_community_message_3": "Get your questions answered",
-    "home.show_community_message_4": "Follow NocoDB",
-    "home.search.no_result": "Your search for {search} found no results",
+    "projects.my_projects": "My Projects",
+    "projects.reload_projects_tooltip": "Refresh projects",
+    "projects.create_new_project_button.text": "创建新项目",
+    "projects.create_new_project_button.subtext_1": "Create",
+    "projects.create_new_project_button.subtext_1_tooltip": "Create a new project",
+    "projects.create_new_project_button.subtext_2": "Create By Connecting <br>To An External Database",
+    "projects.create_new_project_button.subtext_2_tooltip": "Supports MySQL, PostgreSQL, SQL Server & SQLite",
+    "projects.search_project": "Search Project",
+    "projects.verticial_option_1": "Import Metadata",
+    "projects.verticial_option_2": "Export Metadata",
+    "projects.verticial_option_3": "Clear Metadata",
+    "projects.horizontal_option_1": "Stop Project",
+    "projects.horizontal_option_2": "Start Project",
+    "projects.horizontal_option_3": "Restart Project",
+    "projects.horizontal_option_4": "Delete Project",
+    "projects.project_api_type_tooltip_graphql": "Accessible via GraphQL APIs",
+    "projects.project_api_type_tooltip_rest": "Accessible via REST APIs",
+    "projects.project_empty_message": "Get started by creating a new project",
+    "projects.import_button.text": "Import NocoDB Project by uploading metadata zip file",
+    "projects.show_community_message_1_1": "Star",
+    "projects.show_community_message_1_2": "us on Github",
+    "projects.show_community_message_2": "Book a Free DEMO",
+    "projects.show_community_message_3": "Get your questions answered",
+    "projects.show_community_message_4": "Follow NocoDB",
+    "projects.search.no_result": "Your search for {search} found no results",
+    "projects.ext_db.title.edit": "Edit Project",
+    "projects.ext_db.title.create": "Create Project",
+    "projects.ext_db.project_name": "Enter Project Name",
+    "projects.ext_db.project_type": "Access Project via",
+    "projects.ext_db.button.save_project": "Save Project",
+    "projects.ext_db.button.update_and_restart": "Update & Restart",
+    "projects.ext_db.button.cancel": "Cancel",
+    "projects.ext_db.button.cancel_tooltip": "Cancel and Return",
+    "projects.ext_db.credentials": "Database Credentials",
+    "projects.ext_db.credentials.label_1": "Database Type",
+    "projects.ext_db.credentials.label_2": "SQLite File",
+    "projects.ext_db.credentials.label_3": "Host Address",
+    "projects.ext_db.credentials.label_4": "Port Number",
+    "projects.ext_db.credentials.label_5": "Username",
+    "projects.ext_db.credentials.label_6": "Password",
+    "projects.ext_db.credentials.label_7": "Database : create if not exists",
+    "projects.ext_db.credentials.button.test_db_conn": "Test Database Connection",
+    "projects.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
+    "projects.ext_db.credentials.advanced": "SSL & Advanced parameters",
+    "projects.ext_db.credentials.advanced.ssl.option1": "Client Key",
+    "projects.ext_db.credentials.advanced.ssl.option2": "Client Cert",
+    "projects.ext_db.credentials.advanced.ssl.option3": "Server CA",
+    "projects.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
+    "projects.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
+    "projects.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
+    "projects.ext_db.credentials.advanced.ssl.preferred": "Preferred",
+    "projects.ext_db.credentials.advanced.ssl.usage.option1": "No",
+    "projects.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
+    "projects.ext_db.credentials.advanced.ssl.usage.option3": "Required",
+    "projects.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
+    "projects.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
+    "projects.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
+    "projects.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
+    "projects.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
+    "projects.ext_db.error.message_1": "Invalid character in folder path.",
+    "projects.ext_db.error.message_2": "Invalid database credentials.",
+    "projects.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
+    "projects.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
+    "projects.ext_db.head.title": "Create Project | Noco",
+    "projects.ext_db.dialog.success": "Connection was successful",
+    "projects.ext_db.dialog.failure": "Connection Failure:",
     "signin.title": "SIGN IN",
     "signin.input_1": "Enter your work email",
     "signin.input_2": "Enter your password",
@@ -37,47 +78,6 @@
     "signin.head.title": "Log In | Noco",
     "signin.head.meta.hid": "Log In To Noco",
     "signin.head.meta.name": "Log In To Noco",
-    "signin.head.meta.content": "Log In To Noco",
-    "project.ext_db.title.edit": "Edit Project",
-    "project.ext_db.title.create": "Create Project",
-    "project.ext_db.project_name": "Enter Project Name",
-    "project.ext_db.project_type": "Access Project via",
-    "project.ext_db.button.save_project": "Save Project",
-    "project.ext_db.button.update_and_restart": "Update & Restart",
-    "project.ext_db.button.cancel": "Cancel",
-    "project.ext_db.button.cancel_tooltip": "Cancel and Return",
-    "project.ext_db.credentials": "Database Credentials",
-    "project.ext_db.credentials.label_1": "Database Type",
-    "project.ext_db.credentials.label_2": "SQLite File",
-    "project.ext_db.credentials.label_3": "Host Address",
-    "project.ext_db.credentials.label_4": "Port Number",
-    "project.ext_db.credentials.label_5": "Username",
-    "project.ext_db.credentials.label_6": "Password",
-    "project.ext_db.credentials.label_7": "Database : create if not exists",
-    "project.ext_db.credentials.button.test_db_conn": "Test Database Connection",
-    "project.ext_db.credentials.button.remove_db_from_env": "Remove Database from environment",
-    "project.ext_db.credentials.advanced": "SSL & Advanced parameters",
-    "project.ext_db.credentials.advanced.ssl.option1": "Client Key",
-    "project.ext_db.credentials.advanced.ssl.option2": "Client Cert",
-    "project.ext_db.credentials.advanced.ssl.option3": "Server CA",
-    "project.ext_db.credentials.advanced.ssl.option1.toolip": "Select .key file",
-    "project.ext_db.credentials.advanced.ssl.option2.toolip": "Select .cert file",
-    "project.ext_db.credentials.advanced.ssl.option3.toolip": "Select CA file",
-    "project.ext_db.credentials.advanced.ssl.preferred": "Preferred",
-    "project.ext_db.credentials.advanced.ssl.usage.option1": "No",
-    "project.ext_db.credentials.advanced.ssl.usage.option2": "Preferred",
-    "project.ext_db.credentials.advanced.ssl.usage.option3": "Required",
-    "project.ext_db.credentials.advanced.ssl.usage.option4": "Required-CA",
-    "project.ext_db.credentials.advanced.ssl.usage.option5": "Required-IDENTITY",
-    "project.ext_db.credentials.advanced.inflection.table_name": "Inflection - Table name",
-    "project.ext_db.credentials.advanced.inflection.column_name": "Inflection - Column name",
-    "project.ext_db.credentials.advanced.button.edit_conn_json": "Edit connection JSON",
-    "project.ext_db.error.message_1": "Invalid character in folder path.",
-    "project.ext_db.error.message_2": "Invalid database credentials.",
-    "project.ext_db.error.message_3": "Unable to connect to database, please check your database is up.",
-    "project.ext_db.error.message_4": "User does not exist or have sufficient permission to create schema.",
-    "project.ext_db.head.title": "Create Project | Noco",
-    "project.ext_db.dialog.success": "Connection was successful",
-    "project.ext_db.dialog.failure": "Connection Failure:"
+    "signin.head.meta.content": "Log In To Noco"
   }
   
\ No newline at end of file