Refactor scope labels for applications and pats (#1560)

pages/settings/applications.vue

@@ -61,7 +61,7 @@
           <Checkbox
             v-for="scope in scopeList"
             :key="scope"
-            :label="constCaseToSentenceCase(scope)"
+            :label="getScopeLabel(scope)"
             :model-value="hasScope(scopesVal, scope)"
             @update:model-value="() => (scopesVal = toggleScope(scopesVal, scope))"
           />
@@ -230,7 +230,7 @@ import {
   ConfirmModal,
 } from 'omorphia'
 import Modal from '~/components/ui/Modal.vue'
-import { scopeList, hasScope, toggleScope } from '~/utils/auth/scopes.ts'
+import { scopeList, hasScope, toggleScope, getScopeLabel } from '~/utils/auth/scopes.ts'
 
 definePageMeta({
   middleware: 'auth',
@@ -470,11 +470,6 @@ async function removeApp() {
   }
   stopLoading()
 }
-
-const constCaseToSentenceCase = (str) => {
-  str = str.replace(/_/g, ' ')
-  return str[0].toUpperCase() + str.slice(1).toLowerCase()
-}
 </script>
 <style lang="scss" scoped>
 .description-textarea {

pages/settings/pats.vue

@@ -23,17 +23,11 @@
         <label for="pat-scopes"><span class="label__title">Scopes</span> </label>
         <div id="pat-scopes" class="checkboxes">
           <Checkbox
-            v-for="(scope, index) in scopes"
+            v-for="scope in scopeList"
             :key="scope"
-            v-tooltip="
-              scope.startsWith('_')
-                ? 'This scope is not allowed to be used with personal access tokens.'
-                : null
-            "
-            :disabled="scope.startsWith('_')"
-            :label="scope.replace('_', '')"
-            :model-value="(scopesVal & (1 << index)) === 1 << index"
-            @update:model-value="scopesVal ^= 1 << index"
+            :label="getScopeLabel(scope)"
+            :model-value="hasScope(scopesVal, scope)"
+            @update:model-value="scopesVal = toggleScope(scopesVal, scope)"
           />
         </div>
         <label for="pat-name"><span class="label__title">Expires</span> </label>
@@ -156,6 +150,9 @@
 </template>
 <script setup>
 import { PlusIcon, XIcon, Checkbox, TrashIcon, EditIcon, SaveIcon, ConfirmModal } from 'omorphia'
+
+import { hasScope, scopeList, toggleScope, getScopeLabel } from '~/utils/auth/scopes.ts'
+
 import CopyCode from '~/components/ui/CopyCode.vue'
 import Modal from '~/components/ui/Modal.vue'
 
@@ -167,46 +164,13 @@ useHead({
   title: 'PATs - Modrinth',
 })
 
-const scopes = [
-  'Read user email',
-  'Read user data',
-  'Write user data',
-  '_Delete your account',
-  '_Write auth data',
-  'Read notifications',
-  'Write notifications',
-  'Read payouts',
-  'Write payouts',
-  'Read analytics',
-  'Create projects',
-  'Read projects',
-  'Write projects',
-  'Delete projects',
-  'Create versions',
-  'Read versions',
-  'Write versions',
-  'Delete versions',
-  'Create reports',
-  'Read reports',
-  'Write reports',
-  'Delete reports',
-  'Read threads',
-  'Write threads',
-  '_Create PATs',
-  '_Read PATs',
-  '_Write PATs',
-  '_Delete PATs',
-  '_Read sessions',
-  '_Delete sessions',
-]
-
 const data = useNuxtApp()
 const patModal = ref()
 
 const editPatIndex = ref(null)
 
 const name = ref(null)
-const scopesVal = ref(0)
+const scopesVal = ref(BigInt(0))
 const expires = ref(null)
 
 const deletePatIndex = ref(null)
@@ -223,7 +187,7 @@ async function createPat() {
       method: 'POST',
       body: {
         name: name.value,
-        scopes: scopesVal.value,
+        scopes: Number(scopesVal.value),
         expires: data.$dayjs(expires.value).toISOString(),
       },
     })
@@ -249,7 +213,7 @@ async function editPat() {
       method: 'PATCH',
       body: {
         name: name.value,
-        scopes: scopesVal.value,
+        scopes: Number(scopesVal.value),
         expires: data.$dayjs(expires.value).toISOString(),
       },
     })