extract demo-login into separate component, improve hostname validator

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: gugu

backend/package.json

@@ -79,7 +79,7 @@
 		"langchain": "^1.2.34",
 		"lru-cache": "^11.2.7",
 		"nanoid": "5.1.7",
-		"nodemailer": "^8.0.2",
+		"nodemailer": "^8.0.4",
 		"nunjucks": "^3.2.4",
 		"openai": "^6.32.0",
 		"otplib": "^12.0.1",

frontend/package.json

@@ -17,16 +17,16 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "~20.3.16",
+		"@angular/animations": "~20.3.18",
 		"@angular/cdk": "~20.2.14",
-		"@angular/common": "~20.3.16",
-		"@angular/compiler": "~20.3.16",
-		"@angular/core": "~20.3.16",
-		"@angular/forms": "~20.3.16",
+		"@angular/common": "~20.3.18",
+		"@angular/compiler": "~20.3.18",
+		"@angular/core": "~20.3.18",
+		"@angular/forms": "~20.3.18",
 		"@angular/material": "~20.2.14",
-		"@angular/platform-browser": "~20.3.16",
-		"@angular/platform-browser-dynamic": "~20.3.16",
-		"@angular/router": "~20.3.16",
+		"@angular/platform-browser": "~20.3.18",
+		"@angular/platform-browser-dynamic": "~20.3.18",
+		"@angular/router": "~20.3.18",
 		"@brumeilde/ngx-theme": "^1.2.1",
 		"@cedar-policy/cedar-wasm": "^4.9.1",
 		"@fontsource/ibm-plex-mono": "^5.2.7",
@@ -55,7 +55,7 @@
 		"knip": "^5.79.0",
 		"libphonenumber-js": "^1.12.9",
 		"lodash": "^4.17.21",
-		"lodash-es": "^4.17.21",
+		"lodash-es": "^4.17.23",
 		"mermaid": "^11.12.1",
 		"monaco-editor": "0.55.1",
 		"ng-dynamic-component": "^10.8.0",
@@ -66,7 +66,6 @@
 		"pluralize": "^8.0.0",
 		"postgres-interval": "^4.0.2",
 		"posthog-js": "^1.341.0",
-		"private-ip": "^3.0.2",
 		"puppeteer": "^24.29.1",
 		"rxjs": "^7.4.0",
 		"tslib": "^2.8.1",
@@ -78,8 +77,8 @@
 		"@angular-devkit/build-angular": "20",
 		"@angular/build": "20.3.14",
 		"@angular/cli": "~20.3.14",
-		"@angular/compiler-cli": "~20.3.16",
-		"@angular/language-service": "~20.3.16",
+		"@angular/compiler-cli": "~20.3.18",
+		"@angular/language-service": "~20.3.18",
 		"@sentry-internal/rrweb": "^2.16.0",
 		"@storybook/angular": "^10.2.14",
 		"@types/node": "^22.10.2",
@@ -93,7 +92,8 @@
 	},
 	"resolutions": {
 		"mermaid": "^11.10.0",
-		"webpack": "5.104.1"
+		"webpack": "5.104.1",
+		"lodash-es": "4.17.23"
 	},
 	"packageManager": "yarn@1.22.22"
 }

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
@@ -20,7 +12,8 @@
             (ngSubmit)="(user.companyId || isCustomDomain) && user.password ? loginUser() : requestUserCompanies()">
 
             <div class="login-header">
-                <svg class="login-header__logo" width="56" height="54" viewBox="0 0 56 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <svg class="login-header__logo" width="56" height="54" viewBox="0 0 56 54" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
+                    <title>Rocketadmin logo</title>
                     <path d="M47.2367 17.9125H35.1499C33.3671 17.9125 32.4833 16.5678 33.1783 14.9286L37.5295 4.71527C38.5191 2.39612 37.2651 0.5 34.742 0.5H23.4711C22.3682 0.5 21.1142 1.33097 20.6836 2.34323L15.4485 14.634C14.5798 16.6661 15.6827 18.328 17.8885 18.328H29.4465C30.7231 18.328 31.8789 19.0909 32.3775 20.2618L37.5295 32.3486C38.232 33.9954 37.3406 35.3401 35.5578 35.3401H8.62703C7.52411 35.3401 6.27011 36.1711 5.83952 37.1833L0.823517 48.9453C-0.166086 51.2644 1.08792 53.1605 3.61103 53.1605H29.8242C30.9271 53.1605 32.1811 52.3296 32.6117 51.3173L38.4435 37.629C38.9346 36.4808 40.0526 35.7405 41.299 35.7405H52.6833C54.9722 35.7405 56.1053 34.0181 55.2064 31.918L50.0242 19.7633C49.5936 18.751 48.3396 17.92 47.2367 17.92V17.9125Z" fill="#08041B"/>
                 </svg>
                 <h1 class="mat-headline-4 loginTitle">
@@ -100,7 +93,8 @@ <h1 class="mat-headline-4 loginTitle">
                     angulartics2On="click"
                     angularticsAction="Login: login with sso is clicked"
                     (click)="openLoginWithSSOdialog(); posthog.capture('Login: login with sso is clicked')">
-                    <svg class="login-form__sso-icon" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg class="login-form__sso-icon" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
+                        <title>SSO login</title>
                         <path d="M15.75 8.21393H14.625V5.96393C14.625 2.85893 12.105 0.338928 9 0.338928C5.895 0.338928 3.375 2.85893 3.375 5.96393V8.21393H2.25C1.0125 8.21393 0 9.22643 0 10.4639V21.7139C0 22.9514 1.0125 23.9639 2.25 23.9639H15.75C16.9875 23.9639 18 22.9514 18 21.7139V10.4639C18 9.22643 16.9875 8.21393 15.75 8.21393ZM9 18.3389C7.7625 18.3389 6.75 17.3264 6.75 16.0889C6.75 14.8514 7.7625 13.8389 9 13.8389C10.2375 13.8389 11.25 14.8514 11.25 16.0889C11.25 17.3264 10.2375 18.3389 9 18.3389ZM12.4875 8.21393H5.5125V5.96393C5.5125 4.04018 7.07625 2.47643 9 2.47643C10.9237 2.47643 12.4875 4.04018 12.4875 5.96393V8.21393Z" fill="#212121"/>
                     </svg>
                     <span class="login-form__sso-caption">Continue with SSO</span>
@@ -145,5 +139,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',