Gives indication of user having permission to join the facility not showing the devices that don't have sign up enabled.

kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/SelectDeviceForm.vue

@@ -38,10 +38,10 @@
             :key="idx"
             v-model="selectedDeviceId"
             class="radio-button"
-            :value="d.id"
+            :value="canLearnerSignUp(d.id) ? d.id : false"
             :label="d.nickname"
             :description="d.base_url"
-            :disabled="formDisabled || !isDeviceAvailable(d.id)"
+            :disabled="canLearnerSignUp(d.id) || formDisabled || !isDeviceAvailable(d.id)"
           />
           <KButton
             :key="`forget-${idx}`"
@@ -65,10 +65,13 @@
             :key="d.id"
             v-model="selectedDeviceId"
             class="radio-button"
-            :value="d.instance_id"
+            :value="canLearnerSignUp(d.id) ? d.instance_id : false"
             :label="formatNameAndId(d.device_name, d.id)"
             :description="formatBaseDevice(d)"
-            :disabled="formDisabled || fetchFailed || !isDeviceAvailable(d.id)"
+            :disabled="!canLearnerSignUp(d.id)
+              || formDisabled
+              || fetchFailed
+              || !isDeviceAvailable(d.id)"
           />
         </div>
       </template>
@@ -123,8 +126,9 @@
 
 <script>
 
-  import { computed } from 'kolibri.lib.vueCompositionApi';
-  import { useLocalStorage, get } from '@vueuse/core';
+  import { NetworkLocationResource } from 'kolibri.resources';
+  import { computed, ref } from 'kolibri.lib.vueCompositionApi';
+  import { useLocalStorage, get, useMemoize, computedAsync } from '@vueuse/core';
   import find from 'lodash/find';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -186,6 +190,74 @@
       const discoveredDevices = computed(() => get(devices).filter(d => d.dynamic));
       const savedDevices = computed(() => get(devices).filter(d => !d.dynamic));
 
+      const fetchDeviceFacilities = useMemoize(
+        async device => {
+          try {
+            const { facilities } = await NetworkLocationResource.fetchFacilities(device.id);
+
+            return facilities.map(facility => {
+              return {
+                id: facility.id,
+                name: facility.name,
+                base_url: device.base_url,
+                address_id: device.id,
+                learner_can_sign_up: facility.learner_can_sign_up,
+                learner_can_login_with_no_password: facility.learner_can_login_with_no_password,
+                kolibri_version: device.kolibri_version,
+              };
+            });
+          } catch (e) {
+            return [];
+          }
+        },
+        {
+          getKey: device => device.id,
+        }
+      );
+
+      const isLoading = ref(false);
+
+      const availableAddressIds = computed(() =>
+        get(devices)
+          .filter(d => d.available)
+          .map(d => d.id)
+      );
+
+      const availableFacilities = computedAsync(
+        async () => {
+          // Extract available devices, and sort to most recently accessed so when we dedupe
+          // facilities across two+ devices, the most recently connected device's facility is shown
+          const _devices = get(devices)
+            .filter(d => get(availableAddressIds).includes(d.id))
+            .sort((deviceA, deviceB) => deviceA.since_last_accessed - deviceB.since_last_accessed);
+          const facilitiesFromDevices = await Promise.all(
+            _devices.map(d => fetchDeviceFacilities(d))
+          );
+          const facilities = {};
+          // Promise.all will resolve with an array of arrays
+          for (const deviceFacilities of facilitiesFromDevices) {
+            for (const facility of deviceFacilities) {
+              // deduplicate the same facility across more than one device
+              if (!facility[facility.id]) {
+                facilities[facility.id] = facility;
+              }
+            }
+          }
+          // Sort alphabetically for predictable ordering
+          return Object.values(facilities).sort((facilityA, facilityB) => {
+            if (facilityA.name < facilityB.name) {
+              return -1;
+            }
+            if (facilityA.name > facilityB.name) {
+              return 1;
+            }
+            return 0;
+          });
+        },
+        [],
+        isLoading
+      );
+
       return {
         // useDevices
         devices,
@@ -205,6 +277,7 @@
         discoveredDevices,
         savedDevices,
         storageDeviceId,
+        availableFacilities,
       };
     },
     props: {
@@ -356,6 +429,14 @@
           this.$emit('removed_address');
         });
       },
+      canLearnerSignUp(id) {
+        for (const facility of this.availableFacilities) {
+          if (facility.address_id === id) {
+            return facility.learner_can_sign_up;
+          }
+        }
+        return false;
+      },
     },
     $trs: {
       deletingFailedText: {