Add Fuel Provider
This interface is a modal window used to associate a new fuel provider with the system. It is intended to be a lightweight, single-action form with a minimal number of fields for quick entry.
Form Field Section
| Field Label | Input Type | Required | Description |
|---|---|---|---|
| Select fuel provider | Dropdown (select) | ✅ Yes | A required field where users choose from a predefined list of fuel providers. |
This is a continuation of the Add fuel provider modal, triggered once a provider has been selected in the initial dropdown. It prompts the user to enter secure and essential integration data to establish communication with the provider’s services.
Form Fields (Detailed)
| Field Label | Type | Required | Description |
|---|---|---|---|
| Username | Text input | ✅ Yes | Provider-issued username for authentication. Typically predefined by the provider. |
| Password | Password input (masked) | ✅ Yes | Used for secure login; includes a visibility toggle (eye icon) to reveal/hide the password. |
| API Key | Text input | ✅ Yes | A unique token used for programmatic access. This field is highlighted in light red, implying invalid or missing validation. |
| Customer Reference Numbers | Text input | ✅ Yes | Field where one or multiple reference IDs can be provided. Placeholder: Enter |
Visual Cues:
- Fields outlined in light red indicate validation issues (e.g., required but not filled correctly).
- Input styles are clean, modern, and use light backgrounds to indicate editable fields.
Validation & User Feedback
| Behavior | Description |
|---|---|
| Incomplete required fields | Input borders turn red; submission is blocked. |
| Correct inputs | Fields remain outlined in default colors; form can be submitted. |
| Toggle password visibility | Clicking the eye icon reveals/hides the password content. |
| Modal dismiss | Clicking the × button cancels the operation (no auto-save implied). |