Fix getLink "next" button logic

Now, don't use the "onBlur" event, always load loginFlown from handleLogin.
This commit is contained in:
N-Pex 2023-10-31 13:01:53 +01:00
parent 80a002603a
commit d80cefd05d

View file

@ -5,20 +5,19 @@
<div class="getlink-title">{{ $t("getlink.title") }}</div> <div class="getlink-title">{{ $t("getlink.title") }}</div>
<div class="getlink-info">{{ $t("getlink.info") }}</div> <div class="getlink-info">{{ $t("getlink.info") }}</div>
<div color="rgba(255,255,255,0.1)" class="text-center"> <div color="rgba(255,255,255,0.1)" class="text-center">
<v-form v-model="isValid"> <v-form v-model="isValid" ref="form">
<v-text-field v-model="user.user_id" :label="$t('getlink.username')" color="black" background-color="white" solo <v-text-field v-model="user.user_id" :label="$t('getlink.username')" color="black" background-color="white" solo
:rules="[(v) => !!v || $t('login.username_required')]" :error="userErrorMessage != null" :rules="[(v) => !!v || $t('login.username_required')]" :error="userErrorMessage != null"
:error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter" v-on:keydown="hasError = false" :error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter" v-on:keydown="hasError = false"></v-text-field>
v-on:blur="onUsernameBlur"></v-text-field>
<div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> <!-- <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> -->
<div class="error--text" v-if="hasError">{{ this.message }}</div> <div class="error--text" v-if="hasError">{{ this.message }}</div>
<interactive-auth ref="interactiveAuth" /> <interactive-auth ref="interactiveAuth" />
<v-btn id="btn-login" :disabled="!isValid || loading" color="primary" depressed block <v-btn id="btn-login" :disabled="!isValid || loading" color="primary" depressed block @click.stop="handleLogin"
@click.stop="handleLogin" :loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn> :loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn>
<v-btn color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{ $t("menu.login") <v-btn color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{ $t("menu.login")
}}</v-btn> }}</v-btn>
</v-form> </v-form>
@ -30,12 +29,12 @@
<div class="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div> <div class="getlink-subtitle">{{ $t("getlink.ready_to_share") }}</div>
<copy-link ref="qr" :locationLink="directMessageLink" i18nQrPopupTitleKey="getlink.scan_title" <copy-link ref="qr" :locationLink="directMessageLink" i18nQrPopupTitleKey="getlink.scan_title"
v-on:long-tap="copyQRImage"> v-on:long-tap="copyQRImage">
<template v-slot:share> <template v-slot:share>
<div v-if="shareSupported" class="clickable getlink-share" @click="shareLink"> <div v-if="shareSupported" class="clickable getlink-share" @click="shareLink">
<div>{{ $t("getlink.share_qr") }}</div> <div>{{ $t("getlink.share_qr") }}</div>
<v-img src="@/assets/icons/ic_share.svg" /> <v-img src="@/assets/icons/ic_share.svg" />
</div> </div>
</template> </template>
</copy-link> </copy-link>
<div class="getlink-buttons"> <div class="getlink-buttons">
<v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn> <v-btn color="black" depressed @click.stop="goHome" class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
@ -113,6 +112,7 @@ export default {
// Reset // Reset
const obj = this.defaultData(); const obj = this.defaultData();
Object.keys(obj).forEach(k => this[k] = obj[k]); Object.keys(obj).forEach(k => this[k] = obj[k]);
this.$refs.form.reset();
}) })
}, },
goToLoginPage() { goToLoginPage() {
@ -143,40 +143,41 @@ export default {
this.loading = true; this.loading = true;
this.onUsernameBlur().then(() => this.loadLoginFlows().then(() => {
this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler })) return this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler })
})
.then( .then(
(ignoreduser) => { (ignoreduser) => {
this.$matrix.setUserDisplayName(userDisplayName); this.$matrix.setUserDisplayName(userDisplayName);
}, },
(error) => { (error) => {
this.message = this.message =
(error.data && error.data.error) || (error.data && error.data.error) ||
error.message || error.message ||
error.toString(); error.toString();
if (error.data && 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.message = this.$i18n.messages[this.$i18n.locale].login.invalid_message;
this.hasError = true; this.hasError = true;
} else if (error.data && error.data.errcode === 'M_USER_IN_USE') { } else if (error.data && error.data.errcode === 'M_USER_IN_USE') {
// Try again with (other/new) random chars appended // Try again with (other/new) random chars appended
user.user_id = utils.randomUser(prefix); user.user_id = utils.randomUser(prefix);
return this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler }).then( return this.$store.dispatch("createUser", { user, registrationFlowHandler: this.$refs.interactiveAuth.registrationFlowHandler }).then(
(ignoreduser) => { (ignoreduser) => {
this.$matrix.setUserDisplayName(userDisplayName); this.$matrix.setUserDisplayName(userDisplayName);
}, },
(error) => { (error) => {
this.message = this.message =
(error.data && error.data.error) || (error.data && error.data.error) ||
error.message || error.message ||
error.toString(); error.toString();
if (error.data && 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.message = this.$i18n.messages[this.$i18n.locale].login.invalid_message;
this.hasError = true; this.hasError = true;
}
} }
} );
); }
} })
})
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
}) })
@ -186,9 +187,9 @@ export default {
this.$navigation.push({ name: "CreateRoom" }); this.$navigation.push({ name: "CreateRoom" });
}, },
onUsernameEnter() { onUsernameEnter() {
this.onUsernameBlur(); this.handleLogin();
}, },
onUsernameBlur() { loadLoginFlows() {
var user = Object.assign({}, this.user); var user = Object.assign({}, this.user);
user.normalize(); user.normalize();
const server = user.home_server || this.$config.defaultServer; const server = user.home_server || this.$config.defaultServer;