Add security hint to secrets configuration (#574)

`'Please be careful with this option as a bad actor can submit a malicious pull request that exposes your secrets.'`

web/src/components/form/CheckboxesField.vue

@@ -4,6 +4,7 @@
     :key="option.value"
     :model-value="innerValue.includes(option.value)"
     :label="option.text"
+    :description="option.description"
     class="mb-2"
     @update:model-value="clickOption(option)"
   />

web/src/components/form/TextField.vue

@@ -12,6 +12,7 @@
     "
   >
     <input
+      v-if="lines === 1"
       v-model="innerValue"
       class="
         w-full
@@ -24,6 +25,20 @@
       :type="type"
       :placeholder="placeholder"
     />
+    <textarea
+      v-else
+      v-model="innerValue"
+      class="
+        w-full
+        bg-transparent
+        text-gray-600
+        placeholder-gray-400
+        focus:outline-none focus:border-blue-400
+        dark:placeholder-gray-600 dark:text-gray-500
+      "
+      :placeholder="placeholder"
+      :rows="lines"
+    />
   </div>
 </template>
 
@@ -50,6 +65,11 @@ export default defineComponent({
       type: String,
       default: 'text',
     },
+
+    lines: {
+      type: Number,
+      default: 1,
+    },
   },
 
   emits: {

web/src/components/repo/settings/SecretsTab.vue

@@ -47,7 +47,7 @@
         </InputField>
 
         <InputField label="Value">
-          <TextField v-model="selectedSecret.value" placeholder="Value" required />
+          <TextField v-model="selectedSecret.value" placeholder="Value" :lines="5" required />
         </InputField>
 
         <InputField label="Available at following events">
@@ -87,7 +87,12 @@ const emptySecret = {
 const secretEventsOptions: CheckboxOption[] = [
   { value: WebhookEvents.Push, text: 'Push' },
   { value: WebhookEvents.Tag, text: 'Tag' },
-  { value: WebhookEvents.PullRequest, text: 'Pull Request' },
+  {
+    value: WebhookEvents.PullRequest,
+    text: 'Pull Request',
+    description:
+      'Please be careful with this option as a bad actor can submit a malicious pull request that exposes your secrets.',
+  },
   { value: WebhookEvents.Deploy, text: 'Deploy' },
 ];