summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorHelianthella <git@gumi.ca>2020-12-22 10:22:57 -0500
committerHelianthella <git@gumi.ca>2020-12-22 10:23:00 -0500
commit312536f66dfc5252ba15fbe55087ae269877cdd4 (patch)
treebc475e8170bbc7d820e06aa5e16833ccd0472338 /src
parentad5fe7efc9eab0887b4024ccf50644b00ff866c3 (diff)
downloadwebsite-312536f66dfc5252ba15fbe55087ae269877cdd4.tar.gz
website-312536f66dfc5252ba15fbe55087ae269877cdd4.tar.bz2
website-312536f66dfc5252ba15fbe55087ae269877cdd4.tar.xz
website-312536f66dfc5252ba15fbe55087ae269877cdd4.zip
fix registration and account recovery
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 <input v-model="blah" ref="blah"> the ref will override the model and thus the model will not work. This is, of course, undocumented in the migration guide 🙄
Diffstat (limited to 'src')
-rw-r--r--src/views/AccountRecovery.vue22
-rw-r--r--src/views/Registration.vue18
2 files changed, 20 insertions, 20 deletions
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 @@
<form @submit.prevent="checkEmail">
<label for="email">Enter your email address:</label>
- <input @input="notFound = false" v-model="user.email" type="email" maxlength="39" id="email" ref="email" placeholder="you@mail.com" required>
+ <input @input="notFound = false" v-model="user.email" type="email" maxlength="39" id="email" ref="_email" placeholder="you@mail.com" required>
<button type="submit">Next step &rarr;</button>
</form>
</div>
@@ -99,7 +99,7 @@
<form @submit.prevent="checkUser">
<label for="user">Enter a username:</label>
- <input v-model="user.name" type="text" id="user" ref="user" placeholder="type your username here" minlength="4" maxlength="23" pattern="^[a-zA-Z0-9]{4,23}$" title="4-23 characters, alphanumeric" required>
+ <input v-model="user.name" type="text" id="user" ref="_user" placeholder="type your username here" minlength="4" maxlength="23" pattern="^[a-zA-Z0-9]{4,23}$" title="4-23 characters, alphanumeric" required>
<button type="submit" v-if="user.name.length >= 4">Next step &rarr;</button>
</form>
</div>
@@ -118,12 +118,12 @@
<form @submit.prevent="checkPassword">
<div class="pass-box">
<label for="password">Choose a unique password:</label>
- <input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
+ <input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="_password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
<span @click="visible = !visible"></span>
</div>
<div class="pass-box">
<label for="password2">Confirm your password:</label>
- <input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
+ <input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="_password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
<span @click="visible = !visible"></span>
</div>
<button type="submit" v-if="user.pwd && user.pwd === user.pwd2">Next step &rarr;</button>
@@ -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.</p>
<form @submit.prevent="checkEmail">
<label for="email">Enter your email (optional):</label>
- <input v-model="user.email" type="email" maxlength="39" id="email" ref="email" placeholder="your@email.com">
+ <input v-model="user.email" type="email" maxlength="39" id="email" ref="_email" placeholder="your@email.com">
<button type="submit">Next step &rarr;</button>
</form>
</div>
@@ -74,7 +74,7 @@
<form @submit.prevent="checkUser">
<label for="user">Choose a username:</label>
- <input @input="taken = false" v-model="user.name" type="text" id="user" ref="user" placeholder="type your username here" minlength="4" maxlength="23" pattern="^[a-zA-Z0-9]{4,23}$" title="4-23 characters, alphanumeric" required>
+ <input @input="taken = false" v-model="user.name" type="text" id="user" ref="_user" placeholder="type your username here" minlength="4" maxlength="23" pattern="^[a-zA-Z0-9]{4,23}$" title="4-23 characters, alphanumeric" required>
<button type="submit" v-if="user.name">Next step &rarr;</button>
</form>
</div>
@@ -93,12 +93,12 @@
<form @submit.prevent="checkPassword">
<div class="pass-box">
<label for="password">Choose a unique password:</label>
- <input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
+ <input v-model="user.pwd" :type="visible ? 'text' : 'password'" id="password" ref="_password" placeholder="type your password here" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
<span @click="visible = !visible"></span>
</div>
<div class="pass-box">
<label for="password2">Confirm your password:</label>
- <input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
+ <input v-model="user.pwd2" :type="visible ? 'text' : 'password'" id="password2" ref="_password2" placeholder="type your password again" minlength="8" maxlength="23" pattern="^[a-zA-Z0-9]{8,23}$" title="8-23 characters, alphanumeric" required>
<span @click="visible = !visible"></span>
</div>
<button type="submit" v-if="user.pwd && user.pwd === user.pwd2">Next step &rarr;</button>
@@ -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");