New login page

src/components/LoginPage.vue

@@ -1,19 +1,51 @@
 <template>
 
     <div class="login">
-        <h1>Login</h1>
+        <h1>Login Page</h1>
-        <form>
+        <ul class="button-group">
-            <div class="form-group">
+            <li v-for="person in persons" :key="person.id">
-                <label for="username">Username</label>
+                <button type="button" class="btn btn-primary" @click="login(person)">
-                <input v-model="username" type="text" class="form-control" id="username" placeholder="Username">
+                    {{ person.name }}
-            </div>
+                </button>
-            
+            </li>
-            <button type="button" class="btn btn-primary" @click="login">Login</button>
+        </ul>
-        </form>
     </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';
 
@@ -23,16 +55,19 @@ export default {
         redirect: {
             type: String,
             default: '/'
-        }
+        },
     },
     data() {
         return {
-            username: '',
+            persons: [],
         }
     },
+    async beforeMount() {
+        this.persons = await data.getPersonsInHome();
+    },
     methods: {
-        async login() {
+        async login(selectedPerson) {
-            const person = await data.login(this.username);
+            const person = await data.login(selectedPerson.name);
             if (person?.id >= 0) {
                 this.$router.push(this.redirect);
                 return;
@@ -44,6 +79,3 @@ export default {
 }
 
 </script>
-
-<style>
-</style>

src/data.js

@@ -294,5 +294,9 @@ export default {
         fixDates(lst, "ShoppingList");
 
         return lst;
+    },
+    async getPersonsInHome() {
+        const response = await fetch(BASE_URL + "/persons");
+        return await response.json();
     }
 }