@progressive-development/pd-spa-helper 0.1.85 → 0.1.87

package/src/PdSpaHelper.ts

@@ -1,21 +1,21 @@
 import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
-import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
 
 import { html, LitElement, css, CSSResultGroup, TemplateResult } from 'lit';
 import { router, navigator } from 'lit-element-router';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import '@progressive-development/pd-page/pd-menu.js';
 import '@progressive-development/pd-page/pd-footer.js';
 
 import { initApplicationServices } from './InitApplicationData.js';
 
-import { isAuthenticated, logout } from './firebase/auth.js';
+// Refactor: move function definitions to general place (no firebase specific imports here)
+import { FunctionDefinition, FunctionResult, FunctionsConfig } from './service-provider/firebase/functions-client.js';
+
 import { ServiceCallController } from './service-call-controller2.js';
-import { callFunction, FunctionDefinition, FunctionResult, FunctionsConfig } from './firebase/functions-client.js';
 import { initializeStore } from './store/mini-rx.store.js';
 
 import './router/AppMain.js';
@@ -28,6 +28,7 @@ import './tmpown/pd-panel.js';
 import { PdToast } from './tmpown/pd-toast.js';
 // eslint-disable-next-line import/no-duplicates
 import './tmpown/pd-toast.js';
+import { authStateChangedImpl, isAuthenticatedImpl, setServiceProvider } from './service-provider/service-provider-impl.js';
 
 
 // Footer Text
@@ -65,6 +66,10 @@ export interface NavigationPage {
   hideMenu?: boolean
 }
 
+export type ServiceProviderFirebase = "firebase";
+export type ServiceProviderMock = "mock";
+export type ServiceProviderConfiguration = ServiceProviderFirebase | ServiceProviderMock;
+
 export interface NavigationConfig {
   pages: Array<NavigationPage>,
   includeLogin: boolean
@@ -89,6 +94,7 @@ export interface StoreConfig {
 }
 
 export interface AppConfiguration {  
+  serviceProvider?: ServiceProviderConfiguration,
   navigationConfigParam: NavigationConfig;
   storeConfigParam?: StoreConfig;
   firebaseConfig?: FirebaseOptions;
@@ -113,7 +119,7 @@ const transformRoutes = () => {
       unauthenticated: {
         name: 'login',
       },
-      authenticate: () => isAuthenticated(),
+      authenticate: () => isAuthenticatedImpl(),
     } : undefined;
 
   let generatedRoutes:Array<any> = [];
@@ -147,6 +153,9 @@ const transformRoutes = () => {
  * @param functionsConfig
  */
 export const startInit = (config: AppConfiguration) => {
+
+  // set service provider
+  setServiceProvider(config.serviceProvider);
   
   // init mini-rx store
   if (config.storeConfigParam) {
@@ -198,7 +207,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
    * Properties needed for login/profile data.
    */
   @property({ type: Object, state: true }) 
-  _user: User | undefined;
+  _user: unknown | undefined;
 
   @property({ type: Object, state: true }) 
   _profile: any | undefined;
@@ -278,11 +287,17 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
       transition: background-color 1s;
     }
 
-    .default-main {
+    /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */
+    .default-main-padding {
       padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px));
       transition: padding-top 1s;
     }
 
+    .default-main {
+      padding-top: calc(var(--pd-menu-height) + 10px);
+      transition: padding-top 1s;
+    }    
+
     .default-main-withteaser {
       padding-top: calc(var(--pd-menu-height) + var(--pd-teaser-height, 380px) + 10px);
       transition: padding-top 1s;
@@ -350,43 +365,19 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     this.params = params;
     this.query = query;
   }  
-  
+
+
   /**
    * Call to activate onAuthState change with profile request callbacks.
+   * Only implemented for firebase provider.
    */
   activateLoginHandler() {
-    console.log("Activate Login Handler");
-    // activate firebase auth handler
-    const auth = getAuth();
-    onAuthStateChanged(auth, user => {
-      if (user) {
-        this._user = user;
-        if (postLoginFunc) {
-          callFunction(postLoginFunc, postLoginFunc.param)
-            .then((result:FunctionResult) => {
-              this._profile = result.resultData;
-              // redirect if login in the meantime is available 
-              // => else stay on the login page after reload/url navigation
-              if (this.route === "login" && postLoginFunc?.redirect) {                
-                this.navigate(postLoginFunc.redirect);
-              }
-
-              // new event, could/should replace redirect
-              document.dispatchEvent(new CustomEvent("user-login-event"));
-
-            }).catch(() => {
-              if (postLoginFunc?.logoutOnFail) {
-                logout();
-                this._user = undefined;
-                this._profile = undefined;
-              }
-            });
-        }
-      } else {
-        this._user = undefined;
-        this._profile = undefined;
-      }
-    });
+    console.log("Activate Login Handler");    
+    const callback = (user: unknown) => {
+      console.log("My callback user:", user);
+      this._user = user;
+    };
+    authStateChangedImpl(callback);
   }
 
   render() {    
@@ -424,7 +415,8 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
   // eslint-disable-next-line class-methods-use-this
   private _getMainClass(hideTeaser: boolean, pageConf: NavigationPage): string {
     if (hideTeaser) {
-      return pageConf.mainClass ? pageConf.mainClass : "default-main";
+      // eslint-disable-next-line no-nested-ternary
+      return pageConf.mainClass ? pageConf.mainClass : (pageConf.withTeaser ? "default-main-padding" : "default-main");
     }
     return "default-main-withteaser";
   }

package/src/index.ts

@@ -34,17 +34,17 @@ export {
   FunctionParam,
   FunctionsConfig,
   callFunction
-} from './firebase/functions-client.js'
+} from './service-provider/firebase/functions-client.js'
 
 export {
   getDB,
-} from './firebase/firestore-client.js'
+} from './service-provider/firebase/firestore-client.js'
 
 export {
-  login,
-  logout,
-  isAuthenticated
-} from './firebase/auth.js'
+  loginImpl,
+  logoutImpl,
+  isAuthenticatedImpl
+} from './service-provider/service-provider-impl.js'
 
 export { pdStore } from './store/mini-rx.store.js';
 

package/src/service-call-controller2.ts

@@ -1,7 +1,7 @@
 import {ReactiveControllerHost} from 'lit';
 import {initialState, Task} from '@lit-labs/task';
 
-import { FunctionDefinition, FunctionResult, initController } from './firebase/functions-client.js';
+import { FunctionDefinition, FunctionResult, initController } from './service-provider/firebase/functions-client.js';
 
 export interface ServiceControllerInput {
   promise: Promise<FunctionResult>,

package/src/service-provider/firebase/auth.ts

@@ -0,0 +1,52 @@
+import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';
+
+export const logout = async (): Promise<boolean> => {
+  const auth = getAuth();
+  try {
+    await signOut(auth);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const isAuthenticated = (): boolean =>  
+  getAuth().currentUser !== null;
+
+
+export const authStateChanged = (callback: Function) => {
+  onAuthStateChanged(getAuth(), (user) => callback(user));        
+  /* Alter code aus init in pd-spa-helper, hier falsch, noch refactorieren   
+  if (user) {
+    this._user = user;
+    if (postLoginFunc) {      
+      callFunction(postLoginFunc, postLoginFunc.param)
+        .then((result:FunctionResult) => {
+          this._profile = result.resultData;
+          // redirect if login in the meantime is available 
+          // => else stay on the login page after reload/url navigation
+          if (this.route === "login" && postLoginFunc?.redirect) {                
+            this.navigate(postLoginFunc.redirect);
+          }
+          // new event, could/should replace redirect
+          document.dispatchEvent(new CustomEvent("user-login-event"));
+        }).catch(() => {
+          if (postLoginFunc?.logoutOnFail) {
+            logout();
+            this._user = undefined;
+            this._profile = undefined;
+          }
+        });            
+    } else {
+      this._user = undefined;
+      this._profile = undefined;
+    }
+  }
+  */
+}
+    
+export const login = async (user:string, sec:string): Promise<User> => {
+  const auth = getAuth();      
+  const credentials = await signInWithEmailAndPassword(auth, user, sec);
+  return credentials.user;   
+}

package/src/{firebase → service-provider/firebase}/functions-client.ts

@@ -1,7 +1,7 @@
 import { FirebaseApp } from "firebase/app";
 import { getFunctions, HttpsCallable, httpsCallable } from "firebase/functions";
 import { TemplateResult } from "lit";
-import { ServiceCallController } from "../service-call-controller2.js";
+import { ServiceCallController } from "../../service-call-controller2.js";
 
 export interface FunctionDefinition {
   name: string,

package/src/service-provider/mock/auth.ts

@@ -0,0 +1,68 @@
+
+/*
+ * Only for temporary development:
+ * Set to true/false if the user should hold only in session (login after each reload)
+ * or in the localstore (login until the local store entry is invalid or not available).
+ */
+const LOCALSTORE_ACTIV = true;
+const LOCALSTORE_ITEM_KEY = 'pdUserLogin';
+const HARDCODED_USER = 'mock';
+const HARDCODED_PWD = 'mock';
+
+
+
+let loginAvailable: boolean | undefined;
+
+
+const checkLocalStore = () => {
+  const userItem =  localStorage.getItem(LOCALSTORE_ITEM_KEY);
+  return userItem === 'true';
+}
+
+
+export const logoutMock = async (): Promise<boolean> => {
+  console.log("Do MOCK logout");
+  loginAvailable = undefined;
+  if (LOCALSTORE_ACTIV) {
+      localStorage.removeItem(LOCALSTORE_ITEM_KEY);
+  }
+  return Promise.resolve(true);
+};
+
+export const isAuthenticatedMock = (): boolean => {
+  if (loginAvailable === undefined) {
+    console.log('MOCK: check authentication');
+    loginAvailable = LOCALSTORE_ACTIV ? checkLocalStore() : false;
+  }
+  return loginAvailable;
+} 
+
+
+export const authStateChangedMock = (callback: Function) => {
+  console.log("Not implemented for MOCK");
+}
+
+export const loginMock = async (user:string, sec:string): Promise<unknown> => {    
+
+  console.log('MOCK: do authentication for user: ', user);
+  let valid = false;
+  if (user === HARDCODED_USER && sec === HARDCODED_PWD) {
+      if (LOCALSTORE_ACTIV) {
+          localStorage.setItem(LOCALSTORE_ITEM_KEY, 'true');
+      }
+      valid = true;
+      loginAvailable = true;
+  }
+
+  if (valid) {
+    return Promise.resolve({
+      uid: "123124"
+    });   
+  }
+  
+  throw new Error("Invalid login");
+}
+
+
+
+

package/src/service-provider/service-provider-impl.ts

@@ -0,0 +1,68 @@
+import { ServiceProviderConfiguration } from "../PdSpaHelper.js";
+
+import { authStateChanged, isAuthenticated, login, logout } from "./firebase/auth.js";
+import { authStateChangedMock, isAuthenticatedMock, loginMock, logoutMock } from "./mock/auth.js";
+
+
+let provider: ServiceProviderConfiguration | undefined;
+
+
+const throwUndefinedProviderError = () => {
+  throw new Error("Undefined service provider, please check configuration. 'firebase' or 'mock' allowed here.");
+}
+
+export const setServiceProvider = (providerParam?: ServiceProviderConfiguration) => {
+  provider = providerParam;
+}
+
+export const authStateChangedImpl = (
+  callback: Function
+) => {
+  if (provider === "firebase") {
+    authStateChanged(callback);
+  } else if (provider === "mock") {
+    authStateChangedMock(callback);
+  } else {
+    throwUndefinedProviderError();
+  }
+}
+
+export const isAuthenticatedImpl = () => {
+  if (provider === "firebase") {
+    return isAuthenticated();
+  }   
+  if (provider === "mock") {
+    return isAuthenticatedMock();
+  }     
+  return throwUndefinedProviderError();  
+}
+
+export const loginImpl = (user: string, sec: string) => {
+
+  if (!user) {   
+    const returnError = new Error("empty user");
+    return Promise.reject(returnError);
+  }
+  if (!sec) {
+    const returnError = new Error("empty password");
+    return Promise.reject(returnError);
+  }
+
+  if (provider === "firebase") {
+    return login(user, sec);
+  }   
+  if (provider === "mock") {
+    return loginMock(user, sec);
+  }     
+  return throwUndefinedProviderError();  
+}
+
+export const logoutImpl = () => {
+  if (provider === "firebase") {
+    return logout();
+  }   
+  if (provider === "mock") {
+    return logoutMock();
+  }     
+  return throwUndefinedProviderError();  
+}

package/src/tmpown/pd-login.ts

@@ -6,7 +6,8 @@ import '@progressive-development/pd-forms/pd-form-row.js';
 import '@progressive-development/pd-forms/pd-input.js';
 import '@progressive-development/pd-forms/pd-button.js';
 
-import { login } from '../firebase/auth.js';
+import { loginImpl } from '../service-provider/service-provider-impl.js';
+
 
 @customElement("pd-login")
 export class PdLogin extends LitElement {
@@ -92,7 +93,7 @@ export class PdLogin extends LitElement {
       const elMail = this.shadowRoot?.getElementById('eMail') as HTMLInputElement;    
       const elSec = this.shadowRoot?.getElementById('pWord') as HTMLInputElement;    
 
-      login(elMail?.value, elSec?.value)
+      loginImpl(elMail?.value, elSec?.value)
         .then(() => {
           this.dispatchEvent(new CustomEvent("login-success"));
         }).catch(error => {

package/src/firebase/auth.ts

@@ -1,30 +0,0 @@
-import { getAuth, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';
-
-export const logout = async (): Promise<boolean> => {
-  const auth = getAuth();
-  try {
-    await signOut(auth);
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-
-export const isAuthenticated = (): boolean =>  
-  getAuth().currentUser !== null;
-    
-export const login = async (user:string, sec:string): Promise<User> => {
-  if (!user) {   
-    const returnError = new Error("empty user");         
-    return Promise.reject(returnError);
-  }
-  if (!sec) {
-    // error.eType = 'sec';
-    // error.logMsg = 'password required';
-    const returnError = new Error("empty password");         
-    return Promise.reject(returnError);
-  }
-  const auth = getAuth();      
-  const credentials = await signInWithEmailAndPassword(auth, user, sec);
-  return credentials.user;   
-}