Secret field - password (#490)

Co-authored-by: Julien Nahum <julien@nahum.net>

app/Http/Requests/UserFormRequest.php

@@ -90,6 +90,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
             'properties.*.multi_lines' => 'boolean|nullable',
             'properties.*.max_char_limit' => 'integer|nullable|min:1|max:2000',
             'properties.*.show_char_limit ' => 'boolean|nullable',
+            'properties.*.secret_input' => 'boolean|nullable',
 
             // Date field
             'properties.*.with_time' => 'boolean|nullable',

client/components/open/forms/OpenFormField.vue

@@ -341,6 +341,8 @@ export default {
         inputProperties.pattern = '/d*'
       } else if (field.type === 'phone_number' && !field.use_simple_text_input) {
         inputProperties.unavailableCountries = field.unavailable_countries ?? []
+      } else if (field.type === 'text' && field.secret_input) {
+        inputProperties.nativeType = 'password'
       }
 
       return inputProperties

client/components/open/forms/fields/components/FieldOptions.vue

@@ -202,7 +202,14 @@
         :form="field"
         name="multi_lines"
         label="Multi-lines input"
-        @update:model-value="field.multi_lines = $event"
+        @update:model-value="onFieldMultiLinesChange"
+      />
+      <toggle-switch-input
+        :form="field"
+        name="secret_input"
+        label="Secret input"
+        help="Hide input content with * for privacy"
+        @update:model-value="onFieldSecretInputChange"
       />
     </div>
 
@@ -802,6 +809,18 @@ export default {
         this.field.help_position = 'below_input'
       }
     },
+    onFieldMultiLinesChange(val) {
+      this.field.multi_lines = val
+      if (this.field.multi_lines) {
+        this.field.secret_input = false
+      }
+    },
+    onFieldSecretInputChange(val) {
+      this.field.secret_input = val
+      if (this.field.secret_input) {
+        this.field.multi_lines = false
+      }
+    },
     selectAllCountries() {
       this.field.unavailable_countries = this.allCountries.map(item => {
         return item.code