fixed room listing and added logout button

This commit is contained in:
2025-12-15 17:54:07 +01:00
parent 5c1f5ab16b
commit 22c187e4ee

View File

@@ -12,21 +12,31 @@
</router-link> </router-link>
</li> </li>
</ul> </ul>
<button class="logout" @click="logout()">Logout</button>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { initAuth } from '../stores/auth.ts' import { useRouter } from 'vue-router'
import { initAuth, logout as authLogout } from '../stores/auth.ts'
import { fetchRooms } from '../api/rooms' import { fetchRooms } from '../api/rooms'
import type { Room } from '../types/api' import type { Room } from '../types/api'
const router = useRouter()
const rooms = ref<Room[]>([]) const rooms = ref<Room[]>([])
onMounted(async () => { onMounted(async () => {
const auth = await initAuth() const auth = await initAuth()
rooms.value = await fetchRooms(auth.uuid!) rooms.value = await fetchRooms(auth.uuid!)
}) })
function logout() {
authLogout()
router.push('/login')
}
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -80,4 +90,11 @@ export default { components: { CreateRoomForm } }
.room-link:hover { .room-link:hover {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.logout {
position: absolute;
left: 0;
top: 0;
margin: 30px;
}
</style> </style>