[WIP] work on #541

[Vertmo]

Before your pull request is reviewed and merged, please ensure that:

• there are no linting errors -- npm run lint
• your code is in a uniquely-named feature branch and has been rebased on top of the latest master. If you're asked to make more changes, make sure you rebase onto master then too!
• your pull request is descriptively named and links to an issue number, i.e. Fixes #123
• all the changes you wanted to do are made

I started work on #541 (adding API keys to a user profile). I already worked on the design of the "Advanced Settings" page, which you can find by clicking on "Advanced Settings" in the /account page (or by navigating to /account/advanced).
As you can see by the mockup, users won't be able to see keys on their interface (since we'll store them hashed), so the only time they'll be able to copy them will be at creation (I took inspiration in GitHub's Personal Access Token system).
Next, I'll be working on adding this keys to the database, and to add the logic to generate, hash them, and store them.

[catarak]

yay! i'm so excited there's progress happening on this front. i'll do an in-depth code review in a bit.

[Vertmo]

Now, this is starting to look good (in my opinion). I think there are still some modifications to do design wise (especially regarding the dialog when you create a key, which might not be up to standards), but I'd like your opinion on it before I go refining things anymore. Anyway take your time, I won't be here next week to check out your response anyway ^^

[catarak]

Finally had a chance to take a look at this, and I added a couple of comments. I'm going to keep thinking about the overall design.

Do you have an idea about how to implement the api token authentication? I think it should be basic authentication, the same way that you can authenticate on the github api with your username and personal access token.

[catarak]

I'm not totally convinced this should be a separate page. it might be nice if it were in a lower section on the settings page. This is the current design for the settings page, though obviously it is not totally implemented. Maybe it would make sense to put the "Advanced Settings" under the user settings with a dashed border?

[Vertmo]

The thing is, I don't think we should overwhelm "normal" users who are only interested in writing a few sketches with some advanced options like this; that's why I wanted to hide such advanced options on another page. But your guess is as good as mine.

[Vertmo]

Basic auth seems like the best way to do it yes, but we should also think of how the API will end up evolving. Right now we're only planning on using it for sketch uploads right ? Do you have an idea of which other features will be available through the API later on ?

[catarak]

For API features, I'm thinking pretty basic CRUD for sketches. The goal is for the web editor to be able to interface with other platforms, e.g. a user could have their code on the web editor and GitHub, could upload examples they have locally on their computer easily.

[Vertmo]

That makes sense. Should I'll get working on the basic authentification as soon as I can !

[Vertmo]

Okay, I have added a Strategy for Basic Auth using passport-http. Changes dans fixes asides, I think this is starting to look correct. Tell me what you think ^^

[catarak]

i'm not sure how to test if the basic authentication with the key is working. do you have a test route? also, i haven't had a chance to think about the design, but i will.

[Vertmo]

Locally yes, I added :
app.get('/temp', passport.authenticate('basic', { session: false }), (req, res) => res.json(req.user)); to server/server.js.

You can then test with curl -X GET --user username:base64(key) -i localhost:8000/temp.

[Vertmo]

@catarak Is there anything I can do to further progress on that front ?

[catarak]

sorry for the delay, i'm not sure! i have a bit of a backup of PR's and i'm trying to get through some of those right now.