Skip to content

Commit

Permalink
Merge branch 'dependabot/npm_and_yarn/typescript-5.3.2' of https://gi…
Browse files Browse the repository at this point in the history 
…thub.com/dylandbl/faCAPTCHA into dependabot/npm_and_yarn/typescript-5.3.2
  • Loading branch information
@dylandbl
dylandbl committed Nov 26, 2023
2 parents c1b1a0b + 43bb031 commit 0a4d406
Show file tree
Hide file tree
Showing 3 changed files with 656 additions and 172 deletions.
196 changes: 104 additions & 92 deletions example/src/sections/ShowRoom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import {
InputsContainer,
ShowCodeButton,
ShowRoomContainer,
} from "../styles/ShowRoomStyles";
import FaCaptcha from "typescript-react-test";
import { demo1, demo2 } from "../exampleData/imageUrls";
import { CodeBlock } from "../components/CodeBlock";
import { useState } from "react";
import { topics1, topics2 } from "../exampleData/curatedTopics";
import { ExternalLinkSvg } from "../components/ExternalLinkSvg";
import { useWindowSize } from "../utils/hooks";
} from '../styles/ShowRoomStyles';
import FaCaptcha from 'typescript-react-test';
import { demo1, demo2 } from '../exampleData/imageUrls';
import { CodeBlock } from '../components/CodeBlock';
import { useState } from 'react';
import { topics1, topics2 } from '../exampleData/curatedTopics';
import { ExternalLinkSvg } from '../components/ExternalLinkSvg';
import { useWindowSize } from '../utils/hooks';

export const ShowRoom = () => {
const [showCode, setShowCode] = useState(false);
Expand All @@ -25,16 +25,16 @@ export const ShowRoom = () => {
};
const [showFaCaptcha, setShowCaptcha] = useState(true);
// Codeblock values.
const [imgTopicUrlsValue, setImgTopicUrlsValue] = useState("demo1");
const [imgTopicUrlsValue, setImgTopicUrlsValue] = useState('demo1');
const [simulateSlowValue, setSimulateSlowValue] = useState(0);
const [cellsWideValue, setCellsWideValue] = useState(3);
const [minAttemptsValue, setMinAttemptsValue] = useState(1);
const [maxAttemptsValue, setMaxAttemptsValue] = useState(8); // minAttempts default + 1.
const [uncloseableValue, setUncloseableValue] = useState(false);
const [notARobotTextValue, setNotARobotTextValue] =
useState("I'm not a robot");
const [captchaTopicsValue, setCaptchaTopicsValue] = useState([""]);
const [verifyTextValue, setVerifyTextValue] = useState("verify");
const [captchaTopicsValue, setCaptchaTopicsValue] = useState(['']);
const [verifyTextValue, setVerifyTextValue] = useState('verify');
const [allowRetryValue, setAlowRetryValue] = useState(true);

const handleImgTopicUrlsChange = (value: string) => {
Expand Down Expand Up @@ -65,14 +65,14 @@ export const ShowRoom = () => {
const handleAllowRetry = (value: boolean) => setAlowRetryValue(value);

const handleResetFields = () => {
setImgTopicUrlsValue("demo1");
setImgTopicUrlsValue('demo1');
setSimulateSlowValue(0);
setCellsWideValue(3);
setMinAttemptsValue(1);
setUncloseableValue(false);
setNotARobotTextValue("I'm not a robot");
setCaptchaTopicsValue([""]);
setVerifyTextValue("verify");
setCaptchaTopicsValue(['']);
setVerifyTextValue('verify');

// Hack to refresh the component without access to the state.
setShowCaptcha(false);
Expand All @@ -87,32 +87,32 @@ export const ShowRoom = () => {
return (
<ShowRoomContainer>
{!smallScreen && (
<div className="codeBlockContainer">
<div className='codeBlockContainer'>
<CodeBlock show={showCode}>
{`<FaCaptcha
onVerificationComplete={}
imgTopicUrls={${imgTopicUrlsValue}}`}
{captchaTopicsValue[0] === ""
? ""
{captchaTopicsValue[0] === ''
? ''
: `\n captchaTopics={["${captchaTopicsValue}"]}`}
{cellsWideValue === 4 ? "" : `\n cellsWide={${cellsWideValue}}`}
{cellsWideValue === 4 ? '' : `\n cellsWide={${cellsWideValue}}`}
{simulateSlowValue === 1
? ""
? ''
: `\n simulateSlow={${simulateSlowValue}}`}
{minAttemptsValue === 1
? ""
? ''
: `\n minAttempts={${minAttemptsValue}}`}
{maxAttemptsValue === minAttemptsValue + 7
? ""
? ''
: `\n maxAttempts={${maxAttemptsValue}}`}
{notARobotTextValue === "I'm not a robot"
? ""
? ''
: `\n notARobotText="${notARobotTextValue}"`}
{verifyTextValue === "verify"
? ""
: `\n verifyText={${verifyTextValue}}`}
{!allowRetryValue ? "" : `\n allowRetry`}
{!uncloseableValue ? "" : `\n uncloseable`}
{verifyTextValue === 'verify'
? ''
: `\n verifyText="${verifyTextValue}"`}
{!allowRetryValue ? '' : `\n allowRetry`}
{!uncloseableValue ? '' : `\n uncloseable`}
{`\n/>`}
</CodeBlock>
</div>
Expand All @@ -123,11 +123,11 @@ export const ShowRoom = () => {
<FaCaptcha
allowRetry={allowRetryValue}
onVerificationComplete={() => {}}
imgTopicUrls={imgTopicUrlsValue === "demo1" ? demo1 : demo2}
imgTopicUrls={imgTopicUrlsValue === 'demo1' ? demo1 : demo2}
captchaTopics={
captchaTopicsValue[0] !== ""
captchaTopicsValue[0] !== ''
? captchaTopicsValue
: imgTopicUrlsValue === "demo1"
: imgTopicUrlsValue === 'demo1'
? topics1
: topics2
}
Expand All @@ -141,180 +141,192 @@ export const ShowRoom = () => {
verifyText={verifyTextValue}
/>
) : (
<div style={{ width: "275px" }} />
<div style={{ width: '275px' }} />
)}

<div style={{ width: "275px" }}>
<div style={{ width: '275px' }}>
<div
style={{
display: "flex",
justifyContent: showConfig ? "space-between" : "flex-end",
display: 'flex',
justifyContent: showConfig ? 'space-between' : 'flex-end',
}}
>
{showConfig && (
<>
<ShowCodeButton onClick={handleResetFields}>
(Reset)
</ShowCodeButton>{" "}
</ShowCodeButton>{' '}
{!smallScreen && (
<ShowCodeButton onClick={handleToggleCodeView}>
[{showCode ? "Hide" : "View"} code]
[{showCode ? 'Hide' : 'View'} code]
</ShowCodeButton>
)}
</>
)}{" "}
)}{' '}
<ShowCodeButton onClick={handleToggleConfig}>
Configure
</ShowCodeButton>
</div>
<InputsContainer show={showConfig}>
<p>
For a full list of features and API information, see the{" "}
For a full list of features and API information, see the{' '}
<a
className="fancy-a"
href="https://github.com/dylandbl/faCAPTCHA#api"
rel="noreferrer"
title="https://github.com/dylandbl/faCAPTCHA#api"
target="_blank"
className='fancy-a'
href='https://github.com/dylandbl/faCAPTCHA#api'
rel='noreferrer'
title='https://github.com/dylandbl/faCAPTCHA#api'
target='_blank'
>
repo on Github
<ExternalLinkSvg />
</a>
.
</p>
<div className="inputsInnerContainer">
<label htmlFor="imgTopicUrls" className="dropdownLabel">
<div className='inputsInnerContainer'>
<label
htmlFor='imgTopicUrls'
className='dropdownLabel'
>
Select images for demo
</label>
<select
id="imgTopicUrls"
name="imgTopicUrls"
className="dropdownLabel"
id='imgTopicUrls'
name='imgTopicUrls'
className='dropdownLabel'
value={imgTopicUrlsValue}
onChange={(e) => handleImgTopicUrlsChange(e.target.value)}
>
<option value="demo1">Demo 1</option>
<option value="demo2">Demo 2 (3x3 grid)</option>
<option value='demo1'>Demo 1</option>
<option value='demo2'>Demo 2 (3x3 grid)</option>
</select>
<br />

<input
className="num-input"
type="number"
id="simulateSlow"
name="simulateSlow"
className='num-input'
type='number'
id='simulateSlow'
name='simulateSlow'
value={simulateSlowValue}
min={0}
max={3}
onChange={(e) => handleSimulateSlowChange(e.target.value)}
/>
<label htmlFor="simulateSlow">Increase load time</label>
<label htmlFor='simulateSlow'>Increase load time</label>
<br />

<input
className="num-input"
type="number"
id="cellsWide"
name="cellsWide"
className='num-input'
type='number'
id='cellsWide'
name='cellsWide'
value={cellsWideValue}
min={1}
max={40}
onChange={(e) => handleCellWideChange(e.target.value)}
/>
<label htmlFor="cellsWide">Number of tiles in width</label>
<label htmlFor='cellsWide'>Number of tiles in width</label>
<br />

<input
className="num-input"
type="number"
id="minAttempts"
name="minAttempts"
className='num-input'
type='number'
id='minAttempts'
name='minAttempts'
value={minAttemptsValue}
min={1}
max={40}
onChange={(e) =>
handleMinAttemptsChange(Number(e.target.value))
}
/>
<label htmlFor="minAttempts">Minimum attempts</label>
<label htmlFor='minAttempts'>Minimum attempts</label>
<br />

<input
className="num-input"
type="number"
id="maxAttempts"
name="maxAttempts"
className='num-input'
type='number'
id='maxAttempts'
name='maxAttempts'
value={maxAttemptsValue}
min={minAttemptsValue}
max={40}
onChange={(e) =>
handleMaxAttemptsChange(Number(e.target.value))
}
/>
<label htmlFor="minAttempts">Maximum attempts</label>
<label htmlFor='minAttempts'>Maximum attempts</label>
<br />

<input
type="checkbox"
id="allowRetry"
name="allowRetry"
type='checkbox'
id='allowRetry'
name='allowRetry'
checked={allowRetryValue}
onChange={(e) => handleAllowRetry(e.target.checked)}
/>
<label htmlFor="uncloseable">
<label htmlFor='uncloseable'>
Allow retries after verification
</label>
<br />

<input
type="checkbox"
id="uncloseable"
name="uncloseable"
type='checkbox'
id='uncloseable'
name='uncloseable'
checked={uncloseableValue}
onChange={(e) => handleUncloseableChange(e.target.checked)}
/>
<label htmlFor="uncloseable">
<label htmlFor='uncloseable'>
Prevent closing without verification
</label>
<br />

<label htmlFor="notARobotText" className="textInputLabel">
<label
htmlFor='notARobotText'
className='textInputLabel'
>
"I'm not a robot"
</label>
<input
type="text"
id="notARobotText"
name="notARobotText"
type='text'
id='notARobotText'
name='notARobotText'
value={notARobotTextValue}
placeholder="I'm not a robot"
maxLength={20}
onChange={(e) => handleNotARobotTextChange(e.target.value)}
/>
<br />

<label htmlFor="captchaTopics" className="textInputLabel">
<label
htmlFor='captchaTopics'
className='textInputLabel'
>
Custom CAPTCHA topic
</label>
<input
type="text"
id="captchaTopics"
name="captchaTopics"
type='text'
id='captchaTopics'
name='captchaTopics'
value={captchaTopicsValue}
placeholder="CAPTCHA topic"
placeholder='CAPTCHA topic'
maxLength={20}
onChange={(e) => handleCaptchaTopicsChange(e.target.value)}
/>
<br />

<label htmlFor="verifyText" className="textInputLabel">
<label
htmlFor='verifyText'
className='textInputLabel'
>
Label for the 'verify' button
</label>
<input
type="text"
id="verifyText"
name="verifyText"
type='text'
id='verifyText'
name='verifyText'
value={verifyTextValue}
placeholder="verify"
placeholder='verify'
maxLength={15}
onChange={(e) => handleVerifyTextChange(e.target.value)}
/>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"@typescript-eslint/parser": "^5.34.0",
"eslint": "^8.22.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"typescript": "^5.3.2"
},
Expand Down
Loading

0 comments on commit 0a4d406

Please sign in to comment.