feat: add Vue 3 frontend with Vite and Docker
SPA with bookmark form, list with category filters, and categorize button. Served via nginx with API reverse proxy. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
a1f33e2046
commit
f0ef26ee15
15 changed files with 564 additions and 0 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -3,3 +3,5 @@ __pycache__/
|
||||||
.venv/
|
.venv/
|
||||||
.env
|
.env
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
|
|
||||||
2
frontend/.dockerignore
Normal file
2
frontend/.dockerignore
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
17
frontend/Dockerfile
Normal file
17
frontend/Dockerfile
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
FROM node:22-alpine AS build
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
RUN npm install
|
||||||
|
COPY . .
|
||||||
|
ARG VITE_FIREBASE_API_KEY
|
||||||
|
ARG VITE_FIREBASE_AUTH_DOMAIN
|
||||||
|
ARG VITE_FIREBASE_PROJECT_ID
|
||||||
|
ARG VITE_FIREBASE_STORAGE_BUCKET
|
||||||
|
ARG VITE_FIREBASE_MESSAGING_SENDER_ID
|
||||||
|
ARG VITE_FIREBASE_APP_ID
|
||||||
|
ARG VITE_FIREBASE_MEASUREMENT_ID
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:alpine
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=build /app/dist /usr/share/nginx/html
|
||||||
12
frontend/index.html
Normal file
12
frontend/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Favs</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
13
frontend/nginx.conf
Normal file
13
frontend/nginx.conf
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://favs-api:8000;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
frontend/package.json
Normal file
17
frontend/package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"name": "favs-ui",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.5",
|
||||||
|
"firebase": "^11.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0",
|
||||||
|
"vite": "^6.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
116
frontend/src/App.vue
Normal file
116
frontend/src/App.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { useAuth } from './composables/useAuth.js'
|
||||||
|
import { getBookmarks, triggerCategorize } from './api.js'
|
||||||
|
import BookmarkForm from './components/BookmarkForm.vue'
|
||||||
|
import BookmarkList from './components/BookmarkList.vue'
|
||||||
|
|
||||||
|
const { user, loading, loginWithGoogle, logout } = useAuth()
|
||||||
|
|
||||||
|
const bookmarks = ref([])
|
||||||
|
const activeCategory = ref(null)
|
||||||
|
const categorizing = ref(false)
|
||||||
|
const status = ref('')
|
||||||
|
|
||||||
|
const categories = computed(() => {
|
||||||
|
const cats = new Set()
|
||||||
|
bookmarks.value.forEach(b => { if (b.category) cats.add(b.category) })
|
||||||
|
return [...cats].sort()
|
||||||
|
})
|
||||||
|
|
||||||
|
const filtered = computed(() => {
|
||||||
|
if (!activeCategory.value) return bookmarks.value
|
||||||
|
return bookmarks.value.filter(b => b.category === activeCategory.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
if (!user.value) return
|
||||||
|
bookmarks.value = await getBookmarks()
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCreated(bookmark) {
|
||||||
|
bookmarks.value.unshift(bookmark)
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeleted(id) {
|
||||||
|
bookmarks.value = bookmarks.value.filter(b => b.id !== id)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setCategory(cat) {
|
||||||
|
activeCategory.value = activeCategory.value === cat ? null : cat
|
||||||
|
}
|
||||||
|
|
||||||
|
async function categorize() {
|
||||||
|
categorizing.value = true
|
||||||
|
status.value = ''
|
||||||
|
try {
|
||||||
|
const res = await triggerCategorize()
|
||||||
|
status.value = `${res.categorized} bookmarks categorized`
|
||||||
|
await load()
|
||||||
|
} catch (e) {
|
||||||
|
status.value = `Error: ${e.message}`
|
||||||
|
} finally {
|
||||||
|
categorizing.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const stop = setInterval(() => {
|
||||||
|
if (!loading.value) {
|
||||||
|
clearInterval(stop)
|
||||||
|
if (user.value) load()
|
||||||
|
}
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- Loading -->
|
||||||
|
<div v-if="loading" class="empty">Loading...</div>
|
||||||
|
|
||||||
|
<!-- Login -->
|
||||||
|
<div v-else-if="!user" class="login-screen">
|
||||||
|
<h1>favs</h1>
|
||||||
|
<p class="login-subtitle">Your personal bookmarks</p>
|
||||||
|
<button class="btn-google" @click="loginWithGoogle">Sign in with Google</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- App -->
|
||||||
|
<div v-else>
|
||||||
|
<div class="header">
|
||||||
|
<h1>favs</h1>
|
||||||
|
<div class="user-info">
|
||||||
|
<span class="user-email">{{ user.email }}</span>
|
||||||
|
<button class="btn-logout" @click="logout">Logout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BookmarkForm @created="onCreated" />
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||||
|
<button class="btn-categorize" @click="categorize" :disabled="categorizing">
|
||||||
|
{{ categorizing ? 'Categorizing...' : 'Categorize' }}
|
||||||
|
</button>
|
||||||
|
<span v-if="status" class="status">{{ status }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="categories.length" class="category-bar">
|
||||||
|
<button
|
||||||
|
class="category-pill"
|
||||||
|
:class="{ active: !activeCategory }"
|
||||||
|
@click="activeCategory = null"
|
||||||
|
>all</button>
|
||||||
|
<button
|
||||||
|
v-for="cat in categories"
|
||||||
|
:key="cat"
|
||||||
|
class="category-pill"
|
||||||
|
:class="{ active: activeCategory === cat }"
|
||||||
|
@click="setCategory(cat)"
|
||||||
|
>{{ cat }}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<BookmarkList :bookmarks="filtered" @deleted="onDeleted" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
32
frontend/src/api.js
Normal file
32
frontend/src/api.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import { getIdToken } from './firebase.js'
|
||||||
|
|
||||||
|
const BASE = '/api'
|
||||||
|
|
||||||
|
async function request(path, options = {}) {
|
||||||
|
const token = await getIdToken()
|
||||||
|
const headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options.headers,
|
||||||
|
}
|
||||||
|
if (token) {
|
||||||
|
headers['Authorization'] = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
const res = await fetch(`${BASE}${path}`, { ...options, headers })
|
||||||
|
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
|
||||||
|
if (res.status === 204) return null
|
||||||
|
return res.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getBookmarks = (category) => {
|
||||||
|
const qs = category ? `?category=${encodeURIComponent(category)}` : ''
|
||||||
|
return request(`/bookmarks/${qs}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createBookmark = (data) =>
|
||||||
|
request('/bookmarks/', { method: 'POST', body: JSON.stringify(data) })
|
||||||
|
|
||||||
|
export const deleteBookmark = (id) =>
|
||||||
|
request(`/bookmarks/${id}`, { method: 'DELETE' })
|
||||||
|
|
||||||
|
export const triggerCategorize = () =>
|
||||||
|
request('/categorize', { method: 'POST' })
|
||||||
27
frontend/src/components/BookmarkForm.vue
Normal file
27
frontend/src/components/BookmarkForm.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { createBookmark } from '../api.js'
|
||||||
|
|
||||||
|
const emit = defineEmits(['created'])
|
||||||
|
const title = ref('')
|
||||||
|
const link = ref('')
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
if (!title.value.trim() || !link.value.trim()) return
|
||||||
|
const bookmark = await createBookmark({
|
||||||
|
title: title.value.trim(),
|
||||||
|
link: link.value.trim(),
|
||||||
|
})
|
||||||
|
emit('created', bookmark)
|
||||||
|
title.value = ''
|
||||||
|
link.value = ''
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<form class="bookmark-form" @submit.prevent="submit">
|
||||||
|
<input v-model="title" placeholder="Title" required />
|
||||||
|
<input v-model="link" placeholder="https://..." required />
|
||||||
|
<button type="submit" class="btn-add">Add</button>
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
25
frontend/src/components/BookmarkList.vue
Normal file
25
frontend/src/components/BookmarkList.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script setup>
|
||||||
|
import { deleteBookmark } from '../api.js'
|
||||||
|
|
||||||
|
defineProps({ bookmarks: Array })
|
||||||
|
const emit = defineEmits(['deleted'])
|
||||||
|
|
||||||
|
async function remove(id) {
|
||||||
|
await deleteBookmark(id)
|
||||||
|
emit('deleted', id)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div v-if="!bookmarks.length" class="empty">No bookmarks yet</div>
|
||||||
|
<div v-for="b in bookmarks" :key="b.id" class="bookmark-item">
|
||||||
|
<div class="bookmark-info">
|
||||||
|
<a :href="b.link" target="_blank" rel="noopener" class="bookmark-title">{{ b.title }}</a>
|
||||||
|
<div class="bookmark-meta">
|
||||||
|
<span v-if="b.category" class="bookmark-category">{{ b.category }}</span>
|
||||||
|
{{ new Date(b.created_at).toLocaleDateString() }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn-delete" @click="remove(b.id)">delete</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
20
frontend/src/composables/useAuth.js
Normal file
20
frontend/src/composables/useAuth.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { onAuthStateChanged } from 'firebase/auth'
|
||||||
|
import { auth, loginWithGoogle, logout } from '../firebase.js'
|
||||||
|
|
||||||
|
const user = ref(null)
|
||||||
|
const loading = ref(true)
|
||||||
|
|
||||||
|
let initialized = false
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
if (!initialized) {
|
||||||
|
initialized = true
|
||||||
|
onAuthStateChanged(auth, (u) => {
|
||||||
|
user.value = u
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return { user, loading, loginWithGoogle, logout }
|
||||||
|
}
|
||||||
24
frontend/src/firebase.js
Normal file
24
frontend/src/firebase.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { initializeApp } from 'firebase/app'
|
||||||
|
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth'
|
||||||
|
|
||||||
|
const app = initializeApp({
|
||||||
|
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
|
||||||
|
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
|
||||||
|
projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
|
||||||
|
storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
|
||||||
|
messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
|
||||||
|
appId: import.meta.env.VITE_FIREBASE_APP_ID,
|
||||||
|
})
|
||||||
|
|
||||||
|
export const auth = getAuth(app)
|
||||||
|
|
||||||
|
const provider = new GoogleAuthProvider()
|
||||||
|
|
||||||
|
export const loginWithGoogle = () => signInWithPopup(auth, provider)
|
||||||
|
export const logout = () => signOut(auth)
|
||||||
|
|
||||||
|
export async function getIdToken() {
|
||||||
|
const user = auth.currentUser
|
||||||
|
if (!user) return null
|
||||||
|
return user.getIdToken()
|
||||||
|
}
|
||||||
5
frontend/src/main.js
Normal file
5
frontend/src/main.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
239
frontend/src/style.css
Normal file
239
frontend/src/style.css
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
background: #0f0f0f;
|
||||||
|
color: #e0e0e0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 2rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form */
|
||||||
|
.bookmark-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-form input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-form input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-form input::placeholder {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
button {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
background: #2563eb;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add:hover {
|
||||||
|
background: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-categorize {
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #a0a0a0;
|
||||||
|
border: 1px solid #333;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-categorize:hover {
|
||||||
|
background: #252525;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
background: none;
|
||||||
|
color: #555;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete:hover {
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Category bar */
|
||||||
|
.category-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.375rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-pill {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #888;
|
||||||
|
border: 1px solid #282828;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-pill:hover {
|
||||||
|
color: #ccc;
|
||||||
|
border-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-pill.active {
|
||||||
|
background: #2563eb;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bookmark list */
|
||||||
|
.bookmark-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.625rem 0;
|
||||||
|
border-bottom: 1px solid #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-info {
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-title {
|
||||||
|
color: #60a5fa;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-title:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-meta {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #555;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-category {
|
||||||
|
color: #888;
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 0.1rem 0.4rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
color: #555;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Login */
|
||||||
|
.login-screen {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google {
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
padding: 0.625rem 1.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google:hover {
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-email {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout {
|
||||||
|
background: none;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-logout:hover {
|
||||||
|
color: #fff;
|
||||||
|
border-color: #555;
|
||||||
|
}
|
||||||
13
frontend/vite.config.js
Normal file
13
frontend/vite.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
'/api': 'http://favs-api:8000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue