colcaroli/playchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add site-wide login gate protecting the whole app

Browse Source 
Chat/memory/logs/models APIs were reachable without any auth even
though the app is deployed publicly behind Caddy HTTPS; only the
settings screen had a password. Add an optional SITE_PASSWORD-backed
session cookie gate in front of everything (settings included, on
top of its existing SETTINGS_PASSWORD), with a matching login screen
on the frontend. Stays fully backward compatible: with SITE_PASSWORD
unset the app behaves exactly as before.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
colcaroli
2026-08-18 23:04:01 +09:00
co-authored by Claude Sonnet 5
parent 002282a8b7
commit 1ad8b130c7
12 changed files with 319 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+54 -31
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue'
import { onMounted, onUnmounted, ref } from 'vue'
import SessionList from './components/SessionList.vue'
import ChatWindow from './components/ChatWindow.vue'
import MessageInput from './components/MessageInput.vue'
@@ -10,6 +10,10 @@ import ToastList from './components/ToastList.vue'
import MemoryMonitor from './components/MemoryMonitor.vue'
import Clock from './components/Clock.vue'
import WordPool from './components/WordPool.vue'
import LoginGate from './components/LoginGate.vue'
import { useAuthStore } from './stores/auth'
const authStore = useAuthStore()
type SidePanel = 'none' | 'logs' | 'settings'
const activePanel = ref<SidePanel>('none')
@@ -17,42 +21,61 @@ const activePanel = ref<SidePanel>('none')
function togglePanel(panel: SidePanel) {
activePanel.value = activePanel.value === panel ? 'none' : panel
}
function handleUnauthorized() {
authStore.markUnauthenticated()
}
onMounted(() => {
authStore.checkStatus()
window.addEventListener('playchat:unauthorized', handleUnauthorized)
})
onUnmounted(() => {
window.removeEventListener('playchat:unauthorized', handleUnauthorized)
})
</script>
<template>
<div class="app">
<div class="sidebar">
<SessionList />
<MemoryMonitor />
<WordPool />
</div>
<div class="main">
<header>
<span class="title">PlayChat</span>
<ModelSelector />
<Clock />
<button class="log-toggle" :class="{ active: activePanel === 'settings' }" @click="togglePanel('settings')">
設定
</button>
<button class="log-toggle" :class="{ active: activePanel === 'logs' }" @click="togglePanel('logs')">
ログ
</button>
</header>
<div class="body">
<div class="chat-pane">
<ChatWindow />
<MessageInput />
</div>
<div v-if="activePanel === 'logs'" class="log-pane">
<LogViewer />
</div>
<div v-else-if="activePanel === 'settings'" class="log-pane">
<SettingsPanel />
<template v-if="authStore.loading" />
<LoginGate v-else-if="authStore.required && !authStore.authenticated" />
<template v-else>
<div class="app">
<div class="sidebar">
<SessionList />
<MemoryMonitor />
<WordPool />
</div>
<div class="main">
<header>
<span class="title">PlayChat</span>
<ModelSelector />
<Clock />
<button class="log-toggle" :class="{ active: activePanel === 'settings' }" @click="togglePanel('settings')">
設定
</button>
<button class="log-toggle" :class="{ active: activePanel === 'logs' }" @click="togglePanel('logs')">
ログ
</button>
<button v-if="authStore.required" class="log-toggle" @click="authStore.logout()">
ログアウト
</button>
</header>
<div class="body">
<div class="chat-pane">
<ChatWindow />
<MessageInput />
</div>
<div v-if="activePanel === 'logs'" class="log-pane">
<LogViewer />
</div>
<div v-else-if="activePanel === 'settings'" class="log-pane">
<SettingsPanel />
</div>
</div>
</div>
</div>
</div>
<ToastList />
<ToastList />
</template>
</template>
<style>