change placeholder as helper-text

dashboard/src/components/ApiTokens.vue

@@ -131,7 +131,7 @@ onMounted(async () => {
       :title="$t('profile.createApiToken.title')"
       :confirm-label="addedToken ? '' : $t('main.action.add')"
        confirm-style="primary"
-      :reject-label="$t('main.dialog.close')"
+      :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
       @confirm="onSubmitAddApiToken()"
       @close="onReset()"
@@ -155,7 +155,8 @@ onMounted(async () => {
               <FormGroup>
                 <label for="">{{ $t('profile.createApiToken.allowedIpRanges') }}</label>
                 <div class="has-error" v-show="tokenAllowedIpRangesError">{{ tokenAllowedIpRangesError }}</div>
-                <TextInput v-model="tokenAllowedIpRanges" :placeholder="$t('profile.apiTokens.allowedIpRangesPlaceholder')" />
+                <TextInput v-model="tokenAllowedIpRanges" />
+                <small class="helper-text">{{ $t('profile.apiTokens.allowedIpRangesPlaceholder') }}</small>
               </FormGroup>
             </form>
           </div>