Merge pull request #2584 from NoelDeMartin/MOBILE-3320

MOBILE-3320: Configure dynamic routes and route guards

.travis.yml

@@ -4,4 +4,4 @@ cache: npm
 script:
   - npm run lint
   - npm run test:ci
-  - npm run build
+  - npm run build:prod

package.json

@@ -21,6 +21,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "jest --verbose",
     "test:ci": "jest -ci --runInBand --verbose",
     "test:watch": "jest --watch",

src/app/app-routing.module.ts

@@ -15,12 +15,9 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
+import { AuthGuard } from '@guards/auth.guard';
+
 const routes: Routes = [
-    {
-        path: '',
-        redirectTo: 'login',
-        pathMatch: 'full',
-    },
     {
         path: 'login',
         loadChildren: () => import('./core/login/login.module').then( m => m.CoreLoginModule),
@@ -30,8 +27,10 @@ const routes: Routes = [
         loadChildren: () => import('./core/settings/settings.module').then( m => m.CoreSettingsModule),
     },
     {
-        path: 'mainmenu',
+        path: '',
         loadChildren: () => import('./core/mainmenu/mainmenu.module').then( m => m.CoreMainMenuModule),
+        canActivate: [AuthGuard],
+        canLoad: [AuthGuard],
     },
 ];
 

src/app/app.component.html

@@ -1,3 +1,5 @@
 <ion-app>
+    <!-- @todo move /login/init UI here -->
+
     <ion-router-outlet></ion-router-outlet>
 </ion-app>

src/app/app.component.test.ts

@@ -54,4 +54,6 @@ describe('AppComponent', () => {
         expect(navController.navigateRoot).toHaveBeenCalledWith('/login/sites');
     });
 
+    it.todo('shows loading while app isn\'t ready');
+
 });

src/app/app.module.ts

@@ -59,6 +59,7 @@ import { initCoreSyncDB } from '@services/sync.db';
 import { CoreEmulatorModule } from '@core/emulator/emulator.module';
 import { CoreLoginModule } from '@core/login/login.module';
 import { CoreCoursesModule } from '@core/courses/courses.module';
+import { CoreSettingsInitModule } from '@core/settings/settings-init.module';
 
 import { setSingletonsInjector } from '@singletons/core.singletons';
 
@@ -88,6 +89,7 @@ export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
         CoreEmulatorModule,
         CoreLoginModule,
         CoreCoursesModule,
+        CoreSettingsInitModule,
     ],
     providers: [
         { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

src/app/core/login/services/helper.ts

@@ -720,7 +720,7 @@ export class CoreLoginHelperProvider {
         if (options?.redirectPage == CoreLoginHelperProvider.OPEN_COURSE) {
             // Load the main menu first, and then open the course.
             try {
-                await this.navCtrl.navigateRoot('/mainmenu');
+                await this.navCtrl.navigateRoot('/');
             } finally {
                 // @todo: Open course.
             }
@@ -729,7 +729,7 @@ export class CoreLoginHelperProvider {
             const queryParams: Params = Object.assign({}, options);
             delete queryParams.navigationOptions;
 
-            await this.navCtrl.navigateRoot('/mainmenu', {
+            await this.navCtrl.navigateRoot('/', {
                 queryParams,
                 ...options?.navigationOptions,
             });

src/app/core/mainmenu/mainmenu-routing.module.ts

@@ -12,20 +12,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { NgModule } from '@angular/core';
+import { InjectionToken, Injector, ModuleWithProviders, NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, ROUTES, Routes } from '@angular/router';
+
+import { CoreArray } from '@/app/singletons/array';
 
 import { CoreMainMenuPage } from './pages/menu/menu.page';
 import { CoreMainMenuMorePage } from './pages/more/more.page';
 
-const routes: Routes = [
+function buildMainMenuRoutes(injector: Injector): Routes {
+    const routes = CoreArray.flatten(injector.get<Routes[]>(MAIN_MENU_ROUTES, []));
+
+    return [
         {
             path: '',
             component: CoreMainMenuPage,
             children: [
                 {
                     path: 'home', // @todo: Add this route dynamically.
-                loadChildren: () => import('./pages/home/home.page.module').then( m => m.CoreHomePageModule),
+                    loadChildren: () => import('./pages/home/home.page.module').then(m => m.CoreHomePageModule),
                 },
                 {
                     path: 'more',
@@ -34,14 +39,33 @@ const routes: Routes = [
                             path: '',
                             component: CoreMainMenuMorePage,
                         },
+                        ...routes,
                     ],
                 },
+                ...routes,
+                // @todo handle 404.
             ],
         },
-];
+    ];
+}
+
+export const MAIN_MENU_ROUTES = new InjectionToken('MAIN_MENU_ROUTES');
 
 @NgModule({
-    imports: [RouterModule.forChild(routes)],
+    providers: [
+        { provide: ROUTES, multi: true, useFactory: buildMainMenuRoutes, deps: [Injector] },
+    ],
     exports: [RouterModule],
 })
-export class CoreMainMenuRoutingModule {}
+export class CoreMainMenuRoutingModule {
+
+    static forChild(routes: Routes): ModuleWithProviders<CoreMainMenuRoutingModule> {
+        return {
+            ngModule: CoreMainMenuRoutingModule,
+            providers: [
+                { provide: MAIN_MENU_ROUTES, multi: true, useValue: routes },
+            ],
+        };
+    }
+
+}

src/app/core/mainmenu/pages/more/more.html

@@ -25,7 +25,7 @@
             <ion-spinner></ion-spinner>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
-            (click)="openHandler(handler)" title="{{ handler.title | translate }}" detail="true" details>
+            (click)="openHandler(handler)" title="{{ handler.title | translate }}" detail="true" detail>
             <ion-icon [name]="handler.icon" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ handler.title | translate}}</h2>
@@ -36,55 +36,55 @@
         </ion-item>
         <ng-container *ngFor="let item of customItems">
             <ion-item button *ngIf="item.type != 'embedded'" [href]="item.url" title="{{item.label}}" core-link
-                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" details>
+                [capture]="item.type == 'app'" [inApp]="item.type == 'inappbrowser'" class="core-moremenu-customitem" detail>
                 <ion-icon [name]="item.icon" slot="start"></ion-icon>
                 <ion-label>
                     <h2>{{item.label}}</h2>
                 </ion-label>
             </ion-item>
             <ion-item button *ngIf="item.type == 'embedded'" (click)="openItem(item)" title="{{item.label}}"
-                class="core-moremenu-customitem" details>
+                class="core-moremenu-customitem" detail>
                 <ion-icon [name]="item.icon" slot="start"></ion-icon>
                 <ion-label>
                     <h2>{{item.label}}</h2>
                 </ion-label>
             </ion-item>
         </ng-container>
-        <ion-item button *ngIf="showScanQR" (click)="scanQR()" details>
+        <ion-item button *ngIf="showScanQR" (click)="scanQR()" detail>
             <ion-icon name="fa-qrcode" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.scanqr' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item button *ngIf="showWeb && siteInfo" [href]="siteInfo.siteurl" core-link autoLogin="yes"
-            title="{{ 'core.mainmenu.website' | translate }}" details>
+            title="{{ 'core.mainmenu.website' | translate }}" detail>
             <ion-icon name="globe" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.mainmenu.website' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item button *ngIf="showHelp" [href]="docsUrl" core-link autoLogin="no"
-            title="{{ 'core.mainmenu.help' | translate }}" details>
+            title="{{ 'core.mainmenu.help' | translate }}" detail>
             <ion-icon name="help-buoy" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.mainmenu.help' | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item button (click)="openSitePreferences()" title="{{ 'core.settings.preferences' | translate }}" details>
+        <ion-item button (click)="openSitePreferences()" title="{{ 'core.settings.preferences' | translate }}" detail>
             <ion-icon name="fa-wrench" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.settings.preferences' | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item button (click)="logout()" title="{{ logoutLabel | translate }}" details>
+        <ion-item button (click)="logout()" title="{{ logoutLabel | translate }}" detail>
             <ion-icon name="log-out" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
                 <h2>{{ logoutLabel | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item-divider></ion-item-divider>
-        <ion-item button router-direction="forward" routerLink="/settings/app"
+        <ion-item button router-direction="forward" routerLink="settings"
-            title="{{ 'core.settings.appsettings' | translate }}" details>
+            title="{{ 'core.settings.appsettings' | translate }}" detail>
             <ion-icon name="fa-cogs" slot="start"></ion-icon>
             <ion-label>
                 <h2>{{ 'core.settings.appsettings' | translate }}</h2>

src/app/core/settings/pages/about/about.html

@@ -21,7 +21,7 @@
         <ion-icon name="fa-user-shield" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.privacypolicy' | translate }}</ion-label>
     </ion-item>
-    <ion-item button class="ion-text-wrap" (click)="openPage('deviceinfo')" detail>
+    <ion-item button class="ion-text-wrap" router-direction="forward" routerLink="deviceinfo" detail>
         <ion-icon name="fa-mobile" slot="start"></ion-icon>
         <ion-label>{{ 'core.settings.deviceinfo' | translate }}</ion-label>
     </ion-item>

src/app/core/settings/pages/about/about.page.module.ts

@@ -28,6 +28,12 @@ const routes: Routes = [
         path: '',
         component: CoreSettingsAboutPage,
     },
+    {
+        path: 'deviceinfo',
+        loadChildren: () =>
+            import('@core/settings/pages/deviceinfo/deviceinfo.page.module')
+                .then(m => m.CoreSettingsDeviceInfoPageModule),
+    },
 ];
 
 @NgModule({

src/app/core/settings/pages/app/app.page.ts

@@ -59,7 +59,7 @@ export class CoreSettingsAppPage {
     openSettings(page: string, params?: Params): void {
         this.selectedPage = page;
         // this.splitviewCtrl!.push(page, params);
-        this.router.navigate(['../'+page], { relativeTo: this.route, queryParams: params });
+        this.router.navigate([page], { relativeTo: this.route, queryParams: params });
     }
 
 }

src/app/core/settings/settings-init.module.ts

@@ -0,0 +1,31 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+
+import { CoreMainMenuRoutingModule } from '@core/mainmenu/mainmenu-routing.module';
+
+const routes: Routes = [
+    {
+        path: 'settings',
+        loadChildren: () => import('@core/settings/settings.module').then(m => m.CoreSettingsModule),
+    },
+];
+
+@NgModule({
+    imports: [CoreMainMenuRoutingModule.forChild(routes)],
+    exports: [CoreMainMenuRoutingModule],
+})
+export class CoreSettingsInitModule {}

src/app/core/settings/settings-routing.module.ts

@@ -20,18 +20,9 @@ const routes: Routes = [
         path: 'about',
         loadChildren: () => import('./pages/about/about.page.module').then( m => m.CoreSettingsAboutPageModule),
     },
-    {
-        path: 'deviceinfo',
-        loadChildren: () => import('./pages/deviceinfo/deviceinfo.page.module').then( m => m.CoreSettingsDeviceInfoPageModule),
-    },
-    {
-        path: 'app',
-        loadChildren: () => import('./pages/app/app.page.module').then( m => m.CoreSettingsAppPageModule),
-    },
     {
         path: '',
-        redirectTo: 'app',
+        loadChildren: () => import('./pages/app/app.page.module').then( m => m.CoreSettingsAppPageModule),
-        pathMatch: 'full',
     },
 ];
 

src/app/guards/auth.guard.ts

@@ -0,0 +1,40 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable } from '@angular/core';
+import { Router, CanLoad, CanActivate, UrlTree } from '@angular/router';
+
+import { CoreInit } from '@services/init';
+import { CoreSites } from '@services/sites';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanLoad, CanActivate {
+
+    constructor(private router: Router) {}
+
+    canActivate(): Promise<true | UrlTree> {
+        return this.guard();
+    }
+
+    canLoad(): Promise<true | UrlTree> {
+        return this.guard();
+    }
+
+    private async guard(): Promise<true | UrlTree> {
+        await CoreInit.instance.ready();
+
+        return CoreSites.instance.isLoggedIn() || this.router.parseUrl('/login');
+    }
+
+}

tsconfig.app.json

@@ -17,6 +17,7 @@
       "@components/*": ["app/components/*"],
       "@core/*": ["app/core/*"],
       "@directives/*": ["app/directives/*"],
+      "@guards/*": ["app/guards/*"],
       "@pipes/*": ["app/pipes/*"],
       "@services/*": ["app/services/*"],
       "@singletons/*": ["app/singletons/*"]

tsconfig.json

@@ -36,6 +36,7 @@
       "@components/*": ["app/components/*"],
       "@core/*": ["app/core/*"],
       "@directives/*": ["app/directives/*"],
+      "@guards/*": ["app/guards/*"],
       "@pipes/*": ["app/pipes/*"],
       "@services/*": ["app/services/*"],
       "@singletons/*": ["app/singletons/*"],

tsconfig.test.json

@@ -22,6 +22,7 @@
       "@components/*": ["app/components/*"],
       "@core/*": ["app/core/*"],
       "@directives/*": ["app/directives/*"],
+      "@guards/*": ["app/guards/*"],
       "@pipes/*": ["app/pipes/*"],
       "@services/*": ["app/services/*"],
       "@singletons/*": ["app/singletons/*"],