refactoring to use userDto for validation errors

package.json

@@ -24,6 +24,7 @@
     "@ngrx/store-devtools": "^15.1.0",
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.3",
+    "font-awesome": "^4.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.9.4"
   }
-}
+}

src/app/home/welcome.component.ts

@@ -12,7 +12,7 @@ import { Router } from '@angular/router';
 export class WelcomeComponent {
     pageTitle = 'Welcome';
     userLoggedIn$!: Observable<boolean>;
-    currentUser$!: Observable<User | null>;
+    currentUser$!: Observable<User | null | undefined>;
 
     ngOnInit(): void {
       console.log("INIT :: welcome comp");

src/app/user/add-user.component.ts

@@ -4,7 +4,7 @@ import { State } from "./state/user.reducer";
 import { Router } from "@angular/router";
 import { NgForm } from "@angular/forms";
 import { UserPageActions } from "./state/actions";
-import { User } from "./user";
+import { User, UserDto } from "./user";
 import { Observable } from "rxjs";
 import { getCurrentUser } from "./state";
 
@@ -13,8 +13,8 @@ import { getCurrentUser } from "./state";
 })
 export class AddUserComponent implements OnInit {
     pageTitle = "Create New Account";
-    currentUser$!: Observable<User | null>;
-    newUser!: User;
+    currentUser$!: Observable<User | null | undefined>;
+    newUserDto!: UserDto;
 
     constructor(
         private store: Store<State>,
@@ -36,14 +36,17 @@ export class AddUserComponent implements OnInit {
             const userPassword = addUserForm.form.value.userPassword;
             const isAdmin = addUserForm.form.value.isAdmin;
             // TODO validate data for security
-            this.newUser = {
-                userName: userName,
-                userPassword: userPassword,
-                isAdmin: isAdmin
+            this.newUserDto = {
+                user: {
+                    userName: userName,
+                    userPassword: userPassword,
+                    isAdmin: isAdmin
+                },
+                error: null
             }
-            console.log("add user 3 " + JSON.stringify(this.newUser));
-            this.store.dispatch(UserPageActions.createUser({ newUser: this.newUser }));
-            this.store.dispatch(UserPageActions.setCurrentUser({ currentUser: this.newUser }));
+            console.log("add user 3 " + JSON.stringify(this.newUserDto));
+            this.store.dispatch(UserPageActions.createUser({ newUserDto: this.newUserDto }));
+            this.store.dispatch(UserPageActions.setCurrentUser({ currentUserDto: this.newUserDto }));
 
         }
         this.store.dispatch(UserPageActions.toggleNewUserLogIn());

src/app/user/login.component.html

@@ -50,9 +50,6 @@
                                     Cancel
                                 </a>
                             </span>
-                            <span *ngIf="currentUser$ | async">
-                                LOGIN FAILURE
-                            </span>
                         </div>
                     </div>
                 </form>

src/app/user/login.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit } from "@angular/core";
 import { Store } from "@ngrx/store";
 import { State } from "./state/user.reducer";
-import { Observable } from "rxjs";
-import { getCurrentUser, getNewUserLogin, getShowMenu, getUserLoggedIn } from "./state";
+import { Observable, take } from "rxjs";
+import { getCurrentUser, getError, getNewUserLogin, getShowMenu, getUserLoggedIn } from "./state";
 import { UserPageActions } from "./state/actions";
 import { Router } from "@angular/router";
 import { NgForm } from "@angular/forms";
-import { User } from "./user";
+import { User, UserDto } from "./user";
 
 @Component({
   templateUrl: './login.component.html',
@@ -17,9 +17,13 @@ export class LoginComponent implements OnInit {
   newUserLogin$!: Observable<boolean>;
   newUserAccount!: boolean;
   user!: User;
-  currentUser$!: Observable<User | null>;
+  currentUser$!: Observable<User | null | undefined>;
+  currentUser!: User | null;
+  userDto: UserDto | null | undefined;
   showMenu$!: Observable<boolean>;
-
+  error$!: Observable<any | null | undefined>;
+  error!: string | null | undefined;
+
   constructor(
     private store: Store<State>,
     private router: Router,
@@ -32,11 +36,13 @@ export class LoginComponent implements OnInit {
     this.newUserLogin$ = this.store.select(getNewUserLogin);
     this.currentUser$ = this.store.select(getCurrentUser);
     this.showMenu$ = this.store.select(getShowMenu);
+    this.error$ = this.store.select(getError);
+    this.error$.pipe(take(1)).subscribe(err => this.error = err);
     this.store.dispatch(UserPageActions.clearCurrentUser());
   }
 
 
-  login(loginForm: NgForm): void {
+  async login(loginForm: NgForm): Promise<void> {
     console.log("login");
     if (loginForm && loginForm.valid) {
       const formUserName = loginForm.form.value.userName;
@@ -49,15 +55,25 @@ export class LoginComponent implements OnInit {
         userPassword: formUserPassword
       } as User
 
-      this.store.dispatch(UserPageActions.loginUser({ user: this.user }));
+      this.userDto = {
+        user: this.user,
+        error: null
+      } as UserDto
 
+      this.store.dispatch(UserPageActions.loginUser({ userDto: this.userDto }));
+      console.log("error message below");
+      this.error$.pipe().subscribe(err => this.error = err);
+      let error1 = await this.error;
+      console.log("error message " + error1);
       // TODO handle validation and incorrect password errors from API
-
-      this.store.dispatch(UserPageActions.toggleUserLoggedIn());
-      this.store.dispatch(UserPageActions.setCurrentUser({ currentUser: this.user }));
-      console.log("in login 4");
-
-      this.router.navigate(['welcome']);
+      if (error1) {
+        console.log("error message 1");
+        console.log("error message 1: " + error1);
+        this.router.navigate(['login']);
+      } else {
+        console.log("error message 2");
+        this.router.navigate(['welcome']);
+      }
     }
   }
 

src/app/user/state/actions/user-api.actions.ts

@@ -1,32 +1,32 @@
 import { createAction, props } from "@ngrx/store";
-import { User } from "../../user";
+import { UserDto } from "../../user";
 
 export const getUserByIdSuccess = createAction(
     '[User API] Get User by ID Success',
-    props<{user: User}>()
+    props<{userDto: UserDto}>()
 );
 
 export const getUserByIdFailure = createAction(
     '[User API] Get User by ID Failure',
-    props<{error: string}>()
+    props<{errorDto: UserDto}>()
 );
 
 export const createUserSuccess = createAction(
     '[User API] Create User Success',
-    props<{user: User}>()
+    props<{userDto: UserDto}>()
 );
 
 export const createUserFailure = createAction(
     '[User API] Create User Failure',
-    props<{error: string}>()
+    props<{errorDto: UserDto}>()
 );
 
 export const loginUserSuccess = createAction(
     '[User API] Login User Success',
-    props<{user: User}>()
+    props<{userDto: UserDto}>()
 );
 
 export const loginUserFailure = createAction(
     '[User API] Login User Failure',
-    props<{error: string}>()
+    props<{errorDto: UserDto}>()
 );

src/app/user/state/actions/user-page.actions.ts

@@ -1,5 +1,5 @@
 import { createAction, props } from "@ngrx/store";
-import { User } from "../../user";
+import { UserDto } from "../../user";
 
 export const toggleUserLoggedIn = createAction(
     '[User Page] Toggle User Logged In'
@@ -15,7 +15,7 @@ export const toggleShowMenu = createAction(
 
 export const setCurrentUser = createAction(
     '[User Page] Set Current User',
-    props<{ currentUser: User }>()
+    props<{ currentUserDto: UserDto }>()
 );
 
 export const getCurrentUser = createAction(
@@ -28,15 +28,15 @@ export const clearCurrentUser = createAction(
 
 export const getUserById = createAction(
     '[User Page] Get User By Id',
-    props<{ user: User }>()
+    props<{ userDto: UserDto }>()
 );
 
 export const createUser = createAction(
     '[User Page] Create User',
-    props<{ newUser: User }>()
+    props<{ newUserDto: UserDto }>()
 );
 
 export const loginUser = createAction(
     '[User Page] Login User',
-    props<{ user: User }>()
+    props<{ userDto: UserDto }>()
 );

src/app/user/state/index.ts

@@ -20,7 +20,12 @@ export const getNewUserLogin = createSelector(
 
 export const getCurrentUser = createSelector(
     getUserFeatureState,
-    state => state.currentUser
+    state => state.userDto?.user
+);
+
+export const getCurrentUserIsAdmin = createSelector(
+    getUserFeatureState,
+    state => state.userDto?.user?.isAdmin
 );
 
 export const getShowMenu = createSelector(
@@ -30,5 +35,5 @@ export const getShowMenu = createSelector(
 
 export const getError = createSelector(
     getUserFeatureState,
-    state => state.error
+    state => state.userDto?.error
 );

src/app/user/state/user.effects.ts

@@ -13,10 +13,10 @@ export class UserEffects {
     return this.actions$
       .pipe(
         ofType(UserPageActions.getUserById),
-        mergeMap((action) => this.userService.getUserById(action.user)
+        mergeMap((action) => this.userService.getUserById(action.userDto)
           .pipe(
-            map(user => UserApiActions.getUserByIdSuccess({ user })),
-            catchError(error => of(UserApiActions.getUserByIdFailure({ error })))
+            map(userDto => UserApiActions.getUserByIdSuccess({ userDto: userDto })),
+            catchError(error => of(UserApiActions.getUserByIdFailure({ errorDto: error })))
           )
         )
       );
@@ -26,11 +26,11 @@ export class UserEffects {
     return this.actions$
       .pipe(
         ofType(UserPageActions.createUser),
-        concatMap((action) => this.userService.createUser(action.newUser)
+        concatMap((action) => this.userService.createUser(action.newUserDto)
           .pipe(
-            tap(data => console.log(JSON.stringify(data))),
-            map(user => UserApiActions.createUserSuccess({ user })),
-            catchError(error => of(UserApiActions.createUserFailure({ error })))
+            tap(data => console.log("HEY: " + JSON.stringify(data))),
+            map(userDto => UserApiActions.createUserSuccess({ userDto })),
+            catchError(errorDto => of(UserApiActions.createUserFailure({ errorDto })))
           )
         )
       );
@@ -40,11 +40,11 @@ export class UserEffects {
     return this.actions$
       .pipe(
         ofType(UserPageActions.loginUser),
-        concatMap((action) => this.userService.loginUser(action.user)
+        concatMap((action) => this.userService.loginUser(action.userDto)
           .pipe(
             tap(data => console.log(JSON.stringify(data))),
-            map(user => UserApiActions.loginUserSuccess({ user })),
-            catchError(error => of(UserApiActions.loginUserFailure({ error })))
+            map(userDto => UserApiActions.loginUserSuccess({ userDto })),
+            catchError(errorDto => of(UserApiActions.loginUserFailure({ errorDto })))
           )
         )
       );