Member Application System Implementation

[jeet-dekivadia]

Replace the current direct user registration system with a comprehensive member application workflow. Users will submit applications with basic information and organization code, then await admin approval before gaining platform access.

🎯 Acceptance Criteria

• New application status field added to User model with proper enum values
• Application submission form replaces direct registration form
• Pending applications display "Approval Awaiting" status message
• Restricted access control implemented for pending members
• Database migration script for existing users (set to "approved")
• New API endpoints for application submission and status management
• Proper error handling and validation throughout application flow

📊 Database Schema Implementation

Update User Model (/server/mongodb/models/User/index.ts):

// Add these fields to existing userSchema
applicationStatus: {
  type: String,
  enum: ["pending", "approved", "rejected"],
  default: "pending",
  required: true
},
appliedAt: { 
  type: Date, 
  default: Date.now,
  required: true 
},
approvedAt: { 
  type: Date,
  sparse: true 
},
approvedBy: { 
  type: Schema.Types.ObjectId, 
  ref: "User",
  sparse: true 
},
rejectionReason: { 
  type: String,
  maxlength: 500 
},
rejectedAt: {
  type: Date,
  sparse: true
}

🔧 Backend Implementation Details

1. Database Migration Script:

// /server/mongodb/migrations/add-application-status.js
// Set all existing users to "approved" status with current timestamp
db.users.updateMany(
  { applicationStatus: { $exists: false } },
  { 
    $set: { 
      applicationStatus: "approved",
      approvedAt: new Date()
    }
  }
);

2. User Creation Logic Updates:

• Modify /server/actions/users_new.ts → createUserFromCredentials()
• Set new users to applicationStatus: "pending" by default
• Remove automatic organization assignment for new users
• Add application submission timestamp tracking

3. New API Endpoints:

Application Submission: /src/pages/api/applications/submit.ts

POST /api/applications/submit
Body: {
  firstName, lastName, email, phoneNumber, organizationCode
}
Response: { success: boolean, applicationId: string, message: string }

Application Status Management: /src/pages/api/applications/[id]/status.ts

PUT /api/applications/[id]/status
Body: { status: "approved" | "rejected", reason?: string }
Response: { success: boolean, updatedUser: User }

🎨 Frontend Implementation Details

1. Application Form Component:
Create /src/screens/Auth/ApplicationForm.jsx:

// Replace existing registration form
// Remove password fields (authentication handled post-approval)
// Add organization code validation
// Include application-specific messaging and instructions
// Implement proper form validation and error handling
// Submit to new application endpoint

2. Pending Status Page:
Create /src/screens/Members/PendingApproval.jsx:

// Display "Application Under Review" message
// Show application submission date and reference ID
// Provide organization contact information
// Include estimated review timeline
// Add FAQ section for common questions

3. Application Rejected Page:
Create /src/screens/Members/ApplicationRejected.jsx:

// Show rejection reason (if provided)
// Provide reapplication process instructions
// Include contact information for appeals
// Clear call-to-action for next steps

4. Access Control Middleware:
Create /src/middleware/checkApplicationStatus.js:

// Redirect pending users to waiting page
// Block access to events and main application features  
// Allow access to profile and basic account management

5. Main Layout Integration:
Update /src/components/Layout.jsx:

// Add conditional rendering based on application status
if (user.applicationStatus === "pending") {
  return <PendingApprovalPage />;
}
if (user.applicationStatus === "rejected") {
  return <ApplicationRejectedPage />;
}
// Continue with normal authenticated app flow for approved users

📁 Files to Create/Modify

New Files:

• /src/screens/Auth/ApplicationForm.jsx - Main application submission form
• /src/screens/Members/PendingApproval.jsx - Pending status display page
• /src/screens/Members/ApplicationRejected.jsx - Rejection status page
• /src/pages/api/applications/submit.ts - Application submission endpoint
• /src/pages/api/applications/[id]/status.ts - Status update endpoint
• /server/mongodb/migrations/add-application-status.js - Database migration
• /src/middleware/checkApplicationStatus.js - Access control middleware

Modified Files:

• /server/mongodb/models/User/index.ts - Add application status fields
• /server/actions/users_new.ts - Update user creation logic
• /src/screens/Auth/AuthPage.jsx - Replace registration with application form
• /src/pages/api/users/index.ts - Update user creation endpoint
• /src/components/Layout.jsx - Add application status routing

🧪 Comprehensive Testing Requirements

• New applications create users with "pending" status
• Pending users see appropriate waiting message with clear instructions
• Pending users cannot access events, admin features, or restricted content
• Application form validates all required fields with helpful error messages
• Database migration runs successfully without data loss
• Existing approved users maintain full platform access
• Organization code validation works correctly
• Application status updates propagate correctly across UI
• Error states are handled gracefully with user-friendly messages

🔗 Dependencies & Integration Points

• Depends on: User authentication system
• Integrates with: Organization management system
• Prerequisites: Database migration must run before deployment
• Follow-up: Admin approval portal (Ticket Remove Skills and Interests #3)

Estimated Effort: 4-5 days
Priority: High
Type: Backend + Frontend Feature