Merge branch 'master' into feat/bottom-nav

package.json

@@ -42,9 +42,9 @@
     "@angular/platform-browser-dynamic": "~17.2.2",
     "@angular/router": "~17.2.2",
     "@capacitor-community/file-opener": "^6.0.0",
-    "@capacitor-firebase/authentication": "^6.1.0",
-    "@capacitor-firebase/crashlytics": "^6.1.0",
-    "@capacitor-firebase/performance": "^6.1.0",
+    "@capacitor-firebase/authentication": "^6.3.1",
+    "@capacitor-firebase/crashlytics": "^6.3.1",
+    "@capacitor-firebase/performance": "^6.3.1",
     "@capacitor/android": "^6.0.0",
     "@capacitor/app": "^6.0.0",
     "@capacitor/clipboard": "^6.0.0",

packages/data-models/appConfig.ts

@@ -83,24 +83,33 @@ const APP_ROUTE_DEFAULTS = {
   ],
 };
 
-export type IHeaderColourOptions = "primary" | "secondary" | "none";
+export type IHeaderFooterBackgroundOptions = "primary" | "secondary" | "none";
+/** The "compact" variant reduces the header height and removes the title */
 export type IHeaderVariantOptions = "default" | "compact";
 
-const APP_HEADER_DEFAULTS = {
-  title: "App",
+interface IAppConfigHeader {
+  back_button: {
+    hidden?: boolean;
+  };
+  collapse: boolean;
+  colour: IHeaderFooterBackgroundOptions;
+  hidden?: boolean;
+  menu_button: {
+    hidden?: boolean;
+  };
+  template: string | null;
+  title: string;
+  variant: IHeaderVariantOptions;
+}
+
+const APP_HEADER_DEFAULTS: IAppConfigHeader = {
+  back_button: {},
   collapse: false,
-  colour: "primary" as IHeaderColourOptions,
-  // The "compact" variant reduces the header height and removes the title
-  variant: "default" as IHeaderVariantOptions,
-  // default only show menu button on home screen
-  should_show_menu_button: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
-  // default show back button on all screens except home screen
-  should_show_back_button: (location: Location) =>
-    activeRoute(location) !== APP_ROUTE_DEFAULTS.home_route,
-  // on device minimize app when back button pressed from home screen
-  should_minimize_app_on_back: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
+  colour: "primary",
+  menu_button: {},
+  template: null,
+  title: "App",
+  variant: "default",
 };
 
 /**
@@ -113,8 +122,9 @@ const activeRoute = (location: Location) => {
   return path;
 };
 
-const APP_FOOTER_DEFAULTS: { templateName: string | null } = {
-  templateName: null,
+const APP_FOOTER_DEFAULTS = {
+  templateName: null as string | null,
+  background: "primary" as IHeaderFooterBackgroundOptions,
 };
 
 const LAYOUT = {
@@ -132,10 +142,11 @@ const APP_SIDEMENU_DEFAULTS = {
   should_show_deployment_name: false,
 };
 
-const APP_AUTHENTICATION_DEFAULTS = {
-  enforceLogin: false,
-  signInTemplate: "sign_in",
-};
+/**
+ * @deprecated 0.18.0
+ * Use `deployment.auth` to configure auth
+ */
+const APP_AUTHENTICATION_DEFAULTS = {};
 
 type IAppLaunchAction = {
   type: "template_popup" | "tour_start";

packages/data-models/deployment.model.ts

@@ -3,7 +3,7 @@ import type { IGdriveEntry } from "../@idemsInternational/gdrive-tools";
 import type { IAppConfig, IAppConfigOverride } from "./appConfig";
 
 /** Update version to force recompile next time deployment set (e.g. after default config update) */
-export const DEPLOYMENT_CONFIG_VERSION = 20241111.0;
+export const DEPLOYMENT_CONFIG_VERSION = 20241215.1;
 
 /** Configuration settings available to runtime application */
 export interface IDeploymentRuntimeConfig {
@@ -36,6 +36,13 @@ export interface IDeploymentRuntimeConfig {
     /** sentry/glitchtip logging dsn */
     dsn: string;
   };
+  /** Enable auth actions by specifying auth provider */
+  auth: {
+    /** provider to use with authentication actions. actions will be disabled if no provider specified */
+    provider?: "firebase" | "supabase";
+    /** prevent user accessing app pages without being logged in. Specified template will be shown until logged in */
+    enforceLoginTemplate?: string;
+  };
   /**
    * Specify if using firebase for auth and crashlytics.
    * Requires firebase config available through encrypted config */
@@ -51,10 +58,6 @@ export interface IDeploymentRuntimeConfig {
       appId: string;
       measurementId: string;
     };
-    auth: {
-      /** Enables `auth` actions to allow user sign-in/out */
-      enabled: boolean;
-    };
     crashlytics: {
       /** Enables app crash reports to firebase crashlytics */
       enabled: boolean;
@@ -200,9 +203,9 @@ export const DEPLOYMENT_RUNTIME_CONFIG_DEFAULTS: IDeploymentRuntimeConfig = {
     endpoint: "https://apps-server.idems.international/analytics",
   },
   app_config: {},
+  auth: {},
   firebase: {
     config: null,
-    auth: { enabled: false },
     crashlytics: { enabled: true },
   },
   supabase: {

packages/data-models/skin.model.ts

@@ -12,7 +12,9 @@ import { IAppConfigOverride } from "./appConfig";
  *       enabled: false
  *     }
  *     APP_HEADER_DEFAULTS: {
- *       should_show_menu_button: false
+ *       menu_button: {
+ *         hidden: true
+ *       }
  *     }
  *   }
  * }

packages/scripts/src/tasks/providers/appData.ts

@@ -68,7 +68,7 @@ const copyDeploymentDataToApp = async () => {
 const optimiseBuild = async () => new AppDataOptimiser(WorkflowRunner.config).run();
 
 function generateRuntimeConfig(deploymentConfig: IDeploymentConfigJson): IDeploymentRuntimeConfig {
-  const { analytics, api, app_config, error_logging, firebase, git, name, supabase, web } =
+  const { analytics, api, app_config, auth, error_logging, firebase, git, name, supabase, web } =
     deploymentConfig;
 
   return {
@@ -77,6 +77,7 @@ function generateRuntimeConfig(deploymentConfig: IDeploymentConfigJson): IDeploy
     analytics,
     api,
     app_config,
+    auth,
     error_logging,
     firebase,
     name,

src/app/app.component.html

@@ -5,13 +5,13 @@
     [dir]="templateTranslateService.languageDirection()"
   >
     <!-- Left Sidebar -->
-    @if (sideMenuDefaults().enabled) {
+    @if (sideMenuConfig().enabled) {
       <ion-menu #menu side="start" menuId="main-side-menu" contentId="main-content">
         <ion-header>
           <ion-toolbar color="primary">
-            <ion-title>{{ sideMenuDefaults().title }}</ion-title>
+            <ion-title>{{ sideMenuConfig().title }}</ion-title>
             <div class="app-version" slot="end">
-              @if (sideMenuDefaults().should_show_version) {
+              @if (sideMenuConfig().should_show_version) {
                 @if (deploymentConfig._content_version; as CONTENT_VERSION) {
                   <span>
                     <abbr [title]="deploymentConfig._app_builder_version" tabindex="1">
@@ -22,15 +22,15 @@
                   <span>{{ deploymentConfig._app_builder_version }} </span>
                 }
               }
-              @if (sideMenuDefaults().should_show_deployment_name) {
+              @if (sideMenuConfig().should_show_deployment_name) {
                 <span style="margin-left: 16px">({{ deploymentConfig.name }})</span>
               }
             </div>
           </ion-toolbar>
         </ion-header>
         <ion-content>
           <plh-template-container
-            [templatename]="sideMenuDefaults().template_name"
+            [templatename]="sideMenuConfig().template_name"
             (click)="menu.close()"
             [ignoreQueryParamChanges]="true"
           ></plh-template-container>
@@ -41,13 +41,15 @@
     <!-- Main content: shows in split-pane when sidebar route active -->
     <ion-split-pane when="lg" contentId="main" [disabled]="!sidebarRouter.isActivated">
       <div style="display: flex; flex-direction: column; height: 100%; width: 100%" id="main">
-        <plh-main-header></plh-main-header>
+        <plh-main-header
+          [style.display]="headerConfig().hidden ? 'none' : 'block'"
+        ></plh-main-header>
         <div class="route-container" [ngStyle]="routeContainerStyle()">
           <ion-router-outlet id="main-content"></ion-router-outlet>
         </div>
-        @if (footerDefaults().templateName; as footerTemplateName) {
+        @if (footerConfig().templateName; as footerTemplateName) {
           <ion-footer>
-            <ion-toolbar color="primary">
+            <ion-toolbar [color]="footerConfig().background">
               <plh-template-container
                 [templatename]="footerTemplateName"
                 [ignoreQueryParamChanges]="true"

src/app/app.component.ts

@@ -51,8 +51,9 @@ import { TemplateMetadataService } from "./shared/components/template/services/t
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
-  footerDefaults = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
+  headerConfig = computed(() => this.appConfigService.appConfig().APP_HEADER_DEFAULTS);
+  footerConfig = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
+  sideMenuConfig = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
   layoutConfig = computed(() => this.appConfigService.appConfig().LAYOUT);
 
   public routeContainerStyle = computed(() => {
@@ -109,7 +110,6 @@ export class AppComponent {
     public templateTranslateService: TemplateTranslateService,
     private crashlyticsService: CrashlyticsService,
     private appDataService: AppDataService,
-    private authService: AuthService,
     private seoService: SeoService,
     private taskService: TaskService,
     private feedbackService: FeedbackService,
@@ -134,7 +134,6 @@ export class AppComponent {
       this.hackSetDeveloperOptions();
       const isDeveloperMode = this.templateFieldService.getField("user_mode") === false;
       const user = this.userMetaService.userMeta;
-      await this.loadAuthConfig();
 
       if (!user.first_app_open) {
         await this.userMetaService.setUserMeta({ first_app_open: new Date().toISOString() });
@@ -173,29 +172,6 @@ export class AppComponent {
     }
   }
 
-  /**
-   * Authentication requires verified domain and app ids populated to firebase console
-   * Currently only run on native where specified (but can comment out for testing locally)
-   */
-  private async loadAuthConfig() {
-    const { firebase } = this.deploymentService.config;
-    const { enforceLogin, signInTemplate } =
-      this.appConfigService.appConfig().APP_AUTHENTICATION_DEFAULTS;
-    const ensureLogin = firebase.config && enforceLogin && Capacitor.isNativePlatform();
-    if (ensureLogin) {
-      this.authService.ready();
-      const authUser = await this.authService.getCurrentUser();
-      if (!authUser) {
-        const { modal } = await this.templateService.runStandaloneTemplate(signInTemplate, {
-          showCloseButton: false,
-          waitForDismiss: false,
-        });
-        await this.authService.waitForSignInComplete();
-        await modal.dismiss();
-      }
-    }
-  }
-
   /**
    * Various services set core app data which may be used in templates such as current app day,
    * user id etc. Make sure these services have run their initialisation logic before proceeding.
@@ -240,7 +216,6 @@ export class AppComponent {
         this.templateService,
         this.templateProcessService,
         this.appDataService,
-        this.authService,
         this.serverService,
         this.seoService,
         this.feedbackService,

src/app/app.module.ts

@@ -38,16 +38,16 @@ export function lottiePlayerFactory() {
     BrowserAnimationsModule,
     IonicModule.forRoot(),
     AppRoutingModule,
+    TemplateComponentsModule,
+    DeploymentFeaturesModule,
     HttpClientModule,
     SharedModule,
     FormsModule,
     LottieModule.forRoot({ player: lottiePlayerFactory }),
     // NOTE CC 2021-11-04 not sure if cache causes issues or not https://github.com/ngx-lottie/ngx-lottie/issues/115
     // LottieCacheModule.forRoot(),
-    TemplateComponentsModule,
     TourModule,
     ContextMenuModule,
-    DeploymentFeaturesModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

src/app/deployment-features.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 
 import { AnalyticsModule } from "./shared/services/analytics";
 import { NavStackModule } from "./feature/nav-stack/nav-stack.module";
+import { AuthModule } from "./shared/services/auth/auth.module";
 
 /**
  * Module imports required for specific deployment features
@@ -14,5 +15,5 @@ import { NavStackModule } from "./feature/nav-stack/nav-stack.module";
  *
  * This is a feature marked for future implementation
  */
-@NgModule({ imports: [AnalyticsModule, NavStackModule] })
+@NgModule({ imports: [AuthModule, AnalyticsModule, NavStackModule] })
 export class DeploymentFeaturesModule {}

src/app/shared/components/header/header.component.html

@@ -14,15 +14,16 @@
         <ion-icon name="chevron-back-outline" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ng-container>
-      <ion-title
-        *ngIf="!(headerConfig().variant === 'compact')"
-        style="text-align: center"
-        routerLink="/"
-      >
+    @if (headerConfig().template) {
+      <plh-template-container
+        [templatename]="headerConfig().template"
+        [ignoreQueryParamChanges]="true"
+      ></plh-template-container>
+    } @else if (headerConfig().title && headerConfig().variant !== "compact") {
+      <ion-title style="text-align: center" routerLink="/">
         <span>{{ headerConfig().title }}</span>
       </ion-title>
-    </ng-container>
+    }
     <ion-buttons slot="end"> </ion-buttons>
   </ion-toolbar>
 </ion-header>