@lilaquadrat/design-core 0.2.2 → 0.3.0

package/src/plugins/auth.ts

@@ -1,121 +1,135 @@
-import type AppState from '../interfaces/AppState.interface';
+import AuthProviderFactory from '../functions/AuthProviderFactory';
+import type AuthConfig from '../interfaces/AuthConfig.interface';
+import type AuthProvider from '../interfaces/AuthProvider.interface';
 import type IdTokenExtended from '../interfaces/IdTokenExtended.interface';
 import logger from '../mixins/logger';
-import { Auth0Client, type Auth0ClientOptions } from '@auth0/auth0-spa-js';
+import type { Auth0ClientOptions } from '@auth0/auth0-spa-js';
 import { ref } from 'vue';
 
 class Auth {
 
-  auth0!: Auth0Client;
+    private provider?: AuthProvider;
 
-  options: { dev: boolean } = { dev: false };
+    options: { dev: boolean } = { dev: false };
 
-  isAuth = ref<boolean>(false);
+    isAuth = ref<boolean>(false);
 
-  token = ref<string>();
+    token = ref<string>();
 
-  returnTo?: string;
+    async init(config: AuthConfig | Auth0ClientOptions, options?: { dev: boolean }) {
 
-  async init (auth0: Auth0ClientOptions, options?: { dev: boolean }) {
+        logger.auth('init')
+        this.provider = undefined;
+        this.isAuth.value = false;
+        this.token.value = undefined;
 
-    logger.auth('init')
-    this.auth0 = new Auth0Client(auth0);
+        const configuration: AuthConfig = 'type' in config ? config : { type: 'auth0', options: config };
+        this.provider = await AuthProviderFactory(configuration);
 
-    const redirectUri = auth0.authorizationParams?.redirect_uri;
+        if (options) this.options = options;
 
-    if (redirectUri) this.returnTo = new URL(redirectUri).origin;
+        try {
 
-    if (options) this.options = options;
+            await this.provider.init();
+            await this.updateAuthStatus();
 
-    try {
+        } catch (error) {
 
-      await this.updateAuthStatus();
+            console.error(error);
 
-    } catch (error) {
+        }
 
-      console.error(error);
-
-    }
-
-    try {
+        try {
       
-      if (this.isAuth.value && !this.token.value) await this.getToken();
+            if (this.isAuth.value && !this.token.value) await this.getToken();
 
-    } catch (error) {
+        } catch (error) {
       
-      console.error(error);
+            console.error(error);
 
+        }
+
+        logger.auth('init done')
+    
     }
 
-    logger.auth('init done')
-  }
+    async updateAuthStatus() {
 
-  async updateAuthStatus () {
+        this.isAuth.value = await this.getProvider().isAuthenticated();
 
-    this.isAuth.value = await this.auth0.isAuthenticated();
+    }
 
-  }
+    async getToken() {
 
-  async getToken () {
+        this.token.value = await this.getProvider().getToken();
 
-    this.token.value = await this.auth0.getTokenSilently({ authorizationParams: { scope: 'openid profile email offline_access' } });
+    }
 
-  }
+    async refreshToken() {
 
-  async refreshToken () {
+        this.token.value = await this.getProvider().refreshToken();
 
-    this.token.value = await this.auth0.getTokenSilently({ authorizationParams: { scope: 'openid profile email offline_access' } });
+    }
 
-  }
+    getTokenContent(): Promise<IdTokenExtended | undefined> {
 
-  getTokenContent (): Promise<IdTokenExtended | undefined> {
+        return this.getProvider().getTokenContent();
 
-    return this.auth0.getIdTokenClaims() as Promise<IdTokenExtended | undefined>;
+    }
 
-  }
+    triggerLogin(customerId?: string, emailConfirmationCode?: string) {
 
-  triggerLogin (customerId?: string, emailConfirmationCode?: string) {
+        return this.getProvider().triggerLogin({ customerId, emailConfirmationCode });
 
-    this.auth0.loginWithRedirect<AppState>({ appState: { customerId, emailConfirmationCode } });
+    }
 
-  }
+    triggerSignup(customerId?: string, emailConfirmationCode?: string) {
 
-  triggerSignup (customerId?: string, emailConfirmationCode?: string) {
+        return this.getProvider().triggerSignup({ customerId, emailConfirmationCode });
 
-    this.auth0.loginWithRedirect<AppState>({ appState: { customerId, emailConfirmationCode }, authorizationParams: { screen_hint: 'signup' } });
+    }
+
+    triggerLogout() {
 
-  }
+        localStorage.removeItem('lila-customer');
+        this.isAuth.value = false;
+        this.token.value = undefined;
+        return this.getProvider().triggerLogout();
+
+    }
 
-  triggerLogout () {
+    async handleCallback() {
 
-    this.auth0.logout(this.returnTo ? { logoutParams: { returnTo: this.returnTo } } : undefined);
-    localStorage.removeItem('lila-customer');
+        const result = await this.getProvider().handleCallback();
 
-  }
+        await this.updateAuthStatus();
+        await this.getToken();
 
-  async handleCallback () {
+        return result;
 
-    const result = await this.auth0.handleRedirectCallback<AppState>();
+    }
 
-    await this.updateAuthStatus();
-    await this.getToken();
+    private getProvider(): AuthProvider {
 
-    return result;
+        if (!this.provider) throw new Error('AUTH_NOT_INITIALIZED');
+        return this.provider;
 
-  }
+    }
 
 }
 
 const auth = new Auth;
 const plugin = {
-  install: (): void => {
-    logger.plugins('auth installed')
-  },
+    install: (): void => {
+
+        logger.plugins('auth installed')
+    
+    },
 };
 const useAuth = () => ({ authToken: auth.token.value })
 
 export default plugin;
 export {
-  auth,
-  useAuth
-}
+    auth,
+    useAuth
+}

package/src/plugins/currency.ts

@@ -1,26 +1,26 @@
 import logger from '../mixins/logger';
 import type { App } from 'vue';
 
-function formatCurrency (amount: number) {
+function formatCurrency(amount: number) {
 
-  return new Intl.NumberFormat(navigator?.language || 'en-US', {
-    style   : 'currency',
-    currency: 'EUR',
-  }).format(amount);
+    return new Intl.NumberFormat(navigator?.language || 'en-US', {
+        style: 'currency',
+        currency: 'EUR',
+    }).format(amount);
 
 }
 
 const plugin = {
-  install: (vue: App): void => {
+    install: (vue: App): void => {
       
-    vue.config.globalProperties.$currency = (amount: number) => formatCurrency(amount);
+        vue.config.globalProperties.$currency = (amount: number) => formatCurrency(amount);
   
-    logger.plugins('currency installed');
+        logger.plugins('currency installed');
       
-  },
+    },
 };
 
 export default plugin;
 export {
-  formatCurrency
+    formatCurrency
 }

package/src/plugins/events.ts

@@ -10,147 +10,151 @@ import logger from '../mixins/logger';
 import type { Ref } from 'vue';
 
 const eventDeclarations: EventDeclaration[] = [
-  {
-    id         : 'login',
-    name       : 'Anmelden',
-    description: 'löst den Login für Benutzer aus',
-  },
-  {
-    id         : 'logout',
-    name       : 'Abmelden',
-    description: 'löst den Logout für Benutzer aus',
-  },
-  {
-    id         : 'register',
-    name       : 'Registrieren',
-    description: 'erstellt ein neues Benutzerkonto',
-  },
-  {
-    id             : 'resendConfirmationMail',
-    name           : 'Bestätigungscode erneut senden',
-    description    : 'Eingeloggte Nutzer',
-    confirmRequired: true,
-    operation      : true,
-    feedback       : {
-      resolved: 'Bestätigungscode wurde versendet',
-      rejected: 'Bestätigungscode konnte nicht gesendet werden',
-      pending : 'Bestätigungscode wird versendet'
+    {
+        id: 'login',
+        name: 'Anmelden',
+        description: 'löst den Login für Benutzer aus',
+    },
+    {
+        id: 'logout',
+        name: 'Abmelden',
+        description: 'löst den Logout für Benutzer aus',
+    },
+    {
+        id: 'register',
+        name: 'Registrieren',
+        description: 'erstellt ein neues Benutzerkonto',
+    },
+    {
+        id: 'resendConfirmationMail',
+        name: 'Bestätigungscode erneut senden',
+        description: 'Eingeloggte Nutzer',
+        confirmRequired: true,
+        operation: true,
+        feedback: {
+            resolved: 'Bestätigungscode wurde versendet',
+            rejected: 'Bestätigungscode konnte nicht gesendet werden',
+            pending: 'Bestätigungscode wird versendet'
+        }
+    },
+    {
+        id: 'refresh_token',
+        name: 'Anmeldung aktualisieren',
+        description: 'aktualisiert das Authentifizierungstoken für den Benutzer',
+    },
+    {
+        id: 'addToCart',
+        name: 'In den Warenkorb legen',
+        description: 'fügt das angegebene Produkt dem Warenkorb hinzu',
+        additionalData: {
+            name: 'shopifyid',
+            description: 'die Produkt-ID'
+        }
+    },
+    {
+        id: 'scrollToNextModule',
+        name: 'Scroll zum nächstes Module',
+        description: 'Scrollt zum nächsten Module',
     }
-  },
-  {
-    id         : 'refresh_token',
-    name       : 'Anmeldung aktualisieren',
-    description: 'aktualisiert das Authentifizierungstoken für den Benutzer',
-  },
-  {
-    id            : 'addToCart',
-    name          : 'In den Warenkorb legen',
-    description   : 'fügt das angegebene Produkt dem Warenkorb hinzu',
-    additionalData: {
-      name       : 'shopifyid',
-      description: 'die Produkt-ID'
-    }
-  },
-  {
-    id         : 'scrollToNextModule',
-    name       : 'Scroll zum nächstes Module',
-    description: 'Scrollt zum nächsten Module',
-  }
 ];
 const events: GenericEvents = {
-  login: () => {
+    login: () => {
 
-    const userStore = useUserStore();
+        const userStore = useUserStore();
 
-    auth.triggerLogin(userStore.customer?._id, userStore.emailConfirmationCode);
+        auth.triggerLogin(userStore.customer?._id, userStore.emailConfirmationCode);
 
-  },
-  logout: () => {
+    },
+    logout: () => {
 
-    auth.triggerLogout();
+        auth.triggerLogout();
 
-  },
-  register: () => {
+    },
+    register: () => {
 
-    const userStore = useUserStore();
+        const userStore = useUserStore();
 
-    auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
+        auth.triggerSignup(userStore.customer?._id, userStore.emailConfirmationCode);
 
-  },
-  addToCart: (product?: string) => {
+    },
+    addToCart: (product?: string) => {
 
-    console.log('add to cart', product);
+        console.log('add to cart', product);
 
-    if (!product) {
-      console.warn('ADD_TO_CART_FAILED_PRODUCT_ID_MISSING');
-      return;
-    }
+        if (!product) {
 
-    const cartStore = useCartStore();
+            console.warn('ADD_TO_CART_FAILED_PRODUCT_ID_MISSING');
+            return;
+        
+        }
 
-    cartStore.addProduct(product as string);
+        const cartStore = useCartStore();
 
-  },
-  refresh_token: () => {
+        cartStore.addProduct(product as string);
 
-    auth.triggerLogin()
+    },
+    refresh_token: () => {
 
-  },
-  scrollToNextModule: (additionalData: string | undefined, mouseEvent: MouseEvent) => {
+        auth.triggerLogin()
 
-    const target = mouseEvent.target as HTMLElement;
-    const parentModule = target?.closest('.lila-module');
-    const nextSibling = parentModule?.nextElementSibling;
+    },
+    scrollToNextModule: (additionalData: string | undefined, mouseEvent: MouseEvent) => {
 
-    console.log('scroll to next module');
+        const target = mouseEvent.target as HTMLElement;
+        const parentModule = target?.closest('.lila-module');
+        const nextSibling = parentModule?.nextElementSibling;
 
-    if (nextSibling) {
+        console.log('scroll to next module');
 
-      nextSibling.scrollIntoView({
-        behavior: 'smooth',
-        block   : 'center'
-      });
+        if (nextSibling) {
 
-    }
+            nextSibling.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+            });
+
+        }
 
-  },
-  resendConfirmationMail: async (additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) => {
+    },
+    resendConfirmationMail: async (additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) => {
 
-    const { apiConfig } = useMainStore();
-    const { traceable } = useTraceable();
-    const sdk = new StudioSDK(apiConfig)
+        const { apiConfig } = useMainStore();
+        const { traceable } = useTraceable();
+        const sdk = new StudioSDK(apiConfig)
 
-    return traceable(sdk.members.me.resendConfirmationMail(), traceId);
+        return traceable(sdk.members.me.resendConfirmationMail(), traceId);
 
-  }
+    }
 }
 
 /**
  * triggers a predefined event
  */
-function triggerEvent (type: keyof typeof events | string, additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) {
+function triggerEvent(type: keyof typeof events | string, additionalData: string | undefined, mouseEvent: MouseEvent, traceId: Ref<string | undefined>) {
 
-  const event = events[type as keyof typeof events];
+    const event = events[type as keyof typeof events];
 
-  if (!event) {
+    if (!event) {
 
-    console.error('EVENT_MISSING', type, event);
-    throw new Error('EVENT_MISSING');
+        console.error('EVENT_MISSING', type, event);
+        throw new Error('EVENT_MISSING');
 
-  }
+    }
 
-  return event(additionalData, mouseEvent, traceId);
+    return event(additionalData, mouseEvent, traceId);
 
 }
 
 const useEvents = () => ({ triggerEvent, eventDeclarations, events })
 const plugin = {
-  install: () => {
-    logger.plugins('events installed');
-  },
+    install: () => {
+
+        logger.plugins('events installed');
+    
+    },
 };
 
 export default plugin;
 export {
-  useEvents
+    useEvents
 }

package/src/plugins/filters.ts

@@ -4,40 +4,43 @@ import type { App } from 'vue';
 
 const HelpersPlugin = {
 
-  leadingZero (value: string | number, minLength: number) {
-    return value.toString().padStart(minLength, '0');
-  },
+    leadingZero(value: string | number, minLength: number) {
 
-  getFilename (contentType: 'public' | 'members', path?: string) {
+        return value.toString().padStart(minLength, '0');
+    
+    },
 
-    const contentIdArray = [];
+    getFilename(contentType: 'public' | 'members', path?: string) {
 
-    if(!path || path === '/') return 'home';
+        const contentIdArray = [];
 
-    if(contentType === 'members' && path !== '/m' && !path.startsWith('/m/')) contentIdArray.push('m');
+        if(!path || path === '/') return 'home';
 
-    contentIdArray.push(...path.split('/'));
+        if(contentType === 'members' && path !== '/m' && !path.startsWith('/m/')) contentIdArray.push('m');
 
-    return contentIdArray.filter((single) => single.length).join('/');
+        contentIdArray.push(...path.split('/'));
+
+        return contentIdArray.filter((single) => single.length).join('/');
   
-  },
+    },
 
-  date (date: string | Date, format?: string) {
+    date(date: string | Date, format?: string) {
 
-    return useDate(date).locale('de').format(format || 'DD.MM.YYYY HH:mm');
+        return useDate(date).locale('de').format(format || 'DD.MM.YYYY HH:mm');
 
-  }
+    }
 
 }
 const plugin = {
-  install: (vue: App): void => {
+    install: (vue: App): void => {
 
-    vue.config.globalProperties.$helpers = HelpersPlugin;
-    logger.plugins('helpers installed')
-  },
+        vue.config.globalProperties.$helpers = HelpersPlugin;
+        logger.plugins('helpers installed')
+    
+    },
 };
 
 export default plugin;
 export {
-  HelpersPlugin
+    HelpersPlugin
 };

package/src/plugins/replacer.ts

@@ -5,14 +5,15 @@ import useUserStore from '../stores/user.store';
 import type { App } from 'vue';
 
 const plugin = {
-  install: (vue: App): void => {
+    install: (vue: App): void => {
 
-    const contentStore = useContentStore();
-    const userStore = useUserStore();
+        const contentStore = useContentStore();
+        const userStore = useUserStore();
 
-    vue.config.globalProperties.$replacer = (content: string) => replaceVariables(content, {...contentStore.context, recipient: contentStore.recipient, list: contentStore.list, user: userStore.userData });
-    logger.plugins('replacer installed')
-  },
+        vue.config.globalProperties.$replacer = (content: string) => replaceVariables(content, {...contentStore.context, recipient: contentStore.recipient, list: contentStore.list, cart: contentStore.cart, user: userStore.userData });
+        logger.plugins('replacer installed')
+    
+    },
 };
 
 export default plugin;