munch-ease-frontend/src/components/LoginPage.vue

<template>

    <div class="login">
        <h1>Login Page</h1>
        <ul class="button-group">
            <li v-for="person in persons" :key="person.id">
                <button type="button" class="btn btn-primary" @click="login(person)">
                    {{ person.name }}
                </button>
            </li>
        </ul>
    </div>

</template>

<style scoped>

/* Remove the default list styling */
ul {
    list-style-type: none;
    padding: 0;
}

/* Center the buttons in the middle of the page, and let them wrap */

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Display each button as a large round circle */

button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 10px;
    font-size: 1.5em;

    /* Center the text in the middle of the button */
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>

<script>
import data from '@/data';

export default {
    name: 'LoginVue',
    props: {
        redirect: {
            type: String,
            default: '/'
        },
    },
    data() {
        return {
            persons: [],
        }
    },
    async beforeMount() {
        this.persons = await data.getPersonsInHome();
    },
    methods: {
        async login(selectedPerson) {
            const person = await data.login(selectedPerson.name);
            if (person?.id >= 0) {
                this.$router.push(this.redirect);
                return;
            }

            alert('Login failed');
        }
    }
}

</script>