valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: main_dc/BB/bbvue/src/App.vue

Browse Source 
modified:   main_dc/BB/bbvue/src/views/Login.vue
css rule for center vertical and with login form
This commit is contained in:
Газиз Валитов
2025-11-19 06:18:32 +05:00
parent 31ec0e0cb5
commit 2381ab1c27
2 changed files with 109 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main_dc/BB/bbvue/src/App.vue
+1 -1
View File
@@ -269,7 +269,7 @@ body {
/* Page Styles */
.page {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 2rem;
text-align: center;
main_dc/BB/bbvue/src/views/Login.vue
+108 -54
View File
@@ -1,35 +1,37 @@
<template>
<div class="page">
<h1>🔐 Вход в систему</h1>
<p>Войдите в свой личный кабинет</p>
<div class="page login-page">
<div class="login-container">
<h1>🔐 Вход в систему</h1>
<p>Войдите в свой личный кабинет</p>
<form @submit.prevent="handleLogin" class="login-form">
<div class="form-group">
<input type="email" placeholder="Email" class="form-input" v-model="credentials.email" required
:disabled="loading" autocomplete="username">
</div>
<div class="form-group">
<input type="password" placeholder="Пароль" class="form-input" autocomplete="current-password"
v-model="credentials.password" required :disabled="loading">
<form @submit.prevent="handleLogin" class="login-form">
<div class="form-group">
<input type="email" placeholder="Email" class="form-input" v-model="credentials.email" required
:disabled="loading" autocomplete="username">
</div>
<div class="form-group">
<input type="password" placeholder="Пароль" class="form-input" autocomplete="current-password"
v-model="credentials.password" required :disabled="loading">
</div>
<button type="submit" class="btn btn-primary" :disabled="loading">
{{ loading ? 'Вход...' : 'Войти' }}
</button>
<div v-if="error" class="error-message">
{{ error }}
</div>
</form>
<div class="login-links">
<div class="register-link">
<p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
</div>
<p><router-link to="/forgot-password" class="link">Забыли пароль?</router-link></p>
</div>
<button type="submit" class="btn btn-primary" :disabled="loading">
{{ loading ? 'Вход...' : 'Войти' }}
</button>
<div v-if="error" class="error-message">
{{ error }}
</div>
</form>
<div class="login-links">
<div class="register-link">
<p>Нет аккаунта? <router-link to="/register" class="link">Зарегистрируйтесь здесь</router-link></p>
</div>
<p><router-link to="/forgot-password" class="link">Забыли пароль?</router-link></p>
<button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
</div>
<button class="btn btn-secondary" @click="$router.push('/')">← На главную</button>
</div>
</template>
@@ -48,7 +50,10 @@ export default {
credentials: {
email: '',
password: ''
}
},
hasInteracted: false,
isContentVisible: false,
autoShowTimeout: null
}
},
computed: {
@@ -104,6 +109,31 @@ export default {
document.body.appendChild(notification)
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification)
}
}, 3000)
},
showAlreadyLoggedInNotification() {
const notification = document.createElement('div')
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #ffd700;
color: #333;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
max-width: 300px;
font-family: Arial, sans-serif;
`
notification.textContent = 'ℹ️ Вы уже авторизованы!'
document.body.appendChild(notification)
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification)
@@ -132,43 +162,36 @@ export default {
this.showContent()
}
}, 3000)
},
showAlreadyLoggedInNotification() {
const notification = document.createElement('div')
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #ffd700;
color: #333;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
max-width: 300px;
font-family: Arial, sans-serif;
`
notification.textContent = 'ℹ️ Вы уже авторизованы!'
document.body.appendChild(notification)
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification)
}
}, 3000)
}
}
</script>
<style scoped>
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
margin: 0;
}
.login-container {
width: fit-content;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.login-form {
max-width: 300px;
width: 100%;
margin: 2rem auto;
}
.form-group {
margin-bottom: 1rem;
width: 100%;
}
.form-input {
@@ -178,6 +201,7 @@ export default {
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s;
box-sizing: border-box;
}
.form-input:focus {
@@ -197,6 +221,7 @@ export default {
padding: 12px;
font-size: 1rem;
margin-top: 1rem;
box-sizing: border-box;
}
.btn-primary:hover:not(:disabled) {
@@ -211,6 +236,7 @@ export default {
.login-links {
margin-top: 1.5rem;
text-align: center;
width: 100%;
}
.link {
@@ -230,5 +256,33 @@ export default {
margin-top: 1rem;
border-left: 4px solid #c33;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.btn-secondary {
margin-top: 1rem;
width: 100%;
box-sizing: border-box;
}
/* Стили для заголовков и текста */
.login-container h1 {
color: #2e8b57;
margin-bottom: 1rem;
font-size: 2.5rem;
width: 100%;
}
.login-container p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #666;
width: 100%;
}
.register-link {
width: 100%;
margin-bottom: 1rem;
}
</style>