morgan/Tennis-Site
1
0
Fork 0
mirror of https://github.com/LOBSTERVOVA/Tennis-Site.git synced 2026-04-17 17:40:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

добавление кнопки авторизации в хедер

Browse Source
This commit is contained in:
Lobstervova
2026-02-03 09:18:09 +03:00
parent 8f319465da
commit a8e895139a
5 changed files with 229 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/main/java/com/example/dateplanner/models/entities/AppUser.java
View File

@@ -3,6 +3,7 @@ package com.example.dateplanner.models.entities;
import com.example.dateplanner.models.enums.Role;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.NonNull;
import org.springframework.data.annotation.Id;
import org.springframework.data.relational.core.mapping.Column;
import org.springframework.data.relational.core.mapping.Table;
@@ -20,9 +21,14 @@ import java.util.UUID;
public class AppUser implements UserDetails {
@Id
private UUID uuid;
private String username;
@NonNull
private String phone;
private String password;
private Role role;
@NonNull
private String lastName;
@NonNull
private String firstName;
private Role role = Role.USER;
@Column("dating_profile_uuid")
private UUID datingProfileUuid = null;
@@ -40,6 +46,11 @@ public class AppUser implements UserDetails {
return List.of(new SimpleGrantedAuthority("ROLE_" + getRole().toString()));
}
@Override
public String getUsername() {
return this.phone;
}
@Override
public boolean isAccountNonExpired() {
return UserDetails.super.isAccountNonExpired();

85
src/main/resources/static/css/header.css Normal file
View File

@@ -0,0 +1,85 @@
/* Модальное окно авторизации */
.auth-tabs {
border: none ;
margin-bottom: 20px !important;
}
.auth-tabs .nav-link {
border: none !important;
color: #666;
font-weight: 500;
padding: 10px 0;
margin: 0 15px;
position: relative;
}
.auth-tabs .nav-link.active {
color: #e74c3c !important;
background: none;
}
.auth-tabs .nav-link.active:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: #e74c3c;
border-radius: 3px;
}
.forgot-password {
font-size: 0.9rem;
color: #e74c3c;
text-decoration: none;
}
.auth-divider {
text-align: center;
position: relative;
margin: 20px 0;
color: #666;
}
.auth-divider:before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #eee;
z-index: 1;
}
.auth-divider span {
background: white;
padding: 0 15px;
position: relative;
z-index: 2;
}
.social-auth-btn {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background: white;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 10px;
transition: all 0.3s;
font-weight: 500;
}
.social-auth-btn:hover {
border-color: #e74c3c;
background: rgba(231, 76, 60, 0.05);
}
.social-auth-btn.vk { color: #4C75A3; }
.social-auth-btn.google { color: #DB4437; }
.social-auth-btn.yandex { color: #FF0000; }

21
src/main/resources/static/css/main.css
View File

@@ -15,6 +15,27 @@
color: white !important;
}
/* Добавляем новые стили для иконки авторизации */
.auth-btn {
background: #e74c3c;
color: white;
border: none;
border-radius: 50px;
padding: 8px 20px;
font-weight: 600;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.auth-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
color: white;
}
.love-gradient {
background: linear-gradient(135deg, #e74c3c 0%, #fd79a8 100%);
color: white;

3
src/main/resources/static/css/style.css
View File

@@ -1,2 +1,3 @@
@import "fonts.css";
@import "main.css";
@import "main.css";
@import "header.css";

109
src/main/resources/static/js/site/blocks/header.js
View File

@@ -24,11 +24,118 @@ function initHeader($header){
<a class="nav-link" href="#admin">Для организаций</a>
</li>
</ul>
<button class="btn btn-heart ms-3" onclick="showLoginModal()">
<button class="btn btn-heart ms-0 ms-lg-3" onclick="showLoginModal()">
<i class="fas fa-plus me-2"></i>Добавить место
</button>
<div id="authButtonContainer" class="d-flex align-items-center ms-0 ms-lg-3 mt-2 mt-lg-0">
<button class="auth-btn" data-bs-toggle="modal" data-bs-target="#authModal" style="padding-top: 12px; padding-bottom: 12px;">
<i class="fas fa-user"></i>
<span class="auth-btn-text">Войти</span>
</button>
</div>
</div>
</div>
</nav>
<!-- Модальное окно авторизации -->
<div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title">Вход в DatePlanner</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-4">
<ul class="nav nav-tabs auth-tabs" id="authTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button">
Вход
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button">
Регистрация
</button>
</li>
</ul>
<div class="tab-content" id="authTabContent">
<!-- Форма входа -->
<div class="tab-pane fade show active" id="login" role="tabpanel">
<form id="loginForm">
<div class="mb-3">
<label class="form-label">Email или телефон</label>
<input type="text" class="form-control" id="loginEmail" placeholder="example@mail.ru" required>
</div>
<div class="mb-3">
<label class="form-label">Пароль</label>
<input type="password" class="form-control" id="loginPassword" required>
<div class="text-end mt-2">
<a href="#" class="forgot-password" onclick="showForgotPassword()">Забыли пароль?</a>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="rememberMe">
<label class="form-check-label" for="rememberMe">Запомнить меня</label>
</div>
<button type="submit" class="btn btn-heart w-100">Войти</button>
</form>
<div class="auth-divider">
<span>или войдите через</span>
</div>
<button class="social-auth-btn vk" onclick="loginWithVK()">
<i class="fab fa-vk"></i> ВКонтакте
</button>
<button class="social-auth-btn google" onclick="loginWithGoogle()">
<i class="fab fa-google"></i> Google
</button>
<button class="social-auth-btn yandex" onclick="loginWithYandex()">
<i class="fab fa-yandex"></i> Яндекс
</button>
</div>
<!-- Форма регистрации -->
<div class="tab-pane fade" id="register" role="tabpanel">
<form id="registerForm">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label">Имя</label>
<input type="text" class="form-control" id="registerFirstName" required>
</div>
<div class="col-md-6 mb-3">
<label class="form-label">Фамилия</label>
<input type="text" class="form-control" id="registerLastName">
</div>
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" id="registerEmail" required>
</div>
<div class="mb-3">
<label class="form-label">Пароль</label>
<input type="password" class="form-control" id="registerPassword" required>
<small class="text-muted">Минимум 6 символов</small>
</div>
<div class="mb-3">
<label class="form-label">Подтвердите пароль</label>
<input type="password" class="form-control" id="registerPasswordConfirm" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="acceptTerms" required>
<label class="form-check-label" for="acceptTerms">
Я принимаю <a href="#" class="forgot-password">условия использования</a> и
<a href="#" class="forgot-password">политику конфиденциальности</a>
</label>
</div>
<button type="submit" class="btn btn-heart w-100">Зарегистрироваться</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
`)
}