Add Cloudflare Turnstile captcha to registration form

frontend/Dockerfile

@@ -17,5 +17,5 @@ RUN if [ -n "$VERSION" ]; then \
 RUN ng build --configuration=production
 
 FROM public.ecr.aws/docker/library/nginx:alpine
-COPY --from=builder /app/dist/dissendium-v0/ /usr/share/nginx/html/
+COPY --from=builder /app/dist/rocketadmin/ /usr/share/nginx/html/
 COPY nginx/default.conf.template /etc/nginx/templates/

frontend/angular.json

@@ -3,7 +3,7 @@
 	"version": 1,
 	"newProjectRoot": "projects",
 	"projects": {
-		"dissendium-v0": {
+		"rocketadmin": {
 			"projectType": "application",
 			"schematics": {},
 			"root": "",
@@ -14,7 +14,7 @@
 					"builder": "@angular/build:application",
 					"options": {
 						"outputPath": {
-							"base": "dist/dissendium-v0"
+							"base": "dist/rocketadmin"
 						},
 						"index": "src/index.html",
 						"polyfills": ["src/polyfills.ts"],
@@ -87,7 +87,7 @@
 							"fileReplacements": [
 								{
 									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.saas-prod.ts"
+									"with": "src/environments/environment.saas.ts"
 								}
 							]
 						},
@@ -126,32 +126,32 @@
 				"serve": {
 					"builder": "@angular-devkit/build-angular:dev-server",
 					"options": {
-						"buildTarget": "dissendium-v0:build",
+						"buildTarget": "rocketadmin:build",
 						"host": "127.0.0.1",
 						"proxyConfig": "src/proxy.conf.json"
 					},
 					"configurations": {
 						"production": {
-							"buildTarget": "dissendium-v0:build:production"
+							"buildTarget": "rocketadmin:build:production"
 						},
 						"saas": {
-							"buildTarget": "dissendium-v0:build:saas"
+							"buildTarget": "rocketadmin:build:saas"
 						},
 						"development": {
-							"buildTarget": "dissendium-v0:build:development"
+							"buildTarget": "rocketadmin:build:development"
 						}
 					}
 				},
 				"extract-i18n": {
 					"builder": "@angular-devkit/build-angular:extract-i18n",
 					"options": {
-						"buildTarget": "dissendium-v0:build"
+						"buildTarget": "rocketadmin:build"
 					}
 				},
 				"test": {
 					"builder": "@angular/build:unit-test",
 					"options": {
-						"buildTarget": "dissendium-v0:build",
+						"buildTarget": "rocketadmin:build",
 						"runner": "vitest",
 						"tsConfig": "tsconfig.spec.json",
 						"setupFiles": ["src/test-setup.ts"],

frontend/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "dissendium-v0",
+	"name": "rocketadmin",
 	"version": "1.0.0",
 	"scripts": {
 		"ng": "ng",
@@ -9,7 +9,7 @@
 		"test:ci": "ng test --no-watch",
 		"lint": "ng lint",
 		"e2e": "ng e2e",
-		"analyze": "webpack-bundle-analyzer dist/dissendium-v0/stats.json",
+		"analyze": "webpack-bundle-analyzer dist/rocketadmin/stats.json",
 		"build:stats": "node scripts/update-version.js && ng build --stats-json",
 		"update-version": "node scripts/update-version.js"
 	},

frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.html

@@ -70,10 +70,16 @@ <h1 mat-dialog-title>Add member to <strong>{{company.name}}</strong> company</h1
             </mat-select>
         </mat-form-field>
     </mat-dialog-content>
+    <app-turnstile *ngIf="isSaas"
+        class="turnstile-widget"
+        (tokenReceived)="onTurnstileToken($event)"
+        (tokenError)="onTurnstileError()"
+        (tokenExpired)="onTurnstileExpired()">
+    </app-turnstile>
     <mat-dialog-actions align="end">
         <button type="button" mat-flat-button mat-dialog-close>Cancel</button>
         <button mat-flat-button color="primary"
-            [disabled]="submitting || addUserForm.form.invalid">
+            [disabled]="submitting || addUserForm.form.invalid || (isSaas && !turnstileToken)">
             Add
         </button>
     </mat-dialog-actions>

frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.ts

@@ -1,78 +1,117 @@
-import { CompanyMemberRole } from 'src/app/models/company';
-import { CompanyService } from 'src/app/services/company.service';
-import { Component, Inject } from '@angular/core';
-import { Angulartics2 } from 'angulartics2';
+import { NgForOf, NgIf } from '@angular/common';
+import { Component, Inject, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
-import { NgForOf, NgIf } from '@angular/common';
+import { Angulartics2 } from 'angulartics2';
 import { EmailValidationDirective } from 'src/app/directives/emailValidator.directive';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
+import { CompanyMemberRole } from 'src/app/models/company';
+import { CompanyService } from 'src/app/services/company.service';
+import { environment } from 'src/environments/environment';
+import { TurnstileComponent } from '../../ui-components/turnstile/turnstile.component';
 
 @Component({
-  selector: 'app-invite-member-dialog',
-  templateUrl: './invite-member-dialog.component.html',
-  styleUrls: ['./invite-member-dialog.component.css'],
-  standalone: true,
-  imports: [
-    NgIf,
-    NgForOf,
-    FormsModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatButtonModule,
-    MatMenuModule,
-    MatIconModule,
-    EmailValidationDirective
-  ]
+	selector: 'app-invite-member-dialog',
+	templateUrl: './invite-member-dialog.component.html',
+	styleUrls: ['./invite-member-dialog.component.css'],
+	standalone: true,
+	imports: [
+		NgIf,
+		NgForOf,
+		FormsModule,
+		MatDialogModule,
+		MatFormFieldModule,
+		MatInputModule,
+		MatSelectModule,
+		MatButtonModule,
+		MatMenuModule,
+		MatIconModule,
+		EmailValidationDirective,
+		TurnstileComponent,
+	],
 })
 export class InviteMemberDialogComponent {
-  CompanyMemberRole = CompanyMemberRole;
+	@ViewChild(TurnstileComponent) turnstileWidget: TurnstileComponent;
+
+	CompanyMemberRole = CompanyMemberRole;
+
+	public isSaas = (environment as any).saas;
+	public turnstileToken: string | null = null;
+	public companyMemberEmail: string;
+	public companyMemberRole: CompanyMemberRole = CompanyMemberRole.Member;
+	public submitting: boolean = false;
+	public companyUsersGroup: string = null;
+	public groups: {
+		title: string;
+		groups: object[];
+	}[] = [];
+
+	public companyRolesName = {
+		ADMIN: 'Account Owner',
+		DB_ADMIN: 'System Admin',
+		USER: 'Member',
+	};
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public company: any,
+		public dialogRef: MatDialogRef<InviteMemberDialogComponent>,
+		private _company: CompanyService,
+		private angulartics2: Angulartics2,
+	) {}
+
+	ngOnInit(): void {
+		this.groups = this.company.connections.sort((a, b) => a.isTestConnection - b.isTestConnection);
+	}
 
-  public companyMemberEmail: string;
-  public companyMemberRole: CompanyMemberRole = CompanyMemberRole.Member;
-  public submitting: boolean = false;
-  public companyUsersGroup: string = null;
-  public groups: {
-    title: string,
-    groups: object[]
-  }[] = [];
+	addCompanyMember() {
+		this.submitting = true;
+		this._company
+			.inviteCompanyMember(
+				this.company.id,
+				this.companyUsersGroup,
+				this.companyMemberEmail,
+				this.companyMemberRole,
+				this.isSaas ? this.turnstileToken : null,
+			)
+			.subscribe(
+				() => {
+					this.angulartics2.eventTrack.next({
+						action: 'Company: member is invited successfully',
+					});
 
-  public companyRolesName = {
-    'ADMIN': 'Account Owner',
-    'DB_ADMIN': 'System Admin',
-    'USER': 'Member'
-  }
+					this.submitting = false;
+					this.dialogRef.close();
+				},
+				() => {
+					this._resetTurnstile();
+				},
+				() => {
+					this.submitting = false;
+				},
+			);
+	}
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public company: any,
-    public dialogRef: MatDialogRef<InviteMemberDialogComponent>,
-    private _company: CompanyService,
-    private angulartics2: Angulartics2,
-  ) { }
+	onTurnstileToken(token: string) {
+		this.turnstileToken = token;
+	}
 
-  ngOnInit(): void {
-    this.groups = this.company.connections.sort((a, b) => a.isTestConnection - b.isTestConnection);
-  }
+	onTurnstileError() {
+		this.turnstileToken = null;
+	}
 
-  addCompanyMember() {
-    this.submitting = true;
-    this._company.inviteCompanyMember(this.company.id, this.companyUsersGroup, this.companyMemberEmail, this.companyMemberRole)
-    .subscribe(() => {
-      this.angulartics2.eventTrack.next({
-        action: 'Company: member is invited successfully',
-      });
+	onTurnstileExpired() {
+		this.turnstileToken = null;
+	}
 
-      this.submitting = false;
-      this.dialogRef.close();
-    },
-    () => {},
-    () => {this.submitting = false});
-  }
+	private _resetTurnstile(): void {
+		if (this.isSaas && this.turnstileWidget) {
+			this.turnstileWidget.reset();
+			this.turnstileToken = null;
+		}
+	}
 }