From bbf78721a7436f91cf761673f3894d88df27895a Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 3 Jun 2021 18:54:09 +0300 Subject: [PATCH] Improve mobile app support --- ui-ngx/src/app/core/api/widget-api.models.ts | 1 + ui-ngx/src/app/core/auth/auth.service.ts | 34 ++++-- ui-ngx/src/app/core/guards/auth.guard.ts | 6 + .../src/app/core/services/mobile.service.ts | 103 +++++++++++++++++- ui-ngx/src/app/core/utils.ts | 4 + .../dashboard-page.component.html | 2 +- .../dashboard-page.component.ts | 14 +++ .../default-state-controller.component.ts | 4 + .../entity-state-controller.component.ts | 4 + .../states/state-controller.component.ts | 2 + .../app/shared/models/window-message.model.ts | 14 ++- ui-ngx/src/theme.scss | 47 ++++++++ 12 files changed, 224 insertions(+), 11 deletions(-) diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts index 8c6ac47ba5..515e5397f1 100644 --- a/ui-ngx/src/app/core/api/widget-api.models.ts +++ b/ui-ngx/src/app/core/api/widget-api.models.ts @@ -152,6 +152,7 @@ export interface IStateController { getStateIndex(): number; getStateIdAtIndex(index: number): string; getEntityId(entityParamName: string): EntityId; + getCurrentStateName(): string; } export interface SubscriptionInfo { diff --git a/ui-ngx/src/app/core/auth/auth.service.ts b/ui-ngx/src/app/core/auth/auth.service.ts index 4d25e5ce72..c17d993bf7 100644 --- a/ui-ngx/src/app/core/auth/auth.service.ts +++ b/ui-ngx/src/app/core/auth/auth.service.ts @@ -45,6 +45,7 @@ import { ActionNotificationShow } from '@core/notification/notification.actions' import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { AlertDialogComponent } from '@shared/components/dialog/alert-dialog.component'; import { OAuth2ClientInfo } from '@shared/models/oauth2.models'; +import { isMobileApp } from '@core/utils'; @Injectable({ providedIn: 'root' @@ -194,11 +195,13 @@ export class AuthService { } public gotoDefaultPlace(isAuthenticated: boolean) { - const authState = getCurrentAuthState(this.store); - const url = this.defaultUrl(isAuthenticated, authState); - this.zone.run(() => { - this.router.navigateByUrl(url); - }); + if (!isMobileApp()) { + const authState = getCurrentAuthState(this.store); + const url = this.defaultUrl(isAuthenticated, authState); + this.zone.run(() => { + this.router.navigateByUrl(url); + }); + } } public loadOAuth2Clients(): Observable> { @@ -516,12 +519,15 @@ export class AuthService { return this.refreshTokenSubject !== null; } - public setUserFromJwtToken(jwtToken, refreshToken, notify) { + public setUserFromJwtToken(jwtToken, refreshToken, notify): Observable { + const authenticatedSubject = new ReplaySubject(); if (!jwtToken) { AuthService.clearTokenData(); if (notify) { this.notifyUnauthenticated(); } + authenticatedSubject.next(false); + authenticatedSubject.complete(); } else { this.updateAndValidateTokens(jwtToken, refreshToken, true); if (notify) { @@ -530,16 +536,30 @@ export class AuthService { (authPayload) => { this.notifyUserLoaded(true); this.notifyAuthenticated(authPayload); + authenticatedSubject.next(true); + authenticatedSubject.complete(); }, () => { this.notifyUserLoaded(true); this.notifyUnauthenticated(); + authenticatedSubject.next(false); + authenticatedSubject.complete(); } ); } else { - this.loadUser(false).subscribe(); + this.loadUser(false).subscribe( + () => { + authenticatedSubject.next(true); + authenticatedSubject.complete(); + }, + () => { + authenticatedSubject.next(false); + authenticatedSubject.complete(); + } + ); } } + return authenticatedSubject; } private updateAndValidateTokens(jwtToken, refreshToken, notify: boolean) { diff --git a/ui-ngx/src/app/core/guards/auth.guard.ts b/ui-ngx/src/app/core/guards/auth.guard.ts index fdba07b94a..98fd4bd969 100644 --- a/ui-ngx/src/app/core/guards/auth.guard.ts +++ b/ui-ngx/src/app/core/guards/auth.guard.ts @@ -29,6 +29,7 @@ import { DialogService } from '@core/services/dialog.service'; import { TranslateService } from '@ngx-translate/core'; import { UtilsService } from '@core/services/utils.service'; import { isObject } from '@core/utils'; +import { MobileService } from '@core/services/mobile.service'; @Injectable({ providedIn: 'root' @@ -41,6 +42,7 @@ export class AuthGuard implements CanActivate, CanActivateChild { private dialogService: DialogService, private utils: UtilsService, private translate: TranslateService, + private mobileService: MobileService, private zone: NgZone) {} getAuthState(): Observable { @@ -108,6 +110,10 @@ export class AuthGuard implements CanActivate, CanActivateChild { return of(false); } } + if (this.mobileService.isMobileApp() && !path.startsWith('dashboard.')) { + this.mobileService.handleMobileNavigation(path, params); + return of(false); + } const defaultUrl = this.authService.defaultUrl(true, authState, path, params); if (defaultUrl) { // this.authService.gotoDefaultPlace(true); diff --git a/ui-ngx/src/app/core/services/mobile.service.ts b/ui-ngx/src/app/core/services/mobile.service.ts index b6774f37d0..800651356a 100644 --- a/ui-ngx/src/app/core/services/mobile.service.ts +++ b/ui-ngx/src/app/core/services/mobile.service.ts @@ -20,9 +20,14 @@ import { isDefined } from '@core/utils'; import { MobileActionResult, WidgetMobileActionResult, WidgetMobileActionType } from '@shared/models/widget.models'; import { from, of } from 'rxjs'; import { Observable } from 'rxjs/internal/Observable'; -import { catchError } from 'rxjs/operators'; +import { catchError, tap } from 'rxjs/operators'; +import { OpenDashboardMessage, ReloadUserMessage, WindowMessage } from '@shared/models/window-message.model'; +import { Params, Router } from '@angular/router'; +import { AuthService } from '@core/auth/auth.service'; const dashboardStateNameHandler = 'tbMobileDashboardStateNameHandler'; +const dashboardLoadedHandler = 'tbMobileDashboardLoadedHandler'; +const navigationHandler = 'tbMobileNavigationHandler'; const mobileHandler = 'tbMobileHandler'; // @dynamic @@ -34,10 +39,20 @@ export class MobileService { private readonly mobileApp; private readonly mobileChannel; - constructor(@Inject(WINDOW) private window: Window) { + private readonly onWindowMessageListener = this.onWindowMessage.bind(this); + + private reloadUserObservable: Observable; + private lastDashboardId: string; + + constructor(@Inject(WINDOW) private window: Window, + private router: Router, + private authService: AuthService) { const w = (this.window as any); this.mobileChannel = w.flutter_inappwebview; this.mobileApp = isDefined(this.mobileChannel); + if (this.mobileApp) { + window.addEventListener('message', this.onWindowMessageListener); + } } public isMobileApp(): boolean { @@ -50,6 +65,12 @@ export class MobileService { } } + public onDashboardLoaded() { + if (this.mobileApp) { + this.mobileChannel.callHandler(dashboardLoadedHandler); + } + } + public handleWidgetMobileAction(type: WidgetMobileActionType, ...args: any[]): Observable> { if (this.mobileApp) { @@ -67,4 +88,82 @@ export class MobileService { } } + public handleMobileNavigation(path?: string, params?: Params) { + if (this.mobileApp) { + this.mobileChannel.callHandler(navigationHandler, path, params); + } + } + + private onWindowMessage(event: MessageEvent) { + if (event.data) { + let message: WindowMessage; + try { + message = JSON.parse(event.data); + } catch (e) {} + if (message && message.type) { + switch (message.type) { + case 'openDashboardMessage': + const openDashboardMessage: OpenDashboardMessage = message.data; + this.openDashboard(openDashboardMessage); + break; + case 'reloadUserMessage': + const reloadUserMessage: ReloadUserMessage = message.data; + this.reloadUser(reloadUserMessage); + break; + } + } + } + } + + private openDashboard(openDashboardMessage: OpenDashboardMessage) { + if (openDashboardMessage && openDashboardMessage.dashboardId) { + if (this.reloadUserObservable) { + this.reloadUserObservable.subscribe( + (authenticated) => { + if (authenticated) { + this.doDashboardNavigation(openDashboardMessage); + } + } + ); + } else { + this.doDashboardNavigation(openDashboardMessage); + } + } + } + + private doDashboardNavigation(openDashboardMessage: OpenDashboardMessage) { + let url = `/dashboard/${openDashboardMessage.dashboardId}`; + const params = []; + if (openDashboardMessage.state) { + params.push(`state=${openDashboardMessage.state}`); + } + if (openDashboardMessage.embedded) { + params.push(`embedded=true`); + } + if (openDashboardMessage.hideToolbar) { + params.push(`hideToolbar=true`); + } + if (this.lastDashboardId === openDashboardMessage.dashboardId) { + params.push(`reload=${new Date().getTime()}`); + } + if (params.length) { + url += `?${params.join('&')}`; + } + this.lastDashboardId = openDashboardMessage.dashboardId; + this.router.navigateByUrl(url, {replaceUrl: true}); + } + + private reloadUser(reloadUserMessage: ReloadUserMessage) { + if (reloadUserMessage && reloadUserMessage.accessToken && reloadUserMessage.refreshToken) { + this.reloadUserObservable = this.authService.setUserFromJwtToken(reloadUserMessage.accessToken, + reloadUserMessage.refreshToken, true).pipe( + tap( + () => { + this.reloadUserObservable = null; + } + ) + ); + } + } + } diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 6291438a58..a287802ec2 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -441,3 +441,7 @@ export function generateSecret(length?: number): string { export function validateEntityId(entityId: EntityId | null): boolean { return isDefinedAndNotNull(entityId?.id) && entityId.id !== NULL_UUID && isDefinedAndNotNull(entityId?.entityType); } + +export function isMobileApp(): boolean { + return isDefined((window as any).flutter_inappwebview); +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html index 5c54fe23e0..8ff6944856 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html @@ -87,7 +87,7 @@ (click)="updateDashboardImage($event)"> wallpaper -