Prompt: Creating Login Page

Copy and paste this prompt into your AI assistant to create a login page with Beag.io authentication. Replace [YOUR_APP_ID] and [YOUR_APP_URL] with your actual values.

The Prompt

Create a Beag API Login page for this SaaS application:

**My Beag App ID:** [YOUR_APP_ID]
**Redirect URL after login:** [YOUR_APP_URL]

1. Create a login page in the appropriate location based on the framework:
   - Static HTML: login.html
   - React (Vite/CRA): src/pages/Login.jsx or src/Login.jsx
   - Next.js (pages): pages/login.tsx
   - Next.js (app router): app/login/page.tsx
   - Vue: src/views/Login.vue or src/pages/Login.vue
   - Nuxt: pages/login.vue
   - SvelteKit: src/routes/login/+page.svelte
   - Angular: generate login component
   - Template engines: login.ejs, login.hbs, etc.

2. The login page needs:
   - Email form with: email input, error display, submit button to send OTP
   - OTP form (hidden initially) with: email display, OTP input, error
     display, submit button to verify
   - Clean, professional styling matching the existing app design

3. Implement the login logic using this reference code, adapting it to
   the framework's patterns (e.g., useState for React, ref for Vue, etc.):

```javascript
const APP_ID = '[YOUR_APP_ID]';
let userEmail = '';

async function sendOTP() {
  const email = document.getElementById('email').value.trim();
  const errorEl = document.getElementById('email-error');

  if (!email) {
    errorEl.textContent = 'Please enter your email';
    return;
  }

  try {
    const response = await fetch(
      'https://my-saas-basic-api-d5e3hpgdf0gnh2em.eastus-01.azurewebsites.net/auth/api/login',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          my_saas_id: APP_ID,
          email: email
        })
      }
    );

    const result = await response.json();

    if (result.status === 'success') {
      userEmail = email;
      document.getElementById('user-email').textContent = email;
      document.getElementById('email-form').style.display = 'none';
      document.getElementById('otp-form').style.display = 'block';
    } else {
      errorEl.textContent = result.message;
    }
  } catch (error) {
    console.error('Error:', error);
    errorEl.textContent = 'An error occurred. Please try again.';
  }
}

async function verifyOTP() {
  const otp = document.getElementById('otp').value.trim();
  const errorEl = document.getElementById('otp-error');

  if (!otp) {
    errorEl.textContent = 'Please enter the verification code';
    return;
  }

  try {
    const response = await fetch(
      'https://my-saas-basic-api-d5e3hpgdf0gnh2em.eastus-01.azurewebsites.net/auth/api/verify-otp',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          my_saas_id: APP_ID,
          email: userEmail,
          otp: otp
        })
      }
    );

    const result = await response.json();

    if (result.status === 'success') {
      const { token_data } = result;
      Object.keys(token_data).forEach(key => {
        localStorage.setItem(key, token_data[key]);
      });
      window.location.href = '[YOUR_APP_URL]';
    } else {
      errorEl.textContent = result.message;
    }
  } catch (error) {
    console.error('Error:', error);
    errorEl.textContent = 'An error occurred. Please try again.';
  }
}
```

4. Framework-specific adaptations:
   - React: Use useState for email, userEmail, error messages, and
     showOTPForm state
   - Vue: Use ref() or reactive() for state management
   - Svelte: Use let variables with reactivity
   - Next.js/Nuxt: Use client-side rendering for the login logic
     ('use client' directive if needed)
   - Angular: Use component properties and [(ngModel)] for two-way binding

5. Show me the created files.