Add placeholders to inputs (#6599)

web/src/assets/locales/en.json

@@ -120,7 +120,8 @@
         },
         "netrc_only_trusted": {
           "netrc_only_trusted": "Custom trusted clone plugins",
-          "desc": "Plugins that get access to netrc credentials that can be used to clone repositories from the forge or push them into the forge."
+          "desc": "Plugins that get access to netrc credentials that can be used to clone repositories from the forge or push them into the forge.",
+          "placeholder": "Plugin image"
         },
         "trusted": {
           "trusted": "Trusted",

web/src/components/admin/settings/forges/AdminForgeForm.vue

@@ -7,12 +7,12 @@
     </InputField>
 
     <InputField v-if="forge.type !== 'bitbucket'" v-slot="{ id }" :label="$t('url')">
-      <TextField :id="id" v-model="forge.url" required />
+      <TextField :id="id" v-model="forge.url" :placeholder="$t('url')" required />
     </InputField>
 
-    <InputField :label="$t('oauth_redirect_url')" description="foo">
+    <InputField :label="$t('oauth_redirect_url')">
       <template #default="{ id }">
-        <TextField :id="id" class="mt-2" :model-value="redirectUri" disabled />
+        <TextField :id="id" class="mt-2" :model-value="redirectUri" :label="$t('oauth_redirect_url')" disabled />
       </template>
       <template #description>
         {{ $t('use_this_redirect_url_to_create') }}
@@ -26,14 +26,14 @@
 
     <template v-if="forge.type !== 'addon'">
       <InputField v-slot="{ id }" :label="$t('oauth_client_id')">
-        <TextField :id="id" v-model="forge.client" required />
+        <TextField :id="id" v-model="forge.client" required :placeholder="$t('oauth_client_id')" />
       </InputField>
 
       <InputField v-slot="{ id }" :label="$t('oauth_client_secret')">
         <TextField
           :id="id"
           v-model="forge.oauth_client_secret"
-          :placeholder="isNew ? '' : $t('leave_empty_to_keep_current_value')"
+          :placeholder="isNew ? $t('oauth_client_secret') : $t('leave_empty_to_keep_current_value')"
           :required="isNew"
         />
       </InputField>
@@ -44,6 +44,7 @@
         <p>{{ $t('executable_desc') }}</p>
         <TextField
           :id="id"
+          :placeholder="$t('executable')"
           :model-value="getAdditionalOptions('addon', 'executable')"
           @update:model-value="setAdditionalOptions('addon', 'executable', $event)"
         />
@@ -83,6 +84,7 @@
           <p>{{ $t('git_username_desc') }}</p>
           <TextField
             :id="id"
+            :placeholder="$t('git_username')"
             :model-value="getAdditionalOptions('bitbucket-dc', 'git-username')"
             @update:model-value="setAdditionalOptions('bitbucket-dc', 'git-username', $event)"
           />
@@ -91,6 +93,7 @@
           <p>{{ $t('git_password_desc') }}</p>
           <TextField
             :id="id"
+            :placeholder="$t('git_password')"
             :model-value="getAdditionalOptions('bitbucket-dc', 'git-password')"
             @update:model-value="setAdditionalOptions('bitbucket-dc', 'git-password', $event)"
           />

web/src/components/secrets/SecretEdit.vue

@@ -30,7 +30,12 @@
             <Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" />
           </div>
           <div class="flex gap-2">
-            <TextField :id="id" v-model="newImage" @keydown.enter.prevent="addNewImage" />
+            <TextField
+              :id="id"
+              v-model="newImage"
+              :placeholder="$t('repo.settings.general.netrc_only_trusted.placeholder')"
+              @keydown.enter.prevent="addNewImage"
+            />
             <Button type="button" color="gray" start-icon="plus" @click="addNewImage" />
           </div>
         </div>

web/src/views/admin/AdminUsers.vue

@@ -48,17 +48,22 @@
     <div v-else>
       <form @submit.prevent="saveUser">
         <InputField v-slot="{ id }" :label="$t('admin.settings.users.login')">
-          <TextField :id="id" v-model="selectedUser.login" :disabled="isEditingUser" />
+          <TextField :id="id" v-model="selectedUser.login" :disabled="isEditingUser" :placeholder="$t('username')" />
         </InputField>
 
         <InputField v-slot="{ id }" :label="$t('admin.settings.users.email')">
-          <TextField :id="id" v-model="selectedUser.email" />
+          <TextField :id="id" v-model="selectedUser.email" :placeholder="$t('admin.settings.users.email')" />
         </InputField>
 
         <InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
           <div class="flex gap-2">
             <img v-if="selectedUser.avatar_url" class="h-8 w-8 rounded-md" :src="selectedUser.avatar_url" />
-            <TextField :id="id" v-model="selectedUser.avatar_url" />
+            <TextField
+              :id="id"
+              v-model="selectedUser.avatar_url"
+              login
+              :placeholder="$t('admin.settings.users.avatar_url')"
+            />
           </div>
         </InputField>
 

web/src/views/repo/settings/Badge.vue

@@ -40,10 +40,10 @@
       />
     </InputField>
     <InputField v-slot="{ id }" :label="$t('repo.settings.badge.workflow')">
-      <TextField :id="id" v-model="workflow" />
+      <TextField :id="id" v-model="workflow" :placeholder="$t('repo.settings.badge.workflow')" />
     </InputField>
     <InputField v-slot="{ id }" :label="$t('repo.settings.badge.step')">
-      <TextField :id="id" v-model="step" />
+      <TextField :id="id" v-model="step" :placeholder="$t('repo.settings.badge.step')" />
     </InputField>
 
     <div v-if="badgeContent" class="flex flex-col space-y-4">

web/src/views/repo/settings/General.vue

@@ -28,7 +28,12 @@
               <Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" />
             </div>
             <div class="flex gap-2">
-              <TextField :id="id" v-model="newImage" @keydown.enter.prevent="addNewImage" />
+              <TextField
+                :id="id"
+                v-model="newImage"
+                :placeholder="$t('repo.settings.general.netrc_only_trusted.placeholder')"
+                @keydown.enter.prevent="addNewImage"
+              />
               <Button type="button" color="gray" start-icon="plus" @click="addNewImage" />
             </div>
           </div>
@@ -99,7 +104,7 @@
               <Button type="button" color="gray" start-icon="trash" @click="removeUser(allowedUser)" />
             </div>
             <div class="flex gap-2">
-              <TextField :id="id" v-model="newUser" @keydown.enter.prevent="addNewUser" />
+              <TextField :id="id" v-model="newUser" :placeholder="$t('username')" @keydown.enter.prevent="addNewUser" />
               <Button type="button" color="gray" start-icon="plus" @click="addNewUser" />
             </div>
           </div>
@@ -119,7 +124,12 @@
         :label="$t('repo.settings.general.timeout.timeout')"
       >
         <div class="flex items-center">
-          <NumberField :id="id" v-model="repoSettings.timeout" class="w-24" />
+          <NumberField
+            :id="id"
+            v-model="repoSettings.timeout"
+            :placeholder="$t('repo.settings.general.timeout.timeout')"
+            class="w-24"
+          />
           <span class="text-wp-text-alt-100 ml-4">{{ $t('repo.settings.general.timeout.minutes') }}</span>
         </div>
       </InputField>