itube-specs 0.0.439 → 0.0.440

package/components/auth/s-auth-register.vue

@@ -1,83 +1,90 @@
 <template>
-  <div
-      class="s-auth-register"
-      :class="{'_loading': loading}"
-  >
-    <SIcon
-        class="s-auth-register__icon"
-        name="user-circle"
-        size="40"
-    />
-    <p
-        v-if="additionalText"
-        class="s-auth-register__text"
-    >{{ t(additionalText) }}</p>
-    <SInput
-        v-model="form.username"
-        :label="t('auth.username')"
-        name="login-name"
-        :error="error.username"
-        @update:error="(val: boolean) => error.username = val"
-    />
-    <SInput
-        v-model="form.email"
-        :label="t('email')"
-        autocomplete="email"
-        :error="error.email"
-        @update:error="(val: boolean) => error.email = val"
-    />
-    <SInput
-        v-model="form.password_hash"
-        :label="t('auth.password')"
-        type="password"
-        :error="error.password_hash"
-        autocomplete="new-password"
-        @update:error="(val: boolean) => error.password_hash = val"
-    />
-
-    <div class="s-auth-register__buttons">
-      <SButton
-          :disabled="loading"
-          wide
-          size="l"
-          @click="submit"
-      >{{ t('auth.sign_up') }}
-      </SButton>
-      <SButton
-          wide
-          size="l"
-          theme="secondary"
-          @click="onLoginClick"
-      >{{ t('auth.log_in') }}
-      </SButton>
+  <ClientOnly>
+    <div
+        class="s-auth-register"
+        :class="{'_loading': loading}"
+    >
+      <SIcon
+          class="s-auth-register__icon"
+          name="user-circle"
+          size="40"
+      />
+      <p
+          v-if="additionalText"
+          class="s-auth-register__text"
+      >{{ t(additionalText) }}</p>
+      <SInput
+          v-model="form.username"
+          :label="t('auth.username')"
+          name="login-name"
+          :error="error.username"
+          @update:error="(val: boolean) => error.username = val"
+      />
+      <SInput
+          v-model="form.email"
+          :label="t('email')"
+          autocomplete="email"
+          :error="error.email"
+          @update:error="(val: boolean) => error.email = val"
+      />
+      <SInput
+          v-model="form.password_hash"
+          :label="t('auth.password')"
+          type="password"
+          :error="error.password_hash"
+          autocomplete="new-password"
+          @update:error="(val: boolean) => error.password_hash = val"
+      />
+
+      <div class="s-auth-register__buttons">
+        <SButton
+            :disabled="loading"
+            wide
+            size="l"
+            @click="submit"
+        >{{ t('auth.sign_up') }}
+        </SButton>
+        <SButton
+            wide
+            size="l"
+            theme="secondary"
+            @click="onLoginClick"
+        >{{ t('auth.log_in') }}
+        </SButton>
+      </div>
+
+      <p class="s-auth-register__agreement">{{ t('auth.agree_begin') }}
+        <NuxtLink
+            class="s-auth-register__agreement-link"
+            to="/terms"
+            target="_blank"
+        >{{ t('auth.agree_terms')}}
+        </NuxtLink>{{ t('auth.agree_and')}}
+        <NuxtLink
+            class="s-auth-register__agreement-link"
+            to="/policy"
+            target="_blank"
+        >{{ t('auth.agree_policy') }}
+        </NuxtLink>
+      </p>
     </div>
-
-    <p class="s-auth-register__agreement">{{ t('auth.agree_begin') }}
-      <NuxtLink
-          class="s-auth-register__agreement-link"
-          to="/terms"
-          target="_blank"
-      >{{ t('auth.agree_terms')}}
-      </NuxtLink>{{ t('auth.agree_and')}}<NuxtLink
-          class="s-auth-register__agreement-link"
-          to="/policy"
-          target="_blank"
-      >{{ t('auth.agree_policy') }}
-      </NuxtLink>
-    </p>
-  </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
 import type { IRegistrateForm } from '../../types';
 import { validateEmail, validatePassword, validateUsername } from '../../runtime';
 import { AuthorizationApiService } from '~/services/api/authorization.service';
+import { useReCaptcha } from 'vue-recaptcha-v3';
 
 defineProps<{
   additionalText?: string;
 }>()
 
-const {t} = useI18n();
+const { t } = useI18n();
+
+// Правильное использование composable для Vue 3
+const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 
 const form = ref({
   username: '',
@@ -104,8 +111,6 @@ const loading = ref(false);
 
 const { setErrorState, snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
 
-const { executeRecaptcha } = useGoogleRecaptcha();
-
 function validateForm(): boolean {
   const { username, email, password_hash } = form.value;
 
@@ -115,19 +120,12 @@ function validateForm(): boolean {
     password_hash: !validatePassword(password_hash),
   };
 
-  if (!validateEmail(email)) {
-    showErrorSnack('error_email');
-  }
-  if (!validatePassword(password_hash)) {
-    showErrorSnack('error_password');
-  }
-  if (!validateUsername(username)) {
-    showErrorSnack('error_username');
-  }
+  if (!validateEmail(email)) showErrorSnack('error_email');
+  if (!validatePassword(password_hash)) showErrorSnack('error_password');
+  if (!validateUsername(username)) showErrorSnack('error_username');
 
   error.value = errors;
 
-
   return !Object.values(errors).some(Boolean);
 }
 
@@ -140,14 +138,21 @@ async function submit() {
 
   try {
     loading.value = true;
-    const { token } = await executeRecaptcha('submit');
-    form.value.token = token || '';
+
+    // Здесь происходит lazy-загрузка скрипта reCAPTCHA (только при submit!)
+    await recaptchaLoaded();
+     // имя действия для Google Analytics
+    form.value.token = await executeRecaptcha('register');
+
     await useUser(AuthorizationApiService).register(form.value);
+
     useAuthPopup().closeAuthPopup();
     snackbarTheme.value = 'success';
     snackbarText.value = 'Registration success';
   } catch (err) {
     setErrorState(err);
+    // Опционально: обработка ошибки reCAPTCHA (например, если загрузка не удалась)
+    console.error('reCAPTCHA error:', err);
   } finally {
     loading.value = false;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.439",
+  "version": "0.0.440",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@vueform/slider": "2.1.10",
-    "@vueuse/core": "12.8.2"
+    "@vueuse/core": "12.8.2",
+    "vue-recaptcha-v3": "^2.0.1"
   }
 }