Support authentication flows for login/register

src/components/CreateRoom.vue

@@ -39,8 +39,8 @@
             background-color="white" v-on:keyup.enter="$refs.topic.focus()" :disabled="step > steps.INITIAL" autofocus
             solo @update:error="updateErrorState"></v-text-field>
           <div class="text-left font-weight-light" v-show="roomName.length > 0">{{ $t("new_room.room_topic") }}</div>
-          <v-text-field v-model="roomTopic" v-show="roomName.length > 0" color="black" background-color="white"
-            v-on:keyup.enter="$refs.create.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
+          <v-text-field v-model="roomTopic" v-show="roomName.length > 0" ref="topic" color="black" background-color="white"
+            v-on:keyup.enter="$refs.create.$el.focus()" :disabled="step > steps.INITIAL" solo></v-text-field>
 
           <!-- Our only option right now is voice mode, so if not enabled, hide the 'options' drop down as well -->
           <template v-if="$config.experimental_voice_mode || $config.experimental_read_only_room">
@@ -71,7 +71,7 @@
 
           <div class="error--text" v-if="roomCreationErrorMsg"> {{ roomCreationErrorMsg }}</div>
           <v-btn id="btn-room-create" color="black" depressed class="filled-button" @click.stop="onCreate"
-            :disabled="isDisabled">
+            :disabled="isDisabled" ref="create">
             <div v-if="status && !enterRoomDialog" class="text-center">
               {{ status }}
               <v-progress-circular v-if="step == steps.CREATING" indeterminate color="primary"
@@ -83,91 +83,8 @@
       </v-row>
     </v-container>
 
-    <v-fade-transition>
-      <!-- <div class="section ma-3" flat v-if="step > steps.INITIAL"> -->
-      <!--    <div class="h4 text-left">{{ $t("new_room.join_permissions") }}</div>
-            <div class="h2 text-left">
-              {{ $t("new_room.set_join_permissions") }}
-            </div>
-            <div>{{ $t("new_room.join_permissions_info") }}</div>
-            <v-select
-              :disabled="step >= steps.CREATING"
-              :items="joinRules"
-              class="mt-4"
-              v-model="joinRule"
-              item-value="id"
-            >
-              <template v-slot:selection="{ item }">
-                {{ item.text }}
-              </template>
-              <template v-slot:item="{ item, attrs, on }">
-                <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
-                  <v-list-item-avatar>
-                    <v-icon class="grey lighten-1" dark>{{ item.icon }}</v-icon>
-                  </v-list-item-avatar>
-                  <v-list-item-content>
-                    <v-list-item-title v-text="item.text"></v-list-item-title>
-                    <v-list-item-subtitle
-                      v-text="item.descr"
-                    ></v-list-item-subtitle>
-                  </v-list-item-content>
-                  <v-list-item-action>
-                    <v-btn icon v-if="active">
-                      <v-icon color="grey lighten-1">check</v-icon>
-                    </v-btn>
-                  </v-list-item-action>
-                </v-list-item>
-              </template>
-            </v-select>
+    <interactive-auth ref="interactiveAuth" />
 
-            <v-divider style="margin-bottom: 20px" />
-
-            <v-text-field
-              v-if="publicRoomLink"
-              :value="publicRoomLink"
-              class="room-link"
-              readonly
-              filled
-              background-color="transparent"
-              append-icon="content_copy"
-              type="text"
-              @click:append.stop="copyRoomLink"
-            ></v-text-field>
-            <v-btn
-              v-else-if="joinRule == 'public'"
-              :loading="step == steps.CREATING"
-              block
-              depressed
-              class="outlined-button"
-              @click.stop="getPublicLink"
-              ><v-icon class="me-2">link</v-icon
-              >{{ $t("new_room.get_link") }}</v-btn
-            >
-            <v-btn
-              v-else-if="joinRule == 'invite'"
-              block
-              depressed
-              class="outlined-button"
-              @click.stop="addPeople"
-              ><v-icon class="me-2">person_add</v-icon
-              >{{ $t("new_room.add_people") }}</v-btn
-            >
-
-            <div v-if="publicRoomLinkCopied" class="link-copied">
-              {{ $t("new_room.link_copied") }}
-            </div>
-    -->
-      <!-- <div v-if="status && !enterRoomDialog" class="text-center">
-            <v-progress-circular
-              v-if="step == steps.CREATING"
-              indeterminate
-              color="primary"
-              size="20"
-            ></v-progress-circular>
-            {{ status }}
-          </div> -->
-      <!-- </div> -->
-    </v-fade-transition>
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
       accept="image/*" class="d-none" />
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
@@ -214,6 +131,7 @@
 
 <script>
 import util, { ROOM_TYPE_VOICE_MODE } from "../plugins/utils";
+import InteractiveAuth from './InteractiveAuth.vue';
 import rememberMeMixin from "./rememberMeMixin";
 
 const steps = Object.freeze({
@@ -225,6 +143,7 @@ const steps = Object.freeze({
 
 export default {
   name: "CreateRoom",
+  components: { InteractiveAuth },
   mixins: [rememberMeMixin],
   data() {
     return {
@@ -306,7 +225,7 @@ export default {
         return false;
       }
       return true;
-    }
+    },
   },
 
   methods: {
@@ -456,7 +375,7 @@ export default {
       }
 
       return this.$matrix
-        .getLoginPromise()
+        .getLoginPromise(this.$refs.interactiveAuth.registrationFlowHandler)
         .then(
           function (user) {
             if (user.is_guest && !hasUser) {
@@ -628,7 +547,7 @@ export default {
     showAvatarPickerList() {
       this.$refs.avatar.$refs.input.click();
     },
-  },
+  }
 };
 </script>