Sunday, 4 May 2025

#5 Prompt for the Login & Authentication

 Absolutely — here are 2 separate Builder.io prompts for you to copy-paste and get things rolling!


Prompt 1: Build Login + Signup UI Page in Builder.io

Create a modern, responsive authentication page with two tabs:
- First tab: "Login"
  - Fields: Email input, Password input
  - A blue "Submit" button
  - A link: "Forgot Password?"
  
- Second tab: "Sign Up"
  - Fields: Name input, Email input, Password input, Confirm Password input
  - A green "Submit" button
  - A link: "Already have an account? Login here"

- Use soft rounded corners, shadows, and a light color background
- Center the form vertically and horizontally
- Add spacing and padding between form fields
- Make the form mobile responsive

Prompt 2: Add Form Action to Authenticate with PostgreSQL

For the Login form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/login"
- Send form fields "email" and "password" as JSON payload

For the Sign Up form:
- On Submit: Make an HTTP POST request to "http://localhost:3000/signup"
- Send form fields "name", "email", and "password" as JSON payload

Display success message on successful response
Display error message if login fails

Bonus: Add Success & Error Messages Prompt

Add dynamic text below the Submit button to show:
- "Login successful!" in green if API response is success
- "Invalid email or password" in red if API response is error

These prompts will guide Builder.io AI to:

  • ✅ Build the Login/Signup UI

  • ✅ Wire up API requests to your Node.js + PostgreSQL backend

  • ✅ Show feedback messages to users


 👇

No comments:

Post a Comment

Builder.io Tutorials for IMMBiz Soft Solutions

Please 🚶🚶🚶🚶🚶thru and Practice:  #1    https://learn-gemini2.blogspot.com/2025/05/bulderio-basics-tutorial.html #2  https://learn-gemini...