added room invites to DB, and minor frontend layout changes
This commit is contained in:
31
src/App.vue
31
src/App.vue
@@ -1,9 +1,33 @@
|
||||
<template>
|
||||
<div id="page">
|
||||
<router-view />
|
||||
|
||||
<div id="absolute">
|
||||
<button class="logout" @click="logout()">Logout</button>
|
||||
|
||||
<router-link to="." class="button">
|
||||
Home
|
||||
</router-link>
|
||||
|
||||
<router-link to="/friendlist" class="button">
|
||||
Friendlist
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import { logout as authLogout } from './stores/auth.ts'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function logout() {
|
||||
authLogout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#page {
|
||||
display: flex;
|
||||
@@ -15,6 +39,13 @@
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
#absolute {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
#page {
|
||||
padding: 0;
|
||||
|
||||
@@ -52,7 +52,7 @@ input:focus, textarea:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
button {
|
||||
button, .button {
|
||||
font-size: 1rem;
|
||||
background: var(--accent);
|
||||
color: #0b0d12;
|
||||
@@ -61,9 +61,11 @@ button {
|
||||
padding: 0.6rem 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button:hover, .button:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
|
||||
<CreateRoomModal v-if="showCreate" @close="showCreate = false" @created="rooms.push($event)" />
|
||||
|
||||
<router-link to="/friendlist">
|
||||
to friendlist
|
||||
</router-link>
|
||||
|
||||
<ul class="rooms-list">
|
||||
<li v-for="room in rooms" :key="room.uuid" class="room-item">
|
||||
<router-link class="room-link" :to="`/rooms/${room.uuid}`">
|
||||
@@ -18,35 +14,24 @@
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="logout" @click="logout()">Logout</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { initAuth, logout as authLogout } from '../stores/auth.ts'
|
||||
import { initAuth } from '../stores/auth.ts'
|
||||
import { fetchRooms } from '../api/rooms'
|
||||
import type { Room } from '../types/api'
|
||||
import CreateRoomModal from '../components/CreateRoomModal.vue'
|
||||
|
||||
const showCreate = ref(false)
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const rooms = ref<Room[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
const auth = await initAuth()
|
||||
rooms.value = await fetchRooms(auth.uuid!)
|
||||
})
|
||||
|
||||
function logout() {
|
||||
authLogout()
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -96,13 +81,6 @@ function logout() {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.logout {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.owner {
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
|
||||
Reference in New Issue
Block a user