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
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
@@ -101,6 +101,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Ближайшие события -->
|
||||
<div class="events-section" v-if="upcomingEvents && upcomingEvents.length > 0">
|
||||
<h3>📅 Ближайшие события</h3>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user