Change logout button to HTTP POST in admin area

[anusharanganathan]

• Issue: https://github.com/DOAJ/doajPM/issues/4350

---

Change logout button to HTTP POST in admin area

briefly describe the PR here

This PR...

• has scripts to run
• has migrations to run
• adds new infrastructure
• changes the CI pipeline
• affects the public site
• affects the editorial area
• affects the publisher area
• affects the monitoring

Developer Checklist

Developers should review and confirm each of these items before requesting review

• Code meets acceptance criteria from issue
• Unit tests are written and all pass
• User Test Scripts (if required) are written and have been run through
• Project's coding standards are met
  • No deprecated methods are used
  • No magic strings/numbers - all strings are in constants or messages files
  • ES queries are wrapped in a Query object rather than inlined in the code
  • Where possible our common library functions have been used (e.g. dates manipulated via dates)
  • Cleaned up commented out code, etc
  • Urls are constructed with url_for not hard-coded
• Code documentation and related non-code documentation has all been updated
  • Core model documentation has been added to if needed: https://docs.google.com/spreadsheets/d/1lun2S9vwGbyfy3WjIjgXBm05D-3wWDZ4bp8xiIYfImM/edit
  • Events and consumers documentation has been added if needed: https://docs.google.com/spreadsheets/d/1oIeG5vg-blm2MZCE-7YhwulUlSz6TOUeY8jAftdP9JE/edit
• Migration has been created and tested
• There is a recent merge from develop

Reviewer Checklist

Reviewers should review and confirm each of these items before approval
If there are multiple reviewers, this section should be duplicated for each reviewer

• Code meets acceptance criteria from issue
• Unit tests are written and all pass
• User Test Scripts (if required) are written and have been run through
• Project's coding standards are met
  • No deprecated methods are used
  • No magic strings/numbers - all strings are in constants or messages files
  • ES queries are wrapped in a Query object rather than inlined in the code
  • Where possible our common library functions have been used (e.g. dates manipulated via dates)
  • Cleaned up commented out code, etc
  • Urls are constructed with url_for not hard-coded
• Code documentation and related non-code documentation has all been updated
  • Core model documentation has been added to if needed: https://docs.google.com/spreadsheets/d/1lun2S9vwGbyfy3WjIjgXBm05D-3wWDZ4bp8xiIYfImM/edit
  • Events and consumers documentation has been added if needed: https://docs.google.com/spreadsheets/d/1oIeG5vg-blm2MZCE-7YhwulUlSz6TOUeY8jAftdP9JE/edit
• Migration has been created and tested
• There is a recent merge from develop

Testing

List user test scripts that need to be run

• Login as admin
• Goto the Admin dashboard
• Click on Logout

It should take you to the homepage with the message you are now logged out

List any non-unit test scripts that need to be run by reviewers

[anusharanganathan]

@richard-jones and @amdomanska there are two things I’d like to raise

1. The code has inline css. I was not sure of the best place to add in the scss (also I need to learn how to compile the scss)

2. The form tag encloses both the logout button and the link to settings. Adding the form tag within <p><small> was ignored by the browser. It created an empty <p> tag and it placed the form tag above the <small> tag.

[amdomanska]

@anusharanganathan
the scss can go to cms/sass/components/_buttons.scss but as this is quite specific case it can stay inline as well.

SCSS is compiled automatically by re-running the project.

[amdomanska]

Regarding the <form> and the link - you are right, the settings link within the form tag is not ideal. We could move it under the form, enclose everything in section and then style it appropriately.

[anusharanganathan]

Regarding the <form> and the link - you are right, the settings link within the form tag is not ideal. We could move it under the form, enclose everything in section and then style it appropriately.

@Aga I tried enclosing it all in section. If I do that, we would need some more styling as you said. The settings button is wider than the logout button. A <p> tag within the div made no difference.

        <section>
            <div style="display: inline-block;">
                <form method="POST" action="{{ url_for('account.logout') }}">
                    <small>
                        <button type="submit" id="logout" class="tag" style="vertical-align: inherit;">
                            Logout
                            <span data-feather="log-out" aria-hidden="true"></span>
                        </button>
                    </small>
                </form>
            </div>
            <div style="display: inline-block;">
                <a href="{{ url_for('account.username', username=current_user.id) }}" class="tag">
                    <span data-feather="settings" aria-hidden="true"></span>
                    Settings
                </a>
            </div>
        </section>

Could I please hand this over to you.

[anusharanganathan]

@varadekd how is the form tag rendered in the browser? Can you please inspect and check. My first attempt was a code similar to yours, the tags were swapped.

[varadekd]

@amdomanska Please review the latest changes