Initial commit: XDL Twitter/X video downloader
This commit is contained in:
mini
11
frontend/Dockerfile
Normal file
11
frontend/Dockerfile
Normal file
@@ -0,0 +1,11 @@
|
||||
FROM node:20-alpine AS build
|
||||
WORKDIR /app
|
||||
COPY package.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
16
frontend/index.html
Normal file
16
frontend/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>XDL - Twitter Video Downloader</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f0f; color: #e0e0e0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
17
frontend/nginx.conf
Normal file
17
frontend/nginx.conf
Normal file
@@ -0,0 +1,17 @@
|
||||
server {
|
||||
listen 80;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://backend:8000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_buffering off;
|
||||
proxy_read_timeout 300;
|
||||
}
|
||||
}
|
||||
21
frontend/package.json
Normal file
21
frontend/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "xdl-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.0",
|
||||
"vue-router": "^4.3.0",
|
||||
"pinia": "^2.1.0",
|
||||
"axios": "^1.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
34
frontend/src/App.vue
Normal file
34
frontend/src/App.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<nav class="navbar">
|
||||
<router-link to="/" class="logo">📥 XDL</router-link>
|
||||
<div class="nav-links">
|
||||
<router-link to="/">Home</router-link>
|
||||
<router-link v-if="auth.isLoggedIn" to="/admin">Admin</router-link>
|
||||
<a v-if="auth.isLoggedIn" href="#" @click.prevent="auth.logout()">Logout</a>
|
||||
<router-link v-else to="/login">Login</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="container">
|
||||
<router-view />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useAuthStore } from './stores/auth.js'
|
||||
const auth = useAuthStore()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.app { min-height: 100vh; }
|
||||
.navbar {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 1rem 2rem; background: #1a1a2e; border-bottom: 1px solid #333;
|
||||
}
|
||||
.logo { font-size: 1.5rem; font-weight: bold; color: #1da1f2; text-decoration: none; }
|
||||
.nav-links { display: flex; gap: 1.5rem; }
|
||||
.nav-links a { color: #aaa; text-decoration: none; transition: color 0.2s; }
|
||||
.nav-links a:hover, .nav-links a.router-link-active { color: #1da1f2; }
|
||||
.container { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
|
||||
</style>
|
||||
9
frontend/src/main.js
Normal file
9
frontend/src/main.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import router from './router/index.js'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
22
frontend/src/router/index.js
Normal file
22
frontend/src/router/index.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Login from '../views/Login.vue'
|
||||
import Admin from '../views/Admin.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/login', component: Login },
|
||||
{ path: '/admin', component: Admin, meta: { requiresAuth: true } },
|
||||
]
|
||||
|
||||
const router = createRouter({ history: createWebHistory(), routes })
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta.requiresAuth && !localStorage.getItem('token')) {
|
||||
next('/login')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
25
frontend/src/stores/auth.js
Normal file
25
frontend/src/stores/auth.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref(localStorage.getItem('token') || '')
|
||||
const isLoggedIn = computed(() => !!token.value)
|
||||
|
||||
async function login(username, password) {
|
||||
const res = await axios.post('/api/auth/login', { username, password })
|
||||
token.value = res.data.access_token
|
||||
localStorage.setItem('token', token.value)
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = ''
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
|
||||
function getHeaders() {
|
||||
return token.value ? { Authorization: `Bearer ${token.value}` } : {}
|
||||
}
|
||||
|
||||
return { token, isLoggedIn, login, logout, getHeaders }
|
||||
})
|
||||
174
frontend/src/views/Admin.vue
Normal file
174
frontend/src/views/Admin.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="admin">
|
||||
<div class="header">
|
||||
<h2>Video Library</h2>
|
||||
<div v-if="stats" class="stats">
|
||||
📊 {{ stats.total_videos }} videos · {{ stats.total_size_human }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-bar">
|
||||
<input v-model="search" placeholder="Search videos..." @input="debouncedFetch" />
|
||||
<select v-model="filterStatus" @change="fetchVideos">
|
||||
<option value="">All Status</option>
|
||||
<option value="done">Done</option>
|
||||
<option value="downloading">Downloading</option>
|
||||
<option value="error">Error</option>
|
||||
<option value="pending">Pending</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="video-list">
|
||||
<div v-for="v in videos" :key="v.id" class="video-card">
|
||||
<div class="video-main">
|
||||
<img v-if="v.thumbnail" :src="v.thumbnail" class="thumb" />
|
||||
<div class="info">
|
||||
<h4>{{ v.title || 'Untitled' }}</h4>
|
||||
<div class="meta">
|
||||
<span :class="'status-' + v.status">{{ v.status }}</span>
|
||||
<span>{{ v.quality }}</span>
|
||||
<span>{{ humanSize(v.file_size) }}</span>
|
||||
<span>{{ new Date(v.created_at).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button v-if="v.status === 'done'" @click="playVideo(v)" class="btn-play">▶ Play</button>
|
||||
<a v-if="v.status === 'done'" :href="'/api/file/' + v.id" class="btn-dl"
|
||||
:download="v.filename" @click.prevent="downloadAuth(v)">💾</a>
|
||||
<button @click="deleteVideo(v)" class="btn-del">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!videos.length" class="empty">No videos found</div>
|
||||
</div>
|
||||
|
||||
<div v-if="totalPages > 1" class="pagination">
|
||||
<button :disabled="page <= 1" @click="page--; fetchVideos()">Prev</button>
|
||||
<span>{{ page }} / {{ totalPages }}</span>
|
||||
<button :disabled="page >= totalPages" @click="page++; fetchVideos()">Next</button>
|
||||
</div>
|
||||
|
||||
<!-- Video Player Modal -->
|
||||
<div v-if="playing" class="modal" @click.self="playing = null">
|
||||
<div class="player-wrap">
|
||||
<video :src="playUrl" controls autoplay class="player"></video>
|
||||
<button @click="playing = null" class="close-btn">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { useAuthStore } from '../stores/auth.js'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const videos = ref([])
|
||||
const stats = ref(null)
|
||||
const search = ref('')
|
||||
const filterStatus = ref('')
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const pageSize = 20
|
||||
const playing = ref(null)
|
||||
const playUrl = ref('')
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
|
||||
|
||||
function humanSize(bytes) {
|
||||
if (!bytes) return '0 B'
|
||||
for (const u of ['B', 'KB', 'MB', 'GB']) {
|
||||
if (bytes < 1024) return `${bytes.toFixed(1)} ${u}`
|
||||
bytes /= 1024
|
||||
}
|
||||
return `${bytes.toFixed(1)} TB`
|
||||
}
|
||||
|
||||
let debounceTimer
|
||||
function debouncedFetch() {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => { page.value = 1; fetchVideos() }, 300)
|
||||
}
|
||||
|
||||
async function fetchVideos() {
|
||||
try {
|
||||
const res = await axios.get('/api/admin/videos', {
|
||||
params: { page: page.value, page_size: pageSize, search: search.value, status: filterStatus.value },
|
||||
headers: auth.getHeaders()
|
||||
})
|
||||
videos.value = res.data.videos
|
||||
total.value = res.data.total
|
||||
} catch (e) {
|
||||
if (e.response?.status === 401) { auth.logout(); location.href = '/login' }
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const res = await axios.get('/api/admin/stats', { headers: auth.getHeaders() })
|
||||
stats.value = res.data
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function playVideo(v) {
|
||||
playing.value = v
|
||||
playUrl.value = `/api/stream/${v.id}?token=${auth.token}`
|
||||
}
|
||||
|
||||
async function downloadAuth(v) {
|
||||
const res = await axios.get(`/api/file/${v.id}`, { headers: auth.getHeaders(), responseType: 'blob' })
|
||||
const url = URL.createObjectURL(res.data)
|
||||
const a = document.createElement('a'); a.href = url; a.download = v.filename; a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
async function deleteVideo(v) {
|
||||
if (!confirm(`Delete "${v.title}"?`)) return
|
||||
try {
|
||||
await axios.delete(`/api/admin/videos/${v.id}`, { headers: auth.getHeaders() })
|
||||
fetchVideos(); fetchStats()
|
||||
} catch (e) {
|
||||
alert('Delete failed')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => { fetchVideos(); fetchStats() })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.stats { color: #888; }
|
||||
.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.search-bar input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
|
||||
.search-bar select { padding: 0.6rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
|
||||
.video-card {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
.video-main { display: flex; gap: 1rem; flex: 1; min-width: 0; }
|
||||
.thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
|
||||
.info { min-width: 0; }
|
||||
.info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.3rem; }
|
||||
.meta { display: flex; gap: 0.8rem; font-size: 0.85rem; color: #888; flex-wrap: wrap; }
|
||||
.status-done { color: #27ae60; }
|
||||
.status-downloading { color: #f39c12; }
|
||||
.status-error { color: #e74c3c; }
|
||||
.status-pending { color: #888; }
|
||||
.actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
|
||||
.actions button, .actions a {
|
||||
padding: 0.4rem 0.6rem; border: 1px solid #444; border-radius: 6px;
|
||||
background: transparent; color: #fff; cursor: pointer; text-decoration: none; font-size: 0.9rem;
|
||||
}
|
||||
.actions button:hover, .actions a:hover { border-color: #1da1f2; }
|
||||
.btn-del:hover { border-color: #e74c3c !important; }
|
||||
.empty { text-align: center; color: #666; padding: 3rem; }
|
||||
.pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
|
||||
.pagination button { padding: 0.5rem 1rem; border: 1px solid #444; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
|
||||
.pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 999; }
|
||||
.player-wrap { position: relative; max-width: 90vw; max-height: 90vh; }
|
||||
.player { max-width: 90vw; max-height: 85vh; border-radius: 8px; }
|
||||
.close-btn { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
|
||||
</style>
|
||||
170
frontend/src/views/Home.vue
Normal file
170
frontend/src/views/Home.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<h1>Twitter/X Video Downloader</h1>
|
||||
<p class="subtitle">Paste a Twitter/X video link to download</p>
|
||||
|
||||
<div class="input-group">
|
||||
<input v-model="url" placeholder="https://x.com/user/status/123..." @keyup.enter="parseUrl" :disabled="loading" />
|
||||
<button @click="parseUrl" :disabled="loading || !url.trim()">
|
||||
{{ loading ? '⏳ Parsing...' : '🔍 Parse' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-if="videoInfo" class="video-info">
|
||||
<img v-if="videoInfo.thumbnail" :src="videoInfo.thumbnail" class="thumbnail" />
|
||||
<h3>{{ videoInfo.title }}</h3>
|
||||
<p class="duration">Duration: {{ formatDuration(videoInfo.duration) }}</p>
|
||||
|
||||
<div class="formats">
|
||||
<h4>Select Quality:</h4>
|
||||
<div v-for="fmt in videoInfo.formats" :key="fmt.format_id" class="format-item"
|
||||
:class="{ selected: selectedFormat === fmt.format_id }" @click="selectedFormat = fmt.format_id">
|
||||
<span class="quality">{{ fmt.quality }}</span>
|
||||
<span class="ext">{{ fmt.ext }}</span>
|
||||
<span v-if="fmt.filesize" class="size">~{{ humanSize(fmt.filesize) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="download-btn" @click="startDownload" :disabled="downloading">
|
||||
{{ downloading ? '⏳ Downloading...' : '📥 Download' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="taskId" class="task-status">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: progress + '%' }"></div>
|
||||
</div>
|
||||
<p>{{ statusText }}</p>
|
||||
<a v-if="downloadReady" :href="downloadUrl" class="download-link" download>💾 Save to device</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
const url = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const videoInfo = ref(null)
|
||||
const selectedFormat = ref('best')
|
||||
const downloading = ref(false)
|
||||
const taskId = ref('')
|
||||
const progress = ref(0)
|
||||
const statusText = ref('')
|
||||
const downloadReady = ref(false)
|
||||
const downloadUrl = ref('')
|
||||
|
||||
function formatDuration(s) {
|
||||
if (!s) return 'N/A'
|
||||
const m = Math.floor(s / 60), sec = s % 60
|
||||
return `${m}:${String(sec).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function humanSize(bytes) {
|
||||
for (const u of ['B', 'KB', 'MB', 'GB']) {
|
||||
if (bytes < 1024) return `${bytes.toFixed(1)} ${u}`
|
||||
bytes /= 1024
|
||||
}
|
||||
return `${bytes.toFixed(1)} TB`
|
||||
}
|
||||
|
||||
async function parseUrl() {
|
||||
if (!url.value.trim()) return
|
||||
loading.value = true; error.value = ''; videoInfo.value = null; taskId.value = ''
|
||||
downloadReady.value = false
|
||||
try {
|
||||
const res = await axios.post('/api/parse', { url: url.value })
|
||||
videoInfo.value = res.data
|
||||
selectedFormat.value = 'best'
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.detail || 'Failed to parse URL'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function startDownload() {
|
||||
downloading.value = true; error.value = ''
|
||||
try {
|
||||
const res = await axios.post('/api/download', {
|
||||
url: url.value, format_id: selectedFormat.value, quality: selectedFormat.value
|
||||
})
|
||||
taskId.value = res.data.task_id
|
||||
statusText.value = 'Starting download...'
|
||||
pollStatus()
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.detail || 'Failed to start download'
|
||||
downloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
if (!taskId.value) return
|
||||
try {
|
||||
const res = await axios.get(`/api/download/${taskId.value}`)
|
||||
const d = res.data
|
||||
progress.value = d.progress
|
||||
if (d.status === 'done') {
|
||||
statusText.value = `✅ Done: ${d.title}`
|
||||
downloading.value = false
|
||||
downloadReady.value = true
|
||||
downloadUrl.value = `/api/file/task/${taskId.value}`
|
||||
} else if (d.status === 'error') {
|
||||
statusText.value = `❌ Error: ${d.error_message}`
|
||||
downloading.value = false
|
||||
} else {
|
||||
statusText.value = `⏳ ${d.status}... ${d.progress}%`
|
||||
setTimeout(pollStatus, 2000)
|
||||
}
|
||||
} catch {
|
||||
setTimeout(pollStatus, 3000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home { text-align: center; }
|
||||
h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
||||
.subtitle { color: #888; margin-bottom: 2rem; }
|
||||
.input-group { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.input-group input {
|
||||
flex: 1; padding: 0.8rem 1rem; border: 1px solid #444; border-radius: 8px;
|
||||
background: #1a1a2e; color: #fff; font-size: 1rem;
|
||||
}
|
||||
.input-group button, .download-btn {
|
||||
padding: 0.8rem 1.5rem; border: none; border-radius: 8px; cursor: pointer;
|
||||
background: #1da1f2; color: #fff; font-size: 1rem; font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.input-group button:hover, .download-btn:hover { background: #1991db; }
|
||||
.input-group button:disabled, .download-btn:disabled { background: #555; cursor: not-allowed; }
|
||||
.error { color: #ff6b6b; margin: 1rem 0; padding: 0.8rem; background: #2a1515; border-radius: 8px; }
|
||||
.video-info { text-align: left; background: #1a1a2e; border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; }
|
||||
.thumbnail { width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
|
||||
.video-info h3 { margin-bottom: 0.5rem; }
|
||||
.duration { color: #888; margin-bottom: 1rem; }
|
||||
.formats { margin: 1rem 0; }
|
||||
.formats h4 { margin-bottom: 0.5rem; }
|
||||
.format-item {
|
||||
display: flex; gap: 1rem; align-items: center; padding: 0.6rem 1rem;
|
||||
border: 1px solid #333; border-radius: 8px; margin-bottom: 0.4rem; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.format-item:hover { border-color: #1da1f2; }
|
||||
.format-item.selected { border-color: #1da1f2; background: rgba(29, 161, 242, 0.1); }
|
||||
.quality { font-weight: 600; min-width: 60px; }
|
||||
.ext { color: #888; }
|
||||
.size { color: #888; margin-left: auto; }
|
||||
.download-btn { width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.1rem; }
|
||||
.task-status { margin-top: 1.5rem; }
|
||||
.progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
|
||||
.progress-fill { height: 100%; background: #1da1f2; transition: width 0.3s; }
|
||||
.download-link {
|
||||
display: inline-block; margin-top: 0.5rem; padding: 0.8rem 2rem;
|
||||
background: #27ae60; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
52
frontend/src/views/Login.vue
Normal file
52
frontend/src/views/Login.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<h2>Admin Login</h2>
|
||||
<form @submit.prevent="handleLogin">
|
||||
<input v-model="username" placeholder="Username" required />
|
||||
<input v-model="password" type="password" placeholder="Password" required />
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<button type="submit" :disabled="loading">{{ loading ? 'Logging in...' : 'Login' }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth.js'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function handleLogin() {
|
||||
loading.value = true; error.value = ''
|
||||
try {
|
||||
await auth.login(username.value, password.value)
|
||||
router.push('/admin')
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.detail || 'Login failed'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login { max-width: 360px; margin: 4rem auto; text-align: center; }
|
||||
h2 { margin-bottom: 1.5rem; }
|
||||
form { display: flex; flex-direction: column; gap: 1rem; }
|
||||
input {
|
||||
padding: 0.8rem 1rem; border: 1px solid #444; border-radius: 8px;
|
||||
background: #1a1a2e; color: #fff; font-size: 1rem;
|
||||
}
|
||||
button {
|
||||
padding: 0.8rem; border: none; border-radius: 8px; cursor: pointer;
|
||||
background: #1da1f2; color: #fff; font-size: 1rem; font-weight: 600;
|
||||
}
|
||||
button:disabled { background: #555; }
|
||||
.error { color: #ff6b6b; padding: 0.5rem; background: #2a1515; border-radius: 8px; }
|
||||
</style>
|
||||
11
frontend/vite.config.js
Normal file
11
frontend/vite.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:8000'
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user