chore(webapp): migration to vuetify 3

[nils-wisiol]

AI-assisted changes.

I played with everything I could think of on the website:

• direct debit donation
• account creation, login, 2fa enabled, change email, delete account
• domain list, filtering
• rrset creation and deletion
• scrolled through all pages of the web site

[vasimi]

Just passing by. 🫣 Seems like this PR is actually fixing the bug that made me come to this repo (record value validation being too eager), but there's a bunch of visual issues that probably don't make sense to report, it'd be easier to just fix them.

If you'd be interested, I can go through the whole app and try preparing a patch once I have some free time.

[peterthomassen]

If you'd be interested, I can go through the whole app and try preparing a patch once I have some free time.

That would be very welcome! Thank you <3

[eyJhb]

the advanced in tokens will show errors even when fields are filled out :)

[peterthomassen]

I've rebased this (only a small conflict about e35c2a6) and applied kind suggestions by @vasimi.

Below, I compiled an overview of regressions. Note that I did not list any deviations (some are of course fine), but only those that hamper functionality, hamper functionality, are ugly or otherwise don't look professional.

@vasimi You mentioned before that you could prepare a patch. May I suggest an upcoming rainy weekend? ;-) Please let us know; it's of course fine if you don't want to. But if you let us know, we can make an alternative plan rather than waiting in silence. -- I hope the below list would be helpful for you.

• Homepage:

  • introductory paragraph width ignore, spacing between them ignored
  • sign-up form formatting in main body broken
  • Spacing of Supporters and Partners broken
  • pins on map seem to small

• Signup:

  • Captcha challenge should be displayed to the right of the input field, no underneath
  • When selecting "register dedyn.io domain", the bullet list in the displayed blue info box is missing the bullets

• Login:

  • wrong credentials error banner overlaps with input field caption
  • successful login after failed login redirects to login page (with logged-in menu on top)

• CRUD table

  • The banner above the table with the blue info icon has lost its background color
  • Column headings are missing (or white)
  • readonly field content text is now gray (should be black), and has a light gray background (should be white)
  • When showing advanced settings, action icons are no longer displayed next to each other (there's newline now)
  • Letter spacing modals for explantory text is too large (same for TOTP confirmation dialog)
  • Headline row (contains search field etc.) has grey background, should be white (like search field)

• Domain management:

  • Domain details info dialog:
    • Closing "x" in modal is misplaced (after a line break instead of on the right end of the frist line)
    • Paragraph spacing misaligned
    • Under step 1, when expanding the warning, the bullet list is dedented to the left
    • DS digest and DNSKEY key fields show validation error ("Only internal whitespace allowed.")
    • The link at the end is now blue (should be yellow/orange)
  • When an RRset has multiple records, there's too much spacing between them

• Token Management:

  • Advanced settings unusuable as three additional columns with switches are displayed, but they have no headings so it's unclear what the switches are for
  • In the list, the subnet fields have validation errors event when correctly filled with the default (does not apply to creation dialog)

• About us:

  • introductory paragraph width ignore, spacing between them ignored
  • white boxes should be 2x2 but are 4x1 (similar issue for Terms of Use)
  • In the statutes, all bullet lists are detended to the left; nested lists are flattened (same for Privacy Policy)

• Donation:

  • Direct debit: erroneous line breaks for radio inputs
  • Bank transfer: does not unfold. After clicking, other sections misbehave (randomly fold etc.)
  • PayPal: formatting broken
  • paragraph spacing on the right-hand-side box missing
  • Navigation to other pages broken (at least after trying to unfold "Bank transfer")

• Colors:

  • Disabled submission fields look irritating (black on very-dark-blackish yellow, should be dark gray on light gray)
  • Text color has switched from dark gray to black in many places
  • Main menu color is now more yellow than orange (contrast worsened). Also, underlines are gone
  • Footer link color has switched from yellow to blue (and underlines are gone)
  • Sign-up button etc. have black text instead of white

• Misc:

  • Footer: Spacing before last three rows is gone
  • External links (roadmap, forum) cause an internal navigation (blank main body) and only then a redirect
  • On short pages, the footer moves up (should stick to the bottom of the page)
  • When 500 is returned, a red banner with a generic error text is displayed at the bottom, but the "dismiss" button has the same color as it's text (so it's illegible)
  • Sometimes, weird routing happens. For example, I tried to go from Token Management to 2FA and was sent back to Token Management. Hard to reproduce.
  • Auth action GUI: sometimes green boxes "hang" into field labels, e.g. in password reset flow

• If time, also apply #1209 on top

[nils-wisiol]

Pushed the latest fixes and applied PR #1209 on top of this branch. Covered the reviewed webapp color/layout issues, accordion behavior, signup/captcha fallback, footer layout, and 500-error snackbar dismiss contrast.

Note on PR #1209: the Layershift commit adds the logo asset, but it does not render a visible Layershift partner/supporter mention; Layershift only appears in the anycast map tooltips via existing adopted_by data. The logo isn't used anywhere.

Ready for a new review.

[peterthomassen]

This looks pretty good now - there are only some differences left from the Vue2 version, and that shouldn't block merging.

However, the following are actually relevant, and I hope we can fix them before:

• The footer is always visible. While that doesn't see ma problem at first, it actually
  • breaks mobile use for the most parts, and on smaller screens entirely
  • less relevant, breaks navigating with the page up/down buttons because the scroll interval is a full page, moving lots of content away behind the invisible footer
• When navigating to a new page, the viewport doesn't scroll to the top. That's counter to how it works everywhere else / very unintuitive. Try scrolling down on the "Privacy policy" page, then click on "About us" and you'll end up in the middle of the charter.
• (Sometimes, weird routing happens. For example, I tried to go from Token Management to 2FA and was sent back to Token Management. Hard to reproduce.)

The last was reported before. If we can't figure it out but can fix the footer and scrolling issue, then I think we should ignore it for now.

[nils-wisiol]

Addressed the latest review reply in fdefba2.\n\n- Footer now uses normal document flow instead of v-footer app, so it is not always visible while scrolling but still lands at the bottom on short pages.\n- Route changes now scroll to top using Vue Router 4's { left, top } scroll behavior.\n\nVerified locally with Chrome: Privacy Policy footer is not visible at top/mid-scroll, Privacy Policy -> About resets scrollY to 0, and the login page footer reaches the viewport bottom. I left the intermittent Token Management -> 2FA routing report untouched for now since it remains hard to reproduce and the comment suggested ignoring it if these two fixes land.

[peterthomassen]

lgtm, thanks!

I fixed a few other things from the list manually, applied #1212 on top.