feat: expose read-only access token in profile settings

app/javascript/dashboard/api/auth.js

@@ -106,4 +106,8 @@ export default {
     const urlData = endPoints('resetAccessToken');
     return axios.post(urlData.url);
   },
+  resetReadOnlyAccessToken() {
+    const urlData = endPoints('resetReadOnlyAccessToken');
+    return axios.post(urlData.url);
+  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -55,6 +55,10 @@ const endPoints = {
   resetAccessToken: {
     url: '/api/v1/profile/reset_access_token',
   },
+
+  resetReadOnlyAccessToken: {
+    url: '/api/v1/profile/reset_read_only_access_token',
+  },
 };
 
 export default page => {

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -91,10 +91,16 @@
         "NOTE": "This token can be used if you are building an API based integration",
         "COPY": "Copy",
         "RESET": "Reset",
+        "GENERATE": "Generate",
         "CONFIRM_RESET": "Are you sure?",
         "CONFIRM_HINT": "Click again to confirm",
         "RESET_SUCCESS": "Access token regenerated successfully",
-        "RESET_ERROR": "Unable to regenerate access token. Please try again"
+        "RESET_ERROR": "Unable to regenerate access token. Please try again",
+        "READ_ONLY_TITLE": "Read-only Access Token",
+        "READ_ONLY_NOTE": "Use this token for integrations that only need to read data. It cannot create, update, or delete anything.",
+        "READ_ONLY_GENERATE_SUCCESS": "Read-only access token generated successfully",
+        "READ_ONLY_RESET_SUCCESS": "Read-only access token regenerated successfully",
+        "READ_ONLY_RESET_ERROR": "Unable to regenerate read-only access token. Please try again"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Alerts",

app/javascript/dashboard/routes/dashboard/settings/profile/AccessToken.vue

@@ -20,6 +20,8 @@ const maskIcon = computed(() => {
   return inputType.value === 'password' ? 'eye-hide' : 'eye-show';
 });
 
+const hasToken = computed(() => Boolean(props.value));
+
 const onClick = () => {
   emit('onCopy', props.value);
 };
@@ -31,50 +33,64 @@ const onReset = () => {
 
 <template>
   <div class="flex flex-row justify-between gap-4">
-    <woot-input
-      name="access_token"
-      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
-      :styles="{
-        borderRadius: '12px',
-        fontSize: '14px',
-        marginBottom: '2px',
-      }"
-      :type="inputType"
-      :model-value="value"
-      readonly
-    >
-      <template #masked>
-        <button
-          class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
+    <template v-if="hasToken">
+      <woot-input
+        name="access_token"
+        class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
+        :styles="{
+          borderRadius: '12px',
+          fontSize: '14px',
+          marginBottom: '2px',
+        }"
+        :type="inputType"
+        :model-value="value"
+        readonly
+      >
+        <template #masked>
+          <button
+            class="absolute top-0 bottom-0 ltr:right-0.5 rtl:left-0.5"
+            type="button"
+            @click="toggleMasked"
+          >
+            <fluent-icon :icon="maskIcon" :size="16" />
+          </button>
+        </template>
+      </woot-input>
+      <div class="flex flex-row gap-2">
+        <NextButton
+          :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
+          slate
+          outline
           type="button"
-          @click="toggleMasked"
-        >
-          <fluent-icon :icon="maskIcon" :size="16" />
-        </button>
-      </template>
-    </woot-input>
-    <div class="flex flex-row gap-2">
-      <NextButton
-        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.COPY')"
-        slate
-        outline
-        type="button"
-        icon="i-lucide-copy"
-        class="rounded-xl"
-        @click="onClick"
-      />
-      <ConfirmButton
-        v-if="showResetButton"
-        :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
-        :confirm-label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')"
-        :confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
-        color="slate"
-        confirm-color="ruby"
-        variant="outline"
-        icon="i-lucide-key-round"
-        class="rounded-xl"
-        @click="onReset"
-      />
-    </div>
+          icon="i-lucide-copy"
+          class="rounded-xl"
+          @click="onClick"
+        />
+        <ConfirmButton
+          v-if="showResetButton"
+          :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET')"
+          :confirm-label="
+            $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_RESET')
+          "
+          :confirm-hint="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.CONFIRM_HINT')"
+          color="slate"
+          confirm-color="ruby"
+          variant="outline"
+          icon="i-lucide-key-round"
+          class="rounded-xl"
+          @click="onReset"
+        />
+      </div>
+    </template>
+    <NextButton
+      v-else
+      :label="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.GENERATE')"
+      slate
+      outline
+      type="button"
+      icon="i-lucide-key-round"
+      class="rounded-xl"
+      @click="onReset"
+    />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -200,6 +200,25 @@ export default {
         useAlert(this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.RESET_ERROR'));
       }
     },
+    async resetReadOnlyAccessToken() {
+      const hadToken = Boolean(this.currentUser.read_only_access_token);
+      const success = await this.$store.dispatch('resetReadOnlyAccessToken');
+      if (success && hadToken) {
+        useAlert(
+          this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_RESET_SUCCESS')
+        );
+      } else if (success) {
+        useAlert(
+          this.$t(
+            'PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_GENERATE_SUCCESS'
+          )
+        );
+      } else {
+        useAlert(
+          this.$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_RESET_ERROR')
+        );
+      }
+    },
   },
 };
 </script>
@@ -340,5 +359,20 @@ export default {
         @on-reset="resetAccessToken"
       />
     </SectionLayout>
+    <SectionLayout
+      with-border
+      :title="$t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_TITLE')"
+      :description="
+        replaceInstallationName(
+          $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.READ_ONLY_NOTE')
+        )
+      "
+    >
+      <AccessToken
+        :value="currentUser.read_only_access_token"
+        @on-copy="onCopyToken"
+        @on-reset="resetReadOnlyAccessToken"
+      />
+    </SectionLayout>
   </div>
 </template>

app/javascript/dashboard/store/modules/auth.js

@@ -233,6 +233,16 @@ export const actions = {
     }
   },
 
+  resetReadOnlyAccessToken: async ({ commit }) => {
+    try {
+      const response = await authAPI.resetReadOnlyAccessToken();
+      commit(types.SET_CURRENT_USER, response.data);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  },
+
   resendConfirmation: async () => {
     try {
       await authAPI.resendConfirmation();