Support authentication flows for login/register

src/components/Login.vue

@@ -37,10 +37,15 @@
           :error="userErrorMessage != null"
           :error-messages="userErrorMessage"
           required
-          v-on:keyup.enter="$refs.password.focus()"
+          v-on:keyup.enter="onUsernameEnter"
           v-on:keydown="hasError=false"
+          v-on:blur="onUsernameBlur"
         ></v-text-field>
+
+        <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div>
+
         <v-text-field
+          v-show="showPasswordField"
           prepend-inner-icon="$vuetify.icons.password"
           ref="password"
           v-model="user.password"
@@ -72,7 +77,7 @@
         />
         <v-btn
           id="btn-login"
-          :disabled="!isValid || loading"
+          :disabled="!isValid || loading || loadingLoginFlows"
           color="black"
           depressed
           block
@@ -100,6 +105,7 @@
 import User from "../models/user";
 import util from "../plugins/utils";
 import rememberMeMixin from "./rememberMeMixin";
+import * as sdk from "matrix-js-sdk";
 
 export default {
   name: "Login",
@@ -112,7 +118,11 @@ export default {
       message: "",
       userErrorMessage: null,
       passErrorMessage: null,
-      hasError: false
+      hasError: false,
+      currentLoginServer: "",
+      loadingLoginFlows: false,
+      loginFlows: null,
+      showPasswordField: false,
     };
   },
   computed: {
@@ -124,7 +134,7 @@ export default {
     },
     showCloseButton() {
       return this.$navigation && this.$navigation.canPop();
-    }
+    },
   },
   created() {
     if (this.loggedIn) {
@@ -158,7 +168,7 @@ export default {
         user.normalize();
 
         this.loading = true;
-        this.$store.dispatch("login", user).then(
+        this.$store.dispatch("login", { user }).then(
           () => {
             if (this.$matrix.currentRoomId) {
               this.$navigation.push(
@@ -175,12 +185,13 @@ export default {
             }
           },
           (error) => {
+            console.error(error);
             this.loading = false;
             this.message =
               (error.data && error.data.error) ||
               error.message ||
               error.toString();
-            if(error.data.errcode ==='M_FORBIDDEN') {
+            if(error.data && error.data.errcode ==='M_FORBIDDEN') {
               this.message = this.$i18n.messages[this.$i18n.locale].login.invalid_message;
               this.hasError = true;
             }
@@ -192,6 +203,45 @@ export default {
     handleCreateRoom() {
       this.$navigation.push({ name: "CreateRoom" });
     },
+    onUsernameEnter() {
+      this.$refs.password.focus();
+      this.onUsernameBlur();
+    },
+    onUsernameBlur() {
+      var user = Object.assign({}, this.user);
+      user.normalize();
+      const server = user.home_server || this.$config.defaultServer;
+      if (server !== this.currentLoginServer) {
+        
+        this.showPasswordField = false;
+
+        this.currentLoginServer = server;
+        this.loadingLoginFlows = true;
+
+        const matrixClient = sdk.createClient({baseUrl: server});
+        matrixClient.loginFlows().then((response) => {
+          console.log("FLOWS", response.flows);
+          this.loginFlows = response.flows.filter(this.supportedLoginFlow);
+          this.loadingLoginFlows = false;
+          if (this.loginFlows.length == 0) {
+            this.message = this.$t('login.no_supported_flow')
+            this.hasError = true;
+          } else {
+            this.message = "";
+            this.hasError = false;
+            this.showPasswordField = this.loginFlows.some(f => f.type == "m.login.password");
+            if (this.showPasswordField) {
+              this.$nextTick(() => {
+                this.$refs.password.focus();
+              });
+            }
+          }
+        });
+      }
+    },
+    supportedLoginFlow(flow) {
+      return ["m.login.password"].includes(flow.type);
+    }
   },
 };
 </script>