Support the "m.login.registration_token" login flow

src/assets/config.json

@@ -9,6 +9,7 @@
     "productLink": "letsconvene.im",
     "defaultServer": "https://neo.keanu.im",
     "identityServer_unset": "",
+    "registrationToken_unset": "",
     "rtl": false,
     "accentColor_unset": "",
     "logo_unset": "",

src/assets/translations/en.json

@@ -164,7 +164,10 @@
     "send_verification": "Send verification email",
     "sent_verification": "An email has been sent to {email}. Please use your regular email client to verify the address.",
     "resend_verification": "Resend verification email",
-    "email_not_valid": "Email address not valid"
+    "email_not_valid": "Email address not valid",
+    "registration_token": "Please enter registration token",
+    "send_token": "Send token",
+    "token_not_valid": "Invalid token"
   },
   "profile": {
     "title": "My Profile",

src/components/InteractiveAuth.vue

@@ -61,6 +61,21 @@
         </v-col>
       </v-row>
     </v-container>
+
+    <v-container fluid class="mt-40" v-if="step == steps.ENTER_TOKEN">
+      <v-row cols="12" align="center" justify="center">
+        <v-col sm="8" align="center">
+          <div class="text-left font-weight-light">{{ $t("login.registration_token") }}</div>
+          <v-text-field v-model="token" color="black" :rules="tokenRules" type="text" maxlength="64"
+            background-color="white" v-on:keyup.enter="onTokenEntered(token)" autofocus solo></v-text-field>
+          <v-btn :disabled="!tokenIsValid" color="black" depressed class="filled-button"
+            @click.stop="onTokenEntered(token)">
+            {{ $t("login.send_token") }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
   </v-fade-transition>
 </template>
 
@@ -74,6 +89,7 @@ const steps = Object.freeze({
   EXTERNAL_AUTH: 3,
   ENTER_EMAIL: 4,
   AWAITING_EMAIL_VERIFICATION: 5,
+  ENTER_TOKEN: 6,
 });
 
 export default {
@@ -85,6 +101,9 @@ export default {
       emailRules: [
         v => this.validEmail(v) || this.$t("login.email_not_valid")
       ],
+      tokenRules: [
+        v => this.validToken(v) || this.$t("login.token_not_valid")
+      ],
       policies: null,
       onPoliciesAccepted: () => { },
       onEmailResend: () => { },
@@ -95,6 +114,7 @@ export default {
       emailVerificationAttempt: 1,
       emailVerificationSid: null,
       emailVerificationPollTimer: null,
+      token: "",
     };
   },
 
@@ -105,6 +125,9 @@ export default {
     emailIsValid() {
       return this.validEmail(this.email);
     },
+    tokenIsValid() {
+      return this.validToken(this.token);
+    }
   },
 
   methods: {
@@ -116,6 +139,15 @@ export default {
       }
     },
 
+    validToken(token) {
+      // https://github.com/matrix-org/matrix-spec-proposals/blob/main/proposals/3231-token-authenticated-registration.md
+      if (/^[A-Za-z0-9._~-]{1,64}$/.test(token)) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+
     registrationFlowHandler(client, authData) {
       const flows = authData.flows;
       if (!flows || flows.length == 0) {
@@ -257,6 +289,34 @@ export default {
                 });
             }
           });
+
+        case "m.login.registration_token": {
+          this.step = steps.CREATING;
+          return new Promise((resolve, reject) => {
+            if (this.$config.registrationToken) {
+              // We have a token in config, use that!
+              //
+              const data = {
+                session: authData.session,
+                type: nextStage,
+                 token: this.$config.registrationToken
+              };
+              submitStageData(resolve, reject, data);
+            } else {
+              this.step = steps.ENTER_TOKEN;
+              this.onTokenEntered = (token) => {
+                this.step = steps.CREATING;
+                const data = {
+                  session: authData.session,
+                  type: nextStage,
+                  token: token
+                };
+                submitStageData(resolve, reject, data);
+              };
+            }            
+            });
+          }
+          
         default:
           this.step = steps.EXTERNAL_AUTH;
           return new Promise((resolve, reject) => {