global-input-react
Advanced tools
Comparing version 3.1.17 to 3.1.18
@@ -477,2 +477,20 @@ "use strict"; | ||
| }, [mobileState === MobileState.ERROR]); | ||
| const setFieldValueById = (fieldId, valueToSet) => { | ||
| if (mobileState !== MobileState.MOBILE_CONNECTED) { | ||
| return null; | ||
| } | ||
| if (fields && fields.length) { | ||
| for (let [index, field] of fields.entries()) { | ||
| if (field.id === fieldId) { | ||
| setters[index](valueToSet); | ||
| break; | ||
| } | ||
| } | ||
| ; | ||
| } | ||
| }; | ||
| return { | ||
@@ -493,3 +511,4 @@ mobileState, | ||
| WhenDisconnected, | ||
| WhenError | ||
| WhenError, | ||
| setFieldValueById | ||
| }; | ||
@@ -496,0 +515,0 @@ }; |
| { | ||
| "name": "global-input-react", | ||
| "version": "3.1.17", | ||
| "version": "3.1.18", | ||
| "description": "global input react component", | ||
@@ -5,0 +5,0 @@ "repository": { |
@@ -1,2 +0,2 @@ | ||
| This is a [Global Input App](https://globalinput.co.uk) React JS library for applications that are running on computers, SmartTV, IoT and other smart devices to have mobile integration. With the mobile integration, users will be able to use their mobiles to operate on the applications to enjoy many mobile-related features such as | ||
| This is a [Global Input App](https://globalinput.co.uk) React JS library for applications that are running on computers, SmartTV, IoT and other smart devices to have mobile integration without the need to develop a separate mobile app or a separate integration module if you already have a mobile app. The mobile integration enables users to use their mobiles to operate on applications to enjoy many mobile-related features such as | ||
| [Mobile Encryption](https://globalinput.co.uk/global-input-app/mobile-content-encryption), | ||
@@ -19,5 +19,5 @@ [Mobile Authentication](https://globalinput.co.uk/global-input-app/mobile-authentication), | ||
| You just need to pass a configuration to the ```useGlobalInputApp``` function, specifying the user interface elements that the [Global Input App](https://globalinput.co.uk/) should display to the user. The mobile application transfers the result of the user interactions with those elements via a secure communication powered by end-to-end encryption. | ||
| You just need to pass a configuration to the ```useGlobalInputApp``` function, specifying the user interface elements that the mobile app should display to the user. The device application receives the mobile events as the user interacts with the user interface elements and the communication takes place with end-to-end encryption. | ||
| For example, following will display a Sign In form on the connected mobile device, and the application will receive the events as the user interacts with it: | ||
| For example, following will display a Sign In form on the connected mobile device, and the application will receive the mobile events: | ||
@@ -27,32 +27,40 @@ ```JavaScript | ||
| import {useGlobalInputApp} from 'global-input-react'; | ||
| import React from 'react'; | ||
| import React, {useState} from 'react'; | ||
| export default ({login}){ | ||
| const [username,setUser] = useState(''); | ||
| const [password,setPassword] = useState(''); | ||
| export default ({login}){ | ||
| const initData={ | ||
| form:{ | ||
| title:"Sign In", | ||
| id:"###username###@mycompany.com", | ||
| fields:[{ | ||
| label:"Username", | ||
| id:"username", | ||
| type:"text" | ||
| title: 'Sign In', | ||
| id: '###username###@mycompany.com', | ||
| fields: [{ | ||
| label: 'Username', | ||
| id: 'username' | ||
| },{ | ||
| label:"Password", | ||
| type:"text", | ||
| id:"password" | ||
| label: 'Password', | ||
| id: 'password', | ||
| },{ | ||
| label:"Sign In", | ||
| type:"button", | ||
| operations: { | ||
| onInput:() => login(username, password) | ||
| } | ||
| }] | ||
| id: 'login', | ||
| label: 'Sign In', | ||
| type: 'button' | ||
| }] | ||
| } | ||
| }; | ||
| const globalInputApp=useGlobalInputApp({initData}); | ||
| const {connectionMessage,WhenConnected, values}=globalInputApp; | ||
| const [username,password]=values; | ||
| const globalInputApp=useGlobalInputApp({initData}); | ||
| useEffect(()=>{ | ||
| const {field}=globalInputApp; | ||
| if(!field){ | ||
| return; | ||
| } | ||
| switch(field.id){ | ||
| case 'username': setUsername(field.value); break; | ||
| case 'password': setPassword(field.value); break; | ||
| case 'login': login(username,password); | ||
| } | ||
| },[globalInputApp.field]) | ||
| const {connectionMessage,WhenConnected} = globalInputApp; | ||
| return ( | ||
@@ -68,18 +76,20 @@ <> | ||
| ``` | ||
| When the above application runs, it displays an encrypted QR code in the place of ```connectionMessage``` that a user would use the [Global Input App](https://globalinput.co.uk/) to scan to establish a communication secured with end-to-end encryption. The ```values``` variable that is returned by ```useGlobalInputApp``` will contains the received values matching the form fields specified. The ```id``` of the form is used by the mobile app to locate an existing data in its encrypted storage for autofill operation. | ||
| The application displays an encrypted QR code in the place of ```{connectionMessage}``` while it is waiting for a mobile user to connect. Having connected, the mobile app displays the user interface that is defined by ```initData```. As the user interacts with the user interface elements on the mobile app, the application receives the events timely via the ```field``` variable that is returned as part of object returned by ```useGlobalInputApp```. The ```id``` attribute of the form is useful for the mobile app to locate an existing data in its encrypted storage to facilitate autofill operations. | ||
| If a field in a form has the type attribute with "encrypt", its content will be encrypted and sent to the application. In the same way, if the type "decrypt", the content will be decrypted. You may employ this to secure the data stored on the cloud. For more information, please visit [Global Input Website](https://globalinput.co.uk/). | ||
| The type of a field defines the related operation as well as the type of the corresponding user interface element. For example, if the type is "encrypt"/"decrypt", the mobile app initiates the encrypt/decrypt workflow. This is remarkably useful if you would like to secure data without worrying about how to secure the master encryption keys themselves. For more information, please visit [Global Input Website](https://globalinput.co.uk/). | ||
| The some of the useful attribute values in the object that is returned by ```useGlobalInputApp``` are listed in the table below: | ||
| Some of the useful attribute values returned by ```useGlobalInputApp``` are listed in the table below: | ||
| | Attributes | Description | | ||
| | ------ | ------ | | ||
| | connectionMessage | The connection information that the Global Input App scans to establish a secure connection to the application | | ||
| | values | An array of values that corresponds to the fields in the forms | | ||
| |setters | An array of functions, each corresponds to a field in the form, and you can use it set the value of the matching field | | ||
| |fields | An array of fields, each element contain an id and a value. This array is an alternative to ```values```, which is composed of only values of the fields| | ||
| | connectionMessage | The connection information that the mobile app scans to establish a secure connection to the application | | ||
| | values | An array of values that corresponds to the fields in the form | | ||
| |setters | An array of functions that you can use it set the value of the matching field | | ||
| |setFieldValueById | this function is mostly useful if you have a large number of fields in form and you would like set value by field id. The first parameter is the id of the field, and the second parameter is the value that you would like to | | ||
| |field | The field that contains the id and value of the field corresponding to last event received from the mobile app | | ||
| | WhenWaiting | A container React component that you can use it to wrap content that you would like to display only when the application waiting for the user to connect | | ||
| | WhenConnected | A container React component that you can use it to wrap content that you would like to display only when a user has connected to the application | | ||
| | WhenDisconnected | A container React component that you can use it to wrap content that you would like to display only when a user has connected and then disconnected | | ||
| | WhenError | A container React component that you can use it to wrap content that you would like to display only when the library throws error, you can use {errorMessage} to find out what has happenned, for example ```<WhenError>{errorMessage}</WhenError>``` | | ||
| | errorMessage | this variable wil be populated when an error occurs within the library | | ||
| | WhenError | A container React component that you can use it to wrap content that you would like to display when there is an error, you can use {errorMessage} to find out what has happened, for example ```<WhenError>{errorMessage}</WhenError>``` | | ||
| | errorMessage | This value wil be populated when an error is raised by the library | | ||
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.12%
93558
- Lines of code
- increased by0.68%
2225
- Number of lines in readme file
- increased by12.05%
93
No dependency changes