diff --git a/javascript/reactjs-todo-davinci/README.md b/javascript/reactjs-todo-davinci/README.md index 9f9d7c11..e4bb7707 100644 --- a/javascript/reactjs-todo-davinci/README.md +++ b/javascript/reactjs-todo-davinci/README.md @@ -11,12 +11,20 @@ This sample code is provided "as is" and is not a supported product of Ping Iden - SingleSelectCollector - ReadOnlyCollector - PhoneNumberCollector +- PhoneNumberExtensionCollector - DeviceRegistrationCollector - DeviceAuthenticationCollector +- FidoRegistrationCollector +- FidoAuthenticationCollector - IdpCollector - SubmitCollector - FlowCollector - ProtectCollector +- QrCodeCollector +- RichTextCollector +- BooleanCollector +- ValidatedBooleanCollector +- PollingCollector ## Requirements diff --git a/javascript/reactjs-todo-davinci/client/components/davinci-client/boolean.js b/javascript/reactjs-todo-davinci/client/components/davinci-client/boolean.js new file mode 100644 index 00000000..5bdc60e5 --- /dev/null +++ b/javascript/reactjs-todo-davinci/client/components/davinci-client/boolean.js @@ -0,0 +1,50 @@ +/* + * ping-sample-web-react-davinci + * + * boolean.js + * + * Copyright (c) 2026 Ping Identity Corporation. All rights reserved. + * This software may be modified and distributed under the terms + * of the MIT license. See the LICENSE file for details. + */ + +import React, { useState } from 'react'; +import { interpolateRichContent } from '../utilities/rich-content'; + +export default function BooleanComponent({ collector, inputName, updater }) { + const [isChecked, setIsChecked] = useState(collector.output.value ?? false); + + const fieldId = collector.output.key || `${inputName}-checkbox-field`; + + const { richContent } = collector.output; + const label = richContent?.replacements?.length + ? interpolateRichContent(richContent) + : collector.output.label || ''; + + const required = collector.input.validation?.some( + (validation) => validation.type === 'required' && validation.rule === true, + ); + + const handleChange = (event) => { + const value = event.target.checked; + setIsChecked(value); + updater(value); + }; + + return ( +
{`Polling result: ${result}`}
} + {error && ( ++ {`Polling error: ${error}`} +
+ )} ++ {`QR Code error: ${collector.error}`} +
+ ); + } + + return ( ++ {`Manual code: ${collector.output.label}`} +
+ )} +{output.content}
+ > + ); + } else if (collectorType === 'RichTextCollector') { + const { richContent } = output; + + if (!richContent?.replacements?.length) { + return{output.content}
; + } -export default function Readonly({ collector }) { - return ( -{collector.output.label}
-{interpolateRichContent(richContent)}
; + } else { + return null; + } } diff --git a/javascript/reactjs-todo-davinci/client/components/davinci-client/single-select.js b/javascript/reactjs-todo-davinci/client/components/davinci-client/single-select.js index 3ce1737b..4ddffd63 100644 --- a/javascript/reactjs-todo-davinci/client/components/davinci-client/single-select.js +++ b/javascript/reactjs-todo-davinci/client/components/davinci-client/single-select.js @@ -1,3 +1,13 @@ +/* + * ping-sample-web-react-davinci + * + * single-select.js + * + * Copyright (c) 2025 - 2026 Ping Identity Corporation. All rights reserved. + * This software may be modified and distributed under the terms + * of the MIT license. See the LICENSE file for details. + */ + import React, { useState } from 'react'; export default function SingleSelectComponent({ collector, collectorName, updater }) { @@ -13,7 +23,7 @@ export default function SingleSelectComponent({ collector, collectorName, update }; return ( -