skorotkiewicz/rDrama
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rDrama/files/templates/header.html
painejohn 0e165e17c0 Fixes #110 "Signout doesn't always work" 
I tried reproducing the issues from #110 but without luck. The
workflow looks a little like this:

- User changes their avatar.
    - This triggers a POST request to the profile endpoint.
- User clicks "Log out" from the dropdown menu"
    - This triggers the post_toast function in js that makes a POST to
      /logout, which clears the user's session. Then, on receipt of the
      response, the js calls `location.reload`, which replays the
      browser's last action, which in our case is the earlier POST
      request to the profile endpoint. This is why the browser asks
      whether it's OK to resubmit the data _again_. Agreeing resubmits
      the first POST request.
    - After `location.reload`, since the user is no longer logged in,
      they either get a 405 (from the profile edit page) or a 500 (from
      the profile overview page).

This PR then changes the `/logout` endpoint from POST to GET, then
updates the header template to change the "Log out" anchor to simply
link to "/logout" instead of calling any js.

Reasoning behind it:
- logout doesn't modify server-side resources, so it's safe to make it a
  GET request.
- Making it a GET prevents the browser from ever displaying the "data
  resubmit" warning window.
- The "/logout" endpoint can now simply redirect to the homepage.
2022-07-29 06:47:19 -05:00

238 lines
12 KiB
HTML
Raw Blame History

<nav id="main-navigation" class="shadow shadow-md fixed-top">
<style>
body {padding-top: 60.89px !important}
@media (max-width: 767.98px) {
body {
padding-top: 44.55px !important
}
}
</style>
<div class="navbar navbar-expand-md navbar-light" id="navbar">
<div class="container-fluid" style="padding:0;">
<a href="/" class="navbar-brand mr-auto">
<img alt="header icon" height=33 src="/assets/images/{{SITE_NAME}}/headericon.webp?v=1019">
</a>
{% if sub %}
<a href="/h/{{sub.name}}" class="font-weight-bold ml-1 flex-grow-1 mt-1" style="font-size:max(14px,1.2vw)">/h/{{sub.name}}</a>
{% else %}
<style>
{% if g.webview %}
@media (min-width: 480px) {
{% else %}
@media (min-width: 380px) {
#logo {
width: 100px;
margin-left: 0.5rem !important;
}
}
{% endif %}
</style>
<a href="/" class="flex-grow-1">
<img class="ml-1" id="logo" alt="logo" src="/assets/images/{{SITE_NAME}}/logo.webp?v=1013" width=70>
</a>
{% endif %}
<div class="flex-grow-1 d-fl d-none d-md-block {% if not v %}pad{% endif %}">
<form class="form-inline search flex-nowrap mx-0 mx-lg-auto" {% if err %}style="margin-right:40rem!important"{% endif %} action="{% if request.path.startswith('/search') %}{{request.path}}{% else %}/search/posts/{% endif %}" method="get">
<input autocomplete="off" class="form-control w-100" type="search" placeholder="Search" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
<span class="input-group-append">
<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem;">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>
</form>
</div>
{% if g.webview %}
<a class="mobile-nav-icon d-md-none" onclick="location.reload()"><i class="fas fa-arrow-rotate-right align-middle text-gray-500 black"></i></a>
{% endif %}
{% if v %}
{% if v.notifications_count %}
<a class="mobile-nav-icon d-md-none pl-0" href="/notifications{% if v.do_posts %}?posts=true{% elif v.do_reddit %}?reddit=true{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell align-middle text-danger" {% if v.do_posts %}style="color:blue!important"{% elif v.do_reddit %}style="color:#805ad5!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% elif v.do_reddit %}background:#805ad5{% endif %}">{{v.notifications_count}}</span></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell align-middle text-gray-500 black"></i></a>
{% endif %}
{% endif %}
{% if not err %}
<a class="mobile-nav-icon d-md-none" href="/random_user" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle align-middle text-gray-500 black"></i></a>
<a class="mobile-nav-icon d-md-none" href="/random_post" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random align-middle text-gray-500 black"></i></a>
{% if v and v.admin_level > 1 %}
<a class="mobile-nav-icon d-md-none" href="/admin" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown align-middle text-gray-500 black"></i></a>
{% endif %}
{% if v %}
<a class="mobile-nav-icon d-md-none" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
{% else %}
<a class="mobile-nav-icon d-md-none" href="/login" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit align-middle text-gray-500 black"></i></a>
{% endif %}
<button class="navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon {% if v and v.notifications_count %}position-relative{% endif %}"><i class="fal fa-bars text-gray-500 black"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto d-none d-md-flex">
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/random_user/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random User"><i class="fas fa-user-circle"></i></a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/random_post/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Random Post"><i class="fas fa-random"></i></a>
</li>
{% if v and v.admin_level > 1 %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/admin/" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Admin Tools"><i class="fas fa-crown{% if v.has_report_queue %} text-success{% endif %}"></i></a>
</li>
{% endif %}
{% if v %}
{% if v.notifications_count %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link position-relative" href="/notifications{% if v.do_posts %}?posts=true{% elif v.do_reddit %}?reddit=true{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell text-danger" {% if v.do_posts %}style="color:blue!important"{% elif v.do_reddit %}style="color:#805ad5!important"{% endif %}></i><span class="notif-count ml-1" style="padding-left: 4.5px;{% if v.do_posts %}background:blue{% elif v.do_reddit %}background:#805ad5{% endif %}">{{v.notifications_count}}</span></a>
</li>
{% else %}
<li class="nav-item d-flex align-items-center text-center justify-content-center mx-1">
<a class="nav-link" href="/notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Notifications"><i class="fas fa-bell"></i></a>
</li>
{% endif %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/comments" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comments"><i class="fas fa-comment-dots"></i></a>
</li>
{% if v and v.admin_level > 1 %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="/leaderboard" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users"><i class="fas fa-trophy"></i></a>
</li>
{% endif %}
<li class="nav-item d-flex align-items-center justify-content-center text-center mx-1">
<a class="nav-link" href="{% if sub %}/h/{{sub.name}}{% endif %}/submit" data-bs-toggle="tooltip" data-bs-placement="bottom" title="New Post"><i class="fas fa-edit"></i></a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center text-center">
<div class="dropdown">
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<div><img alt="your profile picture" loading="lazy" src="{{v.profile_url}}" class="profile-pic-35"></div>
<div class="text-left pl-2 d-flex align-items-center">
<div style="color: var(--primary-light1)" class="text-small font-weight-bold {% if v.patron %}patron{% endif %}"><span {% if v.patron %}class="patron" style="background-color:#{{v.namecolor}}"{% endif %}>{{v.username}}</span></div>
</div>
</div>
</a>
<div id="account-menu" class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left border-0 shadow fade px-0">
<div class="px-2">
<a class="dropdown-item" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>My
profile</a>
<a class="dropdown-item" href="/settings"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
</div>
<div class="px-2">
<button class="dropdown-item copy-link" data-clipboard-text="{{SITE_FULL}}/signup?ref={{v.username}}"><i class="fas fa-user-friends fa-fw mr-3"></i>Invite friends</button>
</div>
<div class="px-2">
<a class="dropdown-item" href="/changelog"><i class="fas fa-clipboard fa-fw mr-3"></i>Changelog</a>
<a class="dropdown-item" rel="nofollow noopener noreferrer" href="https://github.com/themotte/rDrama"><i class="fab fa-github fa-fw mr-3"></i>Source code</a>
<a class="dropdown-item" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
</div>
<div class="px-2">
<a class="dropdown-item" role="button" href="/logout"><i class="fas fa-sign-out fa-fw mr-3"></i>Log out</a>
</div>
</div>
</div>
</li>
{% else %}
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/contact">Contact us</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/login?redirect={{request.path | urlencode}}">Sign in</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center mx-1">
<a class="btn btn-primary" href="/signup">Sign up</a>
</li>
{% endif %}
</ul>
<ul style="overflow:auto" class="navbar-nav ml-auto d-flex d-md-none mt-3">
<li class="nav-item pb-3">
<form id="searchform" class="form-inline search flex-nowrap mx-0 mx-lg-auto" action="/search/posts/" method="get">
<input autocomplete="off" class="form-control form-control-sm w-100" type="search" placeholder="Search" aria-label="Search" name="q">
<span class="input-group-append">
<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem"onclick="document.getElementById('searchform').submit()">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</span>
</form>
</li>
{% if v %}
<li class="nav-item">
<a class="nav-link" href="{{v.url}}"><i class="fas fa-user-circle fa-fw mr-3"></i>@{{v.username}}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings"><i class="fas fa-cog fa-fw mr-3"></i>Settings</a>
</li>
{% if not g.webview %}
<li class="nav-item">
<a class="nav-link copy-link" data-clipboard-text="{{SITE_FULL}}/signup?ref={{v.username}}"><i class="fas fa-user-friends fa-fw mr-3"></i>Invite friends</a>
</li>
{% endif %}
<a class="nav-item nav-link" rel="nofollow noopener noreferrer" href="https://github.com/themotte/rDrama"><i class="fab fa-github fa-fw mr-3"></i>Source code</a>
<a class="nav-item nav-link" href="/contact"><i class="fas fa-file-signature fa-fw mr-3"></i>Contact us</a>
<li class="nav-item border-top border-bottom mt-2 pt-2">
<a class="nav-link" role="button" href="/logout"><i class="fas fa-sign-out fa-fw mr-3 text-danger"></i>Log out</a>
</li>
{% else %}
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
<a class="btn btn-primary btn-block" href="/contact">Contact us</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center pb-3">
<a class="btn btn-primary btn-block" href="/login?redirect={{request.path | urlencode}}">Sign in</a>
</li>
<li class="nav-item d-flex align-items-center justify-content-center">
<a class="btn btn-primary btn-block" href="/signup">Sign up</a>
</li>
{% endif %}
<li class="mt-3">
{% include "sidebar_" + SITE_NAME + ".html" %}
</li>
</ul>
</div>
{% endif %}
</div>
</div>
</nav>
<script src="/assets/js/header.js?v=266"></script>
{% if v and not err %}
<div id="formkey" class="d-none">{{v.formkey}}</div>
{% endif %}
{% if not v %}
<style>
.pad {
padding-bottom: 7.4px;
padding-top: 7.4px;
}
</style>
{% endif %}
Reference in a new issue View git blame Copy permalink