Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: config page ux improvements #315

Merged
merged 6 commits into from
Jul 4, 2024

Conversation

SgtPooki
Copy link
Member

@SgtPooki SgtPooki commented Jul 3, 2024

  • feat: convert config inputs to textarea
  • fix: save config works
  • feat: add descriptions to config page inputs
  • chore: package-lock.json update

Title

feat: config page ux improvements

Description

Updates the config page inputs that were type=input to <textarea> and adds descriptions to each input. It makes the page more user-friendly and less prone to input errors.

Some style updates were done to resolve a long-standing UX issue with error message placement.

Fixes #290

Notes & open questions

Change checklist

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if necessary (this includes comments as well)
  • I have added tests that prove my fix is effective or that my feature works

@SgtPooki SgtPooki linked an issue Jul 3, 2024 that may be closed by this pull request
Copy link
Member

@lidel lidel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Pushed small css tweaks, validation now looks like this:

2024-07-04_02-03

Small concern about changing storage format (see details below), other than that lgtm.

const localStorageGatewaysString = localStorage.getItem(LOCAL_STORAGE_KEYS.config.gateways) ?? JSON.stringify(defaultGateways)
const localStorageRoutersString = localStorage.getItem(LOCAL_STORAGE_KEYS.config.routers) ?? JSON.stringify(defaultRouters)
const localStorageDnsResolvers = localStorage.getItem(LOCAL_STORAGE_KEYS.config.dnsJsonResolvers) ?? JSON.stringify(defaultDnsJsonResolvers)
const localStorageGatewaysString = localStorage.getItem(LOCAL_STORAGE_KEYS.config.gateways) ?? convertUrlArrayToInput(defaultGateways)
Copy link
Member

@lidel lidel Jul 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: would it be possible to keep existing behavior (store JSON) and convert to prettier newline delimited representation only in the end users GUI?

Right now, existing users that have preexisting JSON in storage are being broken (screenshot below):

2024-07-04_02-06

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

totally. let me fiddle with that. i created functions for conversion both ways so that shouldn't be a big deal.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok @lidel give it a try with add703b

@SgtPooki SgtPooki requested a review from lidel July 4, 2024 17:11
Copy link
Member

@lidel lidel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @SgtPooki, let's ship this 👍

@lidel lidel merged commit 16b31b9 into main Jul 4, 2024
16 checks passed
@lidel lidel deleted the 290-ux-make-url-lists-line-separated-textboxes branch July 4, 2024 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ux: make URL lists line-separated textboxes
2 participants