VC-HB3-Accelerator/DLE
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

ваше сообщение коммита

Browse Source
This commit is contained in:
Alex
2025-03-28 11:00:48 +03:00
parent 95f567fb6d
commit 1371fb1540
2 changed files with 311 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
frontend/src/assets/styles/home.css
View File

@@ -235,10 +235,14 @@
/* Стили для правой панели с информацией о кошельке */
.wallet-sidebar {
width: 250px;
min-width: 250px;
background-color: #FFDA58;
padding: 20px;
padding: 15px;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow-y: auto;
max-height: 100vh;
}
.wallet-connect-btn {
@@ -329,11 +333,20 @@
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
margin-top: 15px;
width: 100%;
max-width: 220px;
box-sizing: border-box;
}
.auth-btn-container {
width: 100%;
max-width: 220px;
box-sizing: border-box;
}
.auth-btn {
padding: 12px 16px;
padding: 12px 10px;
border: none;
border-radius: 8px;
cursor: pointer;
@@ -341,6 +354,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
}
.email-btn {
@@ -353,6 +368,74 @@
color: white;
}
/* Стили для блока верификации Telegram */
.verification-block {
background-color: #ffffff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
width: 100%;
max-width: 220px;
box-sizing: border-box;
}
.verification-code {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
}
.verification-code span {
margin-bottom: 8px;
font-size: 14px;
color: #555;
}
.verification-code code {
background-color: #f5f5f5;
padding: 6px 10px;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
font-weight: bold;
cursor: pointer;
user-select: all;
border: 1px dashed #ddd;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
text-align: center;
}
.verification-code .copied-message {
color: #4CAF50;
font-size: 12px;
margin-top: 5px;
}
.bot-link {
display: block;
background-color: #0088cc;
color: white;
text-align: center;
padding: 10px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.2s;
box-sizing: border-box;
font-size: 14px;
}
.bot-link:hover {
background-color: #006699;
}
.user-info {
margin-top: 20px;
}
@@ -379,25 +462,91 @@
/* Стили для форм верификации Email */
.email-form {
margin-top: 20px;
background-color: #fff;
padding: 15px;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 220px;
margin-bottom: 10px;
box-sizing: border-box;
}
.email-verification-form {
background-color: #fff;
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 220px;
margin-bottom: 10px;
box-sizing: border-box;
}
.email-verification-form p {
margin-bottom: 8px;
font-size: 13px;
}
.verification-input {
display: flex;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.verification-input input {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
box-sizing: border-box;
}
.verify-btn {
padding: 0 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
font-size: 13px;
}
.verify-btn:hover:not(:disabled) {
background-color: #3e8e41;
}
.verify-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.email-input-container {
display: flex;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 8px;
margin-bottom: 8px;
width: 100%;
box-sizing: border-box;
}
.email-input {
flex-grow: 1;
padding: 10px;
flex-shrink: 1;
min-width: 0;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-size: 13px;
box-sizing: border-box;
}
.email-input-error {
@@ -405,14 +554,16 @@
}
.send-email-btn {
padding: 0 15px;
padding: 0 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
margin-left: 10px;
margin-left: 8px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
font-size: 13px;
}
.send-email-btn:hover:not(:disabled) {
@@ -434,7 +585,6 @@
display: flex;
flex-direction: column;
align-items: start;
margin-top: 10px;
}
.cancel-btn {
@@ -443,11 +593,95 @@
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px 15px;
font-size: 14px;
font-size: 13px;
cursor: pointer;
margin-bottom: 10px;
margin-top: 10px;
width: 100%;
box-sizing: border-box;
}
.cancel-btn:hover {
background-color: #e8e8e8;
}
.error-message {
background-color: #ffebee;
color: #e74c3c;
padding: 12px;
border-radius: 8px;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.close-error {
background: none;
border: none;
color: #e74c3c;
font-size: 18px;
cursor: pointer;
padding: 0 5px;
}
.verification-block p,
.email-form p,
.email-verification-form p {
margin: 0 0 12px 0;
font-size: 14px;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.4;
}
.wallet-connect-btn,
.wallet-disconnect-btn {
box-sizing: border-box;
width: 100%;
white-space: normal;
text-align: center;
line-height: 1.3;
}
.email-verification-form strong {
word-break: break-all;
}
.error-message {
background-color: #ffebee;
color: #e74c3c;
padding: 12px;
border-radius: 8px;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
word-wrap: break-word;
word-break: break-word;
}
/* Медиа-запрос для узких экранов */
@media (max-width: 1300px) {
.wallet-sidebar {
width: 220px;
min-width: 220px;
padding: 15px;
}
.verification-code code {
font-size: 14px;
padding: 6px 10px;
}
.auth-btn, .bot-link, .cancel-btn {
padding: 10px 8px;
font-size: 13px;
}
.verify-btn, .send-email-btn {
padding: 0 10px;
font-size: 13px;
}
}

40
frontend/src/views/HomeView.vue
View File

@@ -78,15 +78,11 @@
<!-- Добавляем дополнительные кнопки авторизации -->
<div v-if="!isAuthenticated && messages.length > 0" class="auth-buttons">
<div v-if="!showTelegramVerification" class="auth-btn-container">
<button @click="handleTelegramAuth" class="auth-btn telegram-btn">
Подключить Telegram
</button>
<button v-if="!showEmailForm" @click="handleEmailAuth" class="auth-btn email-btn">
Подключить Email
</button>
</div>
<!-- Блок для верификации Telegram -->
<div v-if="showTelegramVerification" class="verification-block">
<div class="verification-code">
<span>Код верификации:</span>
@@ -94,9 +90,16 @@
<span v-if="codeCopied" class="copied-message">Скопировано!</span>
</div>
<a :href="telegramBotLink" target="_blank" class="bot-link">Открыть бота Telegram</a>
<button @click="cancelTelegramAuth" class="cancel-btn">Отмена</button>
</div>
<!-- Форма для Email верификации -->
<div v-if="!showEmailForm && !showEmailVerificationInput" class="auth-btn-container">
<button @click="handleEmailAuth" class="auth-btn email-btn">
Подключить Email
</button>
</div>
<!-- Форма для Email верификации (встроена в auth-buttons) -->
<div v-if="showEmailForm" class="email-form">
<p>Введите ваш email для получения кода подтверждения:</p>
<div class="email-input-container">
@@ -117,13 +120,7 @@
</div>
</div>
<!-- Сообщение об ошибке в Email -->
<div v-if="emailError" class="error-message">
{{ emailError }}
<button class="close-error" @click="clearEmailError">×</button>
</div>
<!-- Форма для ввода кода верификации Email -->
<!-- Форма для ввода кода верификации Email (встроена в auth-buttons) -->
<div v-if="showEmailVerificationInput" class="email-verification-form">
<p>На ваш email <strong>{{ emailVerificationEmail }}</strong> отправлен код подтверждения.</p>
<div class="verification-input">
@@ -137,6 +134,14 @@
{{ isVerifying ? 'Проверка...' : 'Подтвердить' }}
</button>
</div>
<button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
</div>
</div>
<!-- Сообщение об ошибке в Email -->
<div v-if="emailError" class="error-message">
{{ emailError }}
<button class="close-error" @click="clearEmailError">×</button>
</div>
<!-- Блок баланса токенов -->
@@ -781,6 +786,15 @@ const updateBalances = async () => {
}
};
// Функция отмены Telegram аутентификации
const cancelTelegramAuth = () => {
showTelegramVerification.value = false;
if (telegramAuthCheckInterval.value) {
clearInterval(telegramAuthCheckInterval.value);
telegramAuthCheckInterval.value = null;
}
};
onMounted(() => {
// Добавляем слушатель прокрутки
if (messagesContainer.value) {