Client - update scopes

fittrackee_client/src/components/User/UserApps/AddUserApp.vue

@@ -48,32 +48,29 @@
             <div class="form-item-scope-label">
               {{ $t('oauth2.APP.SCOPE.LABEL') }}*
             </div>
-            <div class="form-item-scope-checkboxes">
-              <label>
+            <div
+              v-for="scope in oauth2_scopes"
+              class="form-item-scope-checkboxes"
+              :key="scope"
+            >
+              <label class="scope-label">
                 <input
                   type="checkbox"
-                  :checked="appForm.read"
-                  @change="appForm.read = !appForm.read"
+                  :name="scope"
+                  :checked="scopes.includes(scope)"
+                  @change="updateScopes(scope)"
                 />
-                {{ $t('oauth2.APP.SCOPE.READ') }}
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  :checked="appForm.write"
-                  @change="appForm.write = !appForm.write"
-                />
-                {{ $t('oauth2.APP.SCOPE.WRITE') }}
+                <code>{{ scope }}</code>
               </label>
+              <p
+                class="scope-description"
+                v-html="$t(`oauth2.APP.SCOPE.${scope}_DESCRIPTION`)"
+              ></p>
             </div>
           </div>
         </div>
         <div class="form-buttons">
-          <button
-            class="confirm"
-            type="submit"
-            :disabled="!appForm.read && !appForm.write"
-          >
+          <button class="confirm" type="submit" :disabled="scopes.length === 0">
             {{ $t('buttons.SUBMIT') }}
           </button>
           <button
@@ -94,6 +91,7 @@
   import { OAUTH2_STORE } from '@/store/constants'
   import { IOAuth2ClientPayload } from '@/types/oauth'
   import { useStore } from '@/use/useStore'
+  import { oauth2_scopes } from '@/utils/oauth'
 
   const store = useStore()
   const appForm = reactive({
@@ -101,9 +99,8 @@
     client_uri: '',
     client_description: '',
     redirect_uri: '',
-    read: true,
-    write: false,
   })
+  const scopes: string[] = reactive([])
 
   function createApp() {
     const payload: IOAuth2ClientPayload = {
@@ -111,13 +108,21 @@
       client_description: appForm.client_description,
       client_uri: appForm.client_uri,
       redirect_uris: [appForm.redirect_uri],
-      scope: `${appForm.read ? 'read' : ''} ${appForm.write ? 'write' : ''}`,
+      scope: scopes.join(' '),
     }
     store.dispatch(OAUTH2_STORE.ACTIONS.CREATE_CLIENT, payload)
   }
   function updateDescription(value: string) {
     appForm.client_description = value
   }
+  function updateScopes(scope: string) {
+    const index = scopes.indexOf(scope)
+    if (index > -1) {
+      scopes.splice(index, 1)
+    } else {
+      scopes.push(scope)
+    }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -135,7 +140,7 @@
         display: flex;
         flex-direction: column;
 
-        input {
+        input[type='text'] {
           height: 20px;
         }
         .form-item-scope {
@@ -146,8 +151,15 @@
           }
 
           .form-item-scope-checkboxes {
-            display: flex;
-            gap: $default-padding;
+            padding-bottom: $default-padding;
+
+            .scope-label {
+              height: inherit;
+            }
+            .scope-description {
+              font-style: italic;
+              margin: 0 $default-margin * 0.5;
+            }
           }
         }
 

fittrackee_client/src/components/User/UserApps/AuthorizeUserApp.vue

@@ -9,17 +9,16 @@
         </i18n-t>
       </h1>
       <ErrorMessage :message="errorMessages" v-if="errorMessages" />
-      <div class="oauth2-access">
+      <div class="oauth2-access description-list">
         <p>{{ $t('oauth2.APP_REQUESTING_ACCESS') }}</p>
-        <ul>
-          <li
-            class="client-scope"
-            v-for="scope in client.scope.split(' ')"
-            :key="scope"
-          >
-            {{ $t(`oauth2.APP.SCOPE.${scope.toUpperCase()}`) }}
-          </li>
-        </ul>
+        <dl>
+          <template v-for="scope in client.scope.split(' ')" :key="scope">
+            <dt class="client-scope">
+              <code>{{ scope }}</code>
+            </dt>
+            <dd v-html="$t(`oauth2.APP.SCOPE.${scope}_DESCRIPTION`)"></dd>
+          </template>
+        </dl>
         <div class="authorize-oauth2-buttons">
           <button class="danger" @click="authorizeApp">
             {{ $t('buttons.AUTHORIZE') }}

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -53,13 +53,13 @@
           {{ client.redirect_uris.length > 0 ? client.redirect_uris[0] : '' }}
         </dd>
         <dt>{{ $t('oauth2.APP.SCOPE.LABEL') }}:</dt>
-        <dd>
+        <dd class="client-scopes">
           <span
             class="client-scope"
             v-for="scope in client.scope.split(' ')"
             :key="scope"
           >
-            {{ $t(`oauth2.APP.SCOPE.${scope.toUpperCase()}`) }}
+            <code>{{ scope }}</code>
           </span>
         </dd>
       </dl>
@@ -183,8 +183,12 @@
       flex-wrap: wrap;
       gap: $default-padding;
     }
-    .client-scope {
-      padding-right: $default-padding * 0.5;
+    .client-scopes {
+      display: flex;
+      flex-wrap: wrap;
+      .client-scope {
+        padding-right: $default-padding * 1.5;
+      }
     }
     .no-description {
       font-style: italic;