Skip to content

separate landing page for demo #1693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 2 commits into from
Mar 30, 2026
Merged

separate landing page for demo #1693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca858f9
separate landing page for demo
lyubov-voloshko Mar 23, 2026
f94a88f
Merge branch 'main' into demo-mode-component
lyubov-voloshko Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Copy link

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The /demo route is not protected by configurationGuard like /login. In self-hosted mode this means an unconfigured instance can still hit the demo endpoint and surface confusing errors instead of redirecting to /setup. Consider adding canActivate: [configurationGuard] (or a dedicated guard that disables demo outside SaaS/self-hosted-configured environments).

Suggested change
loadComponent: () => import('./components/demo-login/demo-login.component').then((m) => m.DemoLoginComponent),
loadComponent: () => import('./components/demo-login/demo-login.component').then((m) => m.DemoLoginComponent),
canActivate: [configurationGuard],

Copilot uses AI. Check for mistakes.
title: 'Demo | Rocketadmin',
},
{
path: 'forget-password',
loadComponent: () =>
Expand Down
13 changes: 1 addition & 12 deletions frontend/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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');
Expand Down
19 changes: 19 additions & 0 deletions frontend/src/app/components/demo-login/demo-login.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 6 additions & 0 deletions frontend/src/app/components/demo-login/demo-login.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions frontend/src/app/components/demo-login/demo-login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Comment on lines +19 to +21
Copy link

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A new routable component was added without any unit test. The repo has component specs for similar route-level components (e.g., page-loader.component.spec.ts), so consider adding demo-login.component.spec.ts to cover the init flow (demo login request fired + success tracking emitted).

Copilot uses AI. Check for mistakes.
action: 'Demo account is logged in',
});
posthog.capture('Demo account is logged in');
});
Comment on lines +19 to +25
Copy link

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

loginToDemoAccount() emits EMPTY on error (it handles the alert internally), so this subscription will silently complete without navigating away; the page will keep showing the loading spinner indefinitely. Add an explicit error/complete handler (or finalize) to transition the UI (e.g., show a retry/back-to-login action) when the demo login fails.

Copilot uses AI. Check for mistakes.
}
}
13 changes: 0 additions & 13 deletions frontend/src/app/components/login/login.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
9 changes: 0 additions & 9 deletions frontend/src/app/components/login/login.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -145,5 +137,4 @@ <h2 class="mat-headline-4 qr-verification__title">Enter 2nd factor code</h2>
</form>
</div>
</div>
}

9 changes: 2 additions & 7 deletions frontend/src/app/components/login/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -37,7 +36,6 @@ declare var google: any;
MatSelectModule,
MatIconModule,
MatButtonModule,
MatProgressSpinnerModule,
EmailValidationDirective,
AlertComponent,
Angulartics2OnModule,
Expand All @@ -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.',
Expand All @@ -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,
Expand All @@ -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');
Expand All @@ -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',
Expand Down
Loading