Add packages/react-captcha

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"
-}
+}

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'],
+}

packages/react-captcha/jest.setup.js

@@ -0,0 +1,4 @@
+if (!process.env.LOG) {
+  process.env.LOG = 'sql:warn'
+}
+process.chdir(__dirname)

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"
+}

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>
+    )
+  }
+}

packages/react-captcha/tsconfig.esm.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "esm"
+  },
+  "references": [
+  ]
+}

packages/react-captcha/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.common.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+  "references": [
+  ]
+}