diff --git a/frontend/allowance-planner-v2/package-lock.json b/frontend/allowance-planner-v2/package-lock.json
index f2970d9..81b602a 100644
--- a/frontend/allowance-planner-v2/package-lock.json
+++ b/frontend/allowance-planner-v2/package-lock.json
@@ -25,6 +25,7 @@
"@capacitor/status-bar": "7.0.1",
"@ionic/angular": "^8.0.0",
"@ionic/pwa-elements": "^3.3.0",
+ "@ionic/storage-angular": "^4.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
@@ -3779,6 +3780,27 @@
"npm": ">=8.0.0"
}
},
+ "node_modules/@ionic/storage": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-4.0.0.tgz",
+ "integrity": "sha512-3N21P19Xk6cICLnSXZ3ilRqbSXAGSFeIF3HNqz+1kARcm0UFT/vwmZreaXtFyq437vvEWOfJ2enlj3JHLKS0FA==",
+ "dependencies": {
+ "localforage": "^1.9.0"
+ }
+ },
+ "node_modules/@ionic/storage-angular": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-4.0.0.tgz",
+ "integrity": "sha512-FeSmCMCm1bMRfu5TFSqLtjdfEo/dLLUhLIrPmbhSYomVZdV/dNn4mBZv9SabyxSqn4bF31hw40y+4buhG+durQ==",
+ "dependencies": {
+ "@ionic/storage": "^4.0.0",
+ "tslib": "^2.3.0"
+ },
+ "peerDependencies": {
+ "@angular/core": "*",
+ "rxjs": "*"
+ }
+ },
"node_modules/@ionic/utils-array": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.6.tgz",
@@ -10250,6 +10272,11 @@
"node": ">=0.10.0"
}
},
+ "node_modules/immediate": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+ "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+ },
"node_modules/immutable": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.2.tgz",
@@ -11791,6 +11818,14 @@
}
}
},
+ "node_modules/lie": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+ "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+ "dependencies": {
+ "immediate": "~3.0.5"
+ }
+ },
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -11893,6 +11928,14 @@
"node": ">= 12.13.0"
}
},
+ "node_modules/localforage": {
+ "version": "1.10.0",
+ "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+ "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+ "dependencies": {
+ "lie": "3.1.1"
+ }
+ },
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/frontend/allowance-planner-v2/package.json b/frontend/allowance-planner-v2/package.json
index 2de0c80..19de028 100644
--- a/frontend/allowance-planner-v2/package.json
+++ b/frontend/allowance-planner-v2/package.json
@@ -30,6 +30,7 @@
"@capacitor/status-bar": "7.0.1",
"@ionic/angular": "^8.0.0",
"@ionic/pwa-elements": "^3.3.0",
+ "@ionic/storage-angular": "^4.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
@@ -64,4 +65,4 @@
"typescript": "~5.6.3"
},
"description": "An Ionic project"
-}
\ No newline at end of file
+}
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html b/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html
deleted file mode 100644
index 40f9bd8..0000000
--- a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
- <ion-toolbar>
- <ion-title>
- Allowance
- </ion-title>
- </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
- <ion-header collapse="condense">
- <ion-toolbar>
- <ion-title size="large">Allowance</ion-title>
- </ion-toolbar>
- </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/app-routing.module.ts b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
index 48fc28d..ffe16e8 100644
--- a/frontend/allowance-planner-v2/src/app/app-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
@@ -1,15 +1,21 @@
+import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
- loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
- }
+ loadChildren: () => import('./pages/user-login/user-login.module').then( m => m.UserLoginPageModule)
+ },
+ {
+ path: '',
+ loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
+ },
];
@NgModule({
imports: [
- RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+ CommonModule
],
exports: [RouterModule]
})
diff --git a/frontend/allowance-planner-v2/src/app/app.component.ts b/frontend/allowance-planner-v2/src/app/app.component.ts
index da2f9aa..cc98b6c 100644
--- a/frontend/allowance-planner-v2/src/app/app.component.ts
+++ b/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,13 @@ 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) {
+ this.router.navigate(['/tabs/allowance', userId]);
+ }
+ });
+ })
+ }
}
diff --git a/frontend/allowance-planner-v2/src/app/app.module.ts b/frontend/allowance-planner-v2/src/app/app.module.ts
index 4255dd8..a6c06b7 100644
--- a/frontend/allowance-planner-v2/src/app/app.module.ts
+++ b/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],
})
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.html b/frontend/allowance-planner-v2/src/app/history/history.page.html
deleted file mode 100644
index 14d369d..0000000
--- a/frontend/allowance-planner-v2/src/app/history/history.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
- <ion-toolbar>
- <ion-title>
- History
- </ion-title>
- </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
- <ion-header collapse="condense">
- <ion-toolbar>
- <ion-title size="large">History</ion-title>
- </ion-toolbar>
- </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/models/user.ts b/frontend/allowance-planner-v2/src/app/models/user.ts
new file mode 100644
index 0000000..6700d79
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/models/user.ts
@@ -0,0 +1,5 @@
+export interface User {
+ id: number;
+ name: string;
+ allowance?: number
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
similarity index 95%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
index 0376e70..607bbf1 100644
--- a/frontend/allowance-planner-v2/src/app/allowance/allowance-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
@@ -4,7 +4,7 @@ import { AllowancePage } from './allowance.page';
const routes: Routes = [
{
- path: '',
+ path: ':id',
component: AllowancePage,
}
];
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
new file mode 100644
index 0000000..1f9e973
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+ <ion-toolbar>
+ <ion-title>
+ Allowance
+ </ion-title>
+ </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
similarity index 66%
rename from frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
index c8027e6..cce237c 100644
--- a/frontend/allowance-planner-v2/src/app/allowance/allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { UserService } from 'src/app/services/user.service';
@Component({
selector: 'app-allowance',
@@ -8,6 +9,6 @@ import { Component } from '@angular/core';
})
export class AllowancePage {
- constructor() {}
+ constructor(private userService: UserService) {}
}
diff --git a/frontend/allowance-planner-v2/src/app/history/history-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/history/history-routing.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history-routing.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/history/history.module.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
new file mode 100644
index 0000000..6df4ad8
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
@@ -0,0 +1,11 @@
+<ion-header [translucent]="true">
+ <ion-toolbar>
+ <ion-title>
+ History
+ </ion-title>
+ </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.scss b/frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/history/history.page.ts b/frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/history/history.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/history/history.page.ts
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
similarity index 95%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
index 30903cf..52d6683 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts
@@ -34,6 +34,6 @@ const routes: Routes = [
];
@NgModule({
- imports: [RouterModule.forChild(routes)],
+ imports: [RouterModule.forChild(routes),],
})
export class TabsPageRoutingModule {}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
similarity index 70%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
index 0bb2a0d..6414b8b 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts
@@ -7,6 +7,8 @@ import {MatIconModule} from '@angular/material/icon';
import { TabsPageRoutingModule } from './tabs-routing.module';
import { TabsPage } from './tabs.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
@NgModule({
imports: [
@@ -16,6 +18,10 @@ import { TabsPage } from './tabs.page';
TabsPageRoutingModule,
MatIconModule,
],
- declarations: [TabsPage]
+ declarations: [TabsPage],
+ providers: [
+ provideHttpClient(),
+ UserService
+ ]
})
export class TabsPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.html b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
similarity index 99%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.html
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
index f67fa7d..e20054d 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html
@@ -1,17 +1,13 @@
<ion-tabs>
-
<ion-tab-bar slot="bottom">
<ion-tab-button tab="history" href="/tabs/history">
<mat-icon>history</mat-icon>
</ion-tab-button>
-
<ion-tab-button tab="allowance" href="/tabs/allowance">
<mat-icon>savings</mat-icon>
</ion-tab-button>
-
<ion-tab-button tab="tasks" href="/tabs/tasks">
<mat-icon>task_alt</mat-icon>
</ion-tab-button>
</ion-tab-bar>
-
</ion-tabs>
diff --git a/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss
new file mode 100644
index 0000000..188e38f
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss
@@ -0,0 +1,3 @@
+.tab-selected {
+ background-color: var(--ion-color-secondary);
+}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
similarity index 99%
rename from frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
index 7ea8134..8dc4123 100644
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
standalone: false,
})
export class TabsPage {
-
constructor() {}
}
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks-routing.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks-routing.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.module.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
new file mode 100644
index 0000000..522b12c
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+ <ion-toolbar>
+ <ion-title>
+ Tasks
+ </ion-title>
+ </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.scss
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.spec.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.spec.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.spec.ts
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
similarity index 100%
rename from frontend/allowance-planner-v2/src/app/tasks/tasks.page.ts
rename to frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts
new file mode 100644
index 0000000..d80c901
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserLoginPage } from './user-login.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: UserLoginPage
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class UserLoginPageRoutingModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts
new file mode 100644
index 0000000..07b36c8
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserLoginPageRoutingModule } from './user-login-routing.module';
+
+import { UserLoginPage } from './user-login.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ UserLoginPageRoutingModule,
+ ],
+ declarations: [UserLoginPage],
+ providers: [
+ provideHttpClient(),
+ UserService
+ ]
+})
+export class UserLoginPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html
new file mode 100644
index 0000000..3844691
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html
@@ -0,0 +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>
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss
new file mode 100644
index 0000000..e7e5b4e
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss
@@ -0,0 +1,31 @@
+.title,
+.selection,
+.profile {
+ display: flex;
+ justify-content: center;
+}
+
+.title {
+ margin-top: 150px;
+ color: var(--ion-color-primary);
+ font-size: 40px;
+}
+
+.selection {
+ gap: 10%;
+ margin-top: 100px;
+ 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;
+ background-color: var(--ion-color-secondary);
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts
new file mode 100644
index 0000000..72b4a6f
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserLoginPage } from './user-login.page';
+
+describe('UserLoginPage', () => {
+ let component: UserLoginPage;
+ let fixture: ComponentFixture<UserLoginPage>;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(UserLoginPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts
new file mode 100644
index 0000000..ea8fcaf
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { User } from 'src/app/models/user';
+import { StorageService } from 'src/app/services/storage.service';
+import { UserService } from 'src/app/services/user.service';
+
+@Component({
+ selector: 'app-user-login',
+ templateUrl: './user-login.page.html',
+ styleUrls: ['./user-login.page.scss'],
+ standalone: false,
+})
+export class UserLoginPage implements OnInit {
+ public users: Array<User> = [];
+
+ constructor(
+ private userService: UserService,
+ private storageService: StorageService,
+ private router: Router
+ ) { }
+
+ ngOnInit() {
+ this.userService.getUserList().subscribe(users => {
+ this.users = users
+ });
+ }
+
+ selectUser(id: number) {
+ this.storageService.set('user-id', id);
+ this.router.navigate(['/tabs/allowance', id]);
+ }
+}
diff --git a/frontend/allowance-planner-v2/src/app/services/storage.service.ts b/frontend/allowance-planner-v2/src/app/services/storage.service.ts
new file mode 100644
index 0000000..3cb6436
--- /dev/null
+++ b/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');
+ }
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/services/user.service.ts b/frontend/allowance-planner-v2/src/app/services/user.service.ts
new file mode 100644
index 0000000..86df03d
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/services/user.service.ts
@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { User } from '../models/user';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class UserService {
+ private url = 'http://localhost:8080/api';
+ constructor(private http: HttpClient) {}
+
+ getUserList(): Observable<Array<User>> {
+ return this.http.get<User[]>(`${this.url}/users`);
+ }
+
+ getUserById(id: number): Observable<User> {
+ return this.http.get<User>(`${this.url}/user/${id}`);
+ }
+}
diff --git a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss b/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss
deleted file mode 100644
index 8b13789..0000000
--- a/frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html
deleted file mode 100644
index bf00797..0000000
--- a/frontend/allowance-planner-v2/src/app/tasks/tasks.page.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
- <ion-toolbar>
- <ion-title>
- Tasks
- </ion-title>
- </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
- <ion-header collapse="condense">
- <ion-toolbar>
- <ion-title size="large">Tasks</ion-title>
- </ion-toolbar>
- </ion-header>
-</ion-content>
diff --git a/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf b/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf
new file mode 100644
index 0000000..012baf5
Binary files /dev/null and b/frontend/allowance-planner-v2/src/assets/font/Jaro-Regular.ttf differ
diff --git a/frontend/allowance-planner-v2/src/global.scss b/frontend/allowance-planner-v2/src/global.scss
index 8b13789..840c6c6 100644
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/frontend/allowance-planner-v2/src/global.scss
@@ -1 +1,37 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";
diff --git a/frontend/allowance-planner-v2/src/theme/variables.scss b/frontend/allowance-planner-v2/src/theme/variables.scss
index 6146c39..a349613 100644
--- a/frontend/allowance-planner-v2/src/theme/variables.scss
+++ b/frontend/allowance-planner-v2/src/theme/variables.scss
@@ -1,2 +1,14 @@
// For information on how to create your own theme, please see:
// http://ionicframework.com/docs/theming/
+:root {
+ --ion-color-primary: #9C4BE4;
+ --ion-color-secondary: #F5E9FF;
+ --ion-background-color: #F3F3F3;
+
+ --ion-font-family: 'Myfont';
+}
+
+@font-face {
+ font-family: 'MyFont';
+ src: url('../assets/font/Jaro-Regular.ttf');
+}