Add open edit profile

src/app/auth/store/auth.action.ts

@@ -4,6 +4,7 @@ export const LOGIN = '[Auth] Login';
 export const LOGOUT = '[Auth] Logout';
 export const AUTH_SUCCESS = '[Auth] Auth Success';
 export const LOAD_USER_PROFILE_SUCCESS = '[Auth] Load User Profile Success';
+export const OPEN_EDIT_PROFILE = '[Auth] Edit Profile';
 
 export class LoginAction implements Action {
     readonly type = LOGIN;
@@ -29,8 +30,15 @@ export class LoadUserProfileSuccessAction implements Action {
     constructor(public payload: Keycloak.KeycloakProfile) { }
 }
 
+export class OpenEditProfileAction implements Action {
+    readonly type = OPEN_EDIT_PROFILE;
+
+    constructor(public payload: {} = null) { }
+}
+
 export type Actions
     = LoginAction
     | LogoutAction
     | AuthSuccessAction
-    | LoadUserProfileSuccessAction;
+    | LoadUserProfileSuccessAction
+    | OpenEditProfileAction;

src/app/auth/store/auth.effects.ts

@@ -6,6 +6,7 @@ import { Effect, Actions, ofType } from '@ngrx/effects';
 import { KeycloakService } from 'keycloak-angular';
 
 import * as authActions from './auth.action';
+import { environment } from '../../../environments/environment';
 
 @Injectable()
 export class AuthEffects {
@@ -35,4 +36,10 @@ export class AuthEffects {
             )
         )
     );
+
+    @Effect({ dispatch: false })
+    OpenEditProfileAction$ = this.actions$.pipe(
+        ofType(authActions.OPEN_EDIT_PROFILE),
+        tap(_ => window.open(environment.ssoAuthUrl + '/realms/' + environment.ssoRealm + '/account', '_blank'))
+    );
 }

src/app/core/components/nav.component.html

@@ -49,8 +49,8 @@
                 </li>
                 <li class="divider dropdown-divider"></li>
                 <li role="menuitem">
-                    <a class="dropdown-item" routerLink="/change-password">
-                        <span class="fas fa-key fa-fw"></span> Change password
+                    <a class="dropdown-item pointer" (click)="emitOpenEditProfile()">
+                        <span class="fas fa-id-card"></span> Edit profile
                     </a>
                 </li>
                 <li class="divider dropdown-divider"></li>
@@ -96,8 +96,8 @@
             </li>
             <li *ngIf="isAuthenticated" class="divider dropdown-divider"></li>
             <li *ngIf="isAuthenticated" role="menuitem">
-                <a class="dropdown-item" routerLink="/change-password">
-                    <span class="fas fa-key fa-fw"></span> Change password
+                <a class="dropdown-item pointer" (click)="emitOpenEditProfile()">
+                    <span class="fas fa-id-card"></span> Edit profile
                 </a>
             </li>
             <li class="divider dropdown-divider"></li>

src/app/core/components/nav.component.ts

@@ -15,6 +15,7 @@ export class NavComponent {
     @Input() instance: Instance;
     @Output() login: EventEmitter<any> = new EventEmitter();
     @Output() logout: EventEmitter<any> = new EventEmitter();
+    @Output() openEditProfile: EventEmitter<any> = new EventEmitter();
     baseHref: string = environment.baseHref;
 
     isSearchAllowed(): boolean {
@@ -45,4 +46,8 @@ export class NavComponent {
     emitLogout() {
         this.logout.emit();
     }
+
+    emitOpenEditProfile() {
+        this.openEditProfile.emit();
+    }
 }

src/app/core/containers/app.component.html

@@ -4,7 +4,8 @@
         [userProfile]="userProfile | async"
         [instance]="instance | async"
         (login)="login()"
-        (logout)="logout()">
+        (logout)="logout()"
+        (openEditProfile)="openEditProfile()">
     </app-nav>
 </header>
 <main role="main" class="container-fluid pb-4">

src/app/core/containers/app.component.ts

@@ -47,4 +47,8 @@ export class AppComponent implements OnInit {
     logout(): void {
         this.store.dispatch(new authActions.LogoutAction());
     }
+
+    openEditProfile(): void {
+        this.store.dispatch(new authActions.OpenEditProfileAction());
+    }
 }