Add Filtering

[jdavis]

As talked about in #336 with @mxxcon and @dsoegijono, filtering could solve a lot of problems with organization. It could also address #241 as well as #410.

To do:

• Filtering/searching by text. (See Add filtering capabilities #1486)
• Filtering by Category.
• Filtering by method. (See Include tfa methods in search keywords #4584)
• Filtering by Country? (depending on Creation of International Sections #241)
• Filter by date of last update.

[jdavis]

I received an email regarding how it would be good to list the "last updated" date next to each entry. I'll add it to the checklist for now.

[jdavis]

I just received another email in the last week asking for the "last updated" feature as well, in particular, they wanted to be able to receive updates to sites that didn't have 2FA that now do with the notifications sent through RSS/email.

[Walkman100]

Since all changes to the site are managed here, maybe RSS updates should be based on GitHub commits/merges, so whenever a PR is merged, the RSS is updated. It could use WebHooks to receive the updates, which is the system GitHub has for CIs to receive updates

[Walkman100]

And getting an email on an RSS update is easy with FeedBurner or UglyReader

[hoovercj]

I'm not sure how you plan on implementing filtering, but I have some experience with KnockoutJS which is capable of search and filter. See here for an example of a search implementation.

The downside of this, though, is that it does decrease the performance of the page -- it is being rendered and managed through JavaScript rather than lovely HTML. I can whip up a prototype though if you want to compare.

EDIT: Though on second thought, there must be a perfectly adequate jquery plugin that wouldn't require as much of a restructure.

[hoovercj]

Ok, so this might be a dumb question -- how do I initiate pull requests against this? I have to fork the repository first, create my own branch in that repo, push it up into github, and then make a pull request from there?

[jdavis]

Yeah, click the "Fork" button and then you can create your new branch:

$ git checkout -b new-branch

Then if you push

$ git push origin new-branch

then you'll see the Fork button on the branch. This isn't required, but I like to add the original and call it upstream so I can pull in changes like so:

$ git remote add upstream https://github.com/jdavis/twofactorauth.git

I usually reserve the master branch as being a clone of upstream/master so I can compare and hold an up-to-date version locally.

[hoovercj]

edit: you changed your answer, or something :P

[jdavis]

Yeah, you need a fork to do pull requests on GitHub. GitHub generates the fork from a branch + another branch.

I don't understand the last part. Are you looking to fork this repo to submit changes?

[hoovercj]

The two pull requests I've submitted have implementations for:

• Filtering/searching by text.
• Filtering by method.

Regarding the rest:

• Filtering by Category - If you want to allow filtering by multiple categories, a multi-select dropdown seems like the way to go. If you have just a big glob of 30 checkboxes, that doesn't really help much. Unfortunately, Semantic-UI currently does not have support for a multi-select dropdown. Considering that, filtering by one category seems to be a waste as there is already a dropdown at the top to navigate to a category and the items are already grouped into categories. So a combination of menu/scrolling for navigation and the other filters should suffice unless somebody has another idea for how users should select the categories to filter.
• Filter by date of last update. - add the information to the YAML and it can be filtered by it. Obviously that's a manual solution, though, but if RSS feeds or updates are more important than it's outside of the scope of the work I just did.
• Filtering by Country -- Ditto.

[rugk]

I think another (more simple) filter would also be useful: You should be able to filter the entries on the actual "state" - which means you should be able to show only sites which have 2FA implemented currently or sites which haven't it implemented right now and maybe also all sites which are currently implementing it...

So that the result would basically that you only see the "green lines" or only the "red lines" based on the chosen filter.

[mxxcon]

@rugk while it's logical, but I think it's a bit of an overkill. That kind of filtering would make sense if we had a lot more of one state than the other. For example when you want to see only sites for a country.

[fpigerre]

Filtering by website name has currently been implemented in pull request #1486.

[C4K3]

Filtering by 2fa support (and possibly by country) is more needed now than ever, with the large increase of listed websites supporting no or almost none 2fa.

[mxxcon]

@C4K3 what is the purpose of filtering by country?

[C4K3]

@mxxcon Many of the listed sites are not relevant for people who don't live in specific countries.

[rugk]

(Side note: Usually most people live in one country. I have also no idea, why they choose to do so. 😜 )

[mxxcon]

Wouldn't you filter by sites that you actually use, rather than by country?
Nonetheless, currently we do not record which country a site operates in. I imagine that vast majority of sites we list are global. Only a couple of gov't sites and a couple of regional banks would have country-specific restrictions.

[C4K3]

Well one use case could be to find a bank/other service in your country that does support 2fa. But I think filtering by 2fa support would be over all more useful.

[nitrocode]

This looks promising: TableFilter using multiple filter types.

Also here is a sloppy way to do it without TableFilter using just jQuery specifically for banking... but it's a start.

function filterBy(column) {
  var select = 'div#banking-desktoptable tbody tr td:nth-child(' + column + ')';
  $(select).each((idx, tag) => {
    if (tag.innerHTML.length <= 1 && $(tag).is(':visible')) {
      $(tag.parentNode).hide();
    } else {
      $(tag.parentNode).show();
    }
  });
}

$('div#banking-desktoptable thead th').click(evt => {
  filterBy(evt.cellIndex);
});

[JohnLGalt]

As I have recently acquired my first hardware token for 2FA use, it would be great if I could filter all entries for Hardware token support - I spent a couple of hours going through the lists and manually setting up each and every site on this list that I use that supports hardware tokens.

In my search, that seems to be the least implemented methodology, but there were more than just a few that actually supported hardware tokens that I use that I had no idea actually supported them.

[JohnLGalt]

After reading through a few more FAQs, I realize that my intent of filter by methodology is, in fact, filter by Category.

However, I do not see a way to do so.

hooverjc's comments above seem to indicate that this was done, but I am not seeing any such method to filter by the category (method). When trying to use the search bar to search for hardware, for example, there were no results.

Am I missing something?

[Carlgo11]

@JohnLGalt his PRs didn't get merged as they became inactive and had merge conflicts.
If you know how to code you could use the data.json to grab all sites that support hardware 2FA.
If #3222 becomes reality, it will also be possible to only get the U2F support with the data.json-file.

Alternatively, check out our friends over at dongleauth.info.
They specifically list sites that support U2F 😉

[JohnLGalt]

That explains it.

Thanks for the heads up.

[OLLI-S]

I did not read all postings here in this topic but I also would love to see only those entries that

• support 2FA (so hide all that do not support it)
• support 2FA by software token (I plan to change the logon for all my services to my authenticator app)

In combination with the filters it would be cool to see a complete list of all entries.
So when I filter by "2FA by software token" and see a complete list, then I can go though this list quickly and check what services I already use.

[OLLI-S]

Because the topic was created in 2014:
Will this be implemented?
Will my idea about filtering (see last posting) be implemented?
Or should I post my suggestion as new issue?

[JohnLGalt]

Well, I was able to use the data.json link and filter by keyword hardware - but it is not nearly as pretty.

Oh well.

I'm also concerned about some of the lists being extremely long, and having to scroll back up to close the list (E.g. Banking) - but I suppose that that is an issue for another thread. Just makes it hard to manually go through all the lists (even with a hyper-scroll function on my mouse).

The data.json helps a lot.

[OLLI-S]

Sorry, I am not a good programmer: how do you use the data.json?

[Carlgo11]

@OLLI-S by parsing the JSON data into a 2D array in your programming language of choice, go through the array using something like a for loop and an if statement that checks if the selected array contains the key hardware (and the value of said key equals true) then output the site data.

If you're new to programming I'd suggest you don't try and use the json file. It's designed to be used by third party developers.

[OLLI-S]

If I go to the tab "Code" and click on "data.json" then I get:

---
---
{% raw %}{{% endraw %}{%
for section in site.data.sections %}{%
    assign section_file = site.data[section.id] %}"{{ section.title }}":{% raw %}{{% endraw %}{%
    for website in section_file.websites %}"{{ website.name }}":{% raw %}{{% endraw %}{%
        for tag in website %}{%
            if tag[0] != "exceptions" %}"{{ tag[0] }}":{%
                if tag[1] == true or tag[1] == false %}{{tag[1]}}{%
                else %}"{{ tag[1] }}"{%
                endif %}{%
            else %}"{{ tag[0] }}":{% raw %}{{% endraw %}{%
                for exception in tag[1] %}"{{ exception[0] }}":"{{ exception[1] }}"{%
                    if forloop.last != true %},{% endif %}{%
                endfor %}}{%
            endif %}{%
        if forloop.last != true %},{% endif %}{%
        endfor %}}{%
    if forloop.last != true %},{% endif %}{%
    endfor %}}{%
if forloop.last != true %},{% endif %}{%
endfor %}}

No file where where I can search for any data...

[mxxcon]

@OLLI-S you want http://twofactorauth.org/data.json

[OLLI-S]

Thank you!
Just for interest: there is an online JSON viewer where you just paste the JSON text: http://jsonviewer.stack.hu/

[rugk]

Just for interest: there is an online JSON viewer where you just paste the JSON text: http://jsonviewer.stack.hu/

Or just use Firefox' built-in viewer:

[OLLI-S]

Or just use Firefox' built-in viewer:

Right you are, this is the best way if you use Firefox.
Other browsers can use the online JSON viewer

[jtagcat]

I'd recommend to filter both: don't hide the unmatched ones, show them as not compatible
Does my device work with this (yubikey 5, Yubi Security Key...)

[Carlgo11]

@jdavis can this be closed? 3/4 of the things are now added and the last one is close to impossible to implement at the moment.