fixed the login component (added missing parts and adjusted copied code)

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index c5ebc5ee891b4a84da99f2ba3b0dae7110407fc8..115142edd361b186f01e1bdc2db28c37f6688451 100644 (file)
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -3,10 +3,14 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideStore } from '@ngrx/store';
+import { provideEffects } from '@ngrx/effects';
+import { loginReducers } from './store/login.reducers';
+import { LoginEffects } from './store/login.effects';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideStore({}),
+    provideStore({ login : loginReducers }),
+    provideEffects([LoginEffects]),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes)
   ]

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 831f99ad614a3fa11de14fc25f0746fba90ee5f6..2180f2b638bffbe88c3aaf1a79b5db94e4d6f8ab 100644 (file)
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },       // Default-Route
+  { path: 'login', component: LoginComponent } // Login-Route
 ];

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index babaff628d8a9a77e0e419206ce67baf4db80b5d..20d2ddb9eb48f048afe2cd633c8a7b102792a43f 100644 (file)
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,22 +1,27 @@
 import { Component, inject } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { FormsModule } from "@angular/forms";
 import { Store } from '@ngrx/store';
 import { login } from '../store/login.actions';
 import { selectError, selectIsLoading, selectToken } from '../store/login.selectors';
 
 @Component({
   selector: 'app-login',
-  imports: [],
+  imports: [
+    NgIf,
+    FormsModule,
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.less'
 })
 export class LoginComponent {
   private store = inject(Store);
 
-  username = '';
-  password = '';
-  token = '';
-  error = '';
-  isLoading = false;
+  username : string|null = null;
+  password : string|null = null;
+  token : string|null = null;
+  error : string|null = null;
+  isLoading : boolean = false;
 
   ngOnInit() {
     this.store.select(selectToken).subscribe(token => (this.token = token));

diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
new file mode 100644 (file)
index 0000000..f1251ca
--- /dev/null
+++ b/src/app/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644 (file)
index 0000000..0ca20a4
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private username : string|undefined;
+
+  login(username : string, password : string) : Observable<string> {
+    return of(username);
+  }
+}

diff --git a/src/app/store/login.actions.ts b/src/app/store/login.actions.ts
index 784df9c1a7129b372fba37810551961175fc6a5c..ba6e195807553f72b1553ba8375fa604e642e11c 100644 (file)
--- a/src/app/store/login.actions.ts
+++ b/src/app/store/login.actions.ts
@@ -2,7 +2,7 @@ import { createAction, props } from '@ngrx/store';
 
 export const login = createAction(
   '[Login] User Login',
-  props<{ username: string, password: string }>()
+  props<{ username: string|null, password: string|null }>()
 );
 
 export const loginSuccess = createAction(

diff --git a/src/app/store/login.effects.ts b/src/app/store/login.effects.ts
index 7ceb8642e6e6647d5c3af642ea1080c0a54da4d5..b0ba0c8fb90bf3aa9950ac1bd9839f1cec8a1dd2 100644 (file)
--- a/src/app/store/login.effects.ts
+++ b/src/app/store/login.effects.ts
@@ -1,12 +1,15 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { map, catchError, switchMap } from 'rxjs/operators';
+import { catchError, map, switchMap } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { loginSuccess, loginFailure } from './login.actions';
+import { loginFailure, loginSuccess } from './login.actions';
 import { AuthService } from '../services/auth.service';
 
 @Injectable()
 export class LoginEffects {
+  private actions$ = inject(Actions);
+  private authService = inject(AuthService);
+
   login$ = createEffect(() =>
     this.actions$.pipe(
       ofType('[Login] User Login'),
@@ -18,6 +21,4 @@ export class LoginEffects {
       )
     )
   );
-
-  constructor(private actions$: Actions, private authService: AuthService) {}
 }

diff --git a/src/app/store/login.reducers.ts b/src/app/store/login.reducers.ts
index 903c45ab013e28fe646891e7f3abcb2fe7dfb379..5d495e72710806ce4f4fdde663ad72faa3431a85 100644 (file)
--- a/src/app/store/login.reducers.ts
+++ b/src/app/store/login.reducers.ts
@@ -1,9 +1,9 @@
 import { createReducer, on } from '@ngrx/store';
-import { login, loginSuccess, loginFailure } from './login.actions';
+import { login, loginFailure, loginSuccess } from './login.actions';
 
 export interface State {
-  token: string;
-  error: string;
+  token: string|null;
+  error: string|null;
   isLoading: boolean;
 }