fix(frontend/MkSignup): prevent uncaught errors from interrupted signup (#10265)

* fix(frontend/MkSignup): prevent uncaught errors from interrupted signup

* nullable sitekey

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
Kagami Sascha Rosylight 2023-03-11 06:32:13 +01:00 committed by GitHub
parent 4e7e377987
commit 1ea4469bec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 28 deletions

View file

@ -10,7 +10,8 @@ import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from 'vu
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
type Captcha = { // APIs provided by Captcha services
export type Captcha = {
render(container: string | Node, options: { render(container: string | Node, options: {
readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown; readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
}): string; }): string;
@ -32,7 +33,7 @@ declare global {
const props = defineProps<{ const props = defineProps<{
provider: CaptchaProvider; provider: CaptchaProvider;
sitekey: string; sitekey: string | null; // null will show error on request
modelValue?: string | null; modelValue?: string | null;
}>(); }>();

View file

@ -72,7 +72,7 @@ import { toUnicode } from 'punycode/';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import MkInput from './MkInput.vue'; import MkInput from './MkInput.vue';
import MkSwitch from './MkSwitch.vue'; import MkSwitch from './MkSwitch.vue';
import MkCaptcha from '@/components/MkCaptcha.vue'; import MkCaptcha, { type Captcha } from '@/components/MkCaptcha.vue';
import * as config from '@/config'; import * as config from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { login } from '@/account'; import { login } from '@/account';
@ -92,9 +92,9 @@ const emit = defineEmits<{
const host = toUnicode(config.host); const host = toUnicode(config.host);
let hcaptcha = $ref(); let hcaptcha = $ref<Captcha | undefined>();
let recaptcha = $ref(); let recaptcha = $ref<Captcha | undefined>();
let turnstile = $ref(); let turnstile = $ref<Captcha | undefined>();
let username: string = $ref(''); let username: string = $ref('');
let password: string = $ref(''); let password: string = $ref('');
@ -208,19 +208,20 @@ function onChangePasswordRetype(): void {
passwordRetypeState = password === retypedPassword ? 'match' : 'not-match'; passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
} }
function onSubmit(): void { async function onSubmit(): Promise<void> {
if (submitting) return; if (submitting) return;
submitting = true; submitting = true;
os.api('signup', { try {
username, await os.api('signup', {
password, username,
emailAddress: email, password,
invitationCode, emailAddress: email,
'hcaptcha-response': hCaptchaResponse, invitationCode,
'g-recaptcha-response': reCaptchaResponse, 'hcaptcha-response': hCaptchaResponse,
'turnstile-response': turnstileResponse, 'g-recaptcha-response': reCaptchaResponse,
}).then(() => { 'turnstile-response': turnstileResponse,
});
if (instance.emailRequiredForSignup) { if (instance.emailRequiredForSignup) {
os.alert({ os.alert({
type: 'success', type: 'success',
@ -229,28 +230,27 @@ function onSubmit(): void {
}); });
emit('signupEmailPending'); emit('signupEmailPending');
} else { } else {
os.api('signin', { const res = await os.api('signin', {
username, username,
password, password,
}).then(res => {
emit('signup', res);
if (props.autoSet) {
login(res.i);
}
}); });
emit('signup', res);
if (props.autoSet) {
return login(res.i);
}
} }
}).catch(() => { } catch {
submitting = false; submitting = false;
hcaptcha.reset?.(); hcaptcha?.reset?.();
recaptcha.reset?.(); recaptcha?.reset?.();
turnstile.reset?.(); turnstile?.reset?.();
os.alert({ os.alert({
type: 'error', type: 'error',
text: i18n.ts.somethingHappened, text: i18n.ts.somethingHappened,
}); });
}); }
} }
</script> </script>