feat(form): add validation rules and duplicate name check for environment variables

Author: cskiwi

client/src/components/apps/form.vue

@@ -845,6 +845,9 @@
                   v-model="envvar.name"
                   :label="$t('global.name')"
                   :counter="60"
+                  :rules="getEnvNameRules(envvar.name, index)"
+                  :error="isDuplicateEnvVar(envvar.name, index)"
+                  :error-messages="isDuplicateEnvVar(envvar.name, index) ? [$t('app.form.duplicateEnvVar')] : []"
                 ></v-text-field>
               </v-col>
               <v-col cols="12" md="6">
@@ -1770,6 +1773,11 @@ export default defineComponent({
         { title: this.$t('app.form.newValue'), key: 'newValue' },
       ];
     },
+    duplicateEnvVarNames() {
+      const names = this.envVars.map(env => env.name.trim()).filter(name => name !== '');
+      const duplicates = names.filter((name, index) => names.indexOf(name) !== index);
+      return [...new Set(duplicates)];
+    },
   },
   watch: {
     advanced(newValue) {
@@ -2551,6 +2559,25 @@ export default defineComponent({
         }
       }
     },
+    isDuplicateEnvVar(name: string, currentIndex: number) {
+      if (!name || name.trim() === '') return false;
+      const trimmedName = name.trim();
+      return this.envVars.some((env, index) => 
+        index !== currentIndex && env.name.trim() === trimmedName
+      );
+    },
+    getEnvNameRules(name: string, index: number) {
+      const baseRules = [
+        (v: any) => !!v || this.$t('app.form.envNameRequired'),
+        (v: any) => v.length <= 60 || this.$t('app.form.envNameTooLong'),
+        (v: any) => /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(v) || this.$t('app.form.envNameInvalidChars'),
+      ];
+      
+      const duplicateRule = (v: any) => 
+        !this.isDuplicateEnvVar(v, index) || this.$t('app.form.duplicateEnvVar');
+      
+      return [...baseRules, duplicateRule];
+    },
     addSAAnnotationLine() {
       this.sAAnnotations.push({
         annotation: "",

client/src/locale/de-CH.ts

@@ -229,6 +229,10 @@ const messages = {
       variableName: 'Variable Name',
       currentValue: 'Aktuälle Wert',
       newValue: 'Neue Wert',
+      envNameRequired: 'Name vo dr Umgäbigsvariable isch erforderlich',
+      envNameTooLong: 'Name muess weniger als 60 Zeiche ha',
+      envNameInvalidChars: 'Nur Buechstabe, Zahle und Underscore erlaubt. Muess mit Buechstab oder Underscore aafange',
+      duplicateEnvVar: 'Name vo dr Umgäbigsvariable existiert bereits',
     },
     strategy: {
       name: 'Strategie',

client/src/locale/de.ts

@@ -231,6 +231,10 @@ const messages = {
       variableName: 'Variablenname',
       currentValue: 'Aktueller Wert',
       newValue: 'Neuer Wert',
+      envNameRequired: 'Name der Umgebungsvariable ist erforderlich',
+      envNameTooLong: 'Name muss weniger als 60 Zeichen haben',
+      envNameInvalidChars: 'Nur Buchstaben, Zahlen und Unterstriche erlaubt. Muss mit Buchstaben oder Unterstrich beginnen',
+      duplicateEnvVar: 'Name der Umgebungsvariable existiert bereits',
     },
     strategy: {
       name: 'Strategie',

client/src/locale/en.ts

@@ -174,6 +174,10 @@ const messages = {
           variableName: 'Variable Name',
           currentValue: 'Current Value',
           newValue: 'New Value',
+          envNameRequired: 'Environment variable name is required',
+          envNameTooLong: 'Name must be less than 60 characters',
+          envNameInvalidChars: 'Only letters, numbers and underscores allowed. Must start with letter or underscore',
+          duplicateEnvVar: 'Environment variable name already exists',
         },
         strategy: {
           name: 'Strategy',

client/src/locale/ja.ts

@@ -230,6 +230,10 @@ const messages = {
       variableName: '変数名',
       currentValue: '現在の値',
       newValue: '新しい値',
+      envNameRequired: '環境変数名は必須です',
+      envNameTooLong: '名前は60文字未満である必要があります',
+      envNameInvalidChars: '文字、数字、アンダースコアのみ使用可能。文字またはアンダースコアで開始する必要があります',
+      duplicateEnvVar: '環境変数名は既に存在しています',
     },
     strategy: {
       name: '戦略',

client/src/locale/pt.ts

@@ -172,6 +172,10 @@ const messages = {
       variableName: 'Nome da Variável',
       currentValue: 'Valor Atual',
       newValue: 'Novo Valor',
+      envNameRequired: 'Nome da variável de ambiente é obrigatório',
+      envNameTooLong: 'Nome deve ter menos de 60 caracteres',
+      envNameInvalidChars: 'Apenas letras, números e underscore permitidos. Deve começar com letra ou underscore',
+      duplicateEnvVar: 'Nome da variável de ambiente já existe',
     },
     strategy: {
       name: 'Estratégia',

client/src/locale/zhHans.ts

@@ -229,6 +229,10 @@ const messages = {
       variableName: '变量名',
       currentValue: '当前值',
       newValue: '新值',
+      envNameRequired: '环境变量名是必需的',
+      envNameTooLong: '名称必须少于60个字符',
+      envNameInvalidChars: '只允许字母、数字和下划线。必须以字母或下划线开头',
+      duplicateEnvVar: '环境变量名已存在',
     },
     strategy: {
       name: '策略',