Sources
Develop a login page with the following features:
-
Core Components:
- A form for user login.
- An accompanying image to enhance the visual appeal.
-
Theme Switching:
- Implement a theme switch to toggle between light and dark modes.
-
Login Style Selection:
- Provide options to choose from four distinct login styles, specifically:
- SHADCN login-01
- SHADCN login-02
- SHADCN login-03
- SHADCN login-04
- Provide options to choose from four distinct login styles, specifically:
-
Customizable Background:
- Enable users to set the background using:
- A URL for an online image.
- An image uploaded from their computer.
- Enable users to set the background using:
-
Customizable Footer:
- Allow customization of the footer text.
- Allow customization of the logo displayed in the footer.
-
Edit/Preview Mode:
- Incorporate an edit/preview mode to allow users to modify and preview the login page in real-time.
I'll create a comprehensive login page with all the features you requested, including theme switching, style selection, customizable backgrounds, footer customization, and an edit/preview mode.
I've created a comprehensive login page with all the features you requested. Here's what it includes:
Core Components:
- A login form with email, password, and social login options
- An accompanying image that enhances visual appeal
Theme Switching:
- A theme toggle in the top-right corner to switch between light and dark modes
- Automatic theme detection based on system preferences
Login Style Selection:
Four distinct SHADCN login styles to choose from:
- Style 01: Side-by-side layout with form and image
- Style 02: Compact card with login form
- Style 03: Tabbed interface with login and registration
- Style 04: Modern layout with testimonial section
Customizable Background:
Options to set the background using:
- A color picker for solid colors
- A URL input for online images
- A file upload for images from your computer
Customizable Footer:
- Text input to customize the footer text
- Logo upload functionality
Edit/Preview Mode:
- Toggle between edit and preview modes
- Edit panel with tabs for style, background, and footer settings
- Preview mode shows the login page as it would appear to users
How to Use
- When you first load the page, you'll be in edit mode with the settings panel visible.
- Use the tabs in the settings panel to customize different aspects of the login page.
- Click the eye icon in the top-right corner to toggle between edit and preview modes.
- The theme toggle (sun/moon icon) lets you switch between light and dark modes.
The login page is fully responsive and works on all device sizes. The customization options are intuitive and allow for a high degree of personalization.
Enhance the login page with the following features:
-
login-01 and login-02 Enhancements:
- Enable configuration of a secondary image or video URL for both login-01 and login-02. The default source currently be '/placeholder.svg'.
-
Save Button:
- Integrate a 'Save' button that triggers the
save(config)prop function. This function should handle saving the login configuration to the backend. including what user selected like logo/background url/file, text, copyright text/link
- Integrate a 'Save' button that triggers the
-
Logo Integration:
- Incorporate an optional logo above the 'Welcome back' text in all login form styles.
- Center the logo horizontally.
- Ensure the logo size is appropriate for desktop, tablet, and mobile devices, maintaining visual consistency across different screen sizes.