moved login component; improved documentation; other minor improvements

src/app/apollo.provider.ts

@@ -9,8 +9,6 @@ import { createClient } from "graphql-ws";
 import { map } from 'rxjs';
 import { environment } from '../environments/environment';
 
-const authTokenHeaderName = 'phoenix-auth-token';
-
 export function apolloOptionsFactory(httpLink: HttpLink): ApolloClient.Options | undefined {
   if (!environment.apiUrl || !environment.wsUrl) {
     console.error('API URL or WS URL is not set');
@@ -58,7 +56,7 @@ export function apolloOptionsFactory(httpLink: HttpLink): ApolloClient.Options |
   const afterwareLink = new ApolloLink((operation, forward) => {
     return forward(operation).pipe(map((response: any) => {
       const context = operation.getContext();
-      const authHeader = context['response']?.headers.get(authTokenHeaderName);
+      const authHeader = context['response']?.headers.get('phoenix-auth-token');
 
       if (authHeader?.length) {
         environment.apiKey = authHeader;

src/app/app.config.ts

@@ -11,7 +11,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    ...providePhoenixPluginWithPrimeNG({ stripTrailingSegments: routes.map(route => route.path).filter(Boolean) as string[] }),
+    ...providePhoenixPluginWithPrimeNG({ stripTrailingSegments: routes.map(route => route.path!).filter(path => (path?.length??0) > 0) }),
     provideRouter(routes), 
     provideHttpClient(), 
     ...(environment.production ? [] : [

src/app/app.routes.ts

@@ -1,14 +1,16 @@
 import { Routes } from '@angular/router';
 import { HelloWorld } from './components/hello-world/hello-world';
 import { ProductView } from './components/product-view/product-view';
-import { Login } from './components/login/login';
+import { Login } from './login/login';
 import { AuthGuard } from './auth-guard';
 import { environment } from '../environments/environment';
 import { AddressList } from './components/address-list/address-list';
 
+const canActivate = [environment.production ? () => true : AuthGuard];
+
 export const routes: Routes = [
-	{ path: '', canActivate: [environment.production ? () => true : AuthGuard], component: HelloWorld },
-	{ path: 'product-view', canActivate: [environment.production ? () => true : AuthGuard], component: ProductView, },
-	{ path: 'address-list', canActivate: [environment.production ? () => true : AuthGuard], component: AddressList, },
+	{ path: '', canActivate, component: HelloWorld },
+	{ path: 'product-view', canActivate, component: ProductView, },
+	{ path: 'address-list', canActivate, component: AddressList, },
 	{ path: 'login', component: Login, },
 ];

src/app/app.ts

@@ -28,5 +28,4 @@ export class App {
       this.hostBridge.setPluginServices(this.pluginServices());
     }
   );
-
 }

src/app/login/login.ts

@@ -3,11 +3,11 @@ import { FormBuilder, FormsModule, Validators } from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { InputText } from 'primeng/inputtext';
 import { Button } from 'primeng/button';
-import { ApolloService } from '../../services/apollo.service';
-import { LOGIN } from '../../../graphql/base-definitions';
-import { LoginMutation } from '../../generated';
+import { ApolloService } from '../services/apollo.service';
+import { LOGIN } from '../../graphql/base-definitions';
+import { LoginMutation } from '../generated';
 import { lastValueFrom } from 'rxjs';
-import { AuthenticationResult } from '../../schema-types';
+import { AuthenticationResult } from '../schema-types';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
@@ -33,13 +33,16 @@ export class Login {
   readonly apollo = inject(ApolloService);
   readonly fb = inject(FormBuilder);
   readonly router = inject(Router);
+
   readonly loginForm = this.fb.group({
     username: ['', Validators.required],
     password: ['', Validators.required],
   }); 
 
   redirectTo = '/';
-  loading = signal(false);
+
+  readonly loading = signal(false);
+
   constructor(private readonly route: ActivatedRoute) {
     this.route.queryParams.subscribe(params => {
       if(params['redirectTo']) {
@@ -61,10 +64,10 @@ export class Login {
           password: this.loginForm.value.password,
         },
       }));
+      
       const authResult = result.data?.login as AuthenticationResult;
-      if(authResult.__typename === 'CurrentUser') {
+      if(authResult.__typename === 'CurrentUser')
         this.router.navigate([this.redirectTo]);
-      }
     } catch (error) {
       console.error(error);
     } finally {

src/main.ts

@@ -5,16 +5,10 @@ import { createApplication } from '@angular/platform-browser';
 import { createCustomElement } from '@angular/elements';
 import { environment } from './environments/environment';
 
-createApplication(appConfig).then((app) => {
-  const el = createCustomElement(App, { injector: app.injector });
-  customElements.define('frontend-plugin-demo', el);
-  return app;
-})
-// bootstrapPhoenixPluginCustomElement(App, 'frontend-plugin-demo', appConfig)
+bootstrapPhoenixPluginCustomElement(App, 'frontend-plugin-demo', appConfig)
 .then((app) => {
-  //if development:
   if(!environment.production)
-    return app.bootstrap(App);
+    return app!.bootstrap(App);
   else
     return app;
 });