[Feature request] add logout confirmation #368

New issue

Open

opened 2026-03-28 07:14:07 -03:00 by probably_missing · 1 comment

probably_missing commented

2026-03-28 07:14:07 -03:00

Is your feature request related to a problem? Please describe.

i keep fat fingering the logout button when trying to search for stuff on mobile

Describe the solution you'd like

add a logout confirmation. we probably don't need javascript for this, we could do it with some css trickery. the details tag seems good for this, set a summary tag as the logout button, and change the text with content: 'whatever' and details[open] summary for a cancel button when clicked and hide the real logout button inside the details element

Describe alternatives you've considered

get good, skill issue

Additional context

while you could use the popover api for this, that's a fairly recent thing so i wouldn't to keep older browser support.

**Is your feature request related to a problem? Please describe.**  i keep fat fingering the logout button when trying to search for stuff on mobile **Describe the solution you'd like**  add a logout confirmation. we probably don't need javascript for this, we could do it with some css trickery. the details tag seems good for this, set a summary tag as the logout button, and change the text with ```content: 'whatever'``` and ```details[open] summary``` for a cancel button when clicked and hide the real logout button inside the details element **Describe alternatives you've considered**  get good, skill issue **Additional context**  while you *could* use the popover api for this, that's a fairly recent thing so i wouldn't to keep older browser support.

probably_missing commented

2026-03-28 07:54:47 -03:00

Author

wait, would this issue count as an enhancement? i forgot those existed.

whatever, i've hastily thrown together something that works with psudo elements. while i should probably submit a pull request, this likely isn't a good solution, i have no idea how this repo functions, and it's 7 am, and i haven't slept.

html:

<div class="pure-u-1-4">
    <!---replace this id with whatever's best practice for this, idk-->
    <details id="logout">
        <summary></summary>
        <form action="/signout?referer=%2Ffeed%2Fsubscriptions" method="post">
            <input type="hidden" name="csrf_token" value="you don't need to see that">
            <a class="pure-menu-heading" href="#">
                <input style="all:unset" type="submit" value="CONFIRM">
            </a>
        </form>
    </details>
</div>

css:

/* again, replace ids with whatever's best practice. i have no idea what best practice is. */
details#logout summary::before {
    display: block;
    content: "LOG OUT"
}

details[open]#logout summary::before {
    display: block;
    content: "CANCEL"
}

this is what it looks like in practice. maybe the wording could be different? my brain is too fried to come up with anything else.

a big issue with all this is accessibility, because some screen readers don't detect things set with css content

wait, would this issue count as an enhancement? i forgot those existed. whatever, i've hastily thrown together something that works with psudo elements. while i should probably submit a pull request, this likely isn't a good solution, i have no idea how this repo functions, and it's 7 am, and i haven't slept. html: ``` <div class="pure-u-1-4">  <details id="logout"> <summary></summary> <form action="/signout?referer=%2Ffeed%2Fsubscriptions" method="post"> <input type="hidden" name="csrf_token" value="you don't need to see that"> <a class="pure-menu-heading" href="#"> <input style="all:unset" type="submit" value="CONFIRM"> </a> </form> </details> </div> ``` css: ``` /* again, replace ids with whatever's best practice. i have no idea what best practice is. */ details#logout summary::before { display: block; content: "LOG OUT" } details[open]#logout summary::before { display: block; content: "CANCEL" } ``` [this is what it looks like in practice.](https://storage.probably404.com/landfill/untitled.mp4) maybe the wording could be different? my brain is too fried to come up with anything else. a big issue with all this is accessibility, because [some screen readers don't detect things set with css content](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content#accessibility)

No labels

bug

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Fijxu/invidious#368

No description provided.

Rows
Columns