('', {
28 | nonNullable: true,
29 | validators: Validators.required,
30 | }),
31 | });
32 | }
33 |
34 | onSubmit() {
35 | this.signUpForm.reset();
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/invisible/invisible.component.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/invisible/invisible.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leNicDev/ng-hcaptcha/70f3e1ecaffe2c344efc56f2795ecbcd00206d60/src/app/invisible/invisible.component.scss
--------------------------------------------------------------------------------
/src/app/invisible/invisible.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { InvisibleComponent } from './invisible.component';
4 |
5 | describe('InvisibleComponent', () => {
6 | let component: InvisibleComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ InvisibleComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(InvisibleComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/invisible/invisible.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'hc-invisible',
5 | templateUrl: './invisible.component.html',
6 | styleUrls: ['./invisible.component.scss'],
7 | standalone: false
8 | })
9 | export class InvisibleComponent implements OnInit {
10 |
11 | constructor() { }
12 |
13 | ngOnInit(): void {
14 | }
15 |
16 | onVerify(response) {
17 | console.log('Invisible verified', response);
18 | }
19 |
20 | onError(error) {
21 | console.log('Invisible error', error);
22 | }
23 |
24 | onExpired(response) {
25 | console.log('Invisible expired', response);
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/programmatically/programmatically.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/programmatically/programmatically.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leNicDev/ng-hcaptcha/70f3e1ecaffe2c344efc56f2795ecbcd00206d60/src/app/programmatically/programmatically.component.scss
--------------------------------------------------------------------------------
/src/app/programmatically/programmatically.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProgrammaticallyComponent } from './programmatically.component';
4 |
5 | describe('ProgrammaticallyComponent', () => {
6 | let component: ProgrammaticallyComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ProgrammaticallyComponent ]
12 | })
13 | .compileComponents();
14 | });
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(ProgrammaticallyComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/programmatically/programmatically.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgHcaptchaService } from 'ng-hcaptcha';
3 |
4 | @Component({
5 | selector: 'hc-programmatically',
6 | templateUrl: './programmatically.component.html',
7 | styleUrls: ['./programmatically.component.scss'],
8 | standalone: false
9 | })
10 | export class ProgrammaticallyComponent {
11 |
12 | constructor(private hcaptchaService: NgHcaptchaService) { }
13 |
14 | verify() {
15 | this.hcaptchaService.verify().subscribe(
16 | (result) => {
17 | console.log('SUCCESS', result);
18 | },
19 | (err) => {
20 | console.log('FAILED', err);
21 | },
22 | () => {
23 | console.log('COMPLETE');
24 | }
25 | );
26 | }
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leNicDev/ng-hcaptcha/70f3e1ecaffe2c344efc56f2795ecbcd00206d60/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | version: require('../../package.json').version,
4 | siteKey: '6de09d9c-8f26-4501-8141-49f4fa644d38'
5 | };
6 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | version: require('../../package.json').version,
8 | siteKey: '10000000-ffff-ffff-ffff-000000000001'
9 | };
10 |
11 | /*
12 | * For easier debugging in development mode, you can import the following file
13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
14 | *
15 | * This import should be commented out in production mode because it will have a negative impact
16 | * on performance if an error is thrown.
17 | */
18 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
19 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leNicDev/ng-hcaptcha/70f3e1ecaffe2c344efc56f2795ecbcd00206d60/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | NgHcaptchaApp
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
14 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 | /**
4 | * By default, zone.js will patch all possible macroTask and DomEvents
5 | * user can disable parts of macroTask/DomEvents patch by setting following flags
6 | */
7 |
8 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
9 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
10 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
11 |
12 | /*
13 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
14 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
15 | */
16 | // (window as any).__Zone_enable_cross_context_check = true;
17 |
18 | /***************************************************************************************************
19 | * Zone JS is required by default for Angular itself.
20 | */
21 | import 'zone.js'; // Included with Angular CLI.
22 |
23 |
24 |
25 | /***************************************************************************************************
26 | * APPLICATION IMPORTS
27 | */
28 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700');
2 |
3 | $border-radius: 5px;
4 |
5 | html * {
6 | font-family: 'IBM Plex Sans', 'Roboto', 'Arial', sans-serif;
7 | outline: none;
8 | }
9 |
10 | .form-control {
11 | width: 100%;
12 | margin-bottom: 10px;
13 |
14 | input {
15 | box-sizing: border-box;
16 | width: 100%;
17 | }
18 | }
19 |
20 | input[type=text], input[type=email], input[type=password] {
21 | border: solid 1px #c4c4c4;
22 | border-radius: $border-radius;
23 | padding: 10px 15px;
24 | box-shadow: 2px 2px rgba(#c4c4c4, 0.3);
25 |
26 | &:focus {
27 | border: solid 2px #00cbbe;
28 | box-shadow: 2px 2px rgba(#00cbbe, 0.3);
29 | }
30 |
31 | &.ng-invalid:not(form):not(.ng-untouched) {
32 | border-color: #fc6964;
33 |
34 | &:focus {
35 | box-shadow: 2px 2px rgba(#fc6964, 0.3);
36 | }
37 | }
38 | }
39 |
40 | .btn {
41 | border: none;
42 | color: white;
43 | padding: 0 20px;
44 | font-size: 1.2em;
45 | cursor: pointer;
46 | border-radius: $border-radius;
47 | }
48 |
49 | .btn:disabled {
50 | background-color: linear-gradient(to bottom, #dfdfdf, #c4c4c4);
51 | color: #585858;
52 | cursor: not-allowed;
53 | }
54 |
55 | .btn.primary:not(:disabled) {
56 | background: linear-gradient(to bottom, #00cbbe, #00c2bf);
57 |
58 | &:hover {
59 | background: linear-gradient(to bottom, #00e7d8, #00dad6);
60 | }
61 | }
62 |
63 | .flex {
64 | display: flex;
65 | }
66 |
67 | .flex.justify-content-center {
68 | justify-content: center;
69 | }
70 |
71 | .flex.justify-content-between {
72 | justify-content: space-between;
73 | }
74 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 | BrowserDynamicTestingModule,
13 | platformBrowserDynamicTesting(), {
14 | teardown: { destroyAfterEach: false }
15 | }
16 | );
17 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": ["node"]
6 | },
7 | "files": [
8 | "main.ts",
9 | "polyfills.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | false,
6 | "attribute",
7 | "hc",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | false,
12 | "element",
13 | "hc",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "importHelpers": true,
6 | "esModuleInterop": true,
7 | "outDir": "./dist/out-tsc",
8 | "sourceMap": true,
9 | "declaration": false,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "experimentalDecorators": true,
13 | "target": "ES2022",
14 | "typeRoots": [
15 | "node_modules/@types"
16 | ],
17 | "lib": [
18 | "es2017",
19 | "dom"
20 | ],
21 | "paths": {
22 | "ng-hcaptcha": [
23 | "dist/ng-hcaptcha"
24 | ],
25 | "ng-hcaptcha/*": [
26 | "dist/ng-hcaptcha/*"
27 | ]
28 | },
29 | "useDefineForClassFields": false
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-redundant-jsdoc": true,
69 | "no-shadowed-variable": true,
70 | "no-string-literal": false,
71 | "no-string-throw": true,
72 | "no-switch-case-fall-through": true,
73 | "no-trailing-whitespace": true,
74 | "no-unnecessary-initializer": true,
75 | "no-unused-expression": true,
76 | "no-var-keyword": true,
77 | "object-literal-sort-keys": false,
78 | "one-line": [
79 | true,
80 | "check-open-brace",
81 | "check-catch",
82 | "check-else",
83 | "check-whitespace"
84 | ],
85 | "prefer-const": true,
86 | "quotemark": [
87 | true,
88 | "single"
89 | ],
90 | "radix": true,
91 | "semicolon": [
92 | true,
93 | "always"
94 | ],
95 | "triple-equals": [
96 | true,
97 | "allow-null-check"
98 | ],
99 | "typedef-whitespace": [
100 | true,
101 | {
102 | "call-signature": "nospace",
103 | "index-signature": "nospace",
104 | "parameter": "nospace",
105 | "property-declaration": "nospace",
106 | "variable-declaration": "nospace"
107 | }
108 | ],
109 | "unified-signatures": true,
110 | "variable-name": false,
111 | "whitespace": [
112 | true,
113 | "check-branch",
114 | "check-decl",
115 | "check-operator",
116 | "check-separator",
117 | "check-type"
118 | ],
119 | "no-output-on-prefix": true,
120 | "no-inputs-metadata-property": true,
121 | "no-outputs-metadata-property": true,
122 | "no-host-metadata-property": true,
123 | "no-input-rename": true,
124 | "no-output-rename": true,
125 | "use-lifecycle-interface": true,
126 | "use-pipe-transform-interface": true,
127 | "component-class-suffix": true,
128 | "directive-class-suffix": true
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
5 | Demo
6 |