electron-form-autofill

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: '[e-mail]', // ← label for autofill dropdown
      form: {
        username: '[e-mail]', // ← input name with the value to be filled
        password: '12341234', // ← add as many entries as inputs
      },
    },

    ...
  ],
};

const handleSubmit = () => {
  // ... 

  const inputValue = '[e-mail]';
  const findBy = {key: 'username', value: '[e-mail]'};
  const label = '[e-mail]';
  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>
);