<template>
  <Navbar />
  <div class="content">
    <router-view/>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  components: { Navbar }  
}
</script>

<style>
  .content {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
  }
</style>

<template>
    <div class="welcome container">
        <div v-if="showLogin">
            <LoginForm @login="enterHomepage"/>
        </div>
    </div>
</template>

<script>
import LoginForm from '../components/LoginForm.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
    components: { LoginForm },
    setup() {
        const showLogin = ref(true)
        const router = useRouter()

        const enterHomepage = () => {
            router.push({ name: 'ViewBlockedUsers' })
        }

        return { showLogin, enterHomepage }
    },
}
</script>

<style>
    .welcome {
        text-align: center;
        padding: 20px 0;
    }
    /* form styles */
    .welcome form {
        width: 300px;
        margin: 20px auto;
    }
    .welcome label {
        display: block;
        margin: 20px 0 10px;
    }
    .welcome input {
        width: 100%;
        padding: 10px;
        border-radius: 20px;
        border: 1px solid #eee;
        outline: none;
        color: #999;
        margin: 10px auto;
    }        
    .welcome span {
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
    }
    .welcome button {
        margin: 20px auto;
    }
</style>