Making the login form more customizable

[Luca de Alfaro]

The login form using FormStyleBulma currently looks like this for me: 

I would like to make this more customizable, in particular, I would like to be able to specify the text and classes of the buttons.  So I propose: 

Would you mind if I add to self.param in the auth constructor something like: 

    messages=MESSAGES,

so that the messages become customizable? 

And, would you mind if I added another parameter to contain a dictionary that maps from buttons, to their classes?  So one would be able to specify the class of the lost-password, sign-in, etc, buttons?  Something like: 

    button_classes=BUTTON_CLASSES

(defined similarly to MESSAGES now). 

I could make a PR with it.  Thoughts? 

Luca

[Kevin Keller]

I think its a great idea Luca. 

Powered by cloudHQ

--
You received this message because you are subscribed to the Google Groups "py4web" group.
To unsubscribe from this group and stop receiving emails from it, send an email to py4web+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/py4web/f12616af-29a8-4a23-baa0-29d7fb3e7280n%40googlegroups.com.

[Jim Steil]

I would be in favor of that.

-Jim

[Luca de Alfaro]

I made a PR: https://github.com/web2py/py4web/pull/456

I _think_ I made it in a way that just adds flexibility without introducing anything complex/strange. 

I have simply made messages, and classes, part of the parameters of Auth (in self.parameters), so that one can customize them in a similar way one can customize other aspects of Auth. 

Luca

[Jim Steil]

thanks!

[Massimo]

I will take it but I cannot promise backward compatibility. Soon somebody will want to attach custom classes to other elements and we need a more general mechanism. Also "info" means nothing to py4web so those should be empty by default. I think a better approach is to have a way to refer by name to every component in a form and simply create a mapping between classes/styles and those named components (buttons, inputs, checkboxes, errors, etc)

[Luca de Alfaro]

No problem about backward compatibility.  I used "info" because "info" was there already in Auth, I don't know why it was there. 

But the general problem is this.  Fonts are customizable nicely, via the FormStyleDefault, FormStyleBulma, etc.  And that is perfect. 

BUT, Auth then injects extra buttons skipping those forms.  I have done this PR to quickly solve the problem.  But a far better solution would be to endow FormStyleDefault, FormStyleBulma, etc, with a method to inject an additional button; the class would then style the button properly and add it to the form.  This would be a much more general solution.  Thoughts?  We would then need to be able to call this "inject button" function from Auth, and also from the Form constructor, for instance to inject a "Cancel" button. 

Luca

[Paul Ellis]

For the next person who doesn't yet understand how to get Auth to use a different formstyle and customise the buttons.

Taken from https://github.com/learn-py4web/scaffold_bulma

common.py

...

from py4web.utils.auth import Auth

from py4web.utils.form import FormStyleBulma

...

auth = Auth(session, db, define_tables=False)

...

# Fixes the messages.

auth_messages = copy.deepcopy(auth.MESSAGES)

auth_messages['buttons']['sign-in'] = "Log in"

auth_messages['buttons']['sign-up'] = "Sign up"

auth_messages['buttons']['lost-password'] = "Lost password"

# And button classes.

auth_button_classes = {

    "lost-password": "button is-danger is-light",

    "register": "button is-info is-light",

    "request": "button is-primary",

    "sign-in": "button is-primary",

    "sign-up": "button is-success",

    "submit": "button is-primary",

}

...

auth.param.formstyle = FormStyleBulma

...