0.1.1 • Published 2 years ago
electron-form-autofill v0.1.1
Form autofill for React and Electron
Usage
Electron
// whitelist following constants at ipc bridge
const {
FORM_AUTOFILL_FETCH_CREDENTIALS,
FORM_AUTOFILL_REQUEST_CREDENTIALS,
FORM_AUTOFILL_STORE_CREDENTIALS,
} = require('library/electron/constants');
const {requestCredentials} = require('library/electron/ProviderSafeStorage');
// activate credentials storage module
ipcMain.on(FORM_AUTOFILL_REQUEST_CREDENTIALS, requestCredentials(browserWindow, safeStorage));
React
/**
* Internal data schema
*/
const suggestions = {
'authentication': [ // ← form name
{
label: 'john@gmail.com', // ← label for autofill dropdown
form: {
username: 'john@gmail.com', // ← input name with the value to be filled
password: '12341234', // ← add as many entries as inputs
},
},
...
],
};
const handleSubmit = () => {
// ...
const inputValue = 'john@gmail.com';
const findBy = {key: 'username', value: 'john@gmail.com'};
const label = 'john@gmail.com';
FormDelegate.setDropdownSuggestion({formName: 'authentication', inputName: 'username'}, inputValue, findBy, label);
}
const AuthorizationForm = () => (
<FormWrapper name="authentication">
<form onSubmit={handleSubmit}>
<InputWrapper>
<TextInput name="username" placeholder="username" />
</InputWrapper>
<InputWrapper>
<TextInput name="password" placeholder="password" />
</InputWrapper>
</form>
</FormWrapper>
);