add translation to placeholders and titles

Author: Romper9

adminforth/plugins/email-password-reset/custom/ResetPassword.vue

@@ -31,7 +31,7 @@
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-                      Reset your password on {{ coreStore.config?.brandName }}
+                      {{$t('Reset your password on')}} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>
                 <!-- Modal body -->
@@ -46,7 +46,7 @@
                         v-model="password"
                         @keydown.enter="passwordConfirmationInput.focus()"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
-                        placeholder="New password" required 
+                        :placeholder="$t('New password')" required 
                       />
 
                       <button
@@ -67,7 +67,7 @@
                         autocomplete="new-password"
                         v-model="passwordConfirmation"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
-                        placeholder="Confirm new password" required 
+                        :placeholder="$t('Confirm new password')" required 
                       />
 
                       <button

adminforth/plugins/open-signup/custom/SignupPage.vue

@@ -60,7 +60,7 @@
                         v-model="password"
                         @keydown.enter="passwordConfirmationInput?.focus()"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
-                        placeholder="New password" required 
+                        :placeholder="$t('New password')" required 
                       />
 
                       <button
@@ -83,7 +83,7 @@
                         tabindex="3"
                         v-model="passwordConfirmation"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" 
-                        placeholder="Confirm new password" required 
+                        :placeholder="$t('Confirm new password')" required 
                       />
 
                       <button

adminforth/plugins/upload/custom/imageGenerator.vue

@@ -22,8 +22,8 @@
             <!-- Modal body -->
             <div class="p-4 md:p-5 space-y-4">
               <textarea id="message" rows="3" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
-                placeholder="Prompt which will be passed to AI network" v-model="prompt"
-                title="Prompt which will be passed to AI network"
+                :placeholder="$t('Prompt which will be passed to AI network')" v-model="prompt"
+                :title="$t('Prompt which will be passed to AI network')"
                 ></textarea>
 
               <div class="flex items-center justify-center w-full relative">

adminforth/spa/src/afcl/Select.vue

@@ -9,7 +9,7 @@
         @input="inputInput"
         class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         :placeholder="
-          selectedItems.length && !multiple ? '' :  (showDropdown ? 'Search' : placeholder || 'Select...') 
+          selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
         "
       />
 

adminforth/spa/src/components/CustomDatePicker.vue

@@ -11,7 +11,8 @@
 
           <input ref="datepickerStartEl" type="text"
                  class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="Select date">
+                :placeholder="$t('Select date')"
+          >
         </div>
       </div>
     </div>
@@ -33,7 +34,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
+              @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              fill="none" viewBox="0 0 24 24">

adminforth/spa/src/components/CustomDateRangePicker.vue

@@ -8,7 +8,7 @@
 
         <input ref="datepickerStartEl" type="text"
                class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="From">
+               :placeholder="$t('From')">
       </div>
 
       <div class="relative">
@@ -18,7 +18,7 @@
 
         <input ref="datepickerEndEl" type="text"
                class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="To">
+               :placeholder="$t('To')">
       </div>
     </div>
 
@@ -51,7 +51,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
+              @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
              fill="none" viewBox="0 0 24 24">

adminforth/spa/src/components/CustomRangePicker.vue

@@ -5,7 +5,7 @@
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="From"
+      :placeholder="$t('From')"
       v-model="start"
     >
 
@@ -14,7 +14,7 @@
       :max="maxFormatted"
       type="number" aria-describedby="helper-text-explanation"
       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="To"
+      :placeholder="$t('To')"
       v-model="end"
     >
 

adminforth/spa/src/components/Filters.vue

@@ -51,7 +51,7 @@
            <input
              v-else-if="[ 'string', 'text' ].includes(c.type)"
              type="text" class="w-full py-1 px-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-             placeholder="Search"
+             :placeholder="$t('Search')"
              @input="setFilterItem({ column: c, operator: 'ilike', value: $event.target.value || undefined })"
              :value="getFilterItem({ column: c, operator: 'ilike' })"
            >
@@ -68,7 +68,7 @@
            <input
              v-else-if="[ 'date', 'time' ].includes(c.type)"
              type="text" class="w-full py-1 px-2 border border-gray-300 rounded-md"
-             placeholder="Search datetime"
+             :placeholder="$t('Search datetime')"
              @input="setFilterItem({ column: c, operator: 'ilike', value: $event.target.value || undefined })"
              :value="getFilterItem({ column: c, operator: 'ilike' })"
            >
@@ -87,14 +87,14 @@
              <input
                type="number" aria-describedby="helper-text-explanation"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="From"
+               :placeholder="$t('From')"
                @input="setFilterItem({ column: c, operator: 'gte', value: $event.target.value || undefined })"
                :value="getFilterItem({ column: c, operator: 'gte' })"
              >
              <input
                type="number" aria-describedby="helper-text-explanation"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="To"
+               :placeholder="$t('To')"
                @input="setFilterItem({ column: c, operator: 'lte', value: $event.target.value || undefined})"
                :value="getFilterItem({ column: c, operator: 'lte' })"
              >

adminforth/spa/src/components/GroupsTable.vue

@@ -103,15 +103,15 @@
               <textarea
                   v-else-if="['text', 'richtext'].includes(column.type)"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="Text"
+                  :placeholder="$t('Text')"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
               >
               </textarea>
               <textarea
                   v-else-if="['json'].includes(column.type)"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="Text"
+                  :placeholder="$t('Text')"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
               >
@@ -120,7 +120,7 @@
                   v-else
                   :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="Text"
+                  :placeholder="$t('Text')"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
                   autocomplete="false"

adminforth/spa/src/views/LoginView.vue

@@ -63,7 +63,7 @@
 
                         <div v-if="coreStore.config.rememberMeDays" 
                             class="flex items-start mb-5"
-                            :title="`Stay logged in for ${coreStore.config.rememberMeDays} days`"
+                            :title="$t(`Stay logged in for {days} days`, {days: coreStore.config.rememberMeDays})"
                         >
                           <Checkbox v-model="rememberMeValue" class="mr-2">
                             {{ $t('Remember me') }}