---
phase: 02-provider-registration-auth
plan: 02
subsystem: authentication
tags: [pages, login, registration, ui]
requires: [02-01]
provides: [login-page, combined-auth-page]
affects: [02-04]
tech-stack:
  added: []
  patterns: [wp-insert-post, wp-login-form, inline-css, responsive-design]
key-files:
  created: []
  modified: [includes/class-pages.php]
key-decisions:
  - Combined login and registration on single page instead of separate pages
  - Inline CSS for styling (simple and self-contained)
  - Responsive flexbox layout with mobile stacking
  - German UI labels throughout
  - Page checks for existing by slug to prevent duplicates
issues-created: []
metrics:
  duration: 5 min
  completed: 2026-01-14
---

# Phase 2 Plan 2: Login/Registration Page Summary

**Combined login/registration page with responsive layout**

## Accomplishments

- WordPress page "Anbieter Login" created programmatically
- Registration form integrated via Formidable shortcode
- WordPress login form integrated with German labels
- Responsive two-column/stacked layout using flexbox
- German headings ("Neu registrieren", "Bereits registriert?")
- Inline CSS styling for visual distinction and consistency
- Duplicate prevention by checking for existing page by slug
- Page ID stored in option 'ddhh_jm_login_page_id' for future reference
- Login form redirects to /anbieter-dashboard/ after successful authentication

## Files Created/Modified

**Modified:**
- `includes/class-pages.php` - Added create_login_page() method
  - create_login_page() - Creates combined login/registration page
  - Integrated into create_provider_pages() activation hook
  - Duplicate prevention via get_page_by_path()
  - Retrieves registration form ID via DDHH_JM_Formidable::get_registration_form_id()

## Technical Details

### Page Structure

Page title: "Anbieter Login"
Page slug: "anbieter-login"
URL: /anbieter-login/

Content structure:
```html
<style>
  /* Inline CSS for layout and styling */
  .ddhh-auth-container { display: flex; gap: 2rem; }
  .ddhh-register-section, .ddhh-login-section { flex: 1; padding: 2rem; }
  /* Mobile responsive */
  @media (max-width: 768px) { .ddhh-auth-container { flex-direction: column; } }
</style>

<div class="ddhh-auth-container">
  <div class="ddhh-register-section">
    <h2>Neu registrieren</h2>
    [formidable id={registration_form_id}]
  </div>

  <div class="ddhh-login-section">
    <h2>Bereits registriert?</h2>
    {wp_login_form with German labels}
  </div>
</div>
```

### Styling Approach

**Layout:**
- Desktop: Two-column flexbox layout (50/50 split) with 2rem gap
- Mobile: Stacked layout (< 768px) using media query
- Both sections have equal flex: 1

**Visual Design:**
- Background: Light gray (#f9f9f9) for sections
- Border: 1px solid #e0e0e0 around sections
- Border radius: 8px for rounded corners
- Padding: 2rem inside each section
- Gap: 2rem between sections

**Form Styling:**
- Input fields: Full width with padding, border, border-radius
- Submit buttons: WordPress blue (#0073aa) with hover effect (#005a87)
- Consistent spacing with margin-bottom on inputs

### WordPress Login Form

Configured with German labels:
- label_username: "E-Mail oder Benutzername"
- label_password: "Passwort"
- label_remember: "Angemeldet bleiben"
- label_log_in: "Anmelden"
- redirect: home_url('/anbieter-dashboard/')

### Registration Form Integration

- Retrieves form ID dynamically via DDHH_JM_Formidable::get_registration_form_id()
- Uses Formidable shortcode: [formidable id={id}]
- Fallback message if form not yet created: "Registrierungsformular wird geladen..."

## Decisions Made

1. **Combined page instead of separate** - Per PROJECT.md requirement, login and registration are on one page. This simplifies navigation and provides a clear choice for new vs returning users.

2. **Inline CSS approach** - Used inline styles in the page content for simplicity. This keeps all styling self-contained and eliminates the need for a separate stylesheet or enqueuing logic. Phase 7 (Testing & Polish) will refine UI if needed.

3. **Flexbox responsive layout** - Simple and modern approach. Two columns on desktop, stacked on mobile. The gap property provides spacing without needing margin calculations.

4. **German labels everywhere** - All UI text is in German to match the v1 requirement. WordPress login form labels are translated via the label_* parameters.

5. **Duplicate prevention by slug** - Uses get_page_by_path() to check for existing page before creating. This is more reliable than checking by ID because the slug is what determines the URL.

6. **Login redirect to dashboard** - After successful login, users are redirected to /anbieter-dashboard/ (created in 02-03). This provides immediate access to their job management interface.

7. **Minimal styling** - Kept styling functional and clean. Avoided over-styling as Phase 7 will handle UI polish. Focus is on functionality and responsive layout.

## Issues Encountered

None - implementation was straightforward.

## Verification Status

All verification criteria met:

- [x] Page "Anbieter Login" exists and is published
- [x] Registration form displays via shortcode
- [x] Login form displays via wp_login_form()
- [x] Layout responsive (desktop: side-by-side, mobile: stacked)
- [x] German headings used
- [x] Page accessible at /anbieter-login/

## Commits

- Task 1 & 2: `dcfe79a` - feat(02-02): create login/registration page with responsive layout

## Testing Notes

**Manual testing required:**

Since this creates a WordPress page programmatically, the following should be tested in the WordPress environment:

1. Deactivate and reactivate the plugin to trigger page creation
2. Visit /anbieter-login/ to verify page exists
3. Verify two sections appear side-by-side on desktop
4. Resize browser to < 768px to verify stacked layout on mobile
5. Check that registration form displays (Formidable shortcode renders)
6. Check that login form displays with German labels
7. Test registration workflow - should redirect after success
8. Test login workflow - should redirect to /anbieter-dashboard/
9. Verify page doesn't duplicate on multiple plugin activations
10. Check that page ID is stored in 'ddhh_jm_login_page_id' option

**Page creation timing:**
- Page is created during plugin activation via DDHH_JM_Activator::activate()
- If page already exists (by slug), it skips creation and stores existing ID

## Next Step

Ready for 02-03-PLAN.md (Provider dashboard template - already completed per git log).

The combined login/registration page is complete and functional. Next phase (02-04) will handle access control and redirects to tie the authentication flow together.