Add local storage

frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html

@@ -1,6 +1,9 @@
 <ion-content>
   <div class="title">Who are you?</div>
   <div class="selection">
-    
+    <div class="profile" *ngFor="let user of users">
+      <div class="picture" (click)="selectUser(user.id)"></div>
+      <div class="name">{{ user.name }}</div>
+    </div>
   </div>
 </ion-content>

frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss

@@ -1,5 +1,6 @@
 .title,
-.selection {
+.selection,
+.profile {
     display: flex;
     justify-content: center;
 }
@@ -8,4 +9,22 @@
     margin-top: 40%;
     color: var(--ion-color-primary);
     font-size: 40px;
+}
+
+.selection {
+    gap: 10%;
+    margin-top: 20%;
+    color: var(--ion-color-primary);
+}
+
+.profile {
+    flex-direction: column;
+    align-items: center;
+}
+
+.picture {
+    width: 130px;
+    height: 130px;
+    border: 1px solid var(--ion-color-primary);
+    border-radius: 10px;
 }

frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { User } from 'src/app/models/user';
+import { StorageService } from 'src/app/services/storage.service';
 import { UserService } from 'src/app/services/user.service';
 
 @Component({
@@ -8,11 +10,17 @@ import { UserService } from 'src/app/services/user.service';
   standalone: false,
 })
 export class UserLoginPage implements OnInit {
+  public users: Array<User> = [];
 
-  constructor(private userService: UserService) { }
+  constructor(private userService: UserService, private storageService: StorageService) { }
 
   ngOnInit() {
-    this.userService.getUserList().subscribe(users => console.log('Users: ', users));
+    this.userService.getUserList().subscribe(users => {
+      this.users = users
+    });
   }
 
+  selectUser(id: number) {
+    this.storageService.set('user-id', id);
+  }
 }