nlcc-itinerary/pages/login.vue

<template>
  <div class="min-h-screen bg-gray-50 flex flex-col">
    <div class="flex-1 flex items-center justify-center px-4">
      <div class="max-w-md w-full">
      <div class="text-center mb-8">
        <NuxtLink to="/">
          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4 cursor-pointer hover:opacity-80" />
        </NuxtLink>
        <h2 class="text-3xl font-bold text-gray-900">{{ isRegistering ? 'Create Account' : 'Log In' }}</h2>
        <p class="mt-2 text-sm text-gray-600">{{ isRegistering ? 'Create a new account' : 'Sign in to your account' }}</p>
      </div>

      <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
        <form @submit.prevent="isRegistering ? handleRegister() : handleLogin()" class="space-y-6">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700">
              Username
            </label>
          <input
            id="username"
            v-model="username"
            type="text"
            required
            autocapitalize="none"
            autocomplete="username"
            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
          />
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700">
              Password
            </label>
            <input
              id="password"
              v-model="password"
              type="password"
              required
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            />
            
            <!-- Password Requirements (only show when registering) -->
            <div v-if="isRegistering && password.length > 0" class="mt-2 space-y-1 text-xs">
              <div :class="passwordRequirements.minLength ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.minLength">✓</span>
                <span v-else>○</span>
                At least 8 characters
              </div>
              <div :class="passwordRequirements.hasUppercase ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasUppercase">✓</span>
                <span v-else>○</span>
                One uppercase letter
              </div>
              <div :class="passwordRequirements.hasLowercase ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasLowercase">✓</span>
                <span v-else>○</span>
                One lowercase letter
              </div>
              <div :class="passwordRequirements.hasNumberOrSymbol ? 'text-green-600' : 'text-gray-500'">
                <span v-if="passwordRequirements.hasNumberOrSymbol">✓</span>
                <span v-else>○</span>
                One number or symbol
              </div>
            </div>
          </div>

          <div v-if="error" class="text-red-600 text-sm">
            {{ error }}
          </div>

          <button
            type="submit"
            :disabled="loading"
            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
          >
            {{ loading ? (isRegistering ? 'Creating account...' : 'Signing in...') : (isRegistering ? 'Create Account' : 'Sign In') }}
          </button>
        </form>

        <div class="mt-6 text-center space-y-3">
          <button
            @click="toggleMode"
            class="text-sm text-blue-600 hover:text-blue-700 font-medium"
          >
            {{ isRegistering ? 'Already have an account? Sign in' : "Don't have an account? Create one" }}
          </button>
          <div>
            <NuxtLink to="/" class="text-sm text-gray-600 hover:text-gray-700">
              ← Back to Sermons
            </NuxtLink>
          </div>
        </div>
      </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup lang="ts">
const username = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const isRegistering = ref(false)

const passwordRequirements = computed(() => ({
  minLength: password.value.length >= 8,
  hasUppercase: /[A-Z]/.test(password.value),
  hasLowercase: /[a-z]/.test(password.value),
  hasNumberOrSymbol: /[0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password.value)
}))

const isPasswordValid = computed(() => {
  return passwordRequirements.value.minLength &&
         passwordRequirements.value.hasUppercase &&
         passwordRequirements.value.hasLowercase &&
         passwordRequirements.value.hasNumberOrSymbol
})

function toggleMode() {
  isRegistering.value = !isRegistering.value
  error.value = ''
  username.value = ''
  password.value = ''
}

async function handleLogin() {
  error.value = ''
  loading.value = true

  try {
    const response = await $fetch('/api/auth/login', {
      method: 'POST',
      body: {
        username: username.value,
        password: password.value
      }
    })

    if (response.success) {
      await navigateTo('/')
    }
  } catch (e: any) {
    error.value = e.data?.message || 'Invalid credentials'
  } finally {
    loading.value = false
  }
}

async function handleRegister() {
  error.value = ''
  
  // Validate password requirements
  if (!isPasswordValid.value) {
    error.value = 'Please meet all password requirements'
    return
  }
  
  loading.value = true

  try {
    const response = await $fetch('/api/auth/register', {
      method: 'POST',
      body: {
        username: username.value,
        password: password.value
      }
    })

    if (response.success) {
      await navigateTo('/')
    }
  } catch (e: any) {
    error.value = e.data?.message || 'Registration failed'
  } finally {
    loading.value = false
  }
}
</script>