map claims to permissions in role view

zero.Web/App/Pages/settings/role.vue

@@ -32,7 +32,7 @@
             <span v-if="permissionCollection.description" class="-minor"><br>{{ permissionCollection.description | localize }}</span>
           </h2>
           <ui-property v-for="permission in permissionCollection.items" class="role-permission-toggle" :label="permission.label" :description="permission.description">
-            <ui-toggle v-model="permission.toggled" />
+            <ui-toggle v-if="permission.valueType === 'boolean'" v-model="permission.value" />
           </ui-property>
         </div>
       </div>
@@ -53,7 +53,7 @@
 
 <script>
   import UserRolesApi from 'zero/resources/userRoles';
-  import Overlay from 'zero/services/overlay.js'
+  import Overlay from 'zero/services/overlay.js';
 
   export default {
     props: ['id'],
@@ -92,15 +92,46 @@
         form.load(UserRolesApi.getById(this.id)).then(response =>
         {
           this.model = response;
+
+          let claims = {};
+
+          response.claims.forEach(claim =>
+          {
+            const parts = claim.value.split(':');
+            claims[parts[0]] = parts[1];
+          });
+
+          UserRolesApi.getAllPermissions().then(response =>
+          {
+            response.forEach(collection =>
+            {
+              collection.items.forEach(permission =>
+              {
+                permission.value = this.parsePermissionValue(claims[permission.key], permission.valueType);
+              });
+            });
+
+            this.permissions = response;
+          });
         });
 
-        UserRolesApi.getAllPermissions().then(response =>
-        {
-          console.info(response);
-          this.permissions = response;
-        });
       },
 
+
+      parsePermissionValue(value, type)
+      {
+        if (type === 'boolean')
+        {
+          return value === 'true';
+        }
+        else if (type === 'readWrite' && !value)
+        {
+          return 'none';
+        }
+        return value;
+      },
+
+
       onSubmit(form)
       {
         //this.model.id = "zero.countries.16-B";

zero.Web/Resources/Localization/zero.en-us.json

@@ -150,9 +150,9 @@
 
   "permission": {
     "collections": {
-      "sections": "Sections",
+      "sections": "Access to sections",
       "sections_description": "Allow access to the following sections",
-      "settings": "Settings",
+      "settings": "Access to settings",
       "settings_description": "Define read and write access for settings areas"
     }
   },

zero.Web/Sass/Modules/_headlines.scss

@@ -15,7 +15,7 @@ h2.ui-headline
   .-minor
   {
     font-size: var(--font-size);
-    color: var(--color-fg-mid);
+    color: var(--color-fg-light);
     font-weight: 400;
   }
 }