Skip to content

Add Cloudflare Turnstile captcha to registration form #1504

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

Open
gugu wants to merge 5 commits into
base: main
Choose a base branch
from
+6,516 −6,186
Open

Add Cloudflare Turnstile captcha to registration form #1504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
960ad2a
Add Cloudflare Turnstile captcha to registration form
gugu Jan 16, 2026
edd4708
Configure SaaS environment for Tailscale dev server
gugu Jan 16, 2026
14dc773
Add Cloudflare Turnstile captcha to invite member dialog
gugu Jan 16, 2026
8dd5937
Merge branch 'main' into feature/turnstile-captcha-registration
gugu Jan 19, 2026
9077845
Fix turnstile component tests for Vitest compatibility
gugu Jan 19, 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
8 changes: 7 additions & 1 deletion frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
163 changes: 101 additions & 62 deletions frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
135 changes: 67 additions & 68 deletions ...ts/connect-db/db-connection-confirm-dialog/db-connection-confirm-dialog.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,88 @@
import { provideHttpClient } from '@angular/common/http';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';

import { Angulartics2Module } from 'angulartics2';
import { ConnectionsService } from 'src/app/services/connections.service';
import { DbConnectionConfirmDialogComponent } from './db-connection-confirm-dialog.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { provideRouter, Router } from '@angular/router';
import { Angulartics2Module } from 'angulartics2';
import { of } from 'rxjs';
import { provideHttpClient } from '@angular/common/http';
import { ConnectionsService } from 'src/app/services/connections.service';
import { DbConnectionConfirmDialogComponent } from './db-connection-confirm-dialog.component';

describe('DbConnectionConfirmDialogComponent', () => {
let component: DbConnectionConfirmDialogComponent;
let fixture: ComponentFixture<DbConnectionConfirmDialogComponent>;
let component: DbConnectionConfirmDialogComponent;
let fixture: ComponentFixture<DbConnectionConfirmDialogComponent>;

let routerSpy;
let fakeConnectionsService = {
updateConnection: vi.fn(),
createConnection: vi.fn()
};
let routerSpy;
let fakeConnectionsService = {
updateConnection: vi.fn(),
createConnection: vi.fn(),
};

beforeEach(async (): Promise<void> => {
routerSpy = {navigate: vi.fn()};
beforeEach(async (): Promise<void> => {
routerSpy = { navigate: vi.fn() };

await TestBed.configureTestingModule({
imports: [
MatSnackBarModule,
MatDialogModule,
Angulartics2Module.forRoot(),
DbConnectionConfirmDialogComponent
],
providers: [
provideHttpClient(),
provideRouter([]),
{ provide: MAT_DIALOG_DATA, useValue: {
dbCreds: {
id: '12345678'
}
} },
{ provide: MatDialogRef, useValue: {} },
{ provide: Router, useValue: routerSpy },
{
provide: ConnectionsService,
useValue: fakeConnectionsService
}
],
}).compileComponents();
});
await TestBed.configureTestingModule({
imports: [MatSnackBarModule, MatDialogModule, Angulartics2Module.forRoot(), DbConnectionConfirmDialogComponent],
providers: [
provideHttpClient(),
provideRouter([]),
{
provide: MAT_DIALOG_DATA,
useValue: {
dbCreds: {
id: '12345678',
},
},
},
{ provide: MatDialogRef, useValue: {} },
{ provide: Router, useValue: routerSpy },
{
provide: ConnectionsService,
useValue: fakeConnectionsService,
},
],
}).compileComponents();
});

beforeEach(() => {
fixture = TestBed.createComponent(DbConnectionConfirmDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(DbConnectionConfirmDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});

it('should redirect on dashboard after connection edited', () => {
fakeConnectionsService.updateConnection.mockReturnValue(of(true));
component.editConnection();
it('should redirect on dashboard after connection edited', () => {
fakeConnectionsService.updateConnection.mockReturnValue(of(true));
component.editConnection();

expect(routerSpy.navigate).toHaveBeenCalledWith(['/dashboard/12345678']);
});
expect(routerSpy.navigate).toHaveBeenCalledWith(['/dashboard/12345678']);
});

it('should stop submitting if editing connection completed', () => {
fakeConnectionsService.updateConnection.mockReturnValue(of(false));
component.editConnection();
it('should stop submitting if editing connection completed', () => {
fakeConnectionsService.updateConnection.mockReturnValue(of(false));
component.editConnection();

expect(component.submitting).toBe(false);
});
expect(component.submitting).toBe(false);
});

it('should redirect on dashboard after connection added', () => {
fakeConnectionsService.createConnection.mockReturnValue(of({
id: '12345678'
}));
component.createConnection();
it('should redirect on dashboard after connection added', () => {
fakeConnectionsService.createConnection.mockReturnValue(
of({
id: '12345678',
}),
);
component.createConnection();

expect(routerSpy.navigate).toHaveBeenCalledWith(['/dashboard/12345678']);
});
expect(routerSpy.navigate).toHaveBeenCalledWith(['/dashboard/12345678']);
});

it('should stop submitting if adding connection completed', () => {
fakeConnectionsService.createConnection.mockReturnValue(of(false));
component.createConnection();
it('should stop submitting if adding connection completed', () => {
fakeConnectionsService.createConnection.mockReturnValue(of(false));
component.createConnection();

expect(component.submitting).toBe(false);
});
expect(component.submitting).toBe(false);
});
});
Loading
Loading