From e726b1f32d9ca0252278cc0deaa3067cdf9b8be3 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Fri, 1 Nov 2019 16:14:54 -0400
Subject: [PATCH] Add packages/react-captcha

---
 package.json                             |  5 +-
 packages/react-captcha/jest.config.js    | 16 ++++++
 packages/react-captcha/jest.setup.js     |  4 ++
 packages/react-captcha/package.json      | 15 ++++++
 packages/react-captcha/src/Captcha.tsx   | 67 ++++++++++++++++++++++++
 packages/react-captcha/src/index.ts      |  0
 packages/react-captcha/tsconfig.esm.json |  8 +++
 packages/react-captcha/tsconfig.json     |  9 ++++
 8 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-captcha/jest.config.js
 create mode 100644 packages/react-captcha/jest.setup.js
 create mode 100644 packages/react-captcha/package.json
 create mode 100644 packages/react-captcha/src/Captcha.tsx
 create mode 100644 packages/react-captcha/src/index.ts
 create mode 100644 packages/react-captcha/tsconfig.esm.json
 create mode 100644 packages/react-captcha/tsconfig.json

diff --git a/package.json b/package.json
index 5dd983a..e555724 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "@rondo.dev/db": "file:packages/db",
     "@rondo.dev/db-typeorm": "file:packages/db-typeorm",
     "@rondo.dev/middleware": "file:packages/middleware",
-    "@rondo.dev/captcha": "file:packages/captcha"
+    "@rondo.dev/captcha": "file:packages/captcha",
+    "@rondo.dev/react-captcha": "file:packages/react-captcha"
   },
   "devDependencies": {
     "@types/bcrypt": "^3.0.0",
@@ -127,4 +128,4 @@
     "watchify": "^3.11.1"
   },
   "name": "node"
-}
+}
\ No newline at end of file
diff --git a/packages/react-captcha/jest.config.js b/packages/react-captcha/jest.config.js
new file mode 100644
index 0000000..4c0cf86
--- /dev/null
+++ b/packages/react-captcha/jest.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  roots: [
+    '<rootDir>/src',
+  ],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.tsx?$',
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+  ],
+  setupFiles: ['<rootDir>/jest.setup.js'],
+}
diff --git a/packages/react-captcha/jest.setup.js b/packages/react-captcha/jest.setup.js
new file mode 100644
index 0000000..a952c9b
--- /dev/null
+++ b/packages/react-captcha/jest.setup.js
@@ -0,0 +1,4 @@
+if (!process.env.LOG) {
+  process.env.LOG = 'sql:warn'
+}
+process.chdir(__dirname)
diff --git a/packages/react-captcha/package.json b/packages/react-captcha/package.json
new file mode 100644
index 0000000..76e9320
--- /dev/null
+++ b/packages/react-captcha/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@rondo.dev/react-captcha",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "test": "jest",
+    "lint": "tslint --project .",
+    "compile": "tsc",
+    "clean": "rm -rf lib/"
+  },
+  "dependencies": {},
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts"
+}
\ No newline at end of file
diff --git a/packages/react-captcha/src/Captcha.tsx b/packages/react-captcha/src/Captcha.tsx
new file mode 100644
index 0000000..0d0703b
--- /dev/null
+++ b/packages/react-captcha/src/Captcha.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+
+export interface CaptchaProps {
+  onChange: (value: React.ChangeEvent<HTMLInputElement>) => void
+  value: string
+  audioUrl?: string
+  imageUrl: string
+}
+
+export type CaptchaType = 'image' | 'audio'
+
+export interface CaptchaState {
+  type: CaptchaType
+  attempt: number
+}
+
+export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
+  state: CaptchaState = {
+    type: 'image',
+    attempt: 0,
+  }
+  changeType(type: CaptchaType) {
+    this.setState({ type })
+  }
+  changeToAudio = () => {
+    this.changeType('audio')
+  }
+  changeToImage = () => {
+    this.changeType('image')
+  }
+  refresh = () => {
+    this.setState({ attempt: this.state.attempt + 1 })
+  }
+  render() {
+    const { onChange, value, imageUrl, audioUrl } = this.props
+    const { attempt, type } = this.state
+
+    return (
+      <div>
+        {type === 'image' && (
+          <>
+            <img key={attempt} src={imageUrl} />
+            <a onClick={this.refresh}>
+              Refresh
+            </a>
+            <a onClick={this.changeToAudio}>
+              Click here for image version
+            </a>
+          </>
+        )}
+        {type === 'audio' && (
+          <>
+            <audio key={attempt} controls src={audioUrl} />
+            <a onClick={this.refresh}>
+              Refresh
+            </a>
+            <a onClick={this.changeToImage}>
+              Click here for audio version
+            </a>
+          </>
+        )}
+        k
+        <input value={value} onChange={onChange} />
+      </div>
+    )
+  }
+}
diff --git a/packages/react-captcha/src/index.ts b/packages/react-captcha/src/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/react-captcha/tsconfig.esm.json b/packages/react-captcha/tsconfig.esm.json
new file mode 100644
index 0000000..6e2aaa7
--- /dev/null
+++ b/packages/react-captcha/tsconfig.esm.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "esm"
+  },
+  "references": [
+  ]
+}
diff --git a/packages/react-captcha/tsconfig.json b/packages/react-captcha/tsconfig.json
new file mode 100644
index 0000000..94e864b
--- /dev/null
+++ b/packages/react-captcha/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.common.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "references": [
+  ]
+}