Activate link shows wrong template when URL parameter is present

[dambridge]

Bug Description

Activate URL points to default Memberbox view instead of custom Statamic view when URL parameter is populated with temporary key. I've got my own pages created in Statamic for all of the other screens (register, login, etc). If I hit the Activate URL without the key parameter, it renders my custom view. However, with the key parameter in the URL, it renders Memberbox's default.

How to Reproduce

• Create your own template in Statamic and put in the activate form tags
• Visit the link without a key parameter in URL. Renders properly
• Create a member and send the activation email.
• Follow the link in email which appends a temporary key in the URL
• Default template is rendered instead

[jacksleight]

Hey,

I can’t replicate this currently, the token parameter is a required part of the activate route and if you access it without the token it’s incomplete and should just 404. Do you have any custom routes that could be conflicting with the ones MB creates? And could you confirm exactly how you’ve configured MB and the paths to the templates you’re using? To override the default templates the files need to go in views/vendor/statamic-memberbox/web/.

[dambridge]

Hey there, I created a Membership Forms collection, and created entries for Login and Activate in there. The slugs for each are:

• {parent_uri}/login
• {parent_uri}/activate-my-account

I've then embedded the forms in the entry views. Here's the login which works fine:

    {{ user:login_form allow_request_redirect="true" }}

    {{ if errors }}
    <div class="bg-red-600 text-white p-2 rounded-md mb-5 text-center">
        {{ errors }}
        {{ value }}<br>
        {{ /errors }}
    </div>
    {{ /if }}

    <div class="p-2">
        <div class="mb-5">
            <label class="font-sans text-gray-600 text-sm font-semibold" for="email">Email</label>
            <input class="block w-full md:w-1/2 rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-400 focus:outline-none focus:ring-gray-400 sm:text-sm" type="email" name="email" id="email" value="{{ old:email }}" />
        </div>

        <div class="mb-5">
            <label for="password" class="font-sans text-gray-600 text-sm font-semibold">Password</label>
            <input class="block w-full md:w-1/2 rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-400 focus:outline-none focus:ring-gray-400 sm:text-sm" type="password" name="password" id="password" value="{{ old:password }}" />
        </div>

        <button type="submit" class="ml-1 mt-4 inline-flex items-center rounded-md border border-transparent bg-pink-100 px-3 py-2 text-sm font-medium leading-4 text-pink-700 hover:bg-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2">Log in</button>

        <a href="/forgot-password" class="mt-5 text-center block text-pink-800 text-sm">Forgot password?</a>
    </div>

    {{ /user:login_form }}

Here's the activate view:

    {{ mb:user:activate_form :redirect="homepage" }}

    {{ if errors }}
    <div class="bg-red-600 text-white p-2 rounded-md mb-5 text-center">
        {{ errors }}
        {{ value }}<br>
        {{ /errors }}
    </div>
    {{ /if }}

    <div class="p-2">

        <div class="mb-5">
            <label class="font-sans text-gray-700 text-sm" for="email">Email</label>
            <input class="block w-full md:w-1/2 rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-400 focus:outline-none focus:ring-gray-400 sm:text-sm" type="email" name="email" id="email" value="{{ old:email }}" />
        </div>

        <div class="mb-5">
            <label class="font-sans text-gray-700 text-sm" for="password">Password</label>
            <input class="block w-full md:w-1/2 rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-400 focus:outline-none focus:ring-gray-400 sm:text-sm" type="password" name="password" id="password" value="{{ old:password }}" />
        </div>

        <div class="mb-5">
            <label class="font-sans text-gray-700 text-sm" for="password_confirmation">Confirm Password</label>
            <input class="block w-full md:w-1/2 rounded-md border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-400 focus:outline-none focus:ring-gray-400 sm:text-sm" type="password" name="password_confirmation" id="password_confirmation" value="{{ old:password_confirmation }}" />
        </div>

        <button type="submit" class="ml-1 mt-4 inline-flex items-center rounded-md border border-transparent bg-pink-100 px-3 py-2 text-sm font-medium leading-4 text-pink-700 hover:bg-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2">Activate Membership</button>

    </div>

    {{ /mb:user:activate_form }}

I notice in debugbar that it's using the default layout layout when the token is added, whereas my other pages use a different one. Not sure if this is the issue potentially. Is there a way to override the layout used?

[dambridge]

Adding some further detail.

Template rendered WITH token: statamic-memberbox::web.activate (resources/views/vendor/statamic-memberbox/web/activate.antlers.html)

Template rendered WITHOUT: membership.activate (resources/views/membership/activate.antlers.html)

[jacksleight]

Ah I see.

By default MB is designed to set up all the form related pages/routes for you, there's no need to create a collection with the same pages in Statamic. By setting statamic.memberbox.routes.activate and also creating an activate page in your collection you've ended up with two separate pages/routes:

• membership/activate-my-account - the page managed by Statamic rendering your custom template
• membership/activate-my-account/{token} - the page managed by MB rendering the default template

You should either remove your membership forms collection and just use the pages MB adds, or disable the statamic.memberbox.enable_account option and use your own pages, however...

If you're using your own pages there is a gotcha with the activate route. It needs the token, and MB currently needs a named route in order to generate the right URL for the activation email. Statamic pages can't do that. So right now the activate page has to be done through the MB routing.

But that's no good. I'm going to work on an update to make this more flexible and allow you to use your own page for activate as well.

[jacksleight]

I've just released a fix for this, so using a custom page for the activate form works now. Check the updated docs for details: https://jacksleight.dev/docs/memberbox/implementation#using-statamic-entries-for-your-account-and-directory-pages

I'll close this now but let me know if you have any further issues.

[dambridge]

Yes! Cheers @jacksleight