Support the "m.login.registration_token" login flow

README.md

@@ -50,7 +50,7 @@ The app loads runtime configutation from the server at "./config.json" and merge
     The following values can be set via the config file:
 
 * **logo**  -   An url or base64-encoded image data url that represents the app logotype.
-* **accentColor**   -   The accent color of the app UI.
+* **accentColor**   -   The accent color of the app UI. Use a HTML-style color value string, like "#ff0080".
 * **show_status_messages**  -   Whether to show only user joins/leaves and display name updates, or the full range of room status updates. Possible values are "never" (only the above), "moderators" (moderators will see all status updates) or "always" (everyone will see all status updates). Defaults to "always".
 
 

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) => {