directus & turnstile

Author: lasfito

.gitignore

@@ -1 +1,3 @@
 .DS_Store
+.env
+/node_modules

70-directus-gcp/.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+.env

70-directus-gcp/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:16-alpine
+
+WORKDIR /src
+
+ADD . /src
+
+RUN npm install --production
+
+EXPOSE 8055
+
+CMD ["npm", "start"]

70-directus-gcp/package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "cms-directus-youtube",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "directus start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@directus/drive-gcs": "^9.21.2",
+    "directus": "^10.4.2",
+    "pg": "^8.11.1"
+  }
+}

70-directus-gcp/package.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

71-cloudflare-turnstile-captcha/.eslintrc.json

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

71-cloudflare-turnstile-captcha/.gitignore

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

71-cloudflare-turnstile-captcha/README.md

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+	const { token } = await request.json();
+	const secret = process.env.TURNSTILE_SECRET_KEY;
+	const ip = request.headers.get('x-forwarded-for');
+
+	if (!secret || !ip || !token) {
+		return NextResponse.json(
+			{ error: 'Missing required parameters' },
+			{ status: 400 }
+		);
+	}
+
+	// Validate the token by calling the
+	// "/siteverify" API endpoint.
+	let formData = new FormData();
+	formData.append('secret', secret);
+	formData.append('response', token);
+	formData.append('remoteip', ip);
+
+	const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
+	const result = await fetch(url, {
+		body: formData,
+		method: 'POST',
+	});
+
+	const { success } = await result.json();
+
+	return NextResponse.json({ success });
+}

71-cloudflare-turnstile-captcha/app/api/cf/route.ts

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+input {
+	@apply border border-gray-300 rounded-md shadow-sm;
+}

71-cloudflare-turnstile-captcha/app/favicon.ico

@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}

71-cloudflare-turnstile-captcha/app/globals.css

@@ -0,0 +1,61 @@
+'use client';
+import Script from 'next/script';
+
+declare global {
+	interface Window {
+		turnstile: any;
+	}
+}
+
+export default function Home() {
+	const submitHandler = async (e: any) => {
+		e.preventDefault();
+
+		const token = window.turnstile.getResponse();
+
+		const serverValidation = await fetch('/api/cf', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({ token }),
+		});
+
+		const { success } = await serverValidation.json();
+
+		if (success) {
+			// continue el form submission...
+			alert('Eres humano. Formulario enviado');
+		} else {
+			window.turnstile.reset();
+			alert('Intenta de nuevo');
+		}
+	};
+	return (
+		<>
+			<Script
+				src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+				async
+				defer
+			></Script>
+			<main className="flex flex-col justify-center items-center w-screen h-screen">
+				<form onSubmit={submitHandler} method="POST" className="flex flex-col">
+					<input type="text" placeholder="username" />
+					<input type="password" placeholder="password" />
+
+					<button type="submit" value="Submit">
+						Log in
+					</button>
+
+					<div
+						className="cf-turnstile"
+						data-sitekey="0x4AAAAAAAHS-Hx_bt9HbsKH"
+						data-callback="javascriptCallback"
+						data-theme="light"
+						data-language="es"
+					></div>
+				</form>
+			</main>
+		</>
+	);
+}

71-cloudflare-turnstile-captcha/app/layout.tsx

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig