Add local storage

frontend/allowance-planner-v2/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ const routes: Routes = [
     loadChildren: () => import('./pages/user-login/user-login.module').then( m => m.UserLoginPageModule)
   },
   {
-    path: 'allowance-app',
+    path: '',
     loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
   },
 ];

frontend/allowance-planner-v2/src/app/app.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { StorageService } from './services/storage.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -7,5 +9,14 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class AppComponent {
-  constructor() {}
+  constructor(private storageService: StorageService, private router: Router) {
+    this.storageService.init().then(() => {
+      this.storageService.getCurrentUserId().then((userId) => {
+        if (userId !== undefined && userId !== null) {
+          console.log('userId: ', userId);
+          this.router.navigate(['/tabs'], userId);
+        }
+      });
+    })
+  }
 }

frontend/allowance-planner-v2/src/app/app.module.ts

@@ -3,13 +3,23 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { Drivers, Storage } from '@ionic/storage';
+import { IonicStorageModule } from '@ionic/storage-angular';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(),
+    AppRoutingModule,
+    IonicStorageModule.forRoot({
+      name: '__mydb',
+      driverOrder: [Drivers.IndexedDB, Drivers.LocalStorage]
+    })
+  ],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

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);
+  }
 }

frontend/allowance-planner-v2/src/app/services/storage.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+import { Storage } from '@ionic/storage-angular';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class StorageService {
+    private _storage: Storage | null = null;
+
+    constructor(private storage: Storage) {}
+
+    async init() {
+        // If using, define drivers here: await this.storage.defineDriver(/*...*/);
+        const storage = await this.storage.create();
+        this._storage = storage;
+    }
+
+    // Create and expose methods that users of this service can
+    // call, for example:
+    public set(key: string, value: any) {
+        this._storage?.set(key, value);
+    }
+
+    public async getCurrentUserId() {
+        return await this._storage?.get('user-id');
+    }
+}