itube-specs 0.0.776 → 0.0.778

package/components/auth/login.vue

@@ -0,0 +1,183 @@
+<template>
+  <div :class="{ _loading: loading }"
+       class="auth-login"
+  >
+    <AuthIcon class="auth-login__icon" />
+
+    <UiInput v-model="form.username"
+             :label="t('auth.username')"
+             :placeholder="t('auth.username')"
+             hide-label
+             :error="error.username"
+             name="login-name"
+             enterkeyhint="next"
+             @update:error="(val: boolean) => (error.username = val)"
+             @enter="passwordRef?.focus()"
+    />
+    <UiInput ref="passwordRef"
+             v-model="form.password_hash"
+             :label="t('auth.password')"
+             :placeholder="t('auth.password')"
+             hide-label
+             :error="error.password_hash"
+             type="password"
+             enterkeyhint="go"
+             @update:error="(val: boolean) => (error.password_hash = val)"
+             @enter="login"
+    />
+
+    <div class="auth-login__buttons">
+      <UiBtn :disabled="loading"
+             class="auth-login__login"
+             wide
+             size="l"
+             theme="primary"
+             @click="login"
+      >{{ t("auth.log_in") }}
+      </UiBtn>
+      <button class="auth-login__forgot"
+              type="button"
+              @click="onForgotClick"
+      >
+        {{ t("auth.forgot") }}
+      </button>
+
+      <p class="auth-login__back">
+        {{ t("register_text") }}
+        <button class="auth-login__back-button"
+                type="button"
+                @click="onCreateClick"
+        >
+          {{ t("auth.sign_up") }}
+        </button>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { validatePassword, validateUsername } from '../../runtime';
+import { AuthorizationApiService } from '../../services/api/authorization.service';
+
+const { t } = useI18n();
+
+const passwordRef = ref();
+
+const form = ref({
+  username: '',
+  password_hash: '',
+});
+
+const error = ref({
+  username: false,
+  password_hash: false,
+});
+
+const emit = defineEmits<{
+  (eventName: 'forgot'): void;
+  (eventName: 'create'): void;
+}>();
+
+function onForgotClick() {
+  emit('forgot');
+}
+
+function onCreateClick() {
+  emit('create');
+}
+
+const loading = ref(false);
+
+const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+
+async function login() {
+  resetSnackbar();
+  error.value.username = false;
+  error.value.password_hash = false;
+
+  if (!validateUsername(form.value.username)) {
+    error.value.username = true;
+    showError('error_username');
+  }
+  if (!validatePassword(form.value.password_hash)) {
+    error.value.password_hash = true;
+    showError('error_password');
+  }
+
+  if (!error.value.username && !error.value.password_hash) {
+    try {
+      loading.value = true;
+      await useUser(AuthorizationApiService).login(form.value);
+      useAuthPopup().closeAuthPopup();
+      showSuccess('Welcome back!');
+    } catch (error) {
+      setErrorState(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.auth-login {
+  row-gap: 16px;
+  display: grid;
+  align-items: start;
+
+  @include from-br(sm) {
+    row-gap: 8px;
+  }
+}
+
+.auth-login._loading {
+  @include from-br(sm) {
+    cursor: wait;
+  }
+}
+
+.auth-login__icon {
+  margin: 0 auto;
+}
+
+.auth-login__buttons {
+  display: grid;
+  padding-top: 24px;
+  border-top: 1px solid $auth-login-border;
+}
+
+.auth-login__login {
+  margin-bottom: 16px;
+}
+
+.auth-login .ui-input:nth-last-child(1 of .ui-input) {
+  padding-bottom: 12px;
+}
+
+.auth-login__back {
+  @include font-sm;
+
+  text-align: center;
+  color: $auth-login-back;
+}
+
+.auth-login__back-button {
+  color: $auth-login-back-link;
+
+  @include hover(color) {
+    color: $auth-login-back-link--hover;
+  }
+}
+
+.auth-login__forgot {
+  @include font-base;
+
+  color: $auth-login-forgot;
+  margin-bottom: 12px;
+  padding-block: 8px;
+
+  @include hover(color) {
+    color: $auth-login-forgot--hover;
+  }
+}
+</style>

package/components/auth/popup.vue

@@ -0,0 +1,87 @@
+<template>
+  <div v-if="isAuthPopupOpen"
+       class="auth-popup__decorate"
+  />
+  <transition mode="out-in">
+    <UiPopup v-if="currentStep === AuthSteps.Registration && isAuthPopupOpen"
+             v-model="isAuthPopupOpen"
+             transparent-backdrop
+             :back="isBackShow"
+             class="auth-popup"
+             @back="currentStep -= 1"
+    >
+      <template #title>{{  $t('auth.create_new') }}</template>
+      <AuthRegister :additional-text="additionalText"
+                    @login="onLoginClick"
+      />
+    </UiPopup>
+  </transition>
+
+  <transition mode="out-in">
+    <UiPopup v-if="currentStep === AuthSteps.Login && isAuthPopupOpen"
+             v-model="isAuthPopupOpen"
+             transparent-backdrop
+             :back="isBackShow"
+             class="auth-popup"
+             @back="currentStep -= 1"
+    >
+      <template #title>{{  $t('auth.welcome_back') }}</template>
+      <AuthLogin @forgot="onRecoveryClick"
+                 @create="currentStep -= 1"
+      />
+    </UiPopup>
+  </transition>
+
+  <transition mode="out-in">
+    <UiPopup v-if="currentStep === AuthSteps.Recovery && isAuthPopupOpen"
+             v-model="isAuthPopupOpen"
+             transparent-backdrop
+             :back="isBackShow"
+             class="auth-popup"
+             @back="currentStep -= 1"
+    >
+      <template #title>{{  $t('auth.recovery_title')}}</template>
+      <AuthRecovery @login="onLoginClick"/>
+    </UiPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { AuthSteps } from '../../runtime';
+
+const { isAuthPopupOpen, currentStep, additionalText } = useAuthPopup();
+
+const backShow = ref(false);
+
+function onLoginClick(): void {
+  currentStep.value = AuthSteps.Login;
+  backShow.value = true;
+}
+
+function onRecoveryClick(): void {
+  currentStep.value = AuthSteps.Recovery;
+  backShow.value = true;
+}
+
+const isBackShow = computed(() => {
+  return currentStep.value !== AuthSteps.Registration && backShow.value;
+});
+</script>
+
+<style lang="scss">
+.auth-popup {
+  max-width: 448px;
+}
+
+.auth-popup__decorate {
+  position: fixed;
+  inset: 0;
+  z-index: $z-index-popup;
+  backdrop-filter: blur($blur-sm);
+  background-color: $popup-decorate-bg;
+}
+
+.auth-popup .ui-input__input::placeholder {
+  @include font-base;
+}
+</style>

package/components/auth/recovery.vue

@@ -0,0 +1,147 @@
+<template>
+  <div :class="{'_loading': loading}"
+       class="auth-recovery"
+  >
+
+    <AuthIcon class="auth-recovery__icon"
+              icon="envelope"
+    />
+
+    <p class="auth-recovery__text">{{ t('auth.recovery_text') }}</p>
+    <UiInput v-model="form.email"
+             :label="$t('email')"
+             :placeholder="$t('email')"
+             hide-label
+             :error="error.email"
+             type="email"
+             inputmode="email"
+             enterkeyhint="send"
+             autocomplete="email"
+             @update:error="(val: boolean) => error.email = val"
+             @enter="submit"
+    />
+
+    <UiBtn :disabled="loading"
+           class="auth-recovery__button"
+           wide
+           size="l"
+           theme="primary"
+           @click="submit"
+    >{{ t('auth.get_recovery') }}
+    </UiBtn>
+    <button class="auth-recovery__login"
+            type="button"
+            @click="onLoginClick"
+    >{{ t('auth.back_to_login') }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IPasswordForm } from '../../types';
+import { validateEmail } from '../../runtime';
+import { AuthorizationApiService } from '../../services/api/authorization.service';
+
+const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
+
+const { t } = useI18n();
+
+const form = ref({
+  email: '',
+  token: '',
+} as IPasswordForm);
+
+const error = ref({
+  email: false,
+});
+
+const emit = defineEmits<{
+  (eventName: 'login'): void
+}>();
+
+function onLoginClick() {
+  emit('login');
+}
+
+const loading = ref(false);
+
+const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+
+// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
+onMounted(async () => {
+  try {
+    await initRecaptcha();
+    console.log('reCAPTCHA готов для этой формы');
+  } catch (err) {
+    console.error('Ошибка инициализации reCAPTCHA:', err);
+  }
+});
+
+async function submit() {
+  resetSnackbar();
+  error.value.email = false;
+
+  if (!validateEmail(form.value.email)) {
+    error.value.email = true;
+    showError('error_email');
+    return;
+  }
+
+  try {
+    loading.value = true;
+    form.value.token = await getRecaptchaToken('password_reset');
+    await useUser(AuthorizationApiService).password(form.value);
+    useAuthPopup().closeAuthPopup();
+    showSuccess('Check your email');
+  } catch (error) {
+    setErrorState(error);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style lang="scss">
+.auth-recovery {
+  display: grid;
+  row-gap: 16px;
+  align-items: start;
+
+  @include from-br(sm) {
+    row-gap: 8px;
+  }
+}
+
+.auth-recovery._loading {
+  @include from-br(sm) {
+    cursor: wait;
+  }
+}
+
+.auth-recovery__icon {
+  margin: 0 auto;
+}
+
+.auth-recovery__button {
+  margin-top: 8px;
+}
+
+.auth-recovery__text {
+  @include font-sm;
+
+  text-align: center;
+  color: $auth-recovery-text;
+}
+
+.auth-recovery__login {
+  @include font-sm;
+
+  color: $auth-recovery-login;
+  margin-top: 8px;
+  padding-block: 8px;
+
+  @include hover(color) {
+    color: $auth-recovery-login--hover;
+  }
+}
+</style>

package/components/auth/register.vue

@@ -0,0 +1,245 @@
+<template>
+  <ClientOnly>
+    <div :class="{'_loading': loading}"
+         class="auth-register"
+    >
+      <AuthIcon class="auth-register__icon" />
+      <p v-if="additionalText"
+         class="auth-register__text"
+      >{{ t(additionalText) }}
+      </p>
+      <UiInput v-model="form.email"
+               :placeholder="t('email')"
+               :label="t('email')"
+               hide-label
+               :error="error.email"
+               type="email"
+               inputmode="email"
+               enterkeyhint="next"
+               autocomplete="email"
+               @update:error="(val: boolean) => error.email = val"
+               @enter="usernameRef?.focus()"
+      />
+      <UiInput ref="usernameRef"
+               v-model="form.username"
+               :label="t('login')"
+               :placeholder="t('login')"
+               hide-label
+               :error="error.username"
+               name="login-name"
+               enterkeyhint="next"
+               @update:error="(val: boolean) => error.username = val"
+               @enter="passwordRef?.focus()"
+      />
+      <UiInput ref="passwordRef"
+               v-model="form.password_hash"
+               :label="t('auth.password')"
+               :placeholder="t('auth.password')"
+               hide-label
+               :error="error.password_hash"
+               type="password"
+               enterkeyhint="send"
+               autocomplete="new-password"
+               @update:error="(val: boolean) => error.password_hash = val"
+               @enter="submit"
+      />
+
+      <div class="auth-register__buttons">
+        <UiBtn :disabled="loading"
+               wide
+               size="l"
+               theme="primary"
+               @click="submit"
+        >{{ t('auth.sign_up') }}
+        </UiBtn>
+        <p class="auth-register__login">
+          {{ t('login_text') }}
+          <button class="auth-register__login-button"
+                  type="button"
+                  @click="onLoginClick"
+          >
+            {{ t('auth.log_in') }}
+          </button>
+        </p>
+      </div>
+
+      <p class="auth-register__agreement">{{ t('auth.agree_begin') }}
+        <NuxtLink class="auth-register__agreement-link"
+                  to="/terms"
+                  target="_blank"
+        >{{ t('auth.agree_terms') }}
+        </NuxtLink>
+        {{ t('auth.agree_and') }}
+        <NuxtLink class="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';
+
+const { initRecaptcha, getRecaptchaToken } = useRecaptcha();
+
+defineProps<{
+  additionalText?: string;
+}>();
+
+const { t } = useI18n();
+
+const usernameRef = ref();
+const passwordRef = ref();
+
+const form = ref({
+  username: '',
+  email: '',
+  password_hash: '',
+  token: '',
+} as IRegistrateForm);
+
+const error = ref({
+  username: false,
+  email: false,
+  password_hash: false,
+});
+
+const emit = defineEmits<{
+  (eventName: 'login'): void
+}>();
+
+function onLoginClick() {
+  emit('login');
+}
+
+const loading = ref(false);
+
+const { setErrorState, showError, showSuccess, resetSnackbar } = useSnackbar();
+// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
+onMounted(async () => {
+  try {
+    await initRecaptcha();
+    console.log('reCAPTCHA готов для этой формы');
+  } catch (err) {
+    console.error('Ошибка инициализации reCAPTCHA:', err);
+  }
+});
+
+function validateForm(): boolean {
+  const { username, email, password_hash } = form.value;
+
+  const errors = {
+    username: !validateUsername(username),
+    email: !validateEmail(email),
+    password_hash: !validatePassword(password_hash),
+  };
+
+  if (!validateEmail(email)) showError('error_email');
+  if (!validatePassword(password_hash)) showError('error_password');
+  if (!validateUsername(username)) showError('error_username');
+
+  error.value = errors;
+
+  return !Object.values(errors).some(Boolean);
+}
+
+async function submit() {
+  resetSnackbar();
+  if (!validateForm()) return;
+
+  try {
+    loading.value = true;
+
+    // Уникальное действие для каждой формы
+    // здесь 'register', в других формах — 'password_reset' или 'contact_form'
+    form.value.token = await getRecaptchaToken('register');
+
+    await useUser(AuthorizationApiService).register(form.value);
+
+    // Создаем сразу Favorites плейлист, возможно костыль убрать когда будет нормальная логика с беком
+    // const { FAVORITES_KEY } = useFavorites();
+    // await PlaylistsApiService.postPlaylist(FAVORITES_KEY, PlaylistType.Private);
+
+    useAuthPopup().closeAuthPopup();
+    showSuccess('Registration success');
+  } catch (err) {
+    setErrorState(err);
+    console.error('Ошибка reCAPTCHA или регистрации:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style lang="scss">
+.auth-register {
+  display: grid;
+  row-gap: 16px;
+  align-items: start;
+
+  @include from-br(sm) {
+    row-gap: 8px;
+  }
+}
+
+.auth-register._loading {
+  @include from-br(sm) {
+    cursor: wait;
+  }
+}
+
+.auth-register__icon {
+  margin: 0 auto;
+}
+
+.auth-register__buttons {
+  display: grid;
+  row-gap: 8px;
+  padding-top: 24px;
+  border-top: 1px solid $auth-register-border;
+}
+
+.auth-register__agreement {
+  @include font-xs;
+
+  font-weight: 400;
+  color: $auth-register-agreement;
+  text-align: center;
+}
+
+.auth-register__agreement-link {
+  color: $auth-register-link;
+
+  @include hover(color) {
+    color: $auth-register-link--hover;
+  }
+}
+
+.auth-register__text {
+  text-align: center;
+}
+
+.auth-register .ui-input:nth-last-child(1 of .ui-input) {
+  padding-bottom: 12px;
+}
+
+.auth-register__login {
+  @include font-sm;
+
+  text-align: center;
+  color: $auth-register-login;
+}
+
+.auth-register__login-button {
+  color: $auth-register-link;
+
+  @include hover(color) {
+    color: $auth-register-link--hover;
+  }
+}
+</style>