From be5dcf015df1a0bdfa6b9ddf7d8e9322791d53a8 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 26 May 2023 17:44:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=82=A2=E3=82=AB=E3=82=A6=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E4=BD=9C=E6=88=90=E3=83=9D=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=82=A2=E3=83=83=E3=83=97=E3=81=AB=E6=88=BB=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 cypress/e2e/basic.cy.js                       |  1 +
 .../src/components/MkSignupDialog.form.vue    | 70 ++++++++++++-------
 .../src/components/MkSignupDialog.vue         |  2 +-
 4 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index d8c073250d..3b2bb6b79e 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -28,6 +28,7 @@
 - 계정 초기 설정 마법사에 흐림 효과 설정 추가
 - 계정 초기 설정 마법사에 MFM 및 움직이는 이미지 설정 추가
 - 계정 초기 설정 마법사를 완료하면 페이지를 새로 고치도록 (일부 옵션이 페이지를 새로 고쳐야만 반영되므로)
+- 계정 생성 팝업에 뒤로 가기 버튼 추가
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제
 - Fix: 위젯 편집 종료 버튼이 여러 개 있는 문제
 - Fix: 일부 옵션 변경 시 페이지를 새로 고치도록
diff --git a/cypress/e2e/basic.cy.js b/cypress/e2e/basic.cy.js
index 652e0c2d70..21f77a9288 100644
--- a/cypress/e2e/basic.cy.js
+++ b/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');
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 472269abaf..3736eecae0 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/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 {
diff --git a/packages/frontend/src/components/MkSignupDialog.vue b/packages/frontend/src/components/MkSignupDialog.vue
index d8d002fdb6..9c27b3c40c 100644
--- a/packages/frontend/src/components/MkSignupDialog.vue
+++ b/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>