Merge branch 'develop' into feat/shopify-app-store-install-flow

app/javascript/v3/App.vue

@@ -35,7 +35,9 @@ export default {
       };
     },
     setLocale(locale) {
-      this.$root.$i18n.locale = locale;
+      if (locale) {
+        this.$root.$i18n.locale = locale;
+      }
     },
   },
 };

app/javascript/v3/api/auth.js

@@ -59,7 +59,6 @@ export const register = async creds => {
       password: creds.password,
       h_captcha_client_response: creds.hCaptchaClientResponse,
     });
-    setAuthCredentials(response);
     return response.data;
   } catch (error) {
     throwErrorMessage(error);
@@ -67,6 +66,13 @@ export const register = async creds => {
   return null;
 };
 
+export const resendConfirmation = async ({ email, hCaptchaClientResponse }) => {
+  return wootAPI.post('resend_confirmation', {
+    email,
+    h_captcha_client_response: hCaptchaClientResponse,
+  });
+};
+
 export const verifyPasswordToken = async ({ confirmationToken }) => {
   try {
     const response = await wootAPI.post('auth/confirmation', {

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -4,8 +4,8 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import { useAlert } from 'dashboard/composables';
-import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
@@ -19,6 +19,7 @@ const MIN_PASSWORD_LENGTH = 6;
 
 const store = useStore();
 const { t } = useI18n();
+const router = useRouter();
 
 const hCaptcha = ref(null);
 const isPasswordFocused = ref(false);
@@ -76,7 +77,10 @@ const performRegistration = async () => {
   isSignupInProgress.value = true;
   try {
     await register(credentials);
-    window.location = DEFAULT_REDIRECT_URL;
+    router.push({
+      name: 'auth_verify_email',
+      state: { email: credentials.email },
+    });
   } catch (error) {
     const errorMessage = error?.message || t('REGISTER.API.ERROR_MESSAGE');
     if (globalConfig.value.hCaptchaSiteKey) {

app/javascript/v3/views/auth/verify-email/Index.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import { resendConfirmation } from '../../../api/auth';
+
+const props = defineProps({
+  email: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+const router = useRouter();
+const store = useStore();
+
+if (!props.email) {
+  router.push({ name: 'login' });
+}
+
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+const isResendingEmail = ref(false);
+const hCaptcha = ref(null);
+let captchaToken = '';
+
+const performResend = async () => {
+  isResendingEmail.value = true;
+  try {
+    await resendConfirmation({
+      email: props.email,
+      hCaptchaClientResponse: captchaToken,
+    });
+    useAlert(t('REGISTER.VERIFY_EMAIL.RESEND_SUCCESS'));
+  } catch {
+    useAlert(t('REGISTER.VERIFY_EMAIL.RESEND_ERROR'));
+  } finally {
+    isResendingEmail.value = false;
+    captchaToken = '';
+    if (globalConfig.value.hCaptchaSiteKey) {
+      hCaptcha.value.reset();
+    }
+  }
+};
+
+const handleResendEmail = () => {
+  if (isResendingEmail.value) return;
+  if (globalConfig.value.hCaptchaSiteKey) {
+    hCaptcha.value.execute();
+  } else {
+    performResend();
+  }
+};
+
+const onCaptchaVerified = token => {
+  captchaToken = token;
+  performResend();
+};
+
+const onCaptchaError = () => {
+  isResendingEmail.value = false;
+  captchaToken = '';
+  hCaptcha.value.reset();
+};
+</script>
+
+<template>
+  <main
+    class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <section
+      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+    >
+      <div class="mb-6">
+        <h2 class="text-2xl font-semibold text-n-slate-12">
+          {{ $t('REGISTER.VERIFY_EMAIL.TITLE') }}
+        </h2>
+        <p class="mt-2 text-sm text-n-slate-11">
+          {{ $t('REGISTER.VERIFY_EMAIL.DESCRIPTION', { email }) }}
+        </p>
+      </div>
+      <div class="space-y-4">
+        <VueHcaptcha
+          v-if="globalConfig.hCaptchaSiteKey"
+          ref="hCaptcha"
+          size="invisible"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onCaptchaVerified"
+          @error="onCaptchaError"
+          @expired="onCaptchaError"
+          @challenge-expired="onCaptchaError"
+          @closed="onCaptchaError"
+        />
+        <NextButton
+          lg
+          type="button"
+          data-testid="resend_email_button"
+          class="w-full"
+          :label="$t('REGISTER.VERIFY_EMAIL.RESEND')"
+          :is-loading="isResendingEmail"
+          @click="handleResendEmail"
+        />
+      </div>
+    </section>
+  </main>
+</template>

app/javascript/v3/views/routes.js

@@ -5,6 +5,7 @@ import SamlLogin from './login/Saml.vue';
 import Signup from './auth/signup/Index.vue';
 import ResetPassword from './auth/reset/password/Index.vue';
 import Confirmation from './auth/confirmation/Index.vue';
+import VerifyEmail from './auth/verify-email/Index.vue';
 import PasswordEdit from './auth/password/Edit.vue';
 
 export default [
@@ -49,6 +50,15 @@ export default [
       redirectUrl: route.query.route_url,
     }),
   },
+  {
+    path: frontendURL('auth/verify-email'),
+    name: 'auth_verify_email',
+    component: VerifyEmail,
+    meta: { ignoreSession: true },
+    props: () => ({
+      email: window.history.state?.email || '',
+    }),
+  },
   {
     path: frontendURL('auth/password/edit'),
     name: 'auth_password_edit',