User Update

angular.json

@@ -853,6 +853,28 @@
           }
         }
       }
+    },
+    "ngx-user": {
+      "projectType": "library",
+      "root": "libs/ngx-user",
+      "sourceRoot": "libs/ngx-user/src",
+      "prefix": "fullerstack",
+      "architect": {
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/ngx-user"],
+          "options": {
+            "jestConfig": "libs/ngx-user/jest.config.js",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["libs/ngx-user/src/**/*.ts", "libs/ngx-user/src/**/*.html"]
+          }
+        }
+      }
     }
   }
 }

apps/api/src/environments/environment.ts

@@ -12,7 +12,7 @@ const appConfig: ConfigModuleOptions = {
 };
 
 const securityConfig: SecurityConfig = {
-  accessTokenExpiry: '15m',
+  accessTokenExpiry: '30s',
   sessionTokenExpiry: '7d',
   bcryptSaltOrRound: 2,
 };

apps/api/src/prisma/schema.gql

@@ -40,11 +40,11 @@ type Mutation {
   authResetPasswordRequest(input: ChangePasswordRequestInput!): AuthStatusDto!
   isEmailAvailable(email: String!): AuthStatusDto!
 
-  """Privileged user update"""
-  userUpdate(input: UserUpdateAdvancedInput!): UserDto!
-
   """Update user's own info"""
-  userUpdateSelf(input: UserUpdateInput!): UserDto!
+  userSelfUpdate(input: UserSelfUpdateInput!): UserDto!
+
+  """Privileged user update"""
+  userUpdate(input: UserUpdateInput!): UserDto!
 }
 
 """Ascending or Descending direction for a given `orderBy` argument."""
@@ -70,7 +70,7 @@ enum Permission {
 
 type Query {
   """Get other user info"""
-  user(input: UserUpdateAdvancedInput!): UserDto!
+  user(input: UserWhereByIdInput!): UserDto!
 
   """Get user's own info"""
   userSelf: UserDto!
@@ -114,9 +114,6 @@ type UserDto {
   permissions: [Permission!]
   role: Role
 
-  """Session version"""
-  sessionVersion: Int
-
   """Object's update time"""
   updatedAt: DateTime!
   username: String
@@ -142,7 +139,12 @@ enum UserOrderField {
   username
 }
 
-input UserUpdateAdvancedInput {
+input UserSelfUpdateInput {
+  firstName: String
+  lastName: String
+}
+
+input UserUpdateInput {
   firstName: String
   groupId: ID
   id: ID!
@@ -157,8 +159,6 @@ input UserUpdateAdvancedInput {
   role: Role
 }
 
-input UserUpdateInput {
-  firstName: String
+input UserWhereByIdInput {
   id: ID!
-  lastName: String
 }

apps/fullerstack/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { I18nService } from '@fullerstack/ngx-i18n';
 import { LayoutService } from '@fullerstack/ngx-layout';
 import { LoggerService } from '@fullerstack/ngx-logger';
 import { UixService } from '@fullerstack/ngx-uix';
+import { UserService } from '@fullerstack/ngx-user';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -23,7 +24,8 @@ export class AppComponent implements OnInit {
     readonly auth: AuthService,
     readonly i18n: I18nService,
     readonly uix: UixService,
-    readonly layout: LayoutService
+    readonly layout: LayoutService,
+    readonly user: UserService
   ) {
     if (!this.config.options.production) {
       /* istanbul ignore next */

apps/fullerstack/src/app/app.module.ts

@@ -1,10 +1,11 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
-import { AuthModule } from '@fullerstack/ngx-auth';
+import { AuthInterceptor, AuthModule } from '@fullerstack/ngx-auth';
 import { ConfigModule } from '@fullerstack/ngx-config';
+import { GqlInterceptor } from '@fullerstack/ngx-gql';
 import { GqlModule } from '@fullerstack/ngx-gql';
 import { I18nModule } from '@fullerstack/ngx-i18n';
 import { JwtModule } from '@fullerstack/ngx-jwt';
@@ -14,6 +15,7 @@ import { MaterialModule } from '@fullerstack/ngx-material';
 import { MsgModule } from '@fullerstack/ngx-msg';
 import { SharedModule } from '@fullerstack/ngx-shared';
 import { UixModule } from '@fullerstack/ngx-uix';
+import { UserModule } from '@fullerstack/ngx-user';
 import { ValidationService } from '@fullerstack/ngx-util';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
@@ -28,6 +30,7 @@ import { HomeComponent } from './pages/home/home.component';
 import { LoginComponent } from './pages/login/login.component';
 import { NotfoundComponent } from './pages/notfound/notfound.component';
 import { RegisterComponent } from './pages/register/register.component';
+import { ProfileUpdateComponent } from './pages/user/profile-update.component';
 
 @NgModule({
   declarations: [
@@ -37,6 +40,7 @@ import { RegisterComponent } from './pages/register/register.component';
     RegisterComponent,
     NotfoundComponent,
     AppComponent,
+    ProfileUpdateComponent,
   ],
   imports: [
     BrowserModule,
@@ -58,13 +62,14 @@ import { RegisterComponent } from './pages/register/register.component';
     GqlModule,
     I18nModule.forRoot(),
     AuthModule,
-    // UsrModule,
+    UserModule,
     UixModule,
     LayoutModule,
   ],
   providers: [
     ValidationService,
-    // { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: GqlInterceptor, multi: true },
   ],
 
   bootstrap: [AppComponent],

apps/fullerstack/src/app/app.routing.ts

@@ -6,6 +6,7 @@ import { HomeComponent } from './pages/home/home.component';
 import { LoginComponent } from './pages/login/login.component';
 import { NotfoundComponent } from './pages/notfound/notfound.component';
 import { RegisterComponent } from './pages/register/register.component';
+import { ProfileUpdateComponent } from './pages/user/profile-update.component';
 
 export const AppRoutes: Routes = [
   {
@@ -37,6 +38,16 @@ export const AppRoutes: Routes = [
       title: _('APP.REGISTER'),
     },
   },
+  {
+    path: 'user/profile/update',
+    component: ProfileUpdateComponent,
+    // canActivate: [GuardAuthenticationService],
+    // canDeactivate: [GuardDeactivateService],
+    data: {
+      title: _('COMMON.PROFILE_UPDATE'),
+      description: _('APP.DESCRIPTION.PROFILE_UPDATE'),
+    },
+  },
   {
     path: '**',
     component: NotfoundComponent,

apps/fullerstack/src/app/pages/login/login.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { tryGet } from '@fullerstack/agx-util';
 import { AuthService } from '@fullerstack/ngx-auth';
 import { ConfigService } from '@fullerstack/ngx-config';
-import * as gqlSchema from '@fullerstack/ngx-gql/schema';
+import { UserCredentialsInput } from '@fullerstack/ngx-gql/schema';
 import { _ } from '@fullerstack/ngx-i18n';
 
 @Component({
@@ -29,7 +29,7 @@ export class LoginComponent implements OnInit {
     }
   }
 
-  login(data: gqlSchema.UserCredentialsInput) {
+  login(data: UserCredentialsInput) {
     this.auth.loginDispatch(data);
   }
 }

apps/fullerstack/src/app/pages/register/register.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { tryGet } from '@fullerstack/agx-util';
 import { AuthService } from '@fullerstack/ngx-auth';
 import { ConfigService } from '@fullerstack/ngx-config';
-import * as gqlSchema from '@fullerstack/ngx-gql/schema';
+import { UserCreateInput } from '@fullerstack/ngx-gql/schema';
 import { _ } from '@fullerstack/ngx-i18n';
 
 @Component({
@@ -29,7 +29,7 @@ export class RegisterComponent implements OnInit {
     }
   }
 
-  register(data: gqlSchema.UserCreateInput) {
+  register(data: UserCreateInput) {
     this.auth.registerDispatch(data);
   }
 }

apps/fullerstack/src/app/pages/user/profile-update.component.html

@@ -0,0 +1,32 @@
+<mat-toolbar class="fs-page-header" color="primary"> </mat-toolbar>
+<div class="fs-page-content">
+  <fullerstack-card
+    class="fs-page-card"
+    fxLayout="column"
+    fxFlex.xs="100"
+    fxFlex.sm="80"
+    fxFlex.gt-sm="600px"
+    [title]="title"
+    [subtitle]="subtitle"
+    [icon]="icon"
+    [progress]="user.isLoading"
+  >
+    <fullerstack-user-profile-form (submit$)="update($event)" [profile]="user.profile"></fullerstack-user-profile-form>
+
+    <mat-divider class="mt1"></mat-divider>
+
+    <div class="mt2" fxLayout="row">
+      <span>
+        [
+        <a routerLink="/auth/login" class="no-underline"> {{ 'COMMON.LOGIN' | translate }} </a>
+        ]
+      </span>
+      <div fxFlex></div>
+      <span>
+        [
+        <a routerLink="/recovery/password/reset" class="no-underline"> {{ 'COMMON.FORGOT_PASSWORD' | translate }} </a>
+        ]
+      </span>
+    </div>
+  </fullerstack-card>
+</div>

apps/fullerstack/src/app/pages/user/profile-update.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileUpdateComponent } from './profile-update.component';
+
+xdescribe('ProfileUpdateComponent', () => {
+  let component: ProfileUpdateComponent;
+  let fixture: ComponentFixture<ProfileUpdateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ProfileUpdateComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/fullerstack/src/app/pages/user/profile-update.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnDestroy } from '@angular/core';
+import { AuthService } from '@fullerstack/ngx-auth';
+import { ConfigService } from '@fullerstack/ngx-config';
+import { UserSelfUpdateInput } from '@fullerstack/ngx-gql/schema';
+import { _ } from '@fullerstack/ngx-i18n';
+import { UserService } from '@fullerstack/ngx-user';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'fullerstack-user-profile-update',
+  templateUrl: './profile-update.component.html',
+  styleUrls: ['./profile-update.component.scss'],
+})
+export class ProfileUpdateComponent implements OnDestroy {
+  destroy$ = new Subject<boolean>();
+  title = _('COMMON.PROFILE');
+  subtitle = _('COMMON.PROFILE_UPDATE');
+  icon = 'account-edit-outline';
+
+  constructor(
+    readonly config: ConfigService,
+    readonly auth: AuthService,
+    readonly user: UserService
+  ) {}
+
+  update(data: UserSelfUpdateInput) {
+    this.user.userSelfUpdate(data).pipe(takeUntil(this.destroy$)).subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}

jest.config.js

@@ -23,5 +23,6 @@ module.exports = {
     '<rootDir>/libs/ngx-uix',
     '<rootDir>/libs/ngx-util',
     '<rootDir>/libs/ngx-shared',
+    '<rootDir>/libs/ngx-user',
   ],
 };

libs/ngx-auth/src/lib/auth.interceptor.ts

@@ -1,18 +1,22 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 import { JWT_BEARER_REALM } from '@fullerstack/agx-dto';
 import { Observable } from 'rxjs';
-import { catchError, switchMap } from 'rxjs/operators';
 
 import { AuthService } from './auth.service';
-import { AuthEffectsService } from './store/auth-state.effect';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AuthInterceptor implements HttpInterceptor {
-  constructor(readonly auth: AuthService, readonly effects: AuthEffectsService) {}
+  private auth: AuthService;
+
+  constructor(private injector: Injector) {
+    setTimeout(() => {
+      this.auth = this.injector.get(AuthService);
+    });
+  }
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-    if (this.auth.state.token) {
+    if (this.auth && this.auth.state.token) {
       request = request.clone({
         setHeaders: {
           'Content-Type': 'application/json; charset=utf-8',
@@ -22,17 +26,6 @@ export class AuthInterceptor implements HttpInterceptor {
       });
     }
 
-    return next.handle(request).pipe(
-      catchError((error, caught$) => {
-        if (error.status === 401) {
-          return this.effects.tokenRefreshRequest().pipe(
-            switchMap(() => {
-              return next.handle(request);
-            })
-          );
-        }
-        return caught$;
-      })
-    );
+    return next.handle(request);
   }
 }