register/login: display if there are no remote sources

Show if no remote sources are defined or if no remote sources are register/login
enabled.

src/views/Login.vue

@@ -9,24 +9,40 @@
     </div>
     <div>
       <div
-        class="my-6 flex justify-center items-center"
-        v-for="rs in remotesources"
-        v-bind:key="rs.id"
+        v-if="!hasRemoteSources"
+        class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
       >
-        <div v-if="rs.login_enabled">
-          <LoginForm
-            action="Login"
-            :name="rs.name"
-            v-if="rs.auth_type == 'password'"
-            v-on:login="doLogin($event.username, $event.password, rs.name)"
-          />
-          <div v-else class="w-full max-w-xs">
-            <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-              <div class="flex justify-center">
-                <button
-                  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-                  @click="doLogin(null, null, rs.name)"
-                >Login with {{rs.name}}</button>
+        No remote sources defined
+      </div>
+      <div
+        v-else-if="!hasLoginRemoteSources"
+        class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+      >
+        No remote sources enabled for login
+      </div>
+      <div v-else>
+        <div
+          class="my-6 flex justify-center items-center"
+          v-for="rs in remotesources"
+          v-bind:key="rs.id"
+        >
+          <div v-if="rs.login_enabled">
+            <LoginForm
+              action="Login"
+              :name="rs.name"
+              v-if="rs.auth_type == 'password'"
+              v-on:login="doLogin($event.username, $event.password, rs.name)"
+            />
+            <div v-else class="w-full max-w-xs">
+              <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <div class="flex justify-center">
+                  <button
+                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                    @click="doLogin(null, null, rs.name)"
+                  >
+                    Login with {{ rs.name }}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -58,6 +74,22 @@ export default {
       remotesources: null
     };
   },
+  computed: {
+    hasRemoteSources() {
+      if (this.remotesources) {
+        return this.remotesources.length > 0;
+      }
+      return false;
+    },
+    hasLoginRemoteSources() {
+      for (let rs of this.remotesources) {
+        if (rs.login_enabled) {
+          return true;
+        }
+      }
+      return false;
+    }
+  },
   methods: {
     async fetchRemoteSources() {
       let { data, error } = await fetchRemoteSources();

src/views/Register.vue

@@ -12,10 +12,29 @@
         <RegisterForm
           :remote-username="registeruser.remote_user_info.LoginName"
           :username="registeruser.remote_user_info.LoginName"
-          v-on:login="doRegister(registeruser.remote_source_name, $event.username, registeruser.remote_source_login_name, registeruser.remote_source_login_password)"
+          v-on:login="
+            doRegister(
+              registeruser.remote_source_name,
+              $event.username,
+              registeruser.remote_source_login_name,
+              registeruser.remote_source_login_password
+            )
+          "
         />
       </div>
     </div>
+    <div
+      v-else-if="!hasRemoteSources"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+    >
+      No remote sources defined
+    </div>
+    <div
+      v-else-if="!hasRegisterRemoteSources"
+      class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+    >
+      No remote sources enabled for registration
+    </div>
     <div v-else>
       <div
         class="my-6 flex justify-center items-center"
@@ -35,7 +54,9 @@
                 <button
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                   @click="doAuthorize(rs.name)"
-                >Register with {{rs.name}}</button>
+                >
+                  Register with {{ rs.name }}
+                </button>
               </div>
             </div>
           </div>
@@ -68,7 +89,22 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["registeruser"])
+    ...mapGetters(["registeruser"]),
+
+    hasRemoteSources() {
+      if (this.remotesources) {
+        return this.remotesources.length > 0;
+      }
+      return false;
+    },
+    hasRegisterRemoteSources() {
+      for (let rs of this.remotesources) {
+        if (rs.registration_enabled) {
+          return true;
+        }
+      }
+      return false;
+    }
   },
   methods: {
     async fetchRemoteSources() {
@@ -81,14 +117,16 @@ export default {
     },
     async doAuthorize(remotesourcename, username, password) {
       let u = authorizeurl();
-      let res = await (await fetch(u, {
-        method: "POST",
-        body: JSON.stringify({
-          remote_source_name: remotesourcename,
-          login_name: username,
-          password: password
+      let res = await (
+        await fetch(u, {
+          method: "POST",
+          body: JSON.stringify({
+            remote_source_name: remotesourcename,
+            login_name: username,
+            password: password
+          })
         })
-      })).json();
+      ).json();
 
       if (res.oauth2_redirect) {
         window.location = res.oauth2_redirect;