Socket
Socket
Sign inDemoInstall

global-input-react

Package Overview
Dependencies
39
Maintainers
1
Versions
185
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.1.5 to 4.1.6

2

dist/globalinput.js

@@ -280,3 +280,3 @@ "use strict";

console.error("SEND_FIELD:requires isConnected:" + mobileData.mobileState);
return state;
return;
}

@@ -283,0 +283,0 @@

77

dist/index.js

@@ -9,9 +9,8 @@ "use strict";

};
Object.defineProperty(exports, "useGlobalInputApp", {
enumerable: true,
get: function () {
return _useGlobalInputApp.default;
}
});
exports.useGlobalInputApp = void 0;
var globalInput = _interopRequireWildcard(require("./globalinput"));
var _react = _interopRequireWildcard(require("react"));
var _globalInputMessage = require("global-input-message");

@@ -31,4 +30,66 @@

var _useGlobalInputApp = _interopRequireDefault(require("./useGlobalInputApp"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const useGlobalInputApp = (configData, dependencies) => {
const [{
connectionCode,
errorMessage,
field,
isLoading,
isReady,
isError,
isDisconnected,
isConnected,
initData
}, dispatch] = (0, _react.useReducer)(globalInput.reducer, globalInput.initialState);
(0, _react.useEffect)(() => {
globalInput.startConnect(dispatch, configData);
}, dependencies ? dependencies : []); //default connect once for the component
(0, _react.useEffect)(() => {
if (field && globalInput.mobileData.onchange) {
globalInput.mobileData.onchange({
field,
initData,
sendInitData: globalInput.mobileData.sendInitData,
sendValue: globalInput.sendValue
});
}
}, [field]);
const ConnectQR = (0, _react.useCallback)(({
level,
size,
container,
children
}) => {
return globalInput.displayQRCode({
level,
size,
container,
connectionCode,
isReady,
isLoading,
children
});
}, [connectionCode, isReady, isLoading]);
return {
ConnectQR,
connectionCode,
field,
errorMessage,
isLoading,
isReady,
isError,
isDisconnected,
isConnected,
initData,
sendValue: globalInput.sendValue,
sendInitData: globalInput.mobileData.sendInitData,
disconnect: globalInput.mobileData.disconnect,
setOnchange: globalInput.setOnchange
};
};
exports.useGlobalInputApp = useGlobalInputApp;

103

index.d.ts

@@ -0,60 +1,53 @@

import React from 'react';
import { InitData, FormField, FieldValue } from 'global-input-message';
export * from 'global-input-message';
export function useGlobalInputApp(configData: ConfigData | (() => ConfigData), dependencies?: ReadonlyArray<any>): GlobalInputData;
type OnchangeFunction = (evt: FieldChanged) => void;
declare module 'global-input-react' {
export * from 'global-input-message';
import { InitData, FormField, MessageReceiver, FieldValue } from 'global-input-message';
export interface ConfigData {
initData: InitData | (() => InitData);
onchange?: OnchangeFunction;
options?: ConnectOptions;
}
export interface ConnectOptions {
apikey?: string;
securityGroup?: string;
client?: string;
url?: string;
}
interface FieldChanged {
field: FormField;
initData: InitData;
sendInitData: SendInitDataFunction;
sendValue: SendValueFunction
}
export function useGlobalInputApp(configData: ConfigData | (() => ConfigData), dependencies?: ReadonlyArray<any>): GlobalInputData;
type SendValueFunction = (fieldId: string, valueToSet: FieldValue, fieldIndex?: number) => void;
type SendInitDataFunction = (initData: InitData, options?: ConnectOptions) => void;
type OnchangeFunction = (evt: FieldChanged) => void;
type ConnectQRProps = {
size?: number,
level?: "L" | "M" | "Q" | "H",
container?: React.FC
};
export interface GlobalInputData {
ConnectQR: React.FC<ConnectQRProps>,
connectionCode: string;
field: FormField;
errorMessage: string;
isLoading: boolean;
isReady: boolean;
isError: boolean;
isDisconnected: boolean;
isConnected: boolean;
initData: InitData;
sendValue: SendValueFunction;
sendInitData: SendInitDataFunction;
setOnchange: (onchange: OnchangeFunction) => void;
disconnect: () => void;
}
interface ConfigData {
initData: InitData | (() => InitData);
onchange?: OnchangeFunction;
options?: ConnectOptions;
}
interface ConnectOptions {
apikey?: string;
securityGroup?: string;
client?: string;
url?: string;
}
interface FieldChanged {
field: FormField;
initData: InitData;
sendInitData: SendInitDataFunction;
sendValue: SendValueFunction
}
type SendValueFunction = (fieldId: string, valueToSet: FieldValue,fieldIndex?:number) => void;
type SendInitDataFunction = (initData: InitData, options?: ConnectOptions) => void;
type ConnectQRProps = {
size: number,
level: "L" | "M" | "Q" | "H",
container?:React.FC
};
interface GlobalInputData {
ConnectQR: FunctionComponent<ConnectQRProps>,
connectionCode: string;
field: FormField;
errorMessage: string;
isLoading: boolean;
isReady: boolean;
isError: boolean;
isDisconnected: boolean;
isConnected: boolean;
initData: InitData;
sendValue: SendValueFunction;
sendInitData: SendInitDataFunction;
setOnchange: (onchange: OnchangeFunction) => void;
disconnect: () => void;
}
export function generateRandomString(length?: number): string;
export function encrypt(content: string, password: string): string;
export function decrypt(content: string, password: string): string;
}
export function generateRandomString(length?: number): string;
export function encrypt(content: string, password: string): string;
export function decrypt(content: string, password: string): string;

5

package.json
{
"name": "global-input-react",
"version": "4.1.5",
"version": "4.1.6",
"description": "global input react component",
"main": "./dist/index",
"repository": {

@@ -71,5 +72,5 @@ "type": "git",

"dependencies": {
"global-input-message": "^2.0.5",
"global-input-message": "^2.0.6",
"qrcode.react": "^1.0.0"
}
}

101

README.md

@@ -1,7 +0,12 @@

### Global Input React
This React module allows you to introduce a mobile interoperability into React applications on smart devices like smart TVs, set-top boxes, game consoles, and devices in IoT, so that users can use their mobiles to operate on them. It allows you to define mobile interfaces and receive mobile events from within your device applications, while keeping the mobile app as a general and universal mobile app that works across all types of device applications with different business logic: meaning that there is no need to switch to different mobile app for operating on different devices and no need to develop different mobile apps for different business or device applications. It also allows you to enrich your device applications with a set of mobile functionalities like [mobile encryption](https://globalinput.co.uk/global-input-app/mobile-content-encryption), [mobile authentication](https://globalinput.co.uk/global-input-app/mobile-authentication), [mobile input & control](https://globalinput.co.uk/global-input-app/mobile-input-control), [second screen experience](https://globalinput.co.uk/global-input-app/second-screen-experience), [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-personal-storage), [mobile encryption & signing](https://globalinput.co.uk/global-input-app/mobile-content-encryption), and [mobile content transfer](https://globalinput.co.uk/global-input-app/mobile-content-transfer). The communication between a mobile app and a device application is often established through scanning an Encrypted QR Code that contains a set of communication parameters that includes one-time-use encryption key for starting an end-to-end encryption process.
# Global Input React
<p align="right">
<a href="https://github.com/global-input/global-input-react/blob/master/LICENSE">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Global Input Message is released under the MIT license." />
</a>
</p>
This React module allows you to introduce a mobile interoperability into React applications on smart devices like smart TVs, set-top boxes, game consoles, and devices in IoT, so that users can use their mobiles to operate on them. It allows you to define mobile interfaces and receive mobile events from within your device applications, while keeping the mobile app as a general and universal mobile app that works across all types of device applications with different business logic: meaning that there is no need to switch to different mobile app for operating on different devices and no need to develop different mobile apps for different business or device applications. It also allows you to enrich your device applications with a set of mobile functionalities like one-click login, one-click sign-up, mobile encryption, mobile secure storage to name a few. The communication between a mobile app and a device application is secured using end-to-end encryption process that is often initiated through scanning an encrypted QR Code.
This module is particularly useful in the current new normal established by the COVID-19 pandemic, where businesses require visiting customers to communicate accurately with customer representatives while enforcing the rules of wearing masks and social distancing. Thanks to this library, you will be able to establish an instant and secure communication right within the business software you are using, allowing your customers to collaborate effectively, securely and safely. For example, you may provide one-click subscriptions through user mobiles by leveraging the [mobile secure storage](https://globalinput.co.uk/global-input-app/mobile-authentication). Alternative, you do not even have to collect users' personal data thanks to the ability to request data on-demand from the mobile app at the point of service, freeing yourself from the pains of privacy regulations. You may also choose to allow your customers to encrypt their own data using their mobiles, giving users full control over the security and privacy of their personal data.
This module is particularly useful in the current new normal established by the COVID-19 pandemic, where businesses require visiting customers to communicate accurately with customer representatives while enforcing the rules of wearing masks and social distancing. Thanks to this library, you will be able to establish an instant and secure communication right within the business software you are using, allowing your customers to collaborate effectively, securely and safely. For example, you may provide one-click subscriptions through user mobiles by leveraging the mobile secure storage provided by the mobile app. Alternative, you do not even have to collect users' personal data thanks to the ability to request data on-demand from the mobile app at the point of service, freeing yourself from the pains of privacy regulations. You may also choose to allow your customers to encrypt their own data using their mobiles, giving users full control over the security and privacy of their personal data.
## Setup
## 🔌 Setup

@@ -11,3 +16,3 @@ ```shell

```
## Usage
## 📚 Usage
```JavaScript

@@ -52,3 +57,3 @@

```
It displays an encrypted QR Code for mobile apps to scan to connect to your application. It contains the content of ```mobile.connectionCode```, which holds an encrypted string value. When decrypted, it provides information on how to connect to your application, including a one-time-use encryption key for initiating an end-to-end encryption process between your application and a mobile app.
It displays an encrypted QR Code for mobile apps to scan to connect to your application. It contains the content of ```mobile.connectionCode```, which holds an encrypted string value. When decrypted, it provides information on how to connect to your application, including a one-time-use encryption key for initiating an end-to-end encryption process between your application and a mobile app.

@@ -60,9 +65,9 @@ When connected to your application, the mobile app displays a ```form``` specified in ```initData```. Also, when the user interacts with elements in the ```form```, your application can receive mobile input events through ```mobile.field``` variable, with ```mobile.field.id``` identifying the element that the user has interacted with, and with ```mobile.field.value``` holding the value that the user has entered. Actually, you can simply pass your callback function into the ```mobile.setOnchange()``` function to receive those mobile input events instead of implementing the logic for monitoring the changes in the ```mobile.field``` variable:

switch(id) {
case usernameField.id:
setUsername(value);
case usernameField.id:
setUsername(value);
break;
case passwordField.id:
setPassword(value);
case passwordField.id:
setPassword(value);
break;
case loginButton.id:
case loginButton.id:
login(username,password);

@@ -85,3 +90,3 @@ break;

```JavaScript
Username:
Username:
<input onChange = { (event) => {

@@ -98,3 +103,3 @@ setUsername(event.target.value);

```
Using this approach, you can turn a simple password-based authentication into a one-click mobile authentication or implement a password-less authentication or add an extra security layer to the existing authentication mechanism without affecting the usability of your application.

@@ -106,6 +111,6 @@

const infoField = {
type: "info",
type: "info",
value: "Test Completed"
};
const login = (username,password) => {
const login = (username,password) => {
mobile.sendInitData( {

@@ -116,3 +121,3 @@ form: {

}
});
});
}

@@ -142,3 +147,3 @@ ```

The default value of the ```type``` attribute is "text". In this case, it display either a text input or a ```textarea```, depending on the value of ```nLines```, which represents how many number of lines is visible:
The default value of the ```type``` attribute is "text". In this case, it display either a text input or a ```textarea```, depending on the value of ```nLines```, which represents how many number of lines is visible:

@@ -155,7 +160,7 @@ ```JavaScript

If the ```value``` attribute is set, it will be sent along with the form to pre-populate the the field when being displayed on the mobile screen.
## Mobile Encryption
## 🔐 Mobile Encryption
If you set the value of ```type``` of element in a ```form``` to ```"encrypt"```, the connected mobile app encrypts the ```value``` of the element and send back the result to your application:

@@ -184,3 +189,3 @@

## Customizing Form Elements & Styled Values.
## 🛠 Customizing Form Elements & Styled Values.

@@ -191,3 +196,3 @@ The value attribute in an element can also be an object containing some styling information:

const infoField = {
id: "title",
id: "title",
type: "info",

@@ -235,3 +240,3 @@ value: {

}]
}
}
}

@@ -241,5 +246,5 @@

Finally, the examples in the [website](https://globalinput.co.uk/), and tests in the [test project](https://github.com/global-input/test-global-input-app-libs) contain more information about various use cases that you can implement in your Typescript/JavaScript applications.
Finally, the examples in the [website](https://globalinput.co.uk/), and tests in the [test project](https://github.com/global-input/test-global-input-app-libs) contain more information about various use cases that you can implement in your Typescript/JavaScript applications.
## On Mobile App Side
## 📲 On Mobile App Side
Although you can use [Global Input App](https://globalinput.co.uk/) to operate on your applications, You can certainly use this module to enable your own mobile app to have the ability to operate on various device applications that are powered with this module, assuming your mobile app is implemented using one of the JavaScript-based frameworks like [React Native](https://reactnative.dev/).

@@ -264,4 +269,50 @@

mobileConnector.sendValue(initData.form.fields[0].id, username);
}
}
```
There are two input parameters required for calling ```mobileConnector.sendValue()``` function: the first one identifies the target element that the value is being sent to, while the second parameter holds the value needs to be sent across.
## 👏 How to Contribute
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
## 🖼 Examples
- [Browser Extension][b] is the source code of the browser extension application ([chrome][chrome], [Firefox Add-on][f]).
- [Content Transfer Example][content-source] is a hello-world application. Its [online demo][content-demo] is available.
- [Game Example][content-source] is a simple mobile control application. Its [online demo][content-demo] is available.
- [Video Player Example][video-demo] shows how to achieve second-screen experience in media player applications. Its [online demo][video-demo] is available.
- [Mobile Encryption Example][encryption-source] shows how to use mobile to encrypt and decrypt data. Its [online demo][encryption-demo] is available.
- [Form Data Transfer Example][form-source] shows shows how to transfer form data between applications and a mobile app. It can be used in sign-in and sign-up operations to achieve one-click sign-up or one-click logins. Its online [online demo][form-demo] is available.
- [Send Message Example][message-source] show you can leverage the mobile secure storage to request data on-demand from the connected mobile app. Its online [online demo][message-demo] is available.
## 📄 License
Global Input Message is MIT licensed, as found in the [LICENSE][l] file.
[l]: https://github.com/global-input/global-input-react/blob/master/LICENSE
[g]: https://github.com/global-input
[b]: https://github.com/global-input/browser-extension
[f]: https://addons.mozilla.org/en-GB/firefox/addon/global-input-app/
[r]: https://github.com/global-input/global-input-react
[w]: https://globalinput.co.uk/
[chrome]: https://chrome.google.com/webstore/detail/global-input-app/hcklienddlealndjnakkagefaelhnjkp
[content-source]: https://github.com/global-input/content-transfer-example
[content-demo]: https://globalinput.co.uk/global-input-app/content-transfer
[game-demo]: https://globalinput.co.uk/global-input-app/game-example
[game-source]: https://github.com/global-input/game-control-example.
[video-demo]: https://globalinput.co.uk/global-input-app/video-player
[video-source]: https://github.com/global-input/media-player-control-example
[encryption-demo]: https://globalinput.co.uk/global-input-app/mobile-encryption
[encryption-source]: https://github.com/global-input/mobile-encryption
[form-demo]: https://globalinput.co.uk/global-input-app/form-data-transfer
[form-source]: https://github.com/global-input/transfer-form-data-example
[message-demo]: https://globalinput.co.uk/global-input-app/send-message
[message-source]: https://github.com/global-input/send-message-example

2

src/globalinput.js

@@ -226,3 +226,3 @@

console.error("SEND_FIELD:requires isConnected:" + mobileData.mobileState);
return state;
return;
}

@@ -229,0 +229,0 @@ values[index] = value;

55

src/index.js
import * as globalInput from './globalinput';
import React, { useReducer, useEffect, useRef, useMemo, useCallback } from "react";
export * from "global-input-message";
import useGlobalInputApp from './useGlobalInputApp';
export const useGlobalInputApp = (configData, dependencies) => {
const [{
connectionCode,
errorMessage,
field,
isLoading,
isReady,
isError,
isDisconnected,
isConnected,
initData,
}, dispatch] = useReducer(globalInput.reducer, globalInput.initialState);
export { useGlobalInputApp };
useEffect(() => {
globalInput.startConnect(dispatch, configData);
}, dependencies ? dependencies : []); //default connect once for the component
useEffect(() => {
if (field && globalInput.mobileData.onchange) {
globalInput.mobileData.onchange({
field,
initData,
sendInitData: globalInput.mobileData.sendInitData,
sendValue: globalInput.sendValue
});
}
}, [field]);
const ConnectQR = useCallback(({ level, size, container, children }) => {
return globalInput.displayQRCode({ level, size, container, connectionCode, isReady, isLoading, children });
}, [connectionCode, isReady, isLoading]);
return {
ConnectQR,
connectionCode,
field,
errorMessage,
isLoading,
isReady,
isError,
isDisconnected,
isConnected,
initData,
sendValue: globalInput.sendValue,
sendInitData: globalInput.mobileData.sendInitData,
disconnect: globalInput.mobileData.disconnect,
setOnchange: globalInput.setOnchange,
};
};
src/useGlobalInputApp.js
dist/global-input-react.js

Sorry, the diff of this file is too big to display

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc