From 312536f66dfc5252ba15fbe55087ae269877cdd4 Mon Sep 17 00:00:00 2001 From: Helianthella Date: Tue, 22 Dec 2020 10:22:57 -0500 Subject: fix registration and account recovery MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On Vue 3, ref names and v-model names are both assigned to the scope of the component, unlike in Vue 2, where refs were only registered on vm.$refs. This means if you have a the ref will override the model and thus the model will not work. This is, of course, undocumented in the migration guide 🙄 --- src/views/AccountRecovery.vue | 22 +++++++++++----------- src/views/Registration.vue | 18 +++++++++--------- 2 files changed, 20 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/views/AccountRecovery.vue b/src/views/AccountRecovery.vue index 492c85e..2ef988f 100644 --- a/src/views/AccountRecovery.vue +++ b/src/views/AccountRecovery.vue @@ -54,7 +54,7 @@
- +
@@ -99,7 +99,7 @@
- +
@@ -118,12 +118,12 @@
- +
- +
@@ -214,9 +214,9 @@ export default class Recovery extends Vue { reCAPTCHA.instance.reset(); if (this.step == 1) { - (this.$refs.email as HTMLInputElement).focus(); + (this.$refs._email as HTMLInputElement).focus(); } else if (this.step == 4) { - (this.$refs.user as HTMLInputElement).focus(); + (this.$refs._user as HTMLInputElement).focus(); } } } @@ -230,9 +230,9 @@ export default class Recovery extends Vue { await this.$nextTick(); if (this.step == 1) { - (this.$refs.email as HTMLInputElement).focus(); + (this.$refs._email as HTMLInputElement).focus(); } else if (this.step == 4) { - (this.$refs.user as HTMLInputElement).focus(); + (this.$refs._user as HTMLInputElement).focus(); } } catch (err) { this.step = -1 @@ -295,7 +295,7 @@ export default class Recovery extends Vue { this.step = 1; reCAPTCHA.instance.reset(); await this.$nextTick(); - (this.$refs.email as HTMLInputElement).focus(); + (this.$refs._email as HTMLInputElement).focus(); break; case 408: this.step = -2; @@ -327,7 +327,7 @@ export default class Recovery extends Vue { // TODO: check if the token is valid for this username this.step = reCAPTCHA.isReady ? 5 : -1; await this.$nextTick(); - (this.$refs.password as HTMLInputElement).focus(); + (this.$refs._password as HTMLInputElement).focus(); } // TODO: this is not compatible with Edge! we must polyfill @@ -375,7 +375,7 @@ export default class Recovery extends Vue { this.exposed = true; await this.$nextTick(); - (this.$refs.password as HTMLInputElement).focus(); + (this.$refs._password as HTMLInputElement).focus(); } else { this.exposed = false; this.step = 6; diff --git a/src/views/Registration.vue b/src/views/Registration.vue index 214288b..e220dc2 100644 --- a/src/views/Registration.vue +++ b/src/views/Registration.vue @@ -57,7 +57,7 @@ If you did not provide an email address you will be unable to perform password resets.

- +
@@ -74,7 +74,7 @@
- +
@@ -93,12 +93,12 @@
- +
- +
@@ -181,7 +181,7 @@ export default class Registration extends Vue { await reCAPTCHA.load(); this.step = 1; await this.$nextTick(); - (this.$refs.email as HTMLInputElement).focus(); + (this.$refs._email as HTMLInputElement).focus(); } catch (err) { this.step = -1 } @@ -190,14 +190,14 @@ export default class Registration extends Vue { async checkEmail () { this.step = 2; await this.$nextTick(); - (this.$refs.user as HTMLInputElement).focus(); + (this.$refs._user as HTMLInputElement).focus(); } async checkUser () { // TODO: check here whether the username is taken this.step = 3; await this.$nextTick(); - (this.$refs.password as HTMLInputElement).focus(); + (this.$refs._password as HTMLInputElement).focus(); } // TODO: this is not compatible with Edge! we must polyfill @@ -245,7 +245,7 @@ export default class Registration extends Vue { this.exposed = true; await this.$nextTick(); - (this.$refs.password as HTMLInputElement).focus(); + (this.$refs._password as HTMLInputElement).focus(); } else { this.exposed = false; this.step = 4; @@ -303,7 +303,7 @@ export default class Registration extends Vue { this.taken = true; this.step = 2; await this.$nextTick(); - (this.$refs.user as HTMLInputElement).focus(); + (this.$refs._user as HTMLInputElement).focus(); break; case 429: self.alert("Too many requests.\nPlease try again later"); -- cgit v1.2.3-70-g09d2