on the pop on this page, create 2 tabs:
- Azure AD (add info icon- for Microsoft Azure goverened Email clients)
- IMAP/SMTP (add info icon- for other email client and public emails domains)
if user selects Azure AD, then the current form should be visible. if user select IMAP/SMTP,
then the form should contain, 2 section one to add IMAP email clients and SMTP email clients, to add a email client, user has to click on add, then select the Email client from dropdown (Outlook, GMail, Yahoo, Zoho) then select server URL and port (this will be pre-filled based on the dropdown selcttion)
the same thing will happen for the SMTP list as well
create a design for this
I'll create a tabbed interface for your email configuration modal with the two requested tabs and appropriate functionality for each.
Features Implemented
Tabbed Interface:
- Two tabs: "Azure AD" and "IMAP/SMTP"
- Each tab has an info icon with a tooltip explaining its purpose
Azure AD Tab:
- Shows the current form with Azure ID field
- Includes the Mapping toggle switch
- Has the "Add Domain" button for APSD Launch
IMAP/SMTP Tab:
- Split into two sections: IMAP Email Clients and SMTP Email Clients
- Each section has an "Add" button to add new email clients
When adding a client, users can:
- Select an email provider from a dropdown (Outlook, Gmail, Yahoo, Zoho)
- See the server URL and port auto-populate based on the selection
- Users can remove email clients with the X button
Responsive Design:
- The modal is centered and properly sized
- Form elements are arranged in a grid for better readability
- Empty states are handled with helpful messages
The implementation uses shadcn/ui components for a clean, modern interface that matches the design in the screenshot. The functionality is fully implemented with React state management to handle the form data and interactions.
on the add email clients section:
- add label for the field (email client, Server URL and PORT)
- If a value is not present in the dropdown, there should be an option to enter new email client)
I'll update the email configuration modal to add labels for each field and support custom email client configurations.
Updates Made
I've enhanced the email configuration modal with the following improvements:
Added Field Labels:
- Added clear labels for each column: "Email Client", "Server URL", and "PORT"
- Labels appear as column headers above the input fields for better readability
Added Custom Email Client Option:
- Added a "Custom" option to the dropdown menu for both IMAP and SMTP clients
When "Custom" is selected:
- The Server URL and PORT fields become editable
- Users can enter their own values instead of using pre-configured settings
Improved Data Model:
- Added an
isCustomflag to track whether a client is using custom settings - Added functions to update server and port values for custom email clients
- Added an
These changes make the form more user-friendly and flexible, allowing users to either select from predefined email providers or configure custom email clients when needed.