[Feature]: Dashboard Cleanup, Email Delivery Enhancement, and Auth UX Improvements

[hasnaintypes]

Problem Statement

The application currently has several issues that need to be addressed for production readiness:

1. Todo Feature Cleanup: The codebase contains todo-related components and backend logic that were only used for testing purposes. These are cluttering the codebase and should be removed.

2. Dashboard Needs Redesign: The current dashboard page only shows the todo list (which is being removed). We need a proper landing page that welcomes users and provides clear navigation to key features like Settings.

3. Email Delivery Issues: Currently using Resend's test email address (onboarding@resend.dev), which doesn't deliver emails in production. We need a fallback mechanism using SMTP to ensure reliable email delivery for authentication flows (verification, password reset, magic links, etc.).

4. Password Field UX: All authentication forms (sign in, sign up, password reset) lack password visibility toggles, making it difficult for users to verify their input, especially on mobile devices.

These issues are blocking production deployment and negatively impacting user experience.

Proposed Solution

Task 1: Remove All Todo-Related Code

Files to Delete:

• src/components/todos/TodoList.tsx
• src/components/todos/TodoItem.tsx
• src/components/todos/TodoForm.tsx
• src/components/todos/mutations.ts
• convex/todos/schema.ts
• convex/todos/queries.ts
• convex/todos/mutations.ts

Files to Update:

• convex/schema.ts - Remove todosTables import and spread
• src/app/(auth)/dashboard/page.tsx - Remove TodoList references

Verification Steps:

• Search codebase for remaining "todo" references
• Ensure application builds without errors after cleanup

---

Task 2: Create Proper Dashboard Landing Page

Location: src/app/(auth)/dashboard/page.tsx

Implementation Details:

• Retain existing AppHeader component for navigation consistency
• Add personalized welcome message displaying user's name
• Create responsive grid/card layout with navigation cards:
  • Settings - Links to /settings page
  • Projects (placeholder for future feature)
  • Team (placeholder for future feature)
  • Analytics (placeholder for future feature)
• Use existing UI components from src/components/ui/ (Card, Button, etc.)
• Maintain mobile-responsive design with Tailwind CSS

Design Philosophy:

• Minimal and professional
• Clear navigation hierarchy
• Consistent with existing UI patterns

---

Task 3: Implement SMTP Email Fallback with Nodemailer

Current State:

• Using @convex-dev/resend component with test email
• Email configuration in convex/emails/email.tsx
• Four email functions need updating:
  • sendEmailVerification()
  • sendOTPVerification()
  • sendMagicLink()
  • sendResetPassword()

Implementation Approach:

1. Install Dependencies:

   npm install nodemailer
   npm install --save-dev @types/nodemailer

2. Create Fallback Logic:

   • Develop sendEmailWithFallback() wrapper function
   • Primary: Attempt Resend delivery
   • Fallback: Use Nodemailer with SMTP on Resend failure
   • Add comprehensive error handling and logging

3. SMTP Configuration (Gmail):

   • Host: smtp.gmail.com
   • Port: 587 (TLS) or 465 (SSL)
   • Support App Password authentication
   • Use environment variables for credentials

Required Environment Variables:

# SMTP Fallback Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_SECURE=false
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password
SMTP_FROM_NAME=Sendable AI
SMTP_FROM_EMAIL=noreply@yourdomain.com

Testing Requirements:

• Verify both Resend and SMTP delivery paths
• Confirm fallback triggers on Resend failure
• Ensure all email templates render correctly with both methods

---

Task 4: Add Password Visibility Toggles

Files to Update:

• src/components/auth/SignInForm.tsx - 1 password field
• src/components/auth/SignUpForm.tsx - 2 password fields
• src/components/auth/ResetPassword.tsx - 2 password fields

Implementation Pattern:

const [showPassword, setShowPassword] = useState(false);

<div className="relative">
  <Input
    type={showPassword ? "text" : "password"}
    // ... other props
  />
  <button
    type="button"
    onClick={() => setShowPassword(!showPassword)}
    disabled={loading}
    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:opacity-50"
    aria-label={showPassword ? "Hide password" : "Show password"}
  >
    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
  </button>
</div>

Requirements:

• Import Eye and EyeOff icons from lucide-react
• Use separate state for each password field (e.g., showPassword, showConfirmPassword)
• Add proper aria-label for accessibility
• Disable toggle when form is in loading state
• Maintain consistent styling across all forms

Optional Enhancement:

• Consider creating a reusable PasswordInput component if implementing toggles becomes repetitive

---

Alternatives Considered

For Email Delivery:

• Alternative 1: Use only Resend with production API key (Rejected - requires domain verification and DNS setup)
• Alternative 2: Use only SMTP/Nodemailer (Rejected - Resend provides better deliverability when properly configured)
• Chosen Solution: Hybrid approach with Resend primary and SMTP fallback provides best reliability

For Dashboard Design:

• Alternative 1: Create complex dashboard with analytics widgets (Rejected - over-engineering at this stage)
• Chosen Solution: Simple navigation hub that can be expanded later

For Password Toggle:

• Alternative 1: Use a dedicated password input library (Rejected - adds unnecessary dependency)
• Chosen Solution: Implement natively with Lucide icons already in use

Feature Category

Authentication & Security

Priority

High - Significantly impacts usability

Use Case

As a developer

I want to clean up testing code and have a production-ready codebase
So that the application can be deployed to production without unnecessary bloat or debug features

As an end user

I want to receive authentication emails reliably
So that I can verify my account, reset my password, and access the application

As an end user

I want to see/hide my password while typing
So that I can verify I've entered it correctly without security concerns

As an authenticated user

I want a clear dashboard with navigation
So that I can easily access different features of the application

Mockups/Examples

No mockups needed - implementation should follow existing design patterns in the codebase.

Additional Context

For Dashboard:

• Reuse components from src/components/ui/
• Follow existing layout patterns
• Keep complexity low for maintainability

For SMTP Implementation:

• Convex runs in serverless environment - Nodemailer is compatible
• Use Convex action context properly for environment variables
• Implement retry logic for resilience
• Log all email sending attempts for debugging

For Password Toggle:

• Ensure keyboard navigation works properly
• Test with screen readers for accessibility
• Consider making sticky (remember preference) in future iteration

Dependencies:

• nodemailer (new) - SMTP email sending
• @types/nodemailer (new, dev) - TypeScript types
• lucide-react (existing) - Icons for password toggle

Contribution

• I would like to work on this feature

Checklist

• I have searched for similar feature requests before creating this one
• I have provided all the information requested above
• This feature aligns with the project's goals

[github-actions]

Welcome to Sendable.ai!

Thank you for opening your first issue!

We appreciate you taking the time to contribute to the project. A maintainer will review your issue soon and provide feedback.

In the meantime, you might want to:

• Check our Contributing Guide for more information
• Join our Discussions to chat with the community
• Review the README for project overview and setup instructions

Happy coding!

[M-Subhan-Ali]

Okay, I will start working on it and make a PR after completing the task.