ваше сообщение коммита
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,42 +78,63 @@
|
||||
|
||||
<!-- Добавляем дополнительные кнопки авторизации -->
|
||||
<div v-if="!isAuthenticated && messages.length > 0" class="auth-buttons">
|
||||
<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>
|
||||
<code @click="copyCode(telegramVerificationCode)">{{ telegramVerificationCode }}</code>
|
||||
<span v-if="codeCopied" class="copied-message">Скопировано!</span>
|
||||
</div>
|
||||
<a :href="telegramBotLink" target="_blank" class="bot-link">Открыть бота Telegram</a>
|
||||
</div>
|
||||
|
||||
<!-- Форма для Email верификации -->
|
||||
<div v-if="showEmailForm" class="email-form">
|
||||
<p>Введите ваш email для получения кода подтверждения:</p>
|
||||
<div class="email-input-container">
|
||||
<input
|
||||
v-model="emailInput"
|
||||
type="email"
|
||||
placeholder="Ваш email"
|
||||
class="email-input"
|
||||
:class="{ 'email-input-error': emailFormatError }"
|
||||
/>
|
||||
<button @click="sendEmailVerification" class="send-email-btn" :disabled="isEmailSending">
|
||||
{{ isEmailSending ? 'Отправка...' : 'Отправить код' }}
|
||||
<div v-if="!showTelegramVerification" class="auth-btn-container">
|
||||
<button @click="handleTelegramAuth" class="auth-btn telegram-btn">
|
||||
Подключить Telegram
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<div v-if="showTelegramVerification" class="verification-block">
|
||||
<div class="verification-code">
|
||||
<span>Код верификации:</span>
|
||||
<code @click="copyCode(telegramVerificationCode)">{{ telegramVerificationCode }}</code>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<input
|
||||
v-model="emailInput"
|
||||
type="email"
|
||||
placeholder="Ваш email"
|
||||
class="email-input"
|
||||
:class="{ 'email-input-error': emailFormatError }"
|
||||
/>
|
||||
<button @click="sendEmailVerification" class="send-email-btn" :disabled="isEmailSending">
|
||||
{{ isEmailSending ? 'Отправка...' : 'Отправить код' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
|
||||
<p v-if="emailFormatError" class="email-format-error">Пожалуйста, введите корректный email</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма для ввода кода верификации Email (встроена в auth-buttons) -->
|
||||
<div v-if="showEmailVerificationInput" class="email-verification-form">
|
||||
<p>На ваш email <strong>{{ emailVerificationEmail }}</strong> отправлен код подтверждения.</p>
|
||||
<div class="verification-input">
|
||||
<input
|
||||
v-model="emailVerificationCode"
|
||||
type="text"
|
||||
placeholder="Введите код верификации"
|
||||
maxlength="6"
|
||||
/>
|
||||
<button @click="verifyEmailCode" class="verify-btn" :disabled="isVerifying">
|
||||
{{ isVerifying ? 'Проверка...' : 'Подтвердить' }}
|
||||
</button>
|
||||
</div>
|
||||
<button @click="cancelEmailAuth" class="cancel-btn">Отмена</button>
|
||||
<p v-if="emailFormatError" class="email-format-error">Пожалуйста, введите корректный email</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,22 +144,6 @@
|
||||
<button class="close-error" @click="clearEmailError">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Форма для ввода кода верификации Email -->
|
||||
<div v-if="showEmailVerificationInput" class="email-verification-form">
|
||||
<p>На ваш email <strong>{{ emailVerificationEmail }}</strong> отправлен код подтверждения.</p>
|
||||
<div class="verification-input">
|
||||
<input
|
||||
v-model="emailVerificationCode"
|
||||
type="text"
|
||||
placeholder="Введите код верификации"
|
||||
maxlength="6"
|
||||
/>
|
||||
<button @click="verifyEmailCode" class="verify-btn" :disabled="isVerifying">
|
||||
{{ isVerifying ? 'Проверка...' : 'Подтвердить' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Блок баланса токенов -->
|
||||
<div class="balance-container">
|
||||
<h3>Баланс:</h3>
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user