Project

General

Profile

Customize Registration-Widget

Added by Stefan Kurek over 3 years ago

Hello there,

I've been looking for this feature - which I am sure exists in Wt 4.2.1 - for a while now and cannot seem to find it. (Link 1)

I want to change the appearance of the dialogue which opens when clicking the register-button on the authentication-/login-screen. I noticed the template "Wt.Auth.template.registration" is rendered, but I don't know how to change it as it seems to be hardcoded into BootstrapTheme_xml.C which I have no access to (and changing that seems like a dirty solution).

Isn't there some XML-file containing the default-formats one can reconfigure? Or at least a tutorial on this subject? The only one (I only just now) found is the git-repo for auth2 (Link 2), but here we're creating multiple classes I'd suspect to be redundant if there was a configuratable file.

So... How do I change the shown registration message?

Link 1: https://www.webtoolkit.eu/wt/doc/tutorial/auth.html - Introduction: "How you use this information for authorization or to customize the user experience is out of the scope of the module."

Link 2: https://github.com/emweb/wt/tree/master/examples/feature/auth2


Replies (8)

RE: Customize Registration-Widget - Added by Bruce Toll over 3 years ago

Hi,

I believe that you can customize the built-in messages by providing a messageResourceBundle (https://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WMessageResourceBundle.html).

The hangman example (hangman.C, strings.xml and templates.xml) demonstrates how to customize various Wt.Auth.* messages.

RE: Customize Registration-Widget - Added by Stefan Kurek over 3 years ago

Hello Bruce Toll,

thank you for your help! That was actually the first thing I tried, but because the second line in my (already existing) xml-file was <messages xmlns:if="Wt.WTemplate.conditions">
instead of just <messages> (like in the Hangman-Example). Thanks to you I figured that out!

Now, I got to replace the default message for "Wt.Auth.template.registration". This is the default code, which I only slightly modified:

<?xml version="1.0" encoding="UTF-8" ?>
<messages>
  <message id="Wt.Auth.field3">
    <![CDATA[
      ${<if:{1}>}
        <div class="control-group">
          <label for="${id:{1}}" class="control-label">
            ${{2}} Test
          </label>
          <div class="controls">
            ${{1}} <span class="help-inline">
              ${{1}-info} ${{3} class="btn-link"}
            </span>
          </div>
        </div>
      ${</if:{1}>}
    ]]>
  </message>

  <message id="Wt.Auth.template.registration">
    <div class="Wt-auth-registration">
      <p class="lead">
        ${password-description}
      </p>

      <div class="form-horizontal">
        ${block:Wt.Auth.field3 user-name user-name-label confirm-is-you}
        ${block:Wt.Auth.field choose-password}
        ${block:Wt.Auth.field repeat-password}
        ${block:Wt.Auth.field email}

        ${<if:oauth>}
        <p class="lead">
          ${oauth-description}
        </p>
          <div class="control-group">
            <label class="control-label">${tr:Wt.Auth.oauth}</label>
            <div class="controls">
              ${icons}
            </div>
          </div>
        ${</if:oauth>}

        <div class="modal-footer">
          ${ok-button class="btn-primary"} ${cancel-button}
        </div>
      </div>
    </div>
  </message>
</messages>

(See the attachment for the screenshot of the interfaced produced by the given code.)

As a test, I changed ${{2}} to ${{2}} Test (blue), but I cannot find a way to access the Text beneath the Line-Edit. (red)

I also don't know how to trace parameters like "user-name".

  • Obviously, "user-name" is the name of the variable containing the Line-Edit-Widget.
  • "user-name-label" is the name of the variable containing the text for the label to put in front of the Line-Edit.

The other functionalities seem to be deactivated, so I don't know what to do with the third parameter and that "btn-link".

Do you know how to access and change the text marked with red? Thank you for your help!

RE: Customize Registration-Widget - Added by Bruce Toll over 3 years ago

Hi Stefan,

I believe you can change the text in red by customizing the message for Wt.Auth.user-name-info. I just grepped for the existing message: "Enter your user name". In general, the source and examples in Wt are a helpful supplement to the documentation.

RE: Customize Registration-Widget - Added by Stefan Kurek over 3 years ago

Thank you! That was a big help!

I even found where all these variables for the AuthWidget and RegistrationWidget are located: AuthStrings_xml

At least I hoped so, but the variables are not overridden consistently. I wanted to change the language of the RegistrationWidget (and add some custom text). Now the user-name is overridden while choose-password is not taken from my xml-file.

Is this behaviour a known bug? Or am I doing something wrong? I'm currently loading the xml-file just like in the Hangman-Example.

RE: Customize Registration-Widget - Added by Stefan Kurek over 3 years ago

I found an error in the console. For this message (which I copied from "AuthStrings.C.o")...

<message id="Wt.Auth.remember-me-info.days">
    <plural case="0">Remember my login for ONE day.</plural>
    <plural case="1">Remember my login for {1} days.</plural>
</message>

...the console gave me the following error: "Expected 'nplurals' attribute in ". I tried setting it up like this:

<message id="Wt.Auth.remember-me-info.days" nplurals="2">
    <plural case="0">Remember my login for ONE day.</plural>
    <plural case="1">Remember my login for {1} days.</plural>
</message nplurals="2">

But the error persisted. It was gone after I exchanged "message" with "messages":

<messages id="Wt.Auth.remember-me-info.days">
    <plural case="0">Remember my login for ONE day.</plural>
    <plural case="1">Remember my login for {1} days.</plural>
</messages>

Now, however, there are no errors, but the layout is broken.

Is there any documentation on the subject? My best guess would've been "the compiled code can be used as a template", but I'm doing something wrong.

Thank you for your help! It is much appreciated!

RE: Customize Registration-Widget - Added by Stefan Kurek over 3 years ago

Update: I found the documentation for my specific case: https://webtoolkit.eu/wt/doc/reference/html/classWt_1_1WMessageResourceBundle.html#details (Plural forms)

<messages nplurals="2"
          plural="n">
    <message id="Wt.Auth.remember-me-info.days">
        <plural case="0">Sie bleiben für einen Tag angemeldet.</plural>
        <plural case="1">Sie bleiben für {1} Tage angemeldet.</plural>
    </message>
</messages>

I tried it with and without the "plural"-option and neither worked. (The result is the same as you can see in the image in the reply above.)

RE: Customize Registration-Widget - Added by Bruce Toll over 3 years ago

I believe that the nplurals and plural attributes in the messages should match those in auth_strings.xml so that the case values map correctly, e.g.

<messages nplurals="2" plural="n == 1 ? 0 : 1">

RE: Customize Registration-Widget - Added by Stefan Kurek over 3 years ago

Thank you! That was the last piece I needed!

I had my messages in a messages-Block and in that block I had the messages-Block you see in my last reply. I move the "nplurals"-property to the outer messages, removed the inner messages (and left the message) and applied the change you proposed.

Now the second plural-option is being displayed! (Yay!) All my translated messages are now being applied!

The last problem was the broken layout, which I found out to have broken myself by copying the message for "Wt.Auth.field" two times from different sources into my xml. (I don't know why one didn't override the other, but after cutting that out the layout was whole again!)

Thanks a bunch!

    (1-8/8)