Add site-wide login gate protecting the whole app

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:
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
+56
View File
@@ -0,0 +1,56 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '../stores/auth'
const store = useAuthStore()
const passwordInput = ref('')
async function submit() {
const ok = await store.login(passwordInput.value)
if (ok) passwordInput.value = ''
}
</script>
<template>
<div class="login-gate">
<form class="card" @submit.prevent="submit">
<span class="title">PlayChat</span>
<p class="hint">サイトを利用するにはパスワードが必要です。</p>
<input
v-model="passwordInput"
type="password"
placeholder="パスワード"
autocomplete="current-password"
autofocus
/>
<button type="submit" :disabled="store.loading || !passwordInput">
{{ store.loading ? '確認中...' : 'ログイン' }}
</button>
<p v-if="store.error" class="error">{{ store.error }}</p>
</form>
</div>
</template>
<style scoped>
.login-gate {
height: 100vh; display: flex; align-items: center; justify-content: center;
background: #111;
}
.card {
display: flex; flex-direction: column; gap: 10px;
width: 280px; padding: 24px; background: #1a1a1a;
border: 1px solid #2a2a2a; border-radius: 10px;
}
.title { font-size: 18px; font-weight: 600; color: #fff; }
.hint { font-size: 12px; color: #888; }
input {
background: #2a2a2a; color: #eee; border: 1px solid #444;
border-radius: 6px; padding: 8px 10px; font-size: 13px; width: 100%;
}
button {
background: #1d3557; color: #93c5fd; border: 1px solid #2563eb;
border-radius: 6px; padding: 8px 10px; font-size: 13px; cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
.error { font-size: 12px; color: #f87171; }
</style>