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;

    /* Add a shadow to make the buttons look like they are floating */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Some nice flat nuetral shades for the user buttons */

li:nth-child(1) > button {
    background-color: #3939ff;
    color: white;
}

li:nth-child(2) > button {
    background-color: #156a14;
    color: white;
}

li:nth-child(3) > button {
    background-color: #325293;
    color: white;
}

li:nth-child(4) > button {
    background-color: #9a1f1f;
    color: white;
}


</style>

<script>
import { getPersonsInHome } from '@/api/persons';
import { login } from '@/api/auth';

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

            alert('Login failed');
        }
    }
}

</script>