Version 13 (#3)

* update AuthGuard

* upograde auth module

* set default data context config

Author: kbarbounakis

README.md

@@ -19,6 +19,7 @@ Choose the version corresponding to your Angular version:
 
 Angular | @themost/angular |
 --- | --- |
+13 | 13.x+
 12 | 12.x+
 11 | 11.x+
 6  | 6.x+
@@ -28,54 +29,62 @@ Angular | @themost/angular |
 
 ### Usage
 
-Provide `DATA_CONTEXT_CONFIG` and set [`@themost-framework`](https://github.com/themost-framework) api server URI. Include `AngularDataContext` in application providers.
+Import `MostModule` by using `MostModule.forRoot()` and configure `AngularDataContext`:
 
 app.module.ts
 
     import { NgModule } from '@angular/core';
-    import { HttpClientModule } from '@angular/common/http';
     import { BrowserModule } from '@angular/platform-browser';
+    import { AuthModule, MostModule } from '@themost/angular';
     import { AppComponent } from './app.component';
-    import {DATA_CONTEXT_CONFIG, AngularDataContext } from '@themost/angular';
+
     @NgModule({
-        imports: [
-            BrowserModule,
-            HttpClientModule
-        ],
-        providers: [
-            {
-                provide: DATA_CONTEXT_CONFIG, useValue: {
-                    base: 'http://localhost:3000/'
-                }
-            },
-            AngularDataContext
-        ],
-        declarations: [AppComponent],
-        bootstrap: [AppComponent],
+    declarations: [
+        AppComponent
+    ],
+    imports: [
+        BrowserModule,
+        ...
+        MostModule.forRoot({
+            base: '/api/'
+        }),
+        AuthModule.forRoot({
+            client_id: '9165351833584149',
+            scope: [
+                'profile'
+            ],
+            locations: [],
+            login: '/auth/login',
+            callback: '/client/callback'
+        })
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
     })
     export class AppModule { }
 
-app.component.ts
+index.component.ts
+
+    import { Component, OnInit } from '@angular/core';
+    import { AngularDataContext } from '@themost/angular';
+    import { from } from 'rxjs';
 
-    import { Component } from '@angular/core';
-    import {AngularDataContext} from "@themost/angular";
     @Component({
-        selector: 'test-app',
-        templateUrl: 'app.component.html'
+        selector: 'app-index',
+        templateUrl: './index.component.html',
+        styleUrls: ['./index.component.scss']
     })
-    export class AppComponent {
-        public laptops:any[];
-        constructor(private context:AngularDataContext) {
-            this.context.setBasicAuthorization('alexis.rees@example.com','user');
-        }
-    
-        ngOnInit() {
-                .where('category').equal('Laptops')
-                .orderBy('price')
-                .take(5)
-                .getItems().then((result)=> {
-                this.laptops = result;
-            });
+    export class IndexComponent implements OnInit {
+        items$: any;
+
+        constructor(private context: AngularDataContext) { }
+
+        ngOnInit(): void {
+            this.items$ = from(this.context.model('Products')
+                        .where((x:any) => x.category === 'Laptops')
+                        .orderBy((x:any) => x.price)
+                        .take(5)
+                        .getItems());
         }
     }
 

package.json

@@ -1,19 +1,19 @@
 {
   "name": "@themost/angular",
-  "version": "12.1.0",
+  "version": "13.1.0",
   "description": "MOST Web Framework client module for angular",
   "main": "./bundles/themost-angular.umd.js",
   "scripts": {
   },
   "peerDependencies": {
-    "@angular/common": "^12",
-    "@angular/core": "^12",
-    "@angular/platform-browser": "^12",
-    "@angular/platform-browser-dynamic": "^12",
-    "@themost/client": "^2.9.0",
-    "@themost/xml": "^2.5.2",
+    "@angular/common": "^13",
+    "@angular/core": "^13",
+    "@angular/platform-browser": "^13",
+    "@angular/platform-browser-dynamic": "^13",
+    "@themost/client": "^2",
+    "@themost/xml": "^2",
     "core-js": "^3.21.1",
-    "rxjs": "^6.6.0",
+    "rxjs": "~7.5.0",
     "zone.js": "^0.11.4"
   },
   "repository": {

src/auth/activated-user.service.ts

@@ -3,7 +3,6 @@ import { Injectable } from '@angular/core';
 import { AngularDataContext } from '../client';
 import { BehaviorSubject } from 'rxjs';
 
-@Injectable()
 export class ActivatedUserSnapshot {
   private static readonly StorageKey = 'ActivatedUserSnapshot.activatedUser';
   constructor(private context: AngularDataContext) {
@@ -32,10 +31,12 @@ export class ActivatedUserSnapshot {
 @Injectable()
 export class ActivatedUserService {
 
-  public user: BehaviorSubject<any> = new BehaviorSubject(this.activatedUser);
-
-    constructor(private context: AngularDataContext, public snapshot: ActivatedUserSnapshot) {
+  public user: BehaviorSubject<any>;
+  public snapshot: ActivatedUserSnapshot;
+  
+    constructor(private context: AngularDataContext) {
       this.snapshot = new ActivatedUserSnapshot(context);
+      this.user = new BehaviorSubject(this.activatedUser);
     }
 
     private get activatedUser() {

src/auth/auth.guard.spec.ts

@@ -3,7 +3,6 @@ import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MostModule } from '../module';
 import { ActivatedUserService } from './activated-user.service';
-import { AuthGuard } from './auth.guard';
 import { AUTH_CONFIG } from './auth.interfaces';
 import { AuthModule } from './auth.module';
 export const routes: Routes = [];

src/auth/auth.guard.ts

@@ -1,6 +1,6 @@
 // MOST Web Framework Codename Zero Gravity Copyright (c) 2017-2022, THEMOST LP All rights reserved
 import { Inject, Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, Router } from '@angular/router';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, Router, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AppLocation, AppLocationMask, AppLocationPattern } from './auth.interfaces';
 import { ActivatedUserService } from './activated-user.service';
@@ -27,6 +27,13 @@ export class AuthGuard implements CanActivate, CanActivateChild {
 
   public canActivateLocation(path: string, user: any): AppLocation {
     let accounts = [];
+    if (this.locations && this.locations.length === 0) {
+      const mask = 1;
+      return {
+        path,
+        mask
+      }
+    }
     if (user && user.groups) {
       accounts = user.groups.map((x: any) => {
         return x.name;
@@ -47,7 +54,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
   }
 
   private _canActivate(route: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    state: RouterStateSnapshot): boolean {
       const activatedLocation = this.canActivateLocation(state.url, this.activatedUser.snapshot.user);
       let result = false;
       if (activatedLocation != null) {
@@ -60,13 +67,11 @@ export class AuthGuard implements CanActivate, CanActivateChild {
       return result;
     }
 
-  canActivate(
-    next: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
       return this._canActivate(next, state);
   }
 
-  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
+  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     return this._canActivate(childRoute, state);
   }
 }

src/auth/auth.module.ts

@@ -9,7 +9,7 @@ import { AuthRoutingModule } from './auth-routing.module';
 import { CallbackComponent } from './callback.component';
 import { LoginComponent } from './login.component';
 import { LogoutComponent } from './logout.component';
-import { ActivatedUserService, ActivatedUserSnapshot } from './activated-user.service';
+import { ActivatedUserService } from './activated-user.service';
 import { MostModule } from '../module';
 
 
@@ -34,10 +34,9 @@ export class AuthModule {
           provide: AUTH_CONFIG,
           useValue: config
       },
-        AuthGuard,
-        AuthService,
-        ActivatedUserSnapshot,
         ActivatedUserService,
+        AuthGuard,
+        AuthService
       ]
     };
   }

src/auth/callback.component.ts

@@ -14,7 +14,7 @@ class User {
  }
 
 @Component({
-  selector: 'app-callback',
+  selector: 'login-callback',
   template: `
   <div></div>
   `
@@ -45,7 +45,6 @@ export class CallbackComponent implements OnInit, OnDestroy {
           }
         });
         this.activatedUser.set(authorizedUser);
-        this.activatedUser.user.next(authorizedUser);
         return this.router.navigate([ '/' ]);
       });
     });

src/auth/login.component.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 import { AuthService } from './auth.service';
 
 @Component({
-  selector: 'app-logout',
+  selector: 'user-login',
   template: `
   <div></div>
   `

src/auth/logout.component.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
 import { AuthService } from './auth.service';
 
 @Component({
-  selector: 'app-login',
+  selector: 'user-logout',
   template: `
   <div></div>
   `

src/client.ts

@@ -6,7 +6,7 @@ import {ClientDataService, ClientDataContext, Args, DataServiceExecuteOptions,
 
 export interface ClientDataContextConfig {
     base: string;
-    options: ClientDataContextOptions;
+    options?: ClientDataContextOptions;
 }
 
 export const DATA_CONTEXT_CONFIG = new InjectionToken<ClientDataContextConfig>('data.config');