feat(ui): improve admin setup ux

[wwayne]

Screen record:
https://jam.dev/c/650ca8b7-8e75-4d5b-825a-0a64b3035c34

[wsxiaoys]

Looks nice to me. Add @liangfung for review from implementation perspective. Will review the text once it's done.

[liangfung]

LGTM. By the way, do we need to add a redirect logic so that once the server has been initialized by an admin, it redirects to the signup page. Otherwise, it will follow the regular user signup logic.

[wwayne]

• After server intialization(admin already finished setup), going to the /auth/signup?isAdmin=true will be redirected to /auth/signin related codes
• Add a new component admin-register-step for extracting Step component
• Instead of removing the scrollbar, I update CSS to make sure the scrollbar won't show and hide as before, video record: https://jam.dev/c/aa5730b9-a25e-4adb-b045-5da2f16a881c

[wsxiaoys]

Instead of removing the scrollbar, I update CSS to make sure the scrollbar won't show and hide as before, video record: https://jam.dev/c/aa5730b9-a25e-4adb-b045-5da2f16a881c

Please disable scroll.

[wsxiaoys]

nit: since this is only used in admin-register, it's ok to put it inside of that file.

[wwayne]

updated

[wsxiaoys]

this file generates following warning

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/meng/Projects/tabby/ee/tabby-ui/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!/Users/meng/Projects/tabby/ee/tabby-ui/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!/Users/meng/Projects/tabby/ee/tabby-ui/app/auth/signup/components/admin-register.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

[wwayne]

change .xxx{ &:after {} } to .xxx:after {} removed this warning

[wsxiaoys]

Please also make UI components non-interactive when it's not active:

https://jam.dev/c/123358e6-d4ce-48ab-8ba5-264f77981c9f
(i can select / interact with input form, even though it's not the current step)

[wwayne]

Updated

• disable scrolling
• hidden component should not be interactive

https://jam.dev/c/c9583fa5-6871-41f7-a2d3-306bb638db10

[wwayne]

btw I found the input got warrning component is changing an uncontrolled input to be controlled....
I found the solution in here: shadcn-ui/ui#410
so I added their default values

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password1: "",
      password2: "",
      invitationCode
    }
  })

@liangfung can you help me to double check if it would break anything? thanks

I checked /signin /signup?invitationCode=xxx , and looks all good

[liangfung]

btw I found the input got warrning component is changing an uncontrolled input to be controlled.... I found the solution in here: shadcn-ui/ui#410 so I added their default values

Nice, with this change the functionality works normally, and it can remove the warnings. However, it might cause the form to lose the required error messages, and as more fields are added, each might need to be assigned individually. Of course, the server will validate the form submission parameters.
cc @wsxiaoys

before:

after:

[liangfung]

shadcn-ui/ui#410 (comment)
This solution is also good; there's no need to set empty string defaultValues, and it can still trigger required_error. However, it needs to be set in each input.

[wwayne]

Thanks @liangfung , I switched to the new solution
It can dislay required warning now

[wwayne]

This issue fixed as well