tokens: add ip restriction

dashboard/src/components/ApiTokens.vue

@@ -20,6 +20,8 @@ const newDialog = useTemplateRef('newDialog');
 const addedToken = ref('');
 const tokenName = ref('');
 const tokenScope = ref('r');
+const tokenAllowedIpRanges = ref('');
+const tokenAllowedIpRangesError = ref('');
 const columns = {
   name: {
     label: t('profile.apiTokens.name'),
@@ -37,6 +39,10 @@ const columns = {
     label: t('profile.apiTokens.scope'),
     sort: true
   },
+  allowedIpRanges: {
+    label: t('profile.apiTokens.allowedIpRanges'),
+    sort: true
+  },
   actions: {}
 };
 
@@ -57,8 +63,12 @@ async function onSubmitAddApiToken(){
   if (!isValid.value) return;
 
   const scope = { '*': tokenScope.value };
-  const [error, apiToken] = await tokensModel.add(tokenName.value, scope);
-  if (error) return console.error(error);
+  const allowedIpRanges = tokenAllowedIpRanges.value;
+  const [error, apiToken] = await tokensModel.add(tokenName.value, scope, allowedIpRanges);
+  if (error) {
+    tokenAllowedIpRangesError.value = error.body ? error.body.message : 'Internal error';
+    return;
+  }
 
   addedToken.value = apiToken.accessToken;
 
@@ -75,6 +85,8 @@ function onReset() {
     addedToken.value = '';
     tokenName.value = '';
     tokenScope.value = 'r';
+    tokenAllowedIpRanges.value = '';
+    tokenAllowedIpRangesError.value = '';
   }, 500);
 }
 
@@ -128,6 +140,12 @@ onMounted(async () => {
                 <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
                 <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
               </FormGroup>
+
+              <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')" />
+              </FormGroup>
             </form>
           </div>
           <div v-else>
@@ -157,6 +175,10 @@ onMounted(async () => {
           <span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
           <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
         </template>
+        <template #allowedIpRanges="slotProps">
+          <span v-if="slotProps.allowedIpRanges !== ''" v-tooltip="slotProps.allowedIpRanges">{{ slotProps.allowedIpRanges }}</span>
+          <span v-else>{{ '*' }}</span>
+        </template>
         <template #actions="slotProps">
           <div class="table-actions">
             <Button small tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />