Member Hub Technical Overview

The MyNATCA Member Hub is a Vue 3 / Vuetify 3 frontend application that provides members with a modern, self-service portal for managing their NATCA membership, accessing resources, and interacting with the MyNATCA ecosystem.

Architecture

The Hub is built with:

Vue 3: Progressive JavaScript framework with Composition API
Vuetify 3: Material Design component framework
Vite: Fast build tool and dev server
TypeScript: Type-safe development
Pinia: State management
Vue Router: Client-side routing

Integration Points

The Hub integrates with:

Platform API: Authentication, session management, and API proxying (localhost:1300)
Auth0: OAuth 2.0 authentication for secure login
Supabase: Direct access to member data via RLS policies
Rackspace Email: Self-service @natca.net email management

Key Features

Dashboard

The Hub dashboard provides a personalized member experience with:

Welcome Card: Personalized greeting and quick stats
Rackspace Email Card: Self-service @natca.net email management
Member Profile: View and update member information
Quick Links: Access to important resources

Rackspace Email Management (New Feature)

Members can now manage their professional @natca.net email addresses directly from the Hub dashboard:

Capabilities:

Check availability of email format options (firstname@natca.net, firstname.lastname@natca.net)
Create new @natca.net email accounts with one-click provisioning
Reset passwords for existing email accounts
View current email address
Receive one-time passwords securely with copy-to-clipboard functionality

Eligibility:

Member Type ID: 6 (Professional Members)
Status: Active or Retired

User Experience:

Compact dashboard card design matching existing UI patterns
Confirmation modals before destructive actions
Real-time availability checking
Automatic member profile refresh after email creation
Clear error handling and loading states
Password security warnings and best practices

See Rackspace Email User Guide for detailed usage instructions.

Authentication

OAuth 2.0 flow via Auth0
Session-based authentication through Platform proxy
Automatic session refresh
Secure cookie handling
useAuth0 composable for authentication state

Member Profile

View member details
Update contact information
Link/unlink Discord account
View membership history

Configuration

Development Server

The Hub runs on port 1302 in development:

# Development server
npm run dev
# Runs on http://localhost:1302
 
# Preview production build
npm run preview
# Runs on http://localhost:1302

Important: The port was changed from 1301 to 1302 to avoid conflicts with other MyNATCA ecosystem services.

Environment Variables

# Vite environment configuration (.env.local)
VITE_AUTH0_DOMAIN=natca-dev.us.auth0.com
VITE_AUTH0_CLIENT_ID=your_client_id
VITE_AUTH0_AUDIENCE=https://platform.natca.org
VITE_AUTH0_REDIRECT_URI=http://localhost:1302/callback
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key
VITE_API_URL=http://localhost:1300

Vite Configuration

// vite.config.ts
export default defineConfig({
  server: {
    port: 1302, // Changed from 1301
    proxy: {
      '/api': {
        target: 'http://localhost:1300',
        changeOrigin: true,
        secure: false,
        credentials: 'include'
      }
    }
  }
})

API Integration

Platform Proxy

All API calls route through the Vite dev proxy to Platform (localhost:1300):

// API call example
const response = await fetch('/api/member/12345', {
  credentials: 'include' // Include session cookies
});

Rackspace Email Service

New TypeScript service for Rackspace email operations:

// /src/services/rackspaceEmailService.ts
import { rackspaceEmailService } from '@/services/rackspaceEmailService';
 
// Check email availability
const availability = await rackspaceEmailService.checkAvailability('12345');
 
// Create email account
const result = await rackspaceEmailService.createEmail('12345', 'jdoss');
 
// Reset password
const reset = await rackspaceEmailService.resetPassword('12345');

Methods:

checkAvailability(memberNumber): Check which email formats are available
createEmail(memberNumber, emailFormat): Create new @natca.net email
resetPassword(memberNumber): Reset existing email password
findAvailableFormat(): Find first available email option
generateIncrementedOptions(): Generate numbered variants (jdoss2, jdoss3, etc.)

All methods use session-based authentication with credentials: 'include'.

Directory Structure

hub/
├── src/
│   ├── components/
│   │   └── dashboard/
│   │       ├── WelcomeCard.vue
│   │       └── RackspaceEmailCard.vue   # New: Email management
│   ├── services/
│   │   └── rackspaceEmailService.ts     # New: Rackspace API client
│   ├── stores/
│   │   ├── auth.ts                      # Auth state (Pinia)
│   │   └── member.ts                    # Member state (Pinia)
│   ├── pages/
│   │   ├── index.vue                    # Dashboard
│   │   ├── login.vue                    # Login page
│   │   └── callback.vue                 # Auth callback
│   ├── composables/
│   │   └── useAuth0.ts                  # Auth0 composable
│   └── router/
│       └── index.ts                     # Vue Router config
├── vite.config.ts                        # Vite configuration (port 1302)
└── package.json                          # Dependencies and scripts

Component Architecture

Dashboard Layout

<!-- /src/pages/index.vue -->
<template>
  <v-container fluid>
    <v-row>
      <!-- Left Column -->
      <v-col cols="12" md="4">
        <WelcomeCard />
        <RackspaceEmailCard />  <!-- New component -->
      </v-col>
 
      <!-- Center Column -->
      <v-col cols="12" md="4">
        <!-- Additional cards -->
      </v-col>
 
      <!-- Right Column -->
      <v-col cols="12" md="4">
        <!-- Additional cards -->
      </v-col>
    </v-row>
  </v-container>
</template>

RackspaceEmailCard Component

Location: /src/components/dashboard/RackspaceEmailCard.vue

Features:

Eligibility checking (membertypeid=6, Active/Retired status)
Email availability lookup
Visual indicators (green checkmark for available, red X for taken)
Create email with confirmation modal
Reset password with confirmation modal
One-time password display with copy button
Error handling and loading states
Matches existing Vuetify 3 card design patterns

Icons Used:

mdi-email: Email display
mdi-email-check: Availability check
mdi-email-plus: Create email
mdi-lock-reset: Reset password
mdi-check-circle: Available option
mdi-close-circle: Taken option
mdi-content-copy: Copy to clipboard

State Management

Member Store

// /src/stores/member.ts (Pinia)
export const useMemberStore = defineStore('member', {
  state: () => ({
    memberData: null,
    loading: false,
    error: null
  }),
 
  actions: {
    async fetchMember(memberNumber: string) {
      // Fetch member data from Platform API
    },
 
    async refreshMember() {
      // Refresh after email creation/update
    }
  }
});

Auth Store

// /src/stores/auth.ts (Pinia)
export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: false,
    user: null,
    memberNumber: null
  })
});

Workflows

Email Creation Flow

Member logs into Hub
Dashboard loads and displays RackspaceEmailCard
Card checks eligibility (membertypeid=6, Active/Retired)
Member clicks "Check Availability"
Hub calls Platform /api/rackspace/check-availability
Platform proxies to Rackspace API
Hub displays available email formats with visual indicators
Member clicks available option
Confirmation modal appears
Member confirms selection
Hub calls Platform /api/rackspace/create-email
Email created in Rackspace
One-time password displayed in warning alert with copy button
Member store refreshes to update profile
Email address now displayed in card

Password Reset Flow

Member has existing @natca.net email (shown in card)
Member clicks "Reset Password" button
Confirmation modal appears with warning
Member confirms reset
Hub calls Platform /api/rackspace/reset-password
Platform proxies to Rackspace API
New one-time password displayed in warning alert
Member copies password and updates their email client

Build and Deployment

Development Build

npm run dev
# Runs on http://localhost:1302

Production Build

npm run build
# Output: dist/
 
npm run preview
# Preview production build on http://localhost:1302

Docker Deployment

# Dockerfile
FROM node:18-alpine as build
 
WORKDIR /app
COPY package*.json ./
RUN npm ci
 
COPY . .
RUN npm run build
 
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
 
CMD ["nginx", "-g", "daemon off;"]

Security Considerations

Session-Based Authentication

All API calls include credentials: 'include' for session cookies
HttpOnly cookies prevent XSS attacks
Secure flag ensures HTTPS-only transmission in production
SameSite protection against CSRF

Password Security

One-time passwords displayed only once after creation/reset
Warning alerts emphasize password security
Passwords never stored in Hub state or localStorage
Copy-to-clipboard functionality for secure password handling

API Security

All Rackspace API calls proxied through Platform
No direct Rackspace API credentials in Hub
Session authentication required for all endpoints
CORS configuration protects against unauthorized origins

Monitoring and Observability

Error Handling

try {
  const result = await rackspaceEmailService.createEmail(memberNumber, format);
  // Handle success
} catch (error) {
  if (error.message.includes('unauthorized')) {
    // Redirect to login
  } else if (error.message.includes('already exists')) {
    // Show user-friendly error
  } else {
    // Log error and show generic message
  }
}

Loading States

All async operations show loading indicators:

Button loading spinners
Skeleton loaders for card content
Progress indicators for API calls