feat: アカウントを作成ポップアップに戻るボタンを追加

CHANGELOG_CHERRYPICK.md

@@ -28,6 +28,7 @@
 - 계정 초기 설정 마법사에 흐림 효과 설정 추가
 - 계정 초기 설정 마법사에 MFM 및 움직이는 이미지 설정 추가
 - 계정 초기 설정 마법사를 완료하면 페이지를 새로 고치도록 (일부 옵션이 페이지를 새로 고쳐야만 반영되므로)
+- 계정 생성 팝업에 뒤로 가기 버튼 추가
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제
 - Fix: 일부 옵션 변경 시 페이지를 새로 고치도록

cypress/e2e/basic.cy.js

@@ -64,6 +64,7 @@ describe('After setup instance', () => {
 		cy.get('[data-cy-signup-submit]').should('be.disabled');
 		cy.get('[data-cy-signup-password-retype] input').type('alice1234');
 		cy.get('[data-cy-signup-submit]').should('not.be.disabled');
+		cy.get('[data-cy-signup-back]').click();
 		cy.get('[data-cy-signup-submit]').click();
 
 		cy.wait('@signup');

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -59,12 +59,15 @@
 			<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :class="$style.captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
 			<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" :class="$style.captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
-			<MkButton type="submit" :disabled="shouldDisableSubmitting" large gradate rounded data-cy-signup-submit style="margin: 0 auto;">
-				<template v-if="submitting">
-					<MkLoading :em="true" :colored="false"/>
-				</template>
-				<template v-else>{{ i18n.ts.start }}</template>
-			</MkButton>
+			<div class="_buttonsCenter">
+				<MkButton inline rounded data-cy-signup-back @click="goBack"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+				<MkButton type="submit" :disabled="shouldDisableSubmitting" inline gradate rounded data-cy-signup-submit>
+					<template v-if="submitting">
+						<MkLoading :em="true" :colored="false"/>
+					</template>
+					<template v-else>{{ i18n.ts.start }}</template>
+				</MkButton>
+			</div>
 		</form>
 	</MkSpacer>
 </div>
@@ -93,6 +96,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	(ev: 'signup', user: Record<string, any>): void;
 	(ev: 'signupEmailPending'): void;
+	(ev: 'back'): void;
 }>();
 
 const host = toUnicode(config.host);
@@ -117,6 +121,8 @@ let turnstileResponse = $ref(null);
 let usernameAbortController: null | AbortController = $ref(null);
 let emailAbortController: null | AbortController = $ref(null);
 
+let back: boolean = $ref(false);
+
 const shouldDisableSubmitting = $computed((): boolean => {
 	return submitting ||
 		instance.enableHcaptcha && !hCaptchaResponse ||
@@ -211,36 +217,48 @@ function onChangePasswordRetype(): void {
 	passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
 }
 
+function goBack() {
+	back = true;
+	emit('back');
+}
+
 async function onSubmit(): Promise<void> {
 	if (submitting) return;
 	submitting = true;
 
 	try {
-		await os.api('signup', {
-			username,
-			password,
-			emailAddress: email,
-			invitationCode,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
-			'turnstile-response': turnstileResponse,
-		});
-		if (instance.emailRequiredForSignup) {
-			os.alert({
-				type: 'success',
-				title: i18n.ts._signup.almostThere,
-				text: i18n.t('_signup.emailSent', { email }),
-			});
-			emit('signupEmailPending');
+		if (back) {
+			submitting = false;
+			hcaptcha?.reset?.();
+			recaptcha?.reset?.();
+			turnstile?.reset?.();
 		} else {
-			const res = await os.api('signin', {
+			await os.api('signup', {
 				username,
 				password,
+				emailAddress: email,
+				invitationCode,
+				'hcaptcha-response': hCaptchaResponse,
+				'g-recaptcha-response': reCaptchaResponse,
+				'turnstile-response': turnstileResponse,
 			});
-			emit('signup', res);
+			if (instance.emailRequiredForSignup) {
+				os.alert({
+					type: 'success',
+					title: i18n.ts._signup.almostThere,
+					text: i18n.t('_signup.emailSent', { email }),
+				});
+				emit('signupEmailPending');
+			} else {
+				const res = await os.api('signin', {
+					username,
+					password,
+				});
+				emit('signup', res);
 
-			if (props.autoSet) {
-				return login(res.i);
+				if (props.autoSet) {
+					return login(res.i);
+				}
 			}
 		}
 	} catch {

packages/frontend/src/components/MkSignupDialog.vue

@@ -20,7 +20,7 @@
 				<XServerRules @done="isAcceptedServerRule = true" @cancel="dialog.close()"/>
 			</template>
 			<template v-else>
-				<XSignup :autoSet="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
+				<XSignup :autoSet="autoSet" @back="isAcceptedServerRule = false" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
 			</template>
 		</Transition>
 	</div>