update

frontend/src/components/VerwaltungTab.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 })
 
 const liste = computed(() =>
-  props.host ? props.items : props.items.filter((u) => u.id === props.ich?.id)
+  props.host ? props.items : props.items.filter((u) => u.id === props.ich?.id),
 )
 
 const neuerName = ref('')
@@ -47,6 +47,30 @@ async function schutzZeigen(user) {
   gezeigt[user.id] = resp.ok ? await resp.json() : { fehler: true }
 }
 
+// Der Host-Film: das Passwort für den Hostmodus, gesetzt vom Host
+const hostFilmDialog = ref(false)
+const hostFilm = ref(null)
+
+async function hostFilmZeigen() {
+  if (hostFilm.value) {
+    hostFilm.value = null
+    return
+  }
+  hostFilm.value = { laden: true }
+  const resp = await fetch('/api/host/film')
+  hostFilm.value = resp.ok ? await resp.json() : { fehler: true }
+}
+
+async function hostFilmSetzen(movieId) {
+  await fetch('/api/host/film', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ movie_id: movieId }),
+  })
+  hostFilm.value = null
+  hostFilmDialog.value = false
+}
+
 async function anlegen() {
   fehler.value = ''
   const resp = await fetch('/api/users', {
@@ -69,8 +93,8 @@ async function entfernen(user) {
       <h3>{{ host ? 'Benutzer' : 'Dein Zugang' }}</h3>
 
       <p v-if="!host" class="erklaerung">
-        Hinterleg einen Film, dann fragt die Seite beim Wechsel auf deinen
-        Namen danach. Ohne Film bleibt dein Name für alle offen.
+        Hinterleg einen Film, dann fragt die Seite beim Wechsel auf deinen Namen danach. Ohne Film
+        bleibt dein Name für alle offen.
       </p>
 
       <div v-if="host" class="anlegen">
@@ -148,6 +172,43 @@ async function entfernen(user) {
       <p v-else class="leer">Noch niemand in der Runde.</p>
     </section>
 
+    <section v-if="host" class="hostfilm">
+      <h3>Host-Film</h3>
+      <p class="erklaerung">
+        Die Tastenkombination fragt ohne Freischaltung nach diesem Film. Wer ihn anklickt, ist Host
+        — ohne Link.
+      </p>
+      <div class="zeile">
+        <button type="button" class="klein" @click="hostFilmDialog = true">Film setzen</button>
+        <button type="button" class="klein" title="Anzeigen" @click="hostFilmZeigen">👁</button>
+        <button type="button" class="klein" @click="hostFilmSetzen(null)">Aufheben</button>
+        <span v-if="hostFilm" class="film-anzeige">
+          <template v-if="hostFilm.laden">…</template>
+          <template v-else-if="hostFilm.fehler">nicht lesbar</template>
+          <template v-else-if="hostFilm.film"
+            >{{ hostFilm.film.title }} ({{ hostFilm.film.year }})</template
+          >
+          <template v-else>keiner gesetzt</template>
+        </span>
+      </div>
+    </section>
+
+    <Teleport to="body">
+      <div v-if="hostFilmDialog" class="hintergrund" @click.self="hostFilmDialog = false">
+        <div class="fenster" role="dialog" aria-modal="true">
+          <p class="label">Host-Film</p>
+          <h2>Passwort für den Hostmodus</h2>
+          <p class="frage">Diesen Film klickt man nach der Tastenkombination an.</p>
+          <FilmSuche platzhalter="Film als Passwort …" @waehlen="hostFilmSetzen($event.id)" />
+          <div class="fuss">
+            <button type="button" class="abbrechen" @click="hostFilmDialog = false">
+              Abbrechen
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
     <Teleport to="body">
       <div v-if="setzt" class="hintergrund" @click.self="setzt = null">
         <div class="fenster" role="dialog" aria-modal="true">
@@ -161,15 +222,10 @@ async function entfernen(user) {
             }}
           </p>
 
-          <FilmSuche
-            platzhalter="Film als Passwort …"
-            @waehlen="schutzSetzen(setzt, $event.id)"
-          />
+          <FilmSuche platzhalter="Film als Passwort …" @waehlen="schutzSetzen(setzt, $event.id)" />
 
           <div class="fuss">
-            <button type="button" class="abbrechen" @click="setzt = null">
-              Abbrechen
-            </button>
+            <button type="button" class="abbrechen" @click="setzt = null">Abbrechen</button>
           </div>
         </div>
       </div>
@@ -415,4 +471,16 @@ h3 {
     border-radius: 0;
   }
 }
+
+.hostfilm .zeile {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.film-anzeige {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
 </style>