@swetrix/captcha 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,248 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Swetrix Captcha</title>
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+
9
+ <style>
10
+ html {
11
+ font-family: '-apple-system', 'system-ui', 'BlinkMacSystemFont', 'Inter', 'Cantarell', 'Helvetica Neue', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ body {
17
+ margin: 0;
18
+ padding: 0;
19
+ height: auto;
20
+ overflow: auto;
21
+ }
22
+
23
+ #swetrix-captcha {
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+
28
+ /* 300 - 20px (padding) */
29
+ width: 280px;
30
+
31
+ background-color: #0f172a;
32
+ border: 1px solid #1e293b;
33
+ height: 65px;
34
+ -webkit-user-select: none;
35
+ user-select: none;
36
+ padding-left: 10px;
37
+ padding-right: 10px;
38
+
39
+ cursor: pointer;
40
+ }
41
+
42
+ #swetrix-captcha:hover {
43
+ background-color: #1e293b;
44
+ }
45
+
46
+ #challenge {
47
+ display: flex;
48
+ align-items: center;
49
+ cursor: pointer;
50
+
51
+ /* divide the space between #challenge and #branding as a proportion of 5 to 1 using flex */
52
+ flex: 5;
53
+ }
54
+
55
+ #action {
56
+ margin-right: 10px;
57
+ }
58
+
59
+ #checkbox {
60
+ background-color: #111827;
61
+ border: 1px solid #1e293b;
62
+ height: 25px;
63
+ width: 25px;
64
+ border-radius: 3px;
65
+ }
66
+
67
+ #status {
68
+ font-size: 16px;
69
+ color: #f9fafb;
70
+ }
71
+
72
+ .hidden {
73
+ display: none !important;
74
+ }
75
+
76
+ #branding {
77
+ display: flex;
78
+ flex-direction: column;
79
+ align-items: flex-end;
80
+ flex: 1;
81
+ }
82
+
83
+ #legal {
84
+ font-size: 10px;
85
+ }
86
+
87
+ #legal>a {
88
+ color: #f9fafb;
89
+ text-decoration: none;
90
+ cursor: pointer;
91
+ }
92
+
93
+ #legal>a:hover {
94
+ text-decoration: underline;
95
+ }
96
+
97
+ #legal>.separator::before {
98
+ content: "-";
99
+ margin: 0 2px;
100
+ color: #f9fafb;
101
+ }
102
+
103
+ #action svg {
104
+ width: 28px;
105
+ height: 28px;
106
+ }
107
+
108
+ #failure>svg {
109
+ /* bg-red-500 */
110
+ color: #d6292a;
111
+ }
112
+
113
+ #completed>svg {
114
+ /* bg-green-600 */
115
+ color: #16a24c;
116
+ }
117
+
118
+ #completed, #failure {
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ }
123
+
124
+ /* Loading indicator */
125
+ @keyframes spin {
126
+ 0% {
127
+ transform: rotate(0deg);
128
+ }
129
+
130
+ 100% {
131
+ transform: rotate(360deg);
132
+ }
133
+ }
134
+
135
+ #loading {
136
+ border-radius: 50%;
137
+ width: 17px;
138
+ height: 17px;
139
+ border: 4px solid #111827;
140
+ border-top-color: #4b5563;
141
+ animation: spin 2s infinite linear;
142
+ }
143
+
144
+ #manual-challenge {
145
+ display: flex;
146
+ justify-content: center;
147
+ align-items: center;
148
+ flex-direction: row;
149
+ border: 1px solid #1e293b;
150
+ /* bg-slate-900 */
151
+ background-color: #0f172a;
152
+ border-top: none;
153
+ height: 130px;
154
+ width: 280px;
155
+ padding-left: 10px;
156
+ padding-right: 10px;
157
+ gap: 10px;
158
+ }
159
+
160
+ #input-n-captcha {
161
+ display: flex;
162
+ flex-direction: column;
163
+ align-items: center;
164
+ cursor: pointer;
165
+ flex: 5;
166
+ }
167
+
168
+ #input-n-captcha > input {
169
+ width: 100%;
170
+ background-color: #1e293b;
171
+ color: #f9fafb;
172
+ border: 2px solid #1e293b;
173
+ border-radius: 3px;
174
+ }
175
+
176
+ #manual-submit-btn {
177
+ background-color: #1e293b;
178
+ border: 1px solid #1e293b;
179
+ color: #f9fafb;
180
+ padding-left: 5px;
181
+ padding-right: 5px;
182
+ border-radius: 3px;
183
+ height: 75px;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ cursor: pointer;
188
+ flex: 1;
189
+ }
190
+ </style>
191
+ <script>
192
+ window.__SWETRIX_CAPTCHA_THEME = 'dark'
193
+ const urlParams = new URLSearchParams(window.location.search)
194
+ const pid = urlParams.get('pid')
195
+ const cid = urlParams.get('cid')
196
+
197
+ window.__SWETRIX_CAPTCHA_ID = cid
198
+ window.__SWETRIX_PROJECT_ID = pid
199
+ </script>
200
+ <script src="../captcha.js" defer></script>
201
+ </head>
202
+
203
+ <body>
204
+ <div id="swetrix-captcha">
205
+ <div id="challenge">
206
+ <div id="action">
207
+ <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
208
+ <div id="checkbox"></div>
209
+ <div id="failure" class="hidden">
210
+ <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
211
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
212
+ </svg>
213
+ </div>
214
+ <div id="completed" class="hidden">
215
+ <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
216
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
217
+ </svg>
218
+ </div>
219
+ <div id="loading" class="hidden"></div>
220
+ </div>
221
+ <div id="status">
222
+ <span id="status-default">I am human</span>
223
+ <span id="status-failure" class="hidden">Failure, please retry</span>
224
+ </div>
225
+ </div>
226
+ <div id="branding">
227
+ <a href="https://swetrix.com" target="_blank" rel="noopener noreferrer">
228
+ <img src="../assets/logo_white.png" alt="Swetrix" width="81" height="18" />
229
+ </a>
230
+ <div id="legal">
231
+ <a href="https://swetrix.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
232
+ <span class="separator"></span>
233
+ <a href="https://swetrix.com/terms" target="_blank" rel="noopener noreferrer">Terms</a>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <div id="manual-challenge" class="hidden">
238
+ <div id="input-n-captcha">
239
+ <div id="svg-captcha"></div>
240
+ <input aria-label="Enter the code from image" type="text" id="svg-captcha-input" autocomplete="off" />
241
+ </div>
242
+ <div id="manual-submit-btn">
243
+ Submit
244
+ </div>
245
+ </div>
246
+ </body>
247
+
248
+ </html>
@@ -0,0 +1,243 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Swetrix Captcha</title>
7
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
+
9
+ <style>
10
+ html {
11
+ font-family: '-apple-system', 'system-ui', 'BlinkMacSystemFont', 'Inter', 'Cantarell', 'Helvetica Neue', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ body {
17
+ margin: 0;
18
+ padding: 0;
19
+ height: auto;
20
+ overflow: auto;
21
+ }
22
+
23
+ #swetrix-captcha {
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+
28
+ /* 300 - 20px (padding) */
29
+ width: 280px;
30
+
31
+ /* bg-gray-100 */
32
+ background-color: #f9fafb;
33
+ border: 1px solid #e9e9e9;
34
+ height: 65px;
35
+ -webkit-user-select: none;
36
+ user-select: none;
37
+ padding-left: 10px;
38
+ padding-right: 10px;
39
+
40
+ cursor: pointer;
41
+ }
42
+
43
+ #swetrix-captcha:hover {
44
+ /* bg-gray-200 */
45
+ background-color: #f3f4f6;
46
+ }
47
+
48
+ #challenge {
49
+ display: flex;
50
+ align-items: center;
51
+ cursor: pointer;
52
+
53
+ /* divide the space between #challenge and #branding as a proportion of 5 to 1 using flex */
54
+ flex: 5;
55
+ }
56
+
57
+ #action {
58
+ margin-right: 10px;
59
+ }
60
+
61
+ #checkbox {
62
+ background-color: #fff;
63
+ border: 1px solid #e9e9e9;
64
+ height: 25px;
65
+ width: 25px;
66
+ border-radius: 3px;
67
+ }
68
+
69
+ #status {
70
+ font-size: 16px;
71
+ color: #0f0f0f;
72
+ }
73
+
74
+ .hidden {
75
+ display: none !important;
76
+ }
77
+
78
+ #branding {
79
+ display: flex;
80
+ flex-direction: column;
81
+ align-items: flex-end;
82
+ flex: 1;
83
+ }
84
+
85
+ #legal {
86
+ font-size: 10px;
87
+ }
88
+
89
+ #legal>a {
90
+ color: #0f0f0f;
91
+ text-decoration: none;
92
+ cursor: pointer;
93
+ }
94
+
95
+ #legal>a:hover {
96
+ text-decoration: underline;
97
+ }
98
+
99
+ #legal>.separator::before {
100
+ content: "-";
101
+ margin: 0 2px;
102
+ color: #0f0f0f;
103
+ }
104
+
105
+ #action svg {
106
+ width: 28px;
107
+ height: 28px;
108
+ }
109
+
110
+ #failure>svg {
111
+ /* bg-red-500 */
112
+ color: #d6292a;
113
+ }
114
+
115
+ #completed>svg {
116
+ /* bg-green-600 */
117
+ color: #16a24c;
118
+ }
119
+
120
+ #completed, #failure {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ }
125
+
126
+ /* Loading indicator */
127
+ @keyframes spin {
128
+ 0% {
129
+ transform: rotate(0deg);
130
+ }
131
+
132
+ 100% {
133
+ transform: rotate(360deg);
134
+ }
135
+ }
136
+
137
+ #loading {
138
+ border-radius: 50%;
139
+ width: 17px;
140
+ height: 17px;
141
+ border: 4px solid #b4b4b4;
142
+ border-top-color: #fff;
143
+ animation: spin 2s infinite linear;
144
+ }
145
+
146
+ #manual-challenge {
147
+ display: flex;
148
+ justify-content: center;
149
+ align-items: center;
150
+ flex-direction: row;
151
+ border: 1px solid #e9e9e9;
152
+ border-top: none;
153
+ height: 130px;
154
+ width: 280px;
155
+ padding-left: 10px;
156
+ padding-right: 10px;
157
+ gap: 10px;
158
+ }
159
+
160
+ #input-n-captcha {
161
+ display: flex;
162
+ flex-direction: column;
163
+ align-items: center;
164
+ cursor: pointer;
165
+ flex: 5;
166
+ }
167
+
168
+ #input-n-captcha > input {
169
+ width: 100%;
170
+ }
171
+
172
+ #manual-submit-btn {
173
+ background-color: #fff;
174
+ border: 1px solid #e9e9e9;
175
+ padding-left: 5px;
176
+ padding-right: 5px;
177
+ border-radius: 3px;
178
+ height: 75px;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ cursor: pointer;
183
+ flex: 1;
184
+ }
185
+ </style>
186
+ <script>
187
+ window.__SWETRIX_CAPTCHA_THEME = 'light'
188
+ const urlParams = new URLSearchParams(window.location.search)
189
+ const pid = urlParams.get('pid')
190
+ const cid = urlParams.get('cid')
191
+
192
+ window.__SWETRIX_CAPTCHA_ID = cid
193
+ window.__SWETRIX_PROJECT_ID = pid
194
+ </script>
195
+ <script src="../captcha.js" defer></script>
196
+ </head>
197
+
198
+ <body>
199
+ <div id="swetrix-captcha">
200
+ <div id="challenge">
201
+ <div id="action">
202
+ <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
203
+ <div id="checkbox"></div>
204
+ <div id="failure" class="hidden">
205
+ <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
206
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
207
+ </svg>
208
+ </div>
209
+ <div id="completed" class="hidden">
210
+ <svg fill="transparent" fill-opacity="0" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
211
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
212
+ </svg>
213
+ </div>
214
+ <div id="loading" class="hidden"></div>
215
+ </div>
216
+ <div id="status">
217
+ <span id="status-default">I am human</span>
218
+ <span id="status-failure" class="hidden">Failure, please retry</span>
219
+ </div>
220
+ </div>
221
+ <div id="branding">
222
+ <a href="https://swetrix.com" target="_blank" rel="noopener noreferrer">
223
+ <img src="../assets/logo_blue.png" alt="Swetrix" width="81" height="18" />
224
+ </a>
225
+ <div id="legal">
226
+ <a href="https://swetrix.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
227
+ <span class="separator"></span>
228
+ <a href="https://swetrix.com/terms" target="_blank" rel="noopener noreferrer">Terms</a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div id="manual-challenge" class="hidden">
233
+ <div id="input-n-captcha">
234
+ <div id="svg-captcha"></div>
235
+ <input aria-label="Enter the code from image" type="text" id="svg-captcha-input" autocomplete="off" />
236
+ </div>
237
+ <div id="manual-submit-btn">
238
+ Submit
239
+ </div>
240
+ </div>
241
+ </body>
242
+
243
+ </html>
@@ -0,0 +1,33 @@
1
+ <!-- Generate a form with several inputs -->
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Test</title>
7
+ <style>
8
+ .form {
9
+ display: flex;
10
+ flex-direction: column;
11
+ width: 400px;
12
+ margin: 0 auto;
13
+ }
14
+
15
+ .form>* {
16
+ margin-top: 10px;
17
+ }
18
+ </style>
19
+
20
+ <script src="../captcha-loader.js" defer></script>
21
+ </head>
22
+
23
+ <body>
24
+ <form class="form" action="test.html" method="post">
25
+ <input type="text" name="name" value="name">
26
+ <input type="text" name="email" value="email">
27
+ <input type="number" name="number" value="number">
28
+ <div class="swecaptcha" data-project-id="MP00000000000" data-theme="dark"></div>
29
+ <input type="submit" value="Submit">
30
+ </form>
31
+ </body>
32
+
33
+ </html>
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "@swetrix/captcha",
3
+ "version": "1.0.3",
4
+ "description": "Swetrix CAPTCHA",
5
+ "captchaloader": "dist/captcha-loader.js",
6
+ "captcha": "dist/captcha.js",
7
+ "esnext": "dist/esnext/index.js",
8
+ "typings": "dist/esnext/index.d.ts",
9
+ "keywords": [
10
+ "swetrix",
11
+ "analytics",
12
+ "monitoring",
13
+ "metrics",
14
+ "privacy"
15
+ ],
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/Swetrix/swetrix-js.git"
19
+ },
20
+ "author": "Andrii R. <contact@swetrix.com>",
21
+ "funding": "https://ko-fi.com/andriir",
22
+ "license": "MIT",
23
+ "bugs": {
24
+ "url": "https://github.com/Swetrix/swetrix-js/issues"
25
+ },
26
+ "homepage": "https://swetrix.com/docs",
27
+ "dependencies": {
28
+ "@types/node": "^18.15.3",
29
+ "rollup-plugin-copy": "^3.4.0",
30
+ "tslib": "^2.5.0"
31
+ },
32
+ "devDependencies": {
33
+ "rimraf": "^4.4.0",
34
+ "rollup": "^2.79.1",
35
+ "rollup-plugin-sourcemaps": "^0.6.3",
36
+ "rollup-plugin-typescript2": "^0.34.1",
37
+ "@blaumaus/rollup-plugin-uglify": "^7.0.1",
38
+ "typescript": "^5.0.2"
39
+ },
40
+ "scripts": {
41
+ "prebuild": "rimraf dist",
42
+ "prepublish": "npm run build",
43
+ "build": "rollup -c && tsc -p tsconfig.esnext.json",
44
+ "start": "rollup -c -w",
45
+ "tsc": "tsc -p tsconfig.esnext.json"
46
+ }
47
+ }
@@ -0,0 +1,52 @@
1
+ // import { nodeResolve } from '@rollup/plugin-node-resolve'
2
+ // import commonjs from '@rollup/plugin-commonjs'
3
+ import sourceMaps from 'rollup-plugin-sourcemaps'
4
+ import typescript from 'rollup-plugin-typescript2'
5
+ import { uglify } from '@blaumaus/rollup-plugin-uglify'
6
+ import copy from 'rollup-plugin-copy'
7
+ import pkg from './package.json'
8
+
9
+ const CAPTCHA_PATH = 'src/captcha.ts'
10
+ const CAPTCHA_LOADER_PATH = 'src/captcha-loader.ts'
11
+
12
+ export default [
13
+ {
14
+ input: CAPTCHA_PATH,
15
+ output: [
16
+ // { file: pkg.main, format: 'cjs' },
17
+ // { file: pkg.module, format: 'es' },
18
+ {
19
+ file: pkg.captcha,
20
+ format: 'umd',
21
+ name: 'captcha',
22
+ },
23
+ ],
24
+ plugins: [
25
+ typescript(),
26
+ uglify(),
27
+
28
+ // copying assets
29
+ copy({
30
+ targets: [
31
+ { src: 'src/assets/*', dest: 'dist/assets' },
32
+ { src: 'src/pages/*', dest: 'dist/pages' },
33
+ ],
34
+ }),
35
+ ],
36
+ },
37
+ {
38
+ input: CAPTCHA_LOADER_PATH,
39
+ output: [
40
+ {
41
+ file: pkg.captchaloader,
42
+ format: 'umd',
43
+ name: 'captcha-loader',
44
+ },
45
+ ],
46
+ plugins: [
47
+ typescript(),
48
+ sourceMaps(),
49
+ uglify(),
50
+ ],
51
+ },
52
+ ]
Binary file
Binary file