vmiller/Digital-Dabei-Hamburg-Job-Manager

Files

Viktor Miller f5538ef5d8 docs(02-02): complete login/registration page plan

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2026-01-14 19:26:46 +09:00

6.5 KiB

Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, issues-created, metrics

phase

plan

subsystem

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:

<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

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

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.
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.
Flexbox responsive layout - Simple and modern approach. Two columns on desktop, stacked on mobile. The gap property provides spacing without needing margin calculations.
German labels everywhere - All UI text is in German to match the v1 requirement. WordPress login form labels are translated via the label_* parameters.
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.
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.
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:

Page "Anbieter Login" exists and is published
Registration form displays via shortcode
Login form displays via wp_login_form()
Layout responsive (desktop: side-by-side, mobile: stacked)
German headings used
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:

Deactivate and reactivate the plugin to trigger page creation
Visit /anbieter-login/ to verify page exists
Verify two sections appear side-by-side on desktop
Resize browser to < 768px to verify stacked layout on mobile
Check that registration form displays (Formidable shortcode renders)
Check that login form displays with German labels
Test registration workflow - should redirect after success
Test login workflow - should redirect to /anbieter-dashboard/
Verify page doesn't duplicate on multiple plugin activations
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.

6.5 KiB Raw Blame History