From bfbd2be84fcd4952c530af4889b0a4c9c5d69998 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Sat, 6 Sep 2025 14:03:46 +0200 Subject: [PATCH] fixed the login component (added missing parts and adjusted copied code) --- src/app/app.config.ts | 6 +++++- src/app/app.routes.ts | 2 ++ src/app/login/login.component.ts | 17 +++++++++++------ src/app/services/auth.service.spec.ts | 16 ++++++++++++++++ src/app/services/auth.service.ts | 13 +++++++++++++ src/app/store/login.actions.ts | 2 +- src/app/store/login.effects.ts | 11 ++++++----- src/app/store/login.reducers.ts | 6 +++--- 8 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 src/app/services/auth.service.spec.ts create mode 100644 src/app/services/auth.service.ts diff --git a/src/app/app.config.ts b/src/app/app.config.ts index c5ebc5e..115142e 100644 --- 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 831f99a..2180f2b 100644 --- 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 babaff6..20d2ddb 100644 --- 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 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 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 { + return of(username); + } +} diff --git a/src/app/store/login.actions.ts b/src/app/store/login.actions.ts index 784df9c..ba6e195 100644 --- 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 7ceb864..b0ba0c8 100644 --- 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 903c45a..5d495e7 100644 --- 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; } -- 2.39.5