Ask for pin for private rooms

This commit is contained in:
Leonardo Segala 2025-08-02 13:34:10 +02:00
parent 9ec601b263
commit fb49da2edd
2 changed files with 45 additions and 16 deletions

View file

@ -73,7 +73,7 @@ def on_leave(data):
@app.get("/api/join")
def join():
room_id = request.args.get("room")
code = request.args.get("code")
code = request.args.get("pin")
if room_id is None:
return error("Missing room id")
@ -81,8 +81,11 @@ def join():
if (room := state.rooms.get(int(room_id))) is None:
return error("Invalid room")
if room.pin is not None and room.pin != code:
return error("Invalid code")
if room.pin is not None:
if code is None:
return error("Missing code")
if int(room.pin) != int(code):
return error("Invalid code")
distance = distance_between_coords(
lhs=room.coord,

View file

@ -1,19 +1,45 @@
<script lang="ts">
import { type Room } from "$lib/types"
let { room }: { room: Room } = $props()
let showPinModal: boolean = $state(false)
let pin: number = $state()
</script>
<a
class="flex w-82 cursor-pointer flex-row items-center rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
href="/room/{room.id}"
<div
class="flex gap-2 w-82 cursor-pointer flex-col rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
>
<div class="flex flex-row">
{room.name}
{room.private ? "🔒" : ""}
</div>
<div class="grow"></div>
<div class="flex flex-row items-center gap-2">
<div class="font-mono">{Math.round(room.distance)}m</div>
<div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
</div>
</a>
<button
class="flex flex-row items-center"
onclick={() => {
if (!room.private) {
window.location.href = "/room/" + room.id
return
}
showPinModal = !showPinModal
}}
>
<div class="flex flex-row">
{room.name}
{room.private ? "🔒" : ""}
</div>
<div class="grow"></div>
<div class="flex flex-row items-center gap-2">
<div class="font-mono">{Math.round(room.distance)}m</div>
<div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
</div>
</button>
{#if showPinModal}
<input
placeholder="PIN (requied)"
class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
type="number"
bind:value={pin}
/>
<button
onclick={() => {
window.location.href = `/room/${room.id}?pin=${pin}`
}}
class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2">JOIN</button
>
{/if}
</div>