Allow users to add their API tokens for each mine

[yochannah]

In order to save lists, users ought to be able to save their personal API tokens to the data browser. I'd suggest a "sign in" button on the top right that allows the user to paste their token in, making it very clear that they need to paste in once per mine.

something like:

Save API keys in localstorage; I don't think we want to create a login infrastructure for this right now.

[AdrianBZG]

@yochannah This is working now 👍

http://im-browser-prototype.herokuapp.com/

[yochannah]

Looks briliant, and I love the guidance text here! (pausing for a moment as I just realised I like it because I wrote it in the mock up the top of this issue :rofl:)

A few things: I might the "Paste your API key here" be a placeholder. This means the user doesn't have to delete the text.

see screenshots:

placeholder rather than value:

What it looks like (the top text in grey disappears when the user types)

it might also be nice to make the page less whitespacey when it's on a small screen.

I also tried to save a list after entering my flymine token and nothing happened - I couldn't see the list on flymine. Maybe I did something wrong?

[AdrianBZG]

@yochannah Oh, I will take a look and fix that in a moment, also will change it from value to placeholder. About the whitespacey thing, I don't know really know how to have it properly while maintaining the float-md-left and float-md-right of the elements (text + input) to keep them aligned, since once I do that, I need to add extra < br > to avoid overlapping, I will see if there is some other workaround.

[yochannah]

Try flexbox! I can help out with an example tomorrow if it has you stumped :)

On Mon, 10 Sep 2018, 17:41 Adrián Bazaga, notifications@github.com wrote:

@yochannah https://github.com/yochannah Oh, I will take a look and fix that in a moment, also will change it from value to placeholder. About the whitespacey thing, I don't know really how to have it properly while maintaining the float-md-left and float-md-right of the elements to keep them aligned, since once I do that, I need to add extra to avoid overlapping, I will see if there is some other workaround.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AdrianBZG/InterMine-Data-Browser-Tool/issues/69#issuecomment-419979511, or mute the thread https://github.com/notifications/unsubscribe-auth/AI14joOiXHWhDOVxWW10s2DcP3BmBta3ks5uZpYvgaJpZM4VmMO- .

[AdrianBZG]

@yochannah Sure! I'll try with flexbox today and tell you if I don't manage to get it properly so you can enlighten me tomorrow 👍

[AdrianBZG]

@yochannah Done 😄 It works like a charm with flexbox, thanks. Also now uses the API key provided by the user to load the table, I've tested it with a public one:

http://im-browser-prototype.herokuapp.com/

If you can confirm that it works, the issue can be closed.

[yochannah]

Looks good!

I tried pasting a bad key and the "save as list" button disappears. I'm guessing this might be imtables being intelligent since there are a bunch of console errors where imtables is getting upset :) anyway, disappearing the button with a bad key is good.

I have a few small improvements to suggest, but they're non-urgent - I'll make them tickets on the main intermine repo.