Add Login/Logout buttons inside the Profile page

[xecdev]

Add Login/Logout buttons inside the Profile page to improve UX.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• Add icons to sticky header buttons #94
• Add a spinner or text indicating logout to improve UX. #80

👤 Suggested Assignees

• xecdev

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Add Login and Logout buttons to the Profile page template to allow users to authenticate or sign out directly from their profile, eliminating the need to rely solely on the sticky header for these actions.

Observations

The PayButton plugin follows a modular WordPress plugin architecture with separate classes for admin, public, AJAX, and state management. Public-facing templates are located in templates/public/ and rendered via shortcode methods in includes/class-paybutton-public.php. Login/logout functionality is already implemented in the sticky header using JavaScript functions in assets/js/paybutton-paywall-cashtab-login.js that make AJAX calls to the PayButton_AJAX class. Assets are enqueued globally on all public pages, making JavaScript functions and the PaywallAjax global object available everywhere. User authentication state is managed through cookies by the PayButton_State class, with login status checked via PayButton_State::get_address().

Assumptions

Assumption 1: Reuse Existing Authentication JavaScript

Options Considered:

• Reuse existing sticky header JavaScript functions
• Create new profile-specific authentication functions

Chosen Option: Reuse existing sticky header JavaScript functions

Rationale: The existing JavaScript functions (renderLoginPaybutton() and handleLogout()) are globally available and handle all authentication logic including AJAX calls. No need to duplicate functionality.

Assumption 2: Profile Page Template Modification Approach

Options Considered:

• Show error for non-logged-in users
• Show profile template with Login button for all users

Chosen Option: Show profile template with Login button for all users

Rationale: Better UX to allow users to log in directly from the profile page rather than showing an error message and requiring navigation elsewhere.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Add Button HTML to Profile Template

Update the profile page template to include interactive Login and Logout buttons based on user authentication state.

Task 1: Add Conditional Button Rendering

Update templates/public/profile.php to conditionally render authentication buttons based on login state.

• Check user login state using the existing $user_address variable (already passed to template by profile_shortcode())
• When user is NOT logged in (empty($user_address)): Display a Login button container div that will be populated by the renderLoginPaybutton() JavaScript function
• When user IS logged in: Display a Logout button with onclick="handleLogout(this)" event handler
• Use the same HTML structure, classes, and attributes as the sticky header buttons (.logout-button, .paybutton-animated, btn-text-default, btn-text-logging-out spans)
• Position buttons in a logical location within the profile page layout (likely near the top, after the wallet address display or before the unlocked content list)
• Add a wrapper div for the buttons area to facilitate styling

Task 2: Update Profile Error Handling for Non-Logged-In Users

Modify the profile shortcode logic to improve UX for non-authenticated visitors.

• Update profile_shortcode() method in includes/class-paybutton-public.php to remove or modify the error message that currently displays when users are not logged in
• Instead of returning an error, render the profile template with the Login button visible
• Pass the login state clearly to the template so it can conditionally show Login vs Logout buttons
• Ensure the unlocked content section is only displayed when user is logged in

🤖 Prompt for AI agents

Update the profile page template and shortcode to display conditional
authentication buttons based on user login state.

In `templates/public/profile.php`:
- Add a wrapper div for authentication buttons positioned near the top of the
profile layout
- Check if `$user_address` is empty to determine login state
- For non-logged-in users: Add an empty div container that JavaScript's
`renderLoginPaybutton()` will populate
- For logged-in users: Add a Logout button using the same HTML structure as
sticky header (`.logout-button`, `.paybutton-animated` classes) with
`onclick="handleLogout(this)"`
- Include the `btn-text-default` and `btn-text-logging-out` spans inside the
logout button

In `includes/class-paybutton-public.php`:
- Modify `profile_shortcode()` to remove the error message for non-logged-in
users
- Allow the profile template to render for all users (both logged in and logged
out)
- Ensure `$user_address` variable is passed to the template to enable
conditional button rendering
- Keep the unlocked content section visible only for logged-in users

Phase 2: Add Profile-Specific Button Styling

Create CSS styling for the authentication buttons within the profile page context.

Task 1: Create Profile Button Styles

Add CSS rules for profile page authentication buttons in assets/css/paywall-styles.css.

• Create a .profile-page-auth-buttons wrapper class for the button container with appropriate layout (flexbox or block with margins)
• Add .profile-page-login-button and .profile-page-logout-button classes that extend or reference the existing sticky header button styles
• Reuse the CSS custom properties for colors (--logout-button-bg-color, --logout-button-text-color) that are already set via inline styles from admin settings
• Ensure buttons are appropriately sized and positioned for the profile page context (may differ from sticky header which is fixed position)
• Include responsive styling for mobile devices
• Add hover and active states consistent with existing button patterns (.paybutton-animated class behavior)

Task 2: Ensure Login Button Container Styling

Add styles specific to the login button container that will be populated by JavaScript.

• Style the empty div container that renderLoginPaybutton() will populate
• Ensure the PayButton component renders correctly within the profile page context
• May need to add wrapper styles to center or align the PayButton widget appropriately
• Test that the payment overlay and verification UI work correctly when triggered from the profile page

🤖 Prompt for AI agents

Add CSS styling for authentication buttons on the profile page that integrates
with existing button styles.

In `assets/css/paywall-styles.css`:
- Create `.profile-page-auth-buttons` wrapper class with appropriate layout
(flexbox or block with margins/padding)
- Add `.profile-page-login-button` and `.profile-page-logout-button` classes
that leverage existing button styles
- Reuse CSS custom properties `--logout-button-bg-color` and
`--logout-button-text-color` from admin settings
- Size and position buttons appropriately for the profile page context (not
fixed positioning)
- Add responsive styling for mobile viewports
- Include hover and active states matching `.paybutton-animated` behavior
- Style the login button container div to ensure the PayButton widget renders
correctly
- Add wrapper styles to center/align the PayButton component appropriately
- Ensure the payment overlay and verification UI display correctly in the
profile page context

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Update the profile page template and shortcode to display conditional
authentication buttons based on user login state.

In `templates/public/profile.php`:
- Add a wrapper div for authentication buttons positioned near the top of the
profile layout
- Check if `$user_address` is empty to determine login state
- For non-logged-in users: Add an empty div container that JavaScript's
`renderLoginPaybutton()` will populate
- For logged-in users: Add a Logout button using the same HTML structure as
sticky header (`.logout-button`, `.paybutton-animated` classes) with
`onclick="handleLogout(this)"`
- Include the `btn-text-default` and `btn-text-logging-out` spans inside the
logout button

In `includes/class-paybutton-public.php`:
- Modify `profile_shortcode()` to remove the error message for non-logged-in
users
- Allow the profile template to render for all users (both logged in and logged
out)
- Ensure `$user_address` variable is passed to the template to enable
conditional button rendering
- Keep the unlocked content section visible only for logged-in users
===============================================================================

Task: 2

Add CSS styling for authentication buttons on the profile page that integrates
with existing button styles.

In `assets/css/paywall-styles.css`:
- Create `.profile-page-auth-buttons` wrapper class with appropriate layout
(flexbox or block with margins/padding)
- Add `.profile-page-login-button` and `.profile-page-logout-button` classes
that leverage existing button styles
- Reuse CSS custom properties `--logout-button-bg-color` and
`--logout-button-text-color` from admin settings
- Size and position buttons appropriately for the profile page context (not
fixed positioning)
- Add responsive styling for mobile viewports
- Include hover and active states matching `.paybutton-animated` behavior
- Style the login button container div to ensure the PayButton widget renders
correctly
- Add wrapper styles to center/align the PayButton component appropriately
- Ensure the payment overlay and verification UI display correctly in the
profile page context

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!