P0084 | Registration Flow Page

apps/36-blocks/src/app/app.component.ts

@@ -118,16 +118,22 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
         if (isPlatformBrowser(this.platformId)) {
             this.actions$.pipe(ofType(logInActions.authenticatedAction), takeUntil(this.destroy$)).subscribe(() => {
                 const currentUrl = this.router.url;
+                const websiteRoutes = [
+                    '/pricing',
+                    '/about',
+                    '/contact',
+                    '/security',
+                    '/privacy',
+                    '/terms',
+                    '/register',
+                    '/login',
+                ];
                 const isOnWebsiteRoute =
                     currentUrl === '/' ||
                     currentUrl === '' ||
-                    currentUrl.startsWith('/pricing') ||
-                    currentUrl.startsWith('/about') ||
-                    currentUrl.startsWith('/contact') ||
-                    currentUrl.startsWith('/security') ||
-                    currentUrl.startsWith('/privacy') ||
-                    currentUrl.startsWith('/terms');
-                if (isOnWebsiteRoute) {
+                    websiteRoutes.some((route) => currentUrl.startsWith(route));
+                const isOnboardingRoute = currentUrl.startsWith('/onboarding');
+                if (isOnWebsiteRoute && !isOnboardingRoute) {
                     this.router.navigate(['/app/dashboard']);
                 }
             });

apps/36-blocks/src/app/app.config.ts

@@ -15,8 +15,10 @@ import { appRoutes } from './app.routes';
 import { environment } from '../environments/environment';
 import { reducers, clearStateMetaReducer } from './core/ngrx/store/app.state';
 import { loginsReducer } from './website/home/ngrx/store/login.state';
+import { registrationReducer } from './website/home/ngrx/reducers/registration.reducer';
 import { RootEffects } from './core/ngrx/effects/root';
 import { LogInEffects } from './website/home/ngrx/effects/login.effects';
+import { RegistrationEffects } from './website/home/ngrx/effects/registration.effects';
 import { ErrorInterceptor } from '@proxy/services/interceptor/errorInterceptor';
 import { ProxyBaseUrls } from '@proxy/models/root-models';
 import { AuthInitializerService } from './core/auth-initializer.service';
@@ -33,7 +35,8 @@ export const appConfig: ApplicationConfig = {
         provideHttpClient(withFetch(), withInterceptorsFromDi()),
         provideStore(reducers, { metaReducers: [clearStateMetaReducer] }),
         provideState('auth', loginsReducer),
-        provideEffects([RootEffects, LogInEffects]),
+        provideState('registration', registrationReducer),
+        provideEffects([RootEffects, LogInEffects, RegistrationEffects]),
         ...(!environment.production ? [provideStoreDevtools({ maxAge: 25, serialize: true })] : []),
         { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
         {

apps/36-blocks/src/app/app.routes.ts

@@ -1,19 +1,21 @@
 import { Component, inject } from '@angular/core';
 import { Route, Router } from '@angular/router';
-import { AngularFireAuthGuard, redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';
 import { CookieService } from 'ngx-cookie-service';
 import { AuthService } from '@proxy/services/proxy/auth';
+import { CanActivateRouteGuard } from './website/home/authguard';
 
 @Component({ template: '', standalone: true })
 class NotFoundRedirectComponent {}
 
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
-
 export const appRoutes: Route[] = [
     {
         path: '',
         loadChildren: () => import('./website/website.routes').then((r) => r.websiteRoutes),
     },
+    {
+        path: 'onboarding',
+        loadComponent: () => import('./panel/onboarding/onboarding.component').then((c) => c.OnboardingComponent),
+    },
     {
         path: 'app',
         loadChildren: () => import('./panel/panel.routes').then((r) => r.panelRoutes),
@@ -24,15 +26,13 @@ export const appRoutes: Route[] = [
             import('./panel/features/create-feature/feature-preview/widget-preview/widget-preview.component').then(
                 (c) => c.WidgetPreviewComponent
             ),
-        data: { authGuardPipe: redirectUnauthorizedToLogin },
-        canActivate: [AngularFireAuthGuard],
+        canActivate: [CanActivateRouteGuard],
     },
     {
         path: 'project',
         loadComponent: () =>
             import('./panel/create-project/create-project.component').then((c) => c.CreateProjectComponent),
-        data: { authGuardPipe: redirectUnauthorizedToLogin },
-        canActivate: [AngularFireAuthGuard],
+        canActivate: [CanActivateRouteGuard],
     },
     {
         path: 'client',

apps/36-blocks/src/app/panel/layout/layout.component.html

@@ -3,6 +3,7 @@
         class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
         [class.mat-drawer-toggle-btn-hover]="sideNavService.isSideNavOpen()"
         [class]="!sideNavService.isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[260px]'"
+        [class.!hidden]="sideNavService.hideSidebar()"
     >
         @let clientSettings = clientSettings$ | async; @let clientList = clients$ | async;
         @let isMultipleClients = (clientList?.data?.length ?? 0) > 1;

apps/36-blocks/src/app/panel/layout/layout.component.ts

@@ -38,6 +38,8 @@ import { environment } from '../../../environments/environment';
 import { AuthService } from '@proxy/services/proxy/auth';
 import { SideNavService } from './side-nav.service';
 import { UiSettingsService } from './ui-settings.service';
+import { FeaturesService } from '@proxy/services/proxy/features';
+import { take } from 'rxjs/operators';
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-layout',
@@ -85,6 +87,7 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     private cdr = inject(ChangeDetectorRef);
     public sideNavService = inject(SideNavService);
     private uiSettings = inject(UiSettingsService);
+    private featuresService = inject(FeaturesService);
 
     constructor() {
         super();
@@ -118,6 +121,18 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
             if (event?.url?.startsWith('/widget-preview')) {
                 (window as any).closeChatbot?.();
             }
+            if (event?.url?.includes('/features/create')) {
+                this.featuresService
+                    .getFeature({ itemsPerPage: 1, pageNo: 1 })
+                    .pipe(take(1))
+                    .subscribe((res) => {
+                        const hasFeatures = (res?.data?.totalEntityCount ?? 0) > 0;
+                        this.sideNavService.hideSidebar.set(!hasFeatures);
+                        this.cdr.markForCheck();
+                    });
+            } else {
+                this.sideNavService.hideSidebar.set(false);
+            }
             this.cdr.markForCheck();
         });
     }
@@ -136,6 +151,28 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
             }
         });
 
+        this.clientSettings$.pipe(takeUntil(this.destroy$)).subscribe((clientSettings) => {
+            if (clientSettings?.client) {
+                this.logInData$.pipe(take(1)).subscribe((existingLoginData) => {
+                    if (!existingLoginData) {
+                        this.store.dispatch(
+                            logInActions.authenticatedAction({
+                                response: {
+                                    uid: String(clientSettings.client.id),
+                                    displayName: clientSettings.client.name,
+                                    email: clientSettings.client.email,
+                                    phoneNumber: clientSettings.client.mobile ?? null,
+                                    photoURL: null,
+                                    emailVerified: false,
+                                    jwtToken: this.authService.getTokenSync(),
+                                },
+                            })
+                        );
+                    }
+                });
+            }
+        });
+
         combineLatest([this.logInData$, this.clientSettings$]).subscribe(([loginData, clientSettings]) => {
             if (loginData && clientSettings) {
                 this.rootService.generateToken({ source: 'chatbot' }).subscribe((res) => {

apps/36-blocks/src/app/panel/layout/layout.routes.ts

@@ -1,9 +1,5 @@
 import { Route } from '@angular/router';
 import { CanActivateRouteGuard } from '../../website/home/authguard';
-import { redirectUnauthorizedTo } from '@angular/fire/compat/auth-guard';
-import { ProjectGuard } from '../guard/project.guard';
-
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
 
 export const layoutRoutes: Route[] = [
     {
@@ -32,7 +28,6 @@ export const layoutRoutes: Route[] = [
                 loadComponent: () => import('../chatbot/chatbot.component').then((c) => c.ChatbotComponent),
             },
         ],
-        data: { authGuardPipe: redirectUnauthorizedToLogin },
-        canActivate: [CanActivateRouteGuard, ProjectGuard],
+        canActivate: [CanActivateRouteGuard],
     },
 ];

apps/36-blocks/src/app/panel/layout/side-nav.service.ts

@@ -6,6 +6,7 @@ export class SideNavService {
     private uiSettings = inject(UiSettingsService);
 
     public isSideNavOpen = signal<boolean>(this.uiSettings.sideNavOpen);
+    public hideSidebar = signal<boolean>(false);
 
     public toggle(): void {
         const next = !this.isSideNavOpen();