Merge pull request #1693 from rocket-admin/demo-mode-component

separate landing page for demo

Author: lyubov-voloshko

frontend/src/app/app-routing.module.ts

@@ -28,6 +28,11 @@ const routes: Routes = [
 		canActivate: [configurationGuard],
 		title: 'Login | Rocketadmin',
 	},
+	{
+		path: 'demo',
+		loadComponent: () => import('./components/demo-login/demo-login.component').then((m) => m.DemoLoginComponent),
+		title: 'Demo | Rocketadmin',
+	},
 	{
 		path: 'forget-password',
 		loadComponent: () =>

frontend/src/app/app.component.ts

@@ -13,7 +13,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
 import { User } from '@sentry/angular';
 import amplitude from 'amplitude-js';
-import { Angulartics2, Angulartics2Amplitude, Angulartics2OnModule } from 'angulartics2';
+import { Angulartics2Amplitude, Angulartics2OnModule } from 'angulartics2';
 import { differenceInMilliseconds } from 'date-fns';
 import posthog from 'posthog-js';
 import { Subject } from 'rxjs';
@@ -95,7 +95,6 @@ export class AppComponent {
 		_tables: TablesService,
 		private _uiSettings: UiSettingsService,
 		angulartics2Amplitude: Angulartics2Amplitude,
-		private angulartics2: Angulartics2,
 		private domSanitizer: DomSanitizer,
 		private matIconRegistry: MatIconRegistry,
 		_posthog: PosthogService,
@@ -168,16 +167,6 @@ export class AppComponent {
 			this.page = this.router.routerState.snapshot.url.split('?')[0];
 
 			console.log('Navigated to page:', this.page);
-
-			if (this.router.routerState.snapshot.root.queryParams.mode === 'demo') {
-				console.log('App component, demo mode search params found');
-				this._auth.loginToDemoAccount().subscribe(() => {
-					this.angulartics2.eventTrack.next({
-						action: 'Demo account is logged in',
-					});
-					posthog.capture('Demo account is logged in');
-				});
-			}
 		});
 
 		const expirationDateFromURL = new URLSearchParams(location.search).get('expires');

frontend/src/app/components/demo-login/demo-login.component.css

@@ -0,0 +1,19 @@
+.wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+}
+
+.demo-loader {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 24px;
+}
+
+.demo-loader__text {
+	color: var(--mat-sidenav-content-text-color);
+	margin: 0;
+}

frontend/src/app/components/demo-login/demo-login.component.html

@@ -0,0 +1,6 @@
+<div class="wrapper background-decoration">
+	<div class="demo-loader">
+		<mat-spinner diameter="48"></mat-spinner>
+		<p class="mat-body-1 demo-loader__text">Loading demo account...</p>
+	</div>
+</div>

frontend/src/app/components/demo-login/demo-login.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Angulartics2 } from 'angulartics2';
+import posthog from 'posthog-js';
+import { AuthService } from 'src/app/services/auth.service';
+
+@Component({
+	selector: 'app-demo-login',
+	templateUrl: './demo-login.component.html',
+	styleUrls: ['./demo-login.component.css'],
+	imports: [MatProgressSpinnerModule],
+})
+export class DemoLoginComponent implements OnInit {
+	constructor(
+		private _auth: AuthService,
+		private angulartics2: Angulartics2,
+	) {}
+
+	ngOnInit(): void {
+		this._auth.loginToDemoAccount().subscribe(() => {
+			this.angulartics2.eventTrack.next({
+				action: 'Demo account is logged in',
+			});
+			posthog.capture('Demo account is logged in');
+		});
+	}
+}

frontend/src/app/components/login/login.component.css

@@ -360,16 +360,3 @@
 		transform: translateX(100%);
 	}
 }
-
-.demo-loader {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	gap: 24px;
-}
-
-.demo-loader__text {
-	color: var(--mat-sidenav-content-text-color);
-	margin: 0;
-}

frontend/src/app/components/login/login.component.html

@@ -1,13 +1,5 @@
 <app-alert></app-alert>
 
-@if (isDemoMode) {
-    <div class="wrapper background-decoration">
-        <div class="login-page demo-loader">
-            <mat-spinner diameter="48"></mat-spinner>
-            <p class="mat-body-1 demo-loader__text">Loading demo account...</p>
-        </div>
-    </div>
-} @else {
 <div class="wrapper background-decoration">
     <div class="login-page">
         <form
@@ -145,5 +137,4 @@ <h2 class="mat-headline-4 qr-verification__title">Enter 2nd factor code</h2>
         </form>
     </div>
 </div>
-}
 

frontend/src/app/components/login/login.component.ts

@@ -6,9 +6,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
 import { accounts } from 'google-one-tap';
 import posthog from 'posthog-js';
@@ -37,7 +36,6 @@ declare var google: any;
 		MatSelectModule,
 		MatIconModule,
 		MatButtonModule,
-		MatProgressSpinnerModule,
 		EmailValidationDirective,
 		AlertComponent,
 		Angulartics2OnModule,
@@ -59,7 +57,6 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	public submitting: boolean;
 	public isPasswordFieldShown: boolean = false;
 	public is2FAShown: boolean = false;
-	public isDemoMode: boolean = false;
 	public errors = {
 		'No_user_registered_with_this_GitHub_account.': 'No user registered with this GitHub account.',
 		'GitHub_login_failed._Please_contact_our_support_team.': 'GitHub login failed. Please contact our support team.',
@@ -68,7 +65,6 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	constructor(
 		private _auth: AuthService,
 		public router: Router,
-		private _route: ActivatedRoute,
 		private angulartics2: Angulartics2,
 		private ngZone: NgZone,
 		private _notifications: NotificationsService,
@@ -77,7 +73,6 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	) {}
 
 	ngOnInit(): void {
-		this.isDemoMode = this._route.snapshot.queryParams['mode'] === 'demo';
 		this.isCustomDomain = this._company.isCustomDomain() && this.isSaas;
 
 		const error = new URLSearchParams(location.search).get('error');
@@ -92,7 +87,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		if (this.isSaas && !this.isDemoMode) {
+		if (this.isSaas) {
 			const gAccounts: accounts = google.accounts;
 			gAccounts.id.initialize({
 				client_id: '681163285738-e4l0lrv5vv7m616ucrfhnhso9r396lum.apps.googleusercontent.com',