Adding settings to login form gadgets

You can add properties to the login form gadget to allow you to control additional aspects of its behavior while editing a page or page template. For example, you might want to allow an administrator to add some explanatory text to the gadget through its settings.

You can use this same approach to add other settings to other gadgets.

To add settings to a login form gadget, follow these steps:

1. Enable theme overrides and download the theme files.
2. We'll create a new version of the gadget, preserving the original version, just in case. Under the /Gadgets folder within the downloaded theme files, create a Login.LoginFormAlternative folder.
3. Copy all content from the /Gadgets/Login.LoginForm folder to the new /Gadgets/Login.LoginFormAlternative folder.
4. Open the /Gadgets/Login.LoginFormAlternative/MainConfig.cfg and edit the gadget description, so we can easily tell the difference between normal and alternative gadgets. The file should now look something like this:
   <Gadget> <Title>Log in form alternative</Title> <ShortTitle></ShortTitle> <Description>Controls to log in or out, reset password, and view profile. Alternative version!</Description> <Module>LoginModule</Module> <ClassName>WaGadgetLoginForm</ClassName> <Dedication>Login</Dedication> <Icon>LoginBoxIcon.png</Icon> <IconSmall>LoginBoxIconSmall.png</IconSmall> </Gadget>
5. Next, let's add the new settings to the gadget settings layout config file. Open the SettingsLayout.cfg file within the /Gadgets/Login.LoginFormAlternative folder, then add – before all other sections under <SettingsLayout> – the following section:
<Section title="New Settings"> <Control settingName="ExtraText" title="Extra text" titlePosition="Left"/> <Control settingName="ShowForgotPassword" title="Show 'Forgot password' link" titlePosition="Left" titleWidth="247"/> <Control settingName="ShowRememberMe" title="Show 'Remember me' label" titlePosition="Left" titleWidth="247"/> </Section>
   Here we define three new settings: ExtraText, ShowForgotPassword and ShowRememberMe. We also set text labels for the fields, and align them and set their display width.
6. Now, its time to define the new setting types. To do so, we'll open Settings.cfg within the /Gadgets/Login.LoginFormAlternative folder and add these three lines anywhere under <Settings>:
   <Setting name="ExtraText" type="string" /> <Setting name="ShowForgotPassword" type="boolean" defaultValue="true" initialValue="true" width="20"/> <Setting name="ShowRememberMe" type="boolean" defaultValue="true" initialValue="true" width="20"/>
   Here, we define that ExtraText is a string, and ShowForgotPassword and ShowRememberMe are boolean. We also set default values for the booleans (showing Forget password and Remember me by default) and set the width of the checkboxes. Note we use the same names as in SettingsLayout.cfg.
7. Next, we need to connect the settings to the gadget's HTML code. To do so, open GadgetTemplate.tpl within /Gadgets/Login.LoginFormAlternative for editing.
8. Insert this code after the <$else$> statement:
   <$if (Model.Settings.ExtraText)$><div><$Model.Settings.ExtraText$></div><$endif$>
   This will check if ExtraText is set, and if yes, will render a DIV tag containing the text entered in the gadget settings.
9. Now, find the div class where the Forgot password link is displayed and surround it with an IF statement to check if ShowForgotPassword is set to true, and if yes, show the link. The code should appear something like this:
   <$if (Model.Settings.ShowForgotPassword)$> <div class="loginPasswordForgot"> <a href="<$Model.Urls.ForgotPassword$>"><$Model.Text.LinkForgotPasswordText$></a> </div> <$endif$>
10. Next, find the place where the Remember me option is displayed and surround it with an IF statement to check if ShowRememberMe is set to true, and if yes, to show the Remember me text and checkbox. The code should appear something like this:
    <$if (Model.Settings.ShowRememberMe)$> <div class="loginActionRememberMe"> <input id="<$Model.Id$>_rememberMe" type="checkbox" name="rememberMe" tabindex="3" class="rememberMeCheckboxControl"/><label for="<$Model.Id$>_rememberMe"><$Model.Text.LabelRemember$></label> </div> <$endif$>
11. Save your changes to GadgetTemplate.tpl.
12. Upload all new and modified files and folders to the appropriate folder under the Theme_Overrides folder on your site via File management or WebDAV.
13. Return to the Theme overrides screen and rebuild the theme.

You can now open a page for editing and find the new gadget in the gadgets list under Custom Group.

After dragging the gadget to the page, you can modify the new gadget settings.