modified: serv_nginx/bbvue/src/main.js

modified: serv_nginx/bbvue/src/router/index.js new file: serv_nginx/bbvue/src/views/ForgotPassword.vue modified: serv_nginx/bbvue/src/views/Home.vue modified: serv_nginx/bbvue/src/views/Login.vue new file: serv_nginx/bbvue/src/views/PasswordReset.vue modified: serv_nginx/bbvue/src/views/Profile.vue modified: serv_nginx/bbvue/src/views/ProfileEdit.vue new file: serv_nginx/bbvue/src/views/VerifayEmail.vue add email sender, verifay email and reset password on FrontEnd
2025-10-22 05:35:33 +05:00
parent 1e678c4b7e
commit df18d2083d
9 changed files with 475 additions and 89 deletions
@@ -9,90 +9,6 @@ import WriteLogo from './components/writeLogo.vue'

 const app = createApp(App)

-// Функция для загрузки Яндекс.Метрики
-function loadYandexMetrika() {
-  return new Promise((resolve) => {
-    if (window.ym) {
-      resolve();
-      return;
-    }
-
-    // Создаем скрипт Яндекс.Метрики
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.innerHTML = `
-      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
-      m[i].l=1*new Date();
-      k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
-      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
-      
-      ym(104775055, "init", {
-        clickmap:true,
-        trackLinks:true,
-        accurateTrackBounce:true,
-        webvisor:true
-      });
-    `;
-    document.head.appendChild(script);
-    
-    // Даем время на загрузку
-    setTimeout(resolve, 500);
-  });
-}
-
-
-// Функция для загрузки Google Analytics
-function loadGoogleAnalytics() {
-  return new Promise((resolve) => {
-    if (window.gtag) {
-      resolve();
-      return;
-    }
-
-    // Первый скрипт GA
-    const script1 = document.createElement('script');
-    script1.async = true;
-    script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-r4bMCbf4zEwF7CJQu2XDn_9_G86ZL248xgWHavTY8iY';
-    document.head.appendChild(script1);
-
-    // Второй скрипт GA
-    const script2 = document.createElement('script');
-    script2.innerHTML = `
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'G-r4bMCbf4zEwF7CJQu2XDn_9_G86ZL248xgWHavTY8iY');
-    `;
-    document.head.appendChild(script2);
-    
-    setTimeout(resolve, 500);
-  });
-}
-// Загружаем метрики и монтируем приложение
-Promise.all([loadYandexMetrika(), loadGoogleAnalytics()]).then(() => {
-  // Отслеживание переходов по маршрутам
-  router.afterEach((to) => {
-    // Яндекс.Метрика
-    if (window.ym && typeof window.ym === 'function') {
-      setTimeout(() => {
-        window.ym(104775055, 'hit', to.fullPath);
-      }, 100);
-    }
-    
-    // Google Analytics
-    if (window.gtag && typeof window.gtag === 'function') {
-      setTimeout(() => {
-        window.gtag('config', 'G-r4bMCbf4zEwF7CJQu2XDn_9_G86ZL248xgWHavTY8iY', {
-          page_path: to.fullPath
-        });
-      }, 100);
-    }
-  });
-
-  app.use(router);
-  app.mount('#app');
-});
-
 // Регистрируем компоненты глобально
 app.component('WriteLogo', WriteLogo)

@@ -5,6 +5,24 @@ import { useAuthStore } from '../stores/auth'
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
+    {
+      path: '/verify-email',
+      name: 'VerifyEmail',
+      component: () => import('../views/VerifayEmail.vue'),
+      meta: { guestOnly: true } // Только для неавторизованных
+    },
+    {
+      path: '/reset-password',
+      name: 'ResetPassword',
+      component: () => import('../views/PasswordReset.vue'),
+      meta: { guestOnly: true } // Только для неавторизованных
+    },
+    {
+      path: '/forgot-password',
+      name: 'ForgotPassword', 
+      component: () => import('../views/ForgotPassword.vue'),
+      meta: { guestOnly: true }
+    },
    {
      path: '/',
      name: 'Home',
@@ -0,0 +1,60 @@
+<template>
+    <div class="page">
+        <div class="forgot-password-container">
+            <h1>🔐 Забыли пароль?</h1>
+
+            <form @submit.prevent="requestReset" class="forgot-form">
+                <div class="form-group">
+                    <label>Введите ваш email</label>
+                    <input v-model="email" type="email" required placeholder="example@mail.ru" :disabled="loading"
+                        autocomplete="username">
+                </div>
+
+                <button type="submit" class="btn btn-primary" :disabled="loading">
+                    {{ loading ? 'Отправка...' : 'Отправить инструкции' }}
+                </button>
+            </form>
+
+            <div v-if="message" class="message" :class="messageType">
+                {{ message }}
+            </div>
+
+            <div class="links">
+                <router-link to="/login" class="link">← Вспомнили пароль? Войти</router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ForgotPassword',
+    data() {
+        return {
+            email: '',
+            loading: false,
+            message: '',
+            messageType: ''
+        }
+    },
+    methods: {
+        async requestReset() {
+            this.loading = true
+            this.message = ''
+
+            try {
+                await this.$http.post('/v1/auth/password-reset/request', {
+                    email: this.email
+                })
+                this.message = 'Инструкции по восстановлению пароля отправлены на ваш email'
+                this.messageType = 'success'
+            } catch (error) {
+                this.message = error.response?.data?.error || 'Ошибка при запросе восстановления'
+                this.messageType = 'error'
+            } finally {
+                this.loading = false
+            }
+        }
+    }
+}
+</script>
@@ -322,7 +322,7 @@ export default {
 .title-main {
  display: block;
  font-size: 3rem;
-  font-weight: 800;  
+  font-weight: 800;
  text-shadow:
    2px 2px 4px #8bbb939f;
  line-height: 1.1;
@@ -372,7 +372,7 @@ export default {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  gap: 0.5rem;
-  min-width: 120px; 
+  min-width: 120px;
 }

 .btn-large {
@@ -827,12 +827,12 @@ export default {
  .hero-actions {
    gap: 0.5rem;
  }
-  
+
  .btn {
    font-size: 0.85rem;
    padding: 12px 14px;
  }
-  
+
  .btn-large {
    padding: 14px 14px;
    font-size: 0.9rem;
@@ -26,7 +26,7 @@
      <div class="register-link">
        <p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
      </div>
-      <p><a href="#" class="link">Забыли пароль?</a></p>
+      <p><router-link to="/forgot-password" class="link">Забыли пароль?</router-link></p>
    </div>

    <button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
@@ -0,0 +1,224 @@
+<template>
+    <div class="page">
+        <div class="password-reset-container">
+            <h1>🔐 Восстановление пароля</h1>
+
+            <!-- Форма запроса сброса -->
+            <form v-if="!showResetForm" @submit.prevent="requestReset" class="reset-form">
+                <div class="form-group">
+                    <label>Email</label>
+                    <input v-model="email" type="email" required placeholder="Введите ваш email" :disabled="loading">
+                </div>
+
+                <button type="submit" class="btn btn-primary" :disabled="loading">
+                    {{ loading ? 'Отправка...' : 'Восстановить пароль' }}
+                </button>
+            </form>
+
+            <!-- Форма сброса пароля -->
+            <form v-else @submit.prevent="confirmReset" class="reset-form">
+                <div class="form-group">
+                    <label>Новый пароль</label>
+                    <input v-model="newPassword" type="password" required minlength="6"
+                        placeholder="Введите новый пароль" :disabled="loading">
+                </div>
+
+                <div class="form-group">
+                    <label>Подтвердите пароль</label>
+                    <input v-model="confirmPassword" type="password" required placeholder="Повторите новый пароль"
+                        :disabled="loading">
+                </div>
+
+                <button type="submit" class="btn btn-primary" :disabled="loading">
+                    {{ loading ? 'Обновление...' : 'Обновить пароль' }}
+                </button>
+            </form>
+
+            <div v-if="message" class="message" :class="messageType">
+                {{ message }}
+            </div>
+
+            <div class="links">
+                <router-link to="/login" class="link">← Вернуться к входу</router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PasswordReset',
+    data() {
+        return {
+            email: '',
+            newPassword: '',
+            confirmPassword: '',
+            loading: false,
+            showResetForm: false,
+            token: '',
+            message: '',
+            messageType: '' // 'success' или 'error'
+        }
+    },
+    mounted() {
+        // Проверяем токен в URL
+        const token = this.$route.query.token
+        if (token) {
+            this.token = token
+            this.showResetForm = true
+        }
+    },
+    methods: {
+        async requestReset() {
+            this.loading = true
+            this.message = ''
+
+            try {
+                await this.$http.post('/v1/auth/password-reset/request', {
+                    email: this.email
+                })
+                this.message = 'Инструкции по восстановлению пароля отправлены на ваш email'
+                this.messageType = 'success'
+            } catch (error) {
+                this.message = error.response?.data?.error || 'Ошибка при запросе восстановления'
+                this.messageType = 'error'
+            } finally {
+                this.loading = false
+            }
+        },
+
+        async confirmReset() {
+            if (this.newPassword !== this.confirmPassword) {
+                this.message = 'Пароли не совпадают'
+                this.messageType = 'error'
+                return
+            }
+
+            if (this.newPassword.length < 6) {
+                this.message = 'Пароль должен содержать минимум 6 символов'
+                this.messageType = 'error'
+                return
+            }
+
+            this.loading = true
+            this.message = ''
+
+            try {
+                await this.$http.post('/v1/auth/password-reset/confirm', {
+                    token: this.token,
+                    password: this.newPassword
+                })
+
+                this.message = 'Пароль успешно изменен! Теперь вы можете войти в систему.'
+                this.messageType = 'success'
+
+                // Редирект на логин через 3 секунды
+                setTimeout(() => {
+                    this.$router.push('/login')
+                }, 3000)
+
+            } catch (error) {
+                this.message = error.response?.data?.error || 'Неверный или просроченный токен'
+                this.messageType = 'error'
+            } finally {
+                this.loading = false
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.password-reset-container {
+    max-width: 400px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.reset-form {
+    margin-bottom: 2rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #e1e5e9;
+    border-radius: 6px;
+    font-size: 1rem;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #2e8b57;
+}
+
+.form-group input:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    width: 100%;
+    background: #2e8b57;
+    color: white;
+    padding: 12px;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: #26734d;
+}
+
+.btn-primary:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.message {
+    padding: 12px;
+    border-radius: 6px;
+    margin: 1rem 0;
+    text-align: center;
+}
+
+.message.success {
+    background: #efe;
+    color: #2e8b57;
+    border: 1px solid #2e8b57;
+}
+
+.message.error {
+    background: #fee;
+    color: #c33;
+    border: 1px solid #c33;
+}
+
+.links {
+    text-align: center;
+}
+
+.link {
+    color: #2e8b57;
+    text-decoration: none;
+}
+
+.link:hover {
+    text-decoration: underline;
+}
+</style>
@@ -100,6 +100,7 @@
          </div>
        </div>
      </div>
+      

      <!-- Ближайшие события -->
      <div class="events-section" v-if="upcomingEvents && upcomingEvents.length > 0">
@@ -39,6 +39,13 @@
        </small>
      </div>

+      <div v-if="!user.email_verified" class="verification-alert">
+        <p>Ваш email не подтвержден</p>
+        <button @click="resendVerification" :disabled="resending">
+          {{ resending ? 'Отправка...' : 'Отправить подтверждение' }}
+        </button>
+      </div>
+
      <div class="form-group">
        <label for="experience">Уровень подготовки</label>
        <select id="experience" v-model="formData.experience" class="form-input" :disabled="loading">
@@ -0,0 +1,160 @@
+<template>
+    <div class="page">
+        <div class="verification-container">
+            <div v-if="verifying" class="loading">
+                <h2>🔐 Подтверждение email...</h2>
+                <p>Пожалуйста, подождите</p>
+            </div>
+
+            <div v-else-if="success" class="success">
+                <h2>✅ Email подтвержден!</h2>
+                <p>Ваш email успешно подтвержден. Теперь вы можете пользоваться всеми функциями приложения.</p>
+                <div class="actions">
+                    <button @click="$router.push('/login')" class="btn btn-primary">
+                        Войти в аккаунт
+                    </button>
+                    <button @click="$router.push('/')" class="btn btn-outline">
+                        На главную
+                    </button>
+                </div>
+            </div>
+
+            <div v-else class="error">
+                <h2>❌ Ошибка подтверждения</h2>
+                <p>{{ errorMessage }}</p>
+                <div class="actions">
+                    <button @click="resendVerification" class="btn" :disabled="resending">
+                        {{ resending ? 'Отправка...' : 'Отправить повторно' }}
+                    </button>
+                    <button @click="$router.push('/login')" class="btn btn-outline">
+                        Войти в аккаунт
+                    </button>
+                    <button @click="$router.push('/')" class="btn btn-secondary">
+                        На главную
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useAuthStore } from '../stores/auth'
+
+export default {
+    name: 'VerifyEmail',
+    setup() {
+        const authStore = useAuthStore()
+        return { authStore }
+    },
+    data() {
+        return {
+            verifying: true,
+            success: false,
+            errorMessage: '',
+            resending: false
+        }
+    },
+    async mounted() {
+        const token = this.$route.query.token
+        if (!token) {
+            this.verifying = false
+            this.errorMessage = 'Отсутствует токен подтверждения'
+            return
+        }
+
+        try {
+            const response = await this.$http.get(`/v1/verify-email?token=${token}`)
+            console.log("response verify " + response.data)
+            this.success = true
+        } catch (error) {
+            console.error('Verification failed:', error)
+            this.errorMessage = error.response?.data?.error || 'Неверный или просроченный токен'
+        } finally {
+            this.verifying = false
+        }
+    },
+    methods: {
+        async resendVerification() {
+            this.resending = true
+            try {
+                // Этот endpoint требует авторизации, поэтому редиректим на логин
+                this.$router.push('/login')
+            } catch (error) {
+                console.error('Resend verification error:', error)
+            } finally {
+                this.resending = false
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.verification-container {
+    max-width: 500px;
+    margin: 2rem auto;
+    text-align: center;
+    padding: 2rem;
+}
+
+.loading,
+.success,
+.error {
+    background: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.btn-primary {
+    background: #2e8b57;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #26734d;
+}
+
+.btn-outline {
+    background: white;
+    color: #2e8b57;
+    border: 2px solid #2e8b57;
+}
+
+.btn-outline:hover {
+    background: #2e8b57;
+    color: white;
+}
+
+.btn-secondary {
+    background: #6c757d;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #545b62;
+}
+
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+</style>