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:
@@ -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>
|
||||
Reference in New Issue
Block a user