Login form layout

[Wicket]

Hi All,

I have spent quite a bit of time to get a login form working with the correct layout.

Has anyone already put together a login form with a similar layout to the below? I do not mean the styling just the layout ->Image on top > username >password >login > forgot password > rememeber me.

I have been trying to achieve this with client side alignment - but just cant get anywhere near it. 

Could some post an example? So I can see how to do correctly. Thanks

[Wicket]

No example to help me? I feel this should be fairly straight forward but I can not figure it out.

Any pointers / example project would be very useful

 

[Sherzod]

It seems you could already make a nice form. Clarify again, what problem are you currently facing?

[Wicket]

That is not my form it is from google - that is a layout I am trying to reproduce. 
not the styling just the layout of controls

I struggle to do layouts properly having a example project of the above layout using client side alignment would help me

[mpmahen]

This login screen contains 2 tabs one for the login and one for the initial setup or changes. The second one is normally not visible. I am still tuning the look and feel.

The user/ client can register as a new user/client and gets an activation code by e-mail, which they must enter the first time they login. When the password i forgotten they can request a reset, which will send a code to their registered e-mail. After entering this, they can change the password.(last link).

I am using the crisp theme. The form has no border.

[Abaksoft]

On 5/8/2020 at 1:10 AM, Wicket said:

Hi All,

Could some post an example? So I can see how to do correctly. Thanks

 

Hi,

 

Sample_Desktop.7z

ReadMe.txt

Edited :  MainModule  -->  Theme : uni_ubuntu_neptune

[x11]

desktop or touch (mobile)

[Wicket]

Thanks for the help @Abaksoft, especially with the readme explaining how it all goes together. 

[Abaksoft]

7 minutes ago, Wicket said:

Thanks for the help @Abaksoft, especially with the readme explaining how it all goes together. 

thx.

•  infact, in Desktop mode you can do it without Layout vbox. 

•  in mobile you need vbox. 

http://forums.unigui.com/index.php?/topic/14398-what-is-the-effect-of-clientheight-if-alignmentcontrol-is-unialignmentclient/&do=findComment&comment=78021

 

[Wicket]

How do you make the username and password UniEdits align center in the form? In this example they are not in the center - one side has more space than the other.

eg, 1 has less space (margin?) than 2

[Abaksoft]

8 minutes ago, Wicket said:

As this login form can't be resize,  no need layout technic here.

simply classical delphi centering :

Select the two uniEdits then Right Click, choose horizontal center in window.

[Kenneth]

22 minutes ago, Wicket said:

How do you make the username and password UniEdits align center in the form? In this example they are not in the center - one side has more space than the other.

eg, 1 has less space (margin?) than 2

for UniContainerPanel1: Layout:=vbox, LayoutAttribs: Aling:=Center, Pack:=start;

[Wicket]

Thanks @Kenneth and @Abaksoft - this is really valuable for me in learning the correct way to construct layouts!

[Abaksoft]

1 hour ago, Wicket said:

Thanks @Kenneth and @Abaksoft - this is really valuable for me in learning the correct way to construct layouts!

Hi Wicket,

i think this can help you :

http://forums.unigui.com/applications/core/interface/file/attachment.php?id=4546

[Wicket]

Thanks for your help @Abaksoft 

[Abaksoft]

There is a better way to design a login screen with css and layout technics from Muhammed :

 

 

[qingyang2020]

thanks for sharing...