new file: begushiybashkir/bbvue/src/components/AvatarUpload.vue
modified: begushiybashkir/bbvue/src/stores/auth.js modified: begushiybashkir/bbvue/src/views/Profile.vue modified: begushiybashkir/bbvue/src/views/ProfileEdit.vue modified: serv_nginx/api_bb/go.mod modified: serv_nginx/api_bb/go.sum modified: serv_nginx/api_bb/internal/handlers/auth.go new file: serv_nginx/api_bb/internal/handlers/avatar.go modified: serv_nginx/api_bb/internal/handlers/news_handler.go modified: serv_nginx/api_bb/internal/handlers/user.go modified: serv_nginx/api_bb/internal/models/user.go modified: serv_nginx/api_bb/internal/repository/user_repository.go modified: serv_nginx/api_bb/internal/routes/routes.go modified: serv_nginx/api_bb/internal/service/auth_service.go new file: serv_nginx/api_bb/internal/service/avatar_service.go modified: serv_nginx/api_bb/internal/service/news_service.go modified: serv_nginx/api_bb/internal/service/user_service.go modified: serv_nginx/api_bb/pkg/logger/interface.go new file: serv_nginx/api_bb/pkg/logger/route_logger.go add structure fix, page, path, routes, component, authStore for upload, renew and delete avatar
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
<!-- components/AvatarUpload.vue -->
|
||||
<template>
|
||||
<div class="avatar-upload">
|
||||
<div class="avatar-preview" @click="triggerFileInput">
|
||||
<img v-if="previewUrl" :src="previewUrl" alt="Avatar" class="avatar-image">
|
||||
<div v-else class="avatar-placeholder">
|
||||
<span>📷</span>
|
||||
<small>Добавить фото</small>
|
||||
</div>
|
||||
<div class="avatar-overlay">
|
||||
<span>✏️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
@change="handleFileSelect"
|
||||
style="display: none;"
|
||||
>
|
||||
|
||||
<div v-if="uploading" class="upload-progress">
|
||||
Загрузка...
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div class="avatar-actions" v-if="showActions">
|
||||
<button v-if="user?.avatar" class="btn btn-sm btn-danger" @click="deleteAvatar" :disabled="uploading">
|
||||
🗑️ Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
export default {
|
||||
name: 'AvatarUpload',
|
||||
props: {
|
||||
user: Object,
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
return { authStore }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewUrl: null,
|
||||
uploading: false,
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
user: {
|
||||
immediate: true,
|
||||
handler(newUser) {
|
||||
if (newUser?.avatar) {
|
||||
this.previewUrl = this.getFullAvatarUrl(newUser.avatar)
|
||||
} else {
|
||||
this.previewUrl = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFullAvatarUrl(avatarPath) {
|
||||
if (!avatarPath) return null
|
||||
if (avatarPath.startsWith('http')) return avatarPath
|
||||
return `${import.meta.env.VITE_API_BASE_URL}${avatarPath}`
|
||||
},
|
||||
|
||||
triggerFileInput() {
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
|
||||
async handleFileSelect(event) {
|
||||
const file = event.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
// Валидация
|
||||
if (!file.type.startsWith('image/')) {
|
||||
this.error = 'Пожалуйста, выберите файл изображения'
|
||||
return
|
||||
}
|
||||
|
||||
if (file.size > 10 * 1024 * 1024) { // 10MB
|
||||
this.error = 'Размер файла не должен превышать 10MB'
|
||||
return
|
||||
}
|
||||
|
||||
// Превью
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
this.previewUrl = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
|
||||
// Загрузка
|
||||
await this.uploadAvatar(file)
|
||||
event.target.value = '' // Сброс input
|
||||
},
|
||||
|
||||
async uploadAvatar(file) {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
try {
|
||||
const result = await this.authStore.updateAvatar(file)
|
||||
if (!result.success) {
|
||||
this.error = result.error
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar) // Восстанавливаем старый аватар
|
||||
} else {
|
||||
this.$emit('avatar-updated', result.avatar)
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Ошибка загрузки: ' + err
|
||||
this.previewUrl = this.getFullAvatarUrl(this.user?.avatar)
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
},
|
||||
|
||||
async deleteAvatar() {
|
||||
this.uploading = true
|
||||
this.error = ''
|
||||
|
||||
try {
|
||||
const result = await this.authStore.deleteAvatar()
|
||||
if (!result.success) {
|
||||
this.error = result.error
|
||||
} else {
|
||||
this.previewUrl = null
|
||||
this.$emit('avatar-deleted')
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Ошибка удаления: ' + err
|
||||
} finally {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.avatar-upload {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 0 auto 1rem;
|
||||
border: 3px solid #e0e0e0;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.avatar-preview:hover {
|
||||
border-color: #2e8b57;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.avatar-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar-preview:hover .avatar-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
margin: 0.5rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
@@ -2,6 +2,7 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import { apiClient, withLoading } from './helpers/api'
|
||||
import { handleApiError } from './helpers/api';
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
// State
|
||||
@@ -13,7 +14,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
|
||||
// Getters
|
||||
const isAuthenticated = computed(() => !!token.value && !!user.value)
|
||||
const userFullName = computed(() =>
|
||||
const userFullName = computed(() =>
|
||||
user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
|
||||
)
|
||||
|
||||
@@ -37,7 +38,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
// Передаем store объект с loading и error
|
||||
return withLoading({ loading, error }, async () => {
|
||||
await apiClient.post('/auth/register', userData)
|
||||
|
||||
|
||||
// Auto-login after registration
|
||||
const loginResponse = await apiClient.post('/auth/login', {
|
||||
email: userData.email,
|
||||
@@ -95,7 +96,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
|
||||
const initializeAuth = async () => {
|
||||
if (initialized.value || !token.value) return
|
||||
|
||||
|
||||
initialized.value = true
|
||||
|
||||
try {
|
||||
@@ -107,6 +108,47 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
}
|
||||
|
||||
const updateAvatar = async (avatarFile) => {
|
||||
const formData = new FormData()
|
||||
formData.append('avatar', avatarFile)
|
||||
|
||||
try {
|
||||
const response = await apiClient.post('/user/avatar/upload', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
if (response.data.success) {
|
||||
// Обновляем аватар в сторе
|
||||
if (user.value) {
|
||||
user.value.avatar = response.data.avatar
|
||||
}
|
||||
return { success: true, avatar: response.data.avatar }
|
||||
}
|
||||
} catch (error) {
|
||||
const result = handleApiError(error)
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
const deleteAvatar = async () => {
|
||||
try {
|
||||
const response = await apiClient.delete('/user/avatar/deleteg')
|
||||
|
||||
if (response.data.success) {
|
||||
// Удаляем аватар из стора
|
||||
if (user.value) {
|
||||
user.value.avatar = null
|
||||
}
|
||||
return { success: true }
|
||||
}
|
||||
} catch (error) {
|
||||
const result = handleApiError(error)
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
user,
|
||||
@@ -126,6 +168,8 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
fetchProfile,
|
||||
updateProfile,
|
||||
initializeAuth,
|
||||
clearAuth
|
||||
clearAuth,
|
||||
updateAvatar,
|
||||
deleteAvatar
|
||||
}
|
||||
})
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<div v-else-if="user" class="profile-content">
|
||||
<div class="profile-header">
|
||||
<img :src="getImageUrl('dinamo.jpg')" alt="Аватар" style="width: 100px; height: 100px; border-radius: 50%;">
|
||||
<AvatarUpload :user="user" @avatar-updated="onAvatarUpdated" />
|
||||
<h2>{{ user.firstName }} {{ user.lastName }}</h2>
|
||||
<p>Участник с {{ joinDate }}</p>
|
||||
<p class="user-email">{{ user.email }}</p>
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
<div class="page">
|
||||
<h1>✏️ Редактирование профиля</h1>
|
||||
|
||||
<div class="avatar-section">
|
||||
<h3>Фотография профиля</h3>
|
||||
<AvatarUpload :user="user" :show-actions="true" />
|
||||
</div>
|
||||
|
||||
<div v-if="loading && !user" class="loading">Загрузка...</div>
|
||||
|
||||
<form v-else @submit.prevent="handleSubmit" class="profile-edit-form">
|
||||
@@ -90,9 +95,13 @@
|
||||
|
||||
<script>
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import AvatarUpload from '../components/AvatarUpload.vue'
|
||||
|
||||
export default {
|
||||
name: 'ProfileEdit',
|
||||
components: {
|
||||
AvatarUpload
|
||||
},
|
||||
setup() {
|
||||
const authStore = useAuthStore()
|
||||
return { authStore }
|
||||
|
||||
Reference in New Issue
Block a user