search

developertools-tech / developertools.tech

A collection of tools for developers served as a PWA
https://www.developertools.tech
MIT License
39 stars 45 forks source link

Add TOTP #109

Closed mvarrieur closed 11 months ago

mvarrieur commented 11 months ago

Type of Pull Request

Related Issue #s or links (if any):

Fixes #97

Description of Changes

@dlford I think I have most of the functionality for TOTP here. Just wanted to put up a draft PR so you could give me any feedback before I start writing tests.

netlify[bot] commented 11 months ago

Deploy Preview for developertools-tech ready!

Built without sensitive environment variables

Name Link
Latest commit b2bb3cf2098e4fe3e118ca83995fc6962fb62a65
Latest deploy log https://app.netlify.com/sites/developertools-tech/deploys/6529e8ed86b60d0008e68e55
Deploy Preview https://deploy-preview-109--developertools-tech.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

dlford commented 11 months ago

@mvarrieur the code looks pretty clean, but I can't review the UI yet because there are some type errors happening, can you take a look?

mvarrieur commented 11 months ago

@mvarrieur the code looks pretty clean, but I can't review the UI yet because there are some type errors happening, can you take a look?

Types/Formatting errors are fixed if you want to check out the UI. I'll start adding tests later tonight or this weekend when I get a few minutes.

mvarrieur commented 11 months ago 
* ✅ Pasting to the SECRET field using the paste button doesn't do anything 
* ✅ Changing the SECRET field does not change the Current Token field even when the URI and QR code change
* ✅ A random SECRET instead of a static one if there isn't anything currently in local storage
* ✅ Typing into the SECRET field only updates the URI field every other character, or somewhat randomly

I changed the secret field to take ASCII which is then converted to a Base32 secret instead of only allowing Base32 input which I think was a little confusing/weird.

* ❓ Fixed width QR code, it's a bit large around 1190px

Changed breakpoint to stay on 3 column layout for longer, let me know if you still would like to see a max width. 

* A countdown timer for the Token field

I messed with this for a bit but couldn't figure out a good strategy for getting it implemented. I'm not in the React world much these days.