Merge branch 'main' into fix/nginx-ai-streaming-buffering

Author: lyubov-voloshko

backend/src/shared/services/turnstile.service.ts

@@ -29,15 +29,21 @@ export class TurnstileService {
 		formData.append('secret', secretKey);
 		formData.append('response', token);
 
-		const response = await axios.post<TurnstileVerifyResponse>(this.verifyUrl, formData.toString(), {
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-		});
-
-		if (!response.data.success) {
-			const errorCodes = response.data['error-codes']?.join(', ') || 'Unknown error';
-			throw new BadRequestException(`Turnstile verification failed: ${errorCodes}`);
+		try {
+			const response = await axios.post<TurnstileVerifyResponse>(this.verifyUrl, formData.toString(), {
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+			});
+
+			if (!response.data.success) {
+				const errorCodes = response.data['error-codes']?.join(', ') || 'Unknown error';
+				throw new BadRequestException(`Turnstile verification failed: ${errorCodes}`);
+			}
+		} catch (error) {
+			if (error instanceof BadRequestException) throw error;
+			console.error('Turnstile verification error:', error?.response?.data || error?.message || error);
+			throw new BadRequestException('Turnstile verification failed. Please try again.');
 		}
 
 		return true;

frontend/src/app/components/connections-list/connections-list.component.css

@@ -87,7 +87,7 @@
 
 .connections-divider {
     position: relative;
-    margin: 44px auto 52px;
+    margin: 24px auto 32px;
     width: calc(100% - 16px);
 }
 

frontend/src/app/components/connections-list/connections-list.component.html

@@ -22,7 +22,8 @@ <h1 class="mat-headline-4 pageTitle__name" data-testid="company-name">{{companyN
         <app-own-connections
             [currentUser]="currentUser"
             [connections]="ownConnections"
-            [isDemo]="isDemo">
+            [isDemo]="isDemo"
+            [companyId]="currentUser?.company?.id">
         </app-own-connections>
 
         <mat-divider *ngIf="testConnections && testConnections.length"

frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css

@@ -58,8 +58,8 @@
 
 @media (prefers-color-scheme: dark) {
     .testConnectionLink {
-        background: #404040;
-        border: 1px solid #404040;
+        background: #2a2a2a;
+        border: 1px solid #2a2a2a;
     }
 
     .testConnectionLink:hover {

frontend/src/app/components/connections-list/demo-connections/demo-connections.component.html

@@ -1,4 +1,4 @@
-<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo admin panels</h1>
+<h1 *ngIf="!isDemo" class="mat-display-1">Explore demo panels</h1>
 <h1 *ngIf="isDemo" class="mat-display-1">Try out a demo admin panel</h1>
 
 <ul class="testConnections">

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -1,8 +1,9 @@
 :host {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
 }
 
 .empty-state {
@@ -53,24 +54,23 @@
 }
 
 .addConnectionLink {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 6px;
-	border-radius: 4px;
-	box-shadow:
-		0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-		0px 2px 2px 0px rgba(0, 0, 0, 0.12),
-		0px 0px 2px 0px rgba(0, 0, 0, 0.14);
-	color: inherit;
-	font-weight: 600;
-	padding: 12px;
-	text-decoration: none;
-	height: 100%;
-	transition:
-		box-shadow 200ms,
-		background 200ms,
-		border 200ms;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-radius: 4px;
+    box-shadow:
+        0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+        0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.14);
+    color: inherit;
+    font-weight: 600;
+    padding: 8px;
+    text-decoration: none;
+    height: 100%;
+    min-height: 90px;
+    transition: box-shadow 200ms, background 200ms, border 200ms;
 }
 
 .addConnectionLink:hover {
@@ -81,10 +81,10 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.addConnectionLink {
-		background: #404040;
-		border: 1px solid #404040;
-	}
+    .addConnectionLink {
+        background: #2a2a2a;
+        border: 1px solid #2a2a2a;
+    }
 
 	.addConnectionLink:hover {
 		background: #212121;
@@ -97,26 +97,41 @@
 }
 
 .addConnectionLink__iconBox {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #fff;
-	border-radius: 4px;
-	height: 40px;
-	width: 40px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
 }
 
 .addConnectionLink__icon {
-	flex-shrink: 0;
-	height: 30px;
-	width: 30px;
+    flex-shrink: 0;
+    height: 28px;
+    width: 28px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .addConnectionLink__icon[data-mat-icon-name="mongodb"],
+    .addConnectionLink__icon[data-mat-icon-name="mysql"],
+    .addConnectionLink__icon[data-mat-icon-name="dynamodb"],
+    .addConnectionLink__icon[data-mat-icon-name="mssql"] {
+        filter: brightness(2);
+    }
 }
 
 .addConnectionLink__label {
 	text-align: center;
 }
 
+.addConnectionLink__subLabel {
+    display: block;
+    font-weight: 400;
+    opacity: 0.6;
+    font-size: 12px;
+    margin-top: -2px;
+}
+
 .showAllButton {
 	margin-top: 20px;
 	margin-bottom: -56px;

frontend/src/app/components/connections-list/own-connections/own-connections.component.html

@@ -1,8 +1,8 @@
-<h1 *ngIf="isDemo" class="mat-display-1">Create you own test connection</h1>
+<h1 *ngIf="isDemo" class="mat-display-1">Create your own test connection</h1>
 
 <div *ngIf="!connections?.length && connections !== null" class="empty-state">
     <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') && !isDemo" class="mat-display-1">
-        Create your first connection
+        Create first connection
     </h1>
     <ul class="supportedDatabases">
         <li *ngFor="let supportedDatabase of supportedOrderedDatabases">
@@ -13,7 +13,10 @@ <h1 *ngIf="(currentUser?.role === 'ADMIN' || currentUser?.role === 'DB_ADMIN') &
                 <div class="addConnectionLink__iconBox">
                     <mat-icon [svgIcon]="supportedDatabase" class="addConnectionLink__icon"></mat-icon>
                 </div>
-                <span class="addConnectionLink__label">{{ supportedDatabasesTitles[supportedDatabase] }}</span>
+                <span class="addConnectionLink__label">
+                    {{ getMainTitle(supportedDatabase) }}
+                    <span *ngIf="getSubTitle(supportedDatabase)" class="addConnectionLink__subLabel">{{ getSubTitle(supportedDatabase) }}</span>
+                </span>
             </a>
         </li>
     </ul>
@@ -80,7 +83,7 @@ <h2 class="connectionInfo__connectionTitle">{{ connectionItem.displayTitle }}</h
     Add database
 </a>-->
 
-<div *ngIf="!connections?.length && connections !== null && !isDemo" class="empty-state_bottom">
+<div *ngIf="!connections?.length && connections !== null && !isDemo && hasMultipleMembers" class="empty-state_bottom">
     <p class="mat-body-1 empty-state__text">
         Invited to a company but don't see your admin panel?
     </p>

frontend/src/app/components/connections-list/own-connections/own-connections.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
@@ -8,6 +8,7 @@ import posthog from 'posthog-js';
 import { supportedDatabasesTitles, supportedOrderedDatabases } from 'src/app/consts/databases';
 import { ConnectionItem } from 'src/app/models/connection';
 import { UiSettings } from 'src/app/models/ui-settings';
+import { CompanyService } from 'src/app/services/company.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
 
 @Component({
@@ -16,18 +17,24 @@ import { UiSettingsService } from 'src/app/services/ui-settings.service';
 	templateUrl: './own-connections.component.html',
 	styleUrl: './own-connections.component.css',
 })
-export class OwnConnectionsComponent {
+
+export class OwnConnectionsComponent implements OnInit, OnChanges {
 	protected posthog = posthog;
 	@Input() currentUser: User;
 	@Input() connections: ConnectionItem[] = null;
 	@Input() isDemo: boolean = false;
+	@Input() companyId: string;
 
 	public displayedCardCount: number = 3;
 	public connectionsListCollapsed: boolean;
 	public supportedDatabasesTitles = supportedDatabasesTitles;
 	public supportedOrderedDatabases = supportedOrderedDatabases;
+	public hasMultipleMembers: boolean = false;
 
-	constructor(private _uiSettings: UiSettingsService) {}
+	constructor(
+		private _uiSettings: UiSettingsService,
+		private _companyService: CompanyService
+	) {}
 
 	ngOnInit() {
 		this._uiSettings.getUiSettings().subscribe((settings: UiSettings) => {
@@ -36,6 +43,14 @@ export class OwnConnectionsComponent {
 		});
 	}
 
+	ngOnChanges(changes: SimpleChanges) {
+		if (changes['companyId'] && this.companyId) {
+			this._companyService.fetchCompanyMembers(this.companyId).subscribe((members: any[]) => {
+				this.hasMultipleMembers = members && members.length > 1;
+			});
+		}
+	}
+
 	showMore() {
 		this.displayedCardCount = this.connections.length;
 		this._uiSettings.updateGlobalSetting('connectionsListCollapsed', false);
@@ -45,4 +60,16 @@ export class OwnConnectionsComponent {
 		this.displayedCardCount = 3;
 		this._uiSettings.updateGlobalSetting('connectionsListCollapsed', true);
 	}
+
+	getMainTitle(database: string): string {
+		const title = this.supportedDatabasesTitles[database] || database;
+		const match = title.match(/^([^(]+)/);
+		return match ? match[1].trim() : title;
+	}
+
+	getSubTitle(database: string): string {
+		const title = this.supportedDatabasesTitles[database] || database;
+		const match = title.match(/(\([^)]+\))/);
+		return match ? match[1] : '';
+	}
 }