Add token entry/storage functionality to test console #7
Conversation
- Use Alpine JS to submit form
- Make display of token management contingent on auth being enabled
- Make token textarea responsive
| var keyF = func() string { return "" } | ||
| if len(h.SigningKey) > 0 { | ||
| keyF = func() string { | ||
| var authTokenF = func() string { return "" } |
There was a problem hiding this comment.
Just renamed this to make it a little more descriptive.
| tmpl = tmpl.Funcs(template.FuncMap{"AuthToken": keyF}) | ||
| funcMap := template.FuncMap{ | ||
| "AuthToken": authTokenF, | ||
| "AuthEnabled": authEnabledF, |
There was a problem hiding this comment.
This adds the hook so we can skip the token entry widget when auth is not enabled
internal/server/templates/index.html
Outdated
| font-size: 1.0rem; | ||
| font-family: Verdana, Arial, Helvetica, sans-serif; | ||
| text-decoration: none; | ||
| margin-bottom: 1px; |
There was a problem hiding this comment.
This margin-bottom and the line-heights here and in the next class are there because the vertical alignment of the +/- and the text following it were slightly off. There is now 1px extra space below, but the alignment looks ok.
This is annoying, but not that big of a deal -- but if there's a better way to do this, I'd like to know!
| } | ||
| } | ||
| </script> | ||
| <div class="page-container"> |
There was a problem hiding this comment.
There are a bunch of changes in this block, but the reason it's showing up as a a complete block diff is because I fixed the formatting. The material changes are incremental.
This PR:
NB: There are still no material changes to auth behavior in this PR. IOW, The server will still supply a short-lived token to auth the test console when auth is enabled. I'll be addressing that in the next PR, there were enough changes here that I wanted to keep that behavior separate, and focus on the frontend changes here.
Decisions and Requested Feedback
In general, I think the additions here are pretty slick ( ;) ) and I'm happy both to see a more modern HTML structure and for myself to get better versed in flexbox and such. That said, the CSS in particular seems a little more ungainly in this rev I'm happy for any suggestions on making that and the page structure generally, leaner.
Also [within the boundaries of things that are easy to accomplish] would love UX feedback.
Steps to Test
The things to test here are mainly that the form, and especially the new addition for tokens, works and seems comprehensible. (Note that you'll still get a pre-populated token in this release, which will be dropped in the next PR; so you can test the operations, but just keep in mind that in the future that will be blank)
The html for this page can be viewed and interacted with pretty well by just opening the index.html file in your browser. Form submissions obviously won't work, but testing without a running server can cover the important bases. So, if you can't run the server, you can still review the code and most of the UX without doing that.
If you're executed a full test with the server: Since the test console will only show the new token entry widget when authentication is enabled, and as authentication is enabled on startup, you'll need to start the server two different ways to get a full and comprehensive test.
Building this PR
Without Go on your machine
make docker-buildWith Go 1.22.x on your machine
makeAuthentication Disabled
In this case, you're just verifying that the server still works and that there's no token management artifacts visible here. The only visible changes here are that the url entry field is now responsive, and there's a border around the form.
Starting the server
Docker:
make docker-runBinary:
./build/scrape-serverTesting
Enter a url in the url entry field and
Hit It, etc.Authentication Enabled
The meat of the changes in this PR are visible when Authentication is enabled.
Starting the Server
Authentication is enabled in
scrape-serverby providing a signing key to the server at startup. This can be done via a command line flag or an environment variable.Here's a signing key for testing:
Is a signing key that you can use to enable authentication as shown below
Starting the server with authentication enabled:
Using Docker:
scrape-bookworm-slimimage you just built. If it's running, stop it.Optional Settings8080SCRAPE_SIGNING_KEYUsing a binary you built:
This is a little easier since you can just pass a command line flag containing the signing key
Stuff to test (finally)
The
Enter Tokenbutton will show and hide the token entry field, along with other buttons to save and clear the token, as noted above. Generally exercise these, feedback welcome!