RegistrationOverlay

Hello everybody,

in my application, I use the loginOverlay. Its a really good component, but for this, I actually need a simulteanous registration overlay for my application. Does anybody of you already developed a registration form or a registration overlay with a similar design? I have no experience in developing web components. Or are there any tutorials to develop web components in vaadin?

Thank you very much and kind regards,

Jonas

Hi,

I don’t think there’s a reason to implement a registration form as an overlay. LoginOverlay is an overlay because that allows compatibility with password managers, which isn’t an issue with a registration form. There’s also no need to implement a registration form as a custom web component, you can implement a form like that purely on the server in Java code.

-Olli

Hi Olli,

thanks for your answer.
I implemented an registration form on the server. I just wanted to have a registration form with a similar design like the login overlay.
I also could implement my own login overlay (like my registration overlay), but it would not look so fancy.
So my question was just about the design of a component. Are there tutorials to develop own components (like login overlay) or do I have to pay for something like this?
For me, there is a good reason to implement it a an overlay, because it fits perfect to my application.

Thanks,
Jonas

There is a whole [Creating Components]
(https://vaadin.com/docs/v14/flow/creating-components/creating-components-overview.html) section in the docs.

And there is going to be a [video tutorial series]
(https://vaadin.com/learn/training/v14) on this topic as well, but they are not yet available

Thanks!

If you just want the overlay behavior, you can use a Dialog component and put your registration form inside it. As for the design, that’s a much bigger topic. Like I mentioned above, a registration form is not something where you probably want to create a custom component like LoginOverlay - it’s certainly possible to create a registration form as a custom component as well, but it’s kind of like learning how a car’s engine works when all you need to do is to learn to drive.

If you’re not even sure what kind of design you should use for your form, you could a) just try to make one yourself and see if you can get a good enough result, b) study generic design tutorials and try to come up with a mockup design with a bit more knowledge under your belt or even c) pay someone to make a design for you.

Once you do know what your form should look like, but you’re not able to make it look and behave like your design from the previous step, you should focus on what works and what doesn’t. Is it the layouting of the components inside the form? Is it the styling (colors, sizes, fonts, etc.)? Once you have a better idea of what you have working and what you still need, it’s also easier to find answers.

Hope this helps,

Olli

Hi Olli,

thank you! I try a) and b) :wink:
Of course I want to know how the engine works.

Kind Regards,

Jonas

That’s fair and commendable - just as long as you remember that understanding the engine won’t necessarily help you in getting from place A to place B :wink:

-Olli

Thats correct, but developing software isnt for me only to get from place a to place b :wink: