Refactor scopes to use Intl for labels and descriptions (#1570)

* Refactor scope labels for applications and pats

* move scopes to composables

* Refactor pages to use intl

* Fix merge error

* Extract messages

pages/settings/applications.vue

@@ -61,7 +61,7 @@
           <Checkbox
             v-for="scope in scopeList"
             :key="scope"
-            :label="getScopeLabel(scope)"
+            :label="scopesToLabels(getScopeValue(scope)).join(', ')"
             :model-value="hasScope(scopesVal, scope)"
             @update:model-value="() => (scopesVal = toggleScope(scopesVal, scope))"
           />
@@ -230,7 +230,14 @@ import {
   ConfirmModal,
 } from 'omorphia'
 import Modal from '~/components/ui/Modal.vue'
-import { scopeList, hasScope, toggleScope, getScopeLabel } from '~/utils/auth/scopes.ts'
+
+import {
+  scopeList,
+  hasScope,
+  toggleScope,
+  useScopes,
+  getScopeValue,
+} from '~/composables/auth/scopes.ts'
 
 definePageMeta({
   middleware: 'auth',
@@ -241,6 +248,7 @@ useHead({
 })
 
 const data = useNuxtApp()
+const { scopesToLabels } = useScopes()
 
 const appModal = ref()
 

pages/settings/authorizations.vue

@@ -56,14 +56,14 @@
           </label>
           <div class="scope-list">
             <div
-              v-for="scope in getScopeDefinitions(authorization.scopes)"
+              v-for="scope in scopesToDefinitions(authorization.scopes)"
               :key="scope"
               class="scope-list-item"
             >
               <div class="scope-list-item-icon">
                 <CheckIcon />
               </div>
-              {{ constCaseToTitleCase(scope) }}
+              {{ scope }}
             </div>
           </div>
         </div>
@@ -89,7 +89,10 @@
 </template>
 <script setup>
 import { Button, TrashIcon, CheckIcon, ConfirmModal, Avatar } from 'omorphia'
-import { getScopeDefinitions } from '~/utils/auth/scopes.ts'
+
+import { useScopes } from '~/composables/auth/scopes.ts'
+
+const { scopesToDefinitions } = useScopes()
 
 const revokingId = ref(null)
 
@@ -166,12 +169,6 @@ async function revokeApp(id) {
     })
   }
 }
-
-const constCaseToTitleCase = (str) =>
-  str
-    .split('_')
-    .map((x) => x[0].toUpperCase() + x.slice(1).toLowerCase())
-    .join(' ')
 </script>
 
 <style lang="scss" scoped>

pages/settings/pats.vue

@@ -25,7 +25,7 @@
           <Checkbox
             v-for="scope in scopeList"
             :key="scope"
-            :label="getScopeLabel(scope)"
+            :label="scopesToLabels(getScopeValue(scope)).join(', ')"
             :model-value="hasScope(scopesVal, scope)"
             @update:model-value="scopesVal = toggleScope(scopesVal, scope)"
           />
@@ -151,7 +151,13 @@
 <script setup>
 import { PlusIcon, XIcon, Checkbox, TrashIcon, EditIcon, SaveIcon, ConfirmModal } from 'omorphia'
 
-import { hasScope, scopeList, toggleScope, getScopeLabel } from '~/utils/auth/scopes.ts'
+import {
+  hasScope,
+  scopeList,
+  toggleScope,
+  useScopes,
+  getScopeValue,
+} from '~/composables/auth/scopes.ts'
 
 import CopyCode from '~/components/ui/CopyCode.vue'
 import Modal from '~/components/ui/Modal.vue'
@@ -165,6 +171,7 @@ useHead({
 })
 
 const data = useNuxtApp()
+const { scopesToLabels } = useScopes()
 const patModal = ref()
 
 const editPatIndex = ref(null)