ngrx-entity-crud 12.0.6-beta.2

package/schematics/auth/files/model/auth.ts

@@ -0,0 +1,17 @@
+export class AuthUser {
+  public user: string;
+  public email: string;
+  public password: string;
+  public firstname: string;
+  public lastname: string;
+  public age: number;
+  public id: number;
+
+}
+
+export class Auth {
+  token: string;
+  user: AuthUser;
+  roles: string[];
+}
+

package/schematics/auth/files/store/auth-store/actions.ts

@@ -0,0 +1,30 @@
+import {createAction, props} from '@ngrx/store';
+import {HttpErrorResponse} from '@angular/common/http';
+import {Auth} from '@models/vo/auth';
+
+export enum ActionTypes {
+  LOGIN_REQUEST = '[Auth] Login Request',
+  LOGIN_RESULT = '[Auth] Login Result',
+  LOGIN_ERROR = '[Auth] Login Error',
+
+  RESET = '[Auth] Reset',
+
+  LOGOUT_REQUEST = '[Auth] Logout Request',
+  LOGOUT_RESULT = '[Auth] Logout Result',
+  LOGOUT_ERROR = '[Auth] Logout Error',
+
+  GO_TO_LOGIN = '[Auth] Go to login',
+}
+
+export const LoginRequest = createAction(ActionTypes.LOGIN_REQUEST, props<{ username: string, password: string }>());
+export const LoginResult = createAction(ActionTypes.LOGIN_RESULT, props<{ isLoggedIn: boolean, auth: Auth }>());
+export const LoginError = createAction(ActionTypes.LOGIN_ERROR, props<{ err: HttpErrorResponse }>());
+
+export const Reset = createAction(ActionTypes.RESET);
+
+export const LogoutRequest = createAction(ActionTypes.LOGOUT_REQUEST);
+export const LogoutResult = createAction(ActionTypes.LOGOUT_RESULT);
+export const LogoutError = createAction(ActionTypes.LOGOUT_ERROR);
+
+export const GoToLogin = createAction(ActionTypes.GO_TO_LOGIN);
+

package/schematics/auth/files/store/auth-store/auth-mock.service.ts

@@ -0,0 +1,95 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable, of, throwError} from 'rxjs';
+import {environment} from '../../../environments/environment';
+import {Auth} from '@models/vo/auth';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthMockService {
+
+  service = environment.webServiceUri;
+
+  constructor(public http: HttpClient) {
+  }
+
+  login(user: string, passwd: string): Observable<Auth> {
+    console.log('AuthService.login()');
+    console.log('user', user);
+    console.log('passwd', passwd);
+    if (authMocks.hasOwnProperty(user)) {
+      const result = authMocks[user];
+      if (result.user.password === passwd) {
+        return of(result);
+      }
+      return throwError({message: `error passwd:${passwd} for user: "${user}"`});
+    }
+    return throwError({message: `user:"${user}" does not exist`});
+  }
+
+  logout(): Observable<boolean> {
+    console.log('AuthMockService.logout()');
+    return of(true);
+  }
+}
+
+const cipo: Auth = {
+  token: 'xxx.xxx.xxx',
+  roles: ['roleA'],
+  user: {
+    user: 'cipo',
+    email: 'cipollino@mail.com',
+    password: 'cipo',
+    firstname: 'Cipo',
+    lastname: 'Lino',
+    age: 32,
+    id: 1
+  }
+};
+
+const cino: Auth = {
+  token: 'xxx.xxx.xxx',
+  roles: ['roleA', 'roleB', 'roleC'],
+  user: {
+    user: 'cino',
+    email: 'leoncino@mail.com',
+    password: 'cino',
+    firstname: 'Cino',
+    lastname: 'Leon',
+    age: 32,
+    id: 2
+  }
+};
+
+const pino: Auth = {
+  token: 'xxx.xxx.xxx',
+  roles: ['roleA', 'roleB', 'roleC'],
+  user: {
+    user: 'pino',
+    email: 'pinosilvestre@mail.com',
+    password: 'pino',
+    firstname: 'Pino',
+    lastname: 'Silvestre',
+    age: 32,
+    id: 3
+  }
+};
+const poli: Auth = {
+  token: 'xxx.xxx.xxx',
+  roles: ['roleA', 'roleB', 'roleC'],
+  user: {
+    user: 'poli',
+    email: 'poliester@mail.com',
+    password: 'poli',
+    firstname: 'Poli',
+    lastname: 'Ester',
+    age: 32,
+    id: 4
+  }
+};
+
+const authMocks: { [key: string]: Auth } = {
+  cipo, cino, pino, poli
+};
+

package/schematics/auth/files/store/auth-store/auth-store.module.ts

@@ -0,0 +1,34 @@
+import {InjectionToken, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ActionReducer, StoreModule} from '@ngrx/store';
+import {EffectsModule} from '@ngrx/effects';
+import {AuthStoreEffects} from './effects';
+import {featureReducer} from './reducer';
+import {Auth} from '@models/vo/auth';
+import {Names} from './names';
+import {State} from './state';
+import {AuthService} from './auth.service';
+import {AuthMockService} from './auth-mock.service';
+
+export const INJECTION_TOKEN = new InjectionToken<ActionReducer<Auth>>(`${Names.NAME}-store Reducers`);
+
+@NgModule({
+  imports: [
+    CommonModule,
+    StoreModule.forFeature(Names.NAME, INJECTION_TOKEN),
+    EffectsModule.forFeature([AuthStoreEffects]),
+  ],
+  declarations: [],
+  providers: [AuthStoreEffects,
+    {
+      provide: AuthService,
+      useClass: AuthMockService
+    },
+    {
+      provide: INJECTION_TOKEN,
+      useFactory: (): ActionReducer<State> => featureReducer
+    }
+  ]
+})
+export class AuthStoreModule {
+}

package/schematics/auth/files/store/auth-store/auth.guard.ts

@@ -0,0 +1,44 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot} from '@angular/router';
+import {select, Store} from '@ngrx/store';
+import * as AuthStoreSelectors from './selectors';
+import * as AuthStoreActions from './actions';
+import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate, CanActivateChild {
+
+  constructor(private readonly store$: Store) {
+
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    console.log('AuthGuard.canActivate()');
+    return this.store$.pipe(
+      select(AuthStoreSelectors.selectIsLoggedIn),
+      map(selectIsLoggedIn => {
+        if (!selectIsLoggedIn) {
+          this.store$.dispatch(AuthStoreActions.GoToLogin());
+        }
+        return selectIsLoggedIn;
+      })
+    );
+  }
+
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    console.log('AuthGuard.canActivateChild()');
+    return this.store$.pipe(
+      select(AuthStoreSelectors.selectIsLoggedIn),
+      map(selectIsLoggedIn => {
+        if (!selectIsLoggedIn) {
+          this.store$.dispatch(AuthStoreActions.GoToLogin());
+        }
+        return selectIsLoggedIn;
+      })
+    );
+  }
+
+}

package/schematics/auth/files/store/auth-store/auth.service.ts

@@ -0,0 +1,28 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {environment} from '../../../environments/environment';
+import {Auth} from '@models/vo/auth';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  service = environment.webServiceUri;
+
+  constructor(public http: HttpClient) {
+  }
+
+  login(email: string, password: string): Observable<Auth> {
+    console.log('AuthService.login()');
+    // return this.http.post(this.service + '/login', {user, passwd});
+    throw new Error('method not implemented');
+  }
+
+  logout(): Observable<boolean> {
+    console.log('AuthService.logout()');
+    throw new Error('method not implemented');
+  }
+
+}

package/schematics/auth/files/store/auth-store/conf.ts

@@ -0,0 +1,2 @@
+export const afterLoginUri = 'home';
+export const afterLogoutUri = 'login';

package/schematics/auth/files/store/auth-store/effects.ts

@@ -0,0 +1,53 @@
+import {Injectable} from '@angular/core';
+import {Actions, createEffect, ofType} from '@ngrx/effects';
+import * as actions from './actions';
+import {catchError, switchMap} from 'rxjs/operators';
+import {RouterGo} from '@root-store/router-store/actions';
+import {AuthService} from './auth.service';
+import {afterLoginUri, afterLogoutUri} from './conf';
+
+@Injectable()
+export class AuthStoreEffects {
+  constructor(private readonly actions$: Actions, private readonly authService: AuthService) {
+  }
+
+  login$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.LoginRequest),
+      switchMap((payload) => this.authService.login(payload.username, payload.password).pipe(
+        switchMap(auth => [
+            RouterGo({path: [afterLoginUri]}),
+            actions.LoginResult({auth, isLoggedIn: true})
+          ]
+        ),
+        catchError(err => {
+          return [actions.LoginError({err})];
+        }),
+      )),
+    )
+  );
+
+  logout$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.LogoutRequest),
+      switchMap((payload) => this.authService.logout().pipe(
+        switchMap(user => [
+            RouterGo({path: [afterLogoutUri]}),
+            actions.LogoutResult()
+          ]
+        ),
+        catchError(err => {
+          return [actions.LogoutError()];
+        }),
+      )),
+    )
+  );
+
+  goToLogin$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.GoToLogin),
+      switchMap(() => [RouterGo({path: [afterLogoutUri]})])
+    )
+  );
+
+}

package/schematics/auth/files/store/auth-store/index.d.ts

@@ -0,0 +1,13 @@
+import * as AuthStoreActions from './actions';
+import * as AuthStoreSelectors from './selectors';
+import * as AuthStoreState from './state';
+
+export {
+  AuthStoreModule
+} from './auth-store.module';
+
+export {
+  AuthStoreActions,
+  AuthStoreSelectors,
+  AuthStoreState
+};

package/schematics/auth/files/store/auth-store/index.ts

@@ -0,0 +1,13 @@
+import * as AuthStoreActions from './actions';
+import * as AuthStoreSelectors from './selectors';
+import * as AuthStoreState from './state';
+
+export {
+  AuthStoreModule
+} from './auth-store.module';
+
+export {
+  AuthStoreActions,
+  AuthStoreSelectors,
+  AuthStoreState
+};

package/schematics/auth/files/store/auth-store/names.ts

@@ -0,0 +1,3 @@
+export class Names {
+  static NAME = 'auth';
+}

package/schematics/auth/files/store/auth-store/reducer.ts

@@ -0,0 +1,16 @@
+import {initialState, State} from './state';
+import {createReducer, on} from '@ngrx/store';
+import * as actions from './actions';
+
+export const featureReducer = createReducer<State>(initialState,
+  // on(actions.Open, (state, {open}) => ({...state, ...{open}})),
+  // on(actions.Select, (state, {item}) => ({...state, ...{item}})),
+  on(actions.LoginResult, (state, {isLoggedIn, auth}) => ({...state, ...{isLoggedIn, auth}})),
+  on(actions.LoginError, (state, {err}) => {
+      return ({...initialState, err, hasError: true});
+    }
+  ),
+  on(actions.Reset, (state, item) => ({...initialState})),
+  on(actions.LogoutResult, (state, item) => ({...initialState})),
+  on(actions.LogoutError, (state, item) => ({...initialState})),
+);

package/schematics/auth/files/store/auth-store/selectors.ts

@@ -0,0 +1,51 @@
+import {createFeatureSelector, createSelector, MemoizedSelector} from '@ngrx/store';
+import {Names} from './names';
+import {Auth, AuthUser} from '@models/vo/auth';
+import {State} from './state';
+import {HttpErrorResponse} from '@angular/common/http';
+
+const getIsLoggedIn = (state: State): boolean => state.isLoggedIn;
+const getAuth = (state: State): Auth => state.auth;
+const getRoles = (data: Auth): string[] => data.roles;
+const getUser = (data: Auth): AuthUser => data.user;
+const getToken = (data: Auth): string => data.token;
+const getHasError = (state: State): boolean => state.hasError;
+const getErr = (state: State): HttpErrorResponse => state.err;
+
+export const selectState: MemoizedSelector<object, State> = createFeatureSelector<State>(Names.NAME);
+
+export const selectIsLoggedIn: MemoizedSelector<object, boolean> = createSelector(
+  selectState,
+  getIsLoggedIn
+);
+
+export const selectAuth: MemoizedSelector<object, Auth> = createSelector(
+  selectState,
+  getAuth
+);
+
+export const selectRoles: MemoizedSelector<Auth, string[]> = createSelector(
+  selectAuth,
+  getRoles
+);
+
+export const selectUser: MemoizedSelector<Auth, AuthUser> = createSelector(
+  selectAuth,
+  getUser
+);
+
+export const selectToken: MemoizedSelector<Auth, string> = createSelector(
+  selectAuth,
+  getToken
+);
+
+export const selectHasError: MemoizedSelector<object, boolean> = createSelector(
+  selectState,
+  getHasError
+);
+
+export const selectErr: MemoizedSelector<object, HttpErrorResponse> = createSelector(
+  selectState,
+  getErr
+);
+

package/schematics/auth/files/store/auth-store/state.ts

@@ -0,0 +1,16 @@
+import {HttpErrorResponse} from '@angular/common/http';
+import {Auth} from '@models/vo/auth';
+
+export interface State {
+  isLoggedIn: boolean;
+  auth: Auth;
+  hasError: boolean;
+  err: HttpErrorResponse;
+}
+
+export const initialState: State = {
+  isLoggedIn: false,
+  auth: new Auth(),
+  hasError: false,
+  err: null
+};

package/schematics/auth/files/views/login/components/logout-button/logout-button.component.ts

@@ -0,0 +1,49 @@
+import {ChangeDetectionStrategy, Component, NgModule, OnInit} from '@angular/core';
+import {select, Store} from '@ngrx/store';
+import {CommonModule} from '@angular/common';
+import {ButtonModule} from 'primeng/button';
+import {Observable} from 'rxjs';
+import {AuthStoreActions, AuthStoreSelectors} from '@root-store/auth-store';
+
+@Component({
+  selector: 'app-logout-button',
+  template: `
+    <p-button label="Logout" [disabled]="(isLoggedIn$ | async) === false" (click)="logout()"></p-button>
+  `,
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LogoutButtonComponent implements OnInit {
+
+  isLoggedIn$: Observable<boolean>;
+
+  constructor(private readonly store$: Store) {
+  }
+
+  ngOnInit(): void {
+    this.isLoggedIn$ = this.store$.pipe(
+      select(AuthStoreSelectors.selectIsLoggedIn)
+    );
+  }
+
+  logout(): void {
+    this.store$.dispatch(AuthStoreActions.LogoutRequest());
+  }
+}
+
+@NgModule({
+  declarations: [
+    LogoutButtonComponent
+  ],
+  exports: [
+    LogoutButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    ButtonModule
+  ],
+  providers: [],
+  entryComponents: []
+})
+export class LogoutButtonModule {
+}

package/schematics/auth/files/views/login/login-main/login-main.component.html

@@ -0,0 +1,25 @@
+<p-card header="Login" [style]="{width: '360px'}" styleClass="p-card-shadow">
+
+  <div *ngIf="(hasError$ | async)"><small class="p-invalid">{{err$ | async}}</small></div>
+  <form class="dynamic-form" [formGroup]="form">
+    <div class="p-fluid">
+      <div class="p-field">
+        <label for="username"><strong>username</strong></label><br>
+        <input id="username" name="name" type="text" class="form-control" pInputText [formControl]="username"/>
+        <app-form-error-msg [fc]="username"></app-form-error-msg>
+      </div>
+      <div class="p-field">
+        <label for="password"><strong>password</strong></label><br>
+        <input id="password" name="name" type="text" class="form-control" pInputText [formControl]="password"/>
+        <app-form-error-msg [fc]="password"></app-form-error-msg>
+      </div>
+    </div>
+  </form>
+
+  <ng-template pTemplate="footer">
+    <div class="text-right">
+      <p-button label="Login" [disabled]="!form.valid" (click)="submit(form.getRawValue())" icon="pi pi-check mr-2"></p-button>
+    </div>
+  </ng-template>
+</p-card>
+

package/schematics/auth/files/views/login/login-main/login-main.component.ts

@@ -0,0 +1,57 @@
+import {Component, OnInit} from '@angular/core';
+import {select, Store} from '@ngrx/store';
+import {AuthStoreActions, AuthStoreSelectors, RootStoreState} from '@root-store/index';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import {JValidators} from '@core/utils/j-validators';
+import {Observable} from 'rxjs';
+import {map, tap} from 'rxjs/operators';
+
+@Component({
+  selector: 'app-login-main',
+  templateUrl: 'login-main.component.html',
+  styles: []
+})
+export class LoginMainComponent implements OnInit {
+
+  constructor(
+    private readonly store$: Store<RootStoreState.State>,
+    private readonly fb: FormBuilder
+  ) {
+  }
+
+  form: FormGroup; // form
+
+  username: FormControl; // attributo
+  password: FormControl;
+
+  hasError$: Observable<boolean>;
+  err$: Observable<string>;
+
+  ngOnInit(): void {
+    this.makeFrom();
+    this.hasError$ = this.store$.pipe(
+      select(AuthStoreSelectors.selectHasError)
+    );
+
+    this.err$ = this.store$.pipe(
+      select(AuthStoreSelectors.selectErr),
+      tap(sssssssss => console.log('sssssssss', sssssssss)),
+      map(value => !!value ? value.message : '')
+    );
+  }
+
+  makeFrom(): void {
+    this.username = this.fb.control('', JValidators.required());
+    this.password = this.fb.control('', JValidators.required());
+
+    this.form = this.fb.group({
+      username: this.username, // attributo
+      password: this.password // attributo
+    });
+  }
+
+  submit(rawValue: any): void {
+    const {username, password} = rawValue;
+    this.store$.dispatch(AuthStoreActions.LoginRequest({username, password}));
+  }
+}

package/schematics/auth/files/views/login/login-routing.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LoginMainComponent} from './login-main/login-main.component';
+
+const routes: Routes = [
+  {
+    path: 'main',
+    component: LoginMainComponent,
+    pathMatch: 'full'
+  },
+  {
+    path: '',
+    redirectTo: 'main',
+    pathMatch: 'full'
+  },
+  {
+    path: '**',
+    redirectTo: 'main',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class LoginRoutingModule {
+}

package/schematics/auth/files/views/login/login.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {LoginMainComponent} from './login-main/login-main.component';
+import {LoginRoutingModule} from './login-routing.module';
+import {CardModule} from 'primeng/card';
+import {ButtonModule} from 'primeng/button';
+import {FormErrorMsgModule} from '@core/components/form-error-msg/form-error-msg.module';
+import {InputTextModule} from 'primeng/inputtext';
+
+@NgModule({
+  declarations: [
+    LoginMainComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    LoginRoutingModule,
+    CardModule,
+    ButtonModule,
+    FormErrorMsgModule,
+    InputTextModule
+  ],
+  providers: [],
+  entryComponents: []
+})
+export class LoginModule {
+}

package/schematics/auth/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function makeAuth(options: Auth): Rule;