Creating Login Components

Description

After you have defined all security parameters, you may build a login component. A login component may include up to 3 "views". All login components have a login view. This includes the fields for entering a user ID and password and may include links to other views. If the security settings allow a user to change his or her password on-line, a second view named "Change Password" is available. This allows you to configure a specific component layout for changing passwords. If the security settings allow the user to recover lost login information, a third view named "Lost Info" is available. This will show various fields that are used to verify the identity of a user and return the requested login information.

Each of the views in a single login component may have its own unique layout and style. Each may use the built in templates or be completely freeform. Each view has a number of messages that may be returned to the user under various conditions. You may edit or translate all of these messages. After you build the login, you may add it to a page. As with other components, parameter overrides on the page may modify the component's messages and style sheet(s). All of the code to validate the user and respond to the login actions is included within the component. The developer does not have to add any code to any page to implement security. To create a login component:

  1. Start the Web Projects Control Panel.

  2. Click New on the toolbar.

  3. Select Web Component and click Next >.

  4. Select Login and click OK to display the Login Builder.

 Define the Login Dialog

  1. Display the Login > Layout property page.

  2. Optionally, make a choice from the Layout Options > Layout Type list. The options are:

    • "Tabular" - left picture

    • "Columns" - middle picture

    • "Stacked Columns" - right picture

  3. Optionally, click '...' in the Layout Options > Layout Type property to select a different cascading style sheet or edit the current style sheet.

  4. Optionally, enable the Layout Options > Show Remember me? property to display the "Remember your login?" checkbox. This gives the user the option of saving his login information in a cookie.

  5. Optionally, make a selection from the Layout Options > Show Options list. The options are:

    • "No Links" - left picture

    • "Show as Links" - middle picture

    • "Show as Buttons" - right picture

  6. Optionally, enable the Layout Options > Freeform Layout property to display the Layout Options > Freeform Template property. Click in the Layout Options > Freeform Template property to display the Freeform Layout dialog.

 Customize User ID Control

  1. Display the Login > Controls property page.

  2. Optionally, change the display size of the User ID text box in the User ID Properties > Size property.

  3. Optionally, change the number of characters saved by the User ID text box in the User ID Properties > MaxLength property.

  4. Optionally, click the '...' in the User ID Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the text box override the properties of the selected cascading style sheet.

  5. Optionally, enter help text into the User ID Properties > Bubble Help Text property.

  6. Optionally, change the User ID label in the User ID Row Properties > Row Label property.

  7. Optionally, click '...' in the User ID Row Properties > Row Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  8. Optionally, click '...' in the User ID Row Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the label override the properties of the selected cascading style sheet.

 Customize Password Control

  1. Optionally, change the display size of the Password text box in the Password Properties > Size property.

  2. Optionally, change the number of characters saved by the Password text box in the Password Properties > MaxLength property.

  3. Optionally, click '...' in the Password Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the text box override the properties of the selected cascading style sheet.

  4. Optionally, enter help text into the Password Properties > Bubble Help Text property.

  5. Optionally, change the Password label in the Password Row Properties > Row Label property.

  6. Optionally, click the '...' button in the Password Row Properties > Row Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  7. Optionally, click '...' in the Password Row Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the label override the properties of the selected cascading style sheet.

 Customize Remember Me Control

  1. Optionally, change the Remember Me label in the Remember Me Properties > Label property.

  2. Optionally, click the '...' button in the Remember Me Row Properties > Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  3. Optionally, make a selection from the Remember Me Properties > Label Location list. The options are:

    • "Label First"

    • "Checkbox First"

  4. Optionally, enter help text into the Remember Me Properties > Label Bubble Help Text property.

  5. Optionally, click the '...' button in the Remember Me Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the checkbox and label override the properties of the selected cascading style sheet.

  6. If you selected "Show as Links" in the Layout Options > Show Options list, you may modify the following properties.

    • 1. Optionally, change the text that appears in the Change Password Link Properties > Link Text Label property.

    • 2. Optionally, click '...' in the Change Password Link Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the link override the properties of the selected cascading style sheet.

    • 3. Optionally, enter help text into the Change Password Link Properties > Label Bubble Help Text property.

    • 4. Optionally, click the '...' button in the Change Password Link Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the link override the properties of the selected cascading style sheet.

  7. If you selected "Show as Buttons" in the Layout Options > Show Options list, you may modify the following properties.

    • 1. Optionally, change the text that appears in the Change Password Button Properties > Button Label property.

    • 2. Optionally, click '...' in the Change Password Button Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the button override the properties of the selected cascading style sheet.

    • 3. Optionally, enter help text into the Change Password Button Properties > Label Bubble Help Text property.

    • 4. Optionally, click '...' in the Change Password Button Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the button override the properties of the selected cascading style sheet.

 Customize Buttons and Links

  1. Display the Login > Properties property page.

  2. Optionally, remove the Login button by clearing the Submit/Cancel Buttons > Has Submit Button property.

  3. Optionally, change the label of the Login button in the Submit/Cancel Buttons > Submit Button Label property.

  4. Optionally, click '...' in the Submit/Cancel Buttons > Submit Button In-Line Style property to display the Style Editor dialog. The style attributes defined here for the button override the properties of the selected cascading style sheet.

  5. Optionally, enter help text into the Submit/Cancel Buttons > Submit Button Bubble Help Text property.

  6. Optionally, remove the Clear button by clearing the Submit/Cancel Buttons > Has Cancel Button property.

  7. Optionally, change the label of the Clear button in the Submit/Cancel Buttons > Cancel Button Label property.

  8. Optionally, click '...' in the Submit/Cancel Buttons > Cancel Button In-Line Style property to display the Style Editor dialog. The style attributes defined here for the button override the properties of the selected cascading style sheet.

  9. Optionally, enter help text into the Submit/Cancel Buttons > Cancel Button Bubble Help Text property.

  10. Optionally, make a selection from the Submit/Cancel Buttons > Button Alignment list. The options are:

    • "center"

    • "left"

    • "right"

  11. Optionally, make a selection from the Submit/Cancel Buttons > Button Order list. The options are:

    • "Submit Button First"

    • "Cancel Button First"

 Customize Messages

Optionally, modify the default messages found in the following properties.

  1. Messages > Login Information Missing

  2. Messages > Login Failed

  3. Messages > Locked Out - Exceeded Allowed Attempts

  4. Messages > User ID Required

  5. Messages > User ID Validation Error Message

  6. Messages > Password Validation Error Message

  7. Messages > Password Expired

  8. Messages > Undefined Error

 Define the Change Password Dialog

  1. Display the Change Password > Layout property page.

  2. Optionally, make a choice from the Layout Options > Layout Type list. The options are:

    • "Tabular" - left picture

    • "Stacked Columns" - right picture

  3. Optionally, click '...' in the Layout Options > Layout Type property to select a different cascading style sheet or edit the current style sheet.

  4. Optionally, enable the Layout Options > Freeform Layout property to display the Layout Options > Freeform Template property. Click in the Layout Options > Freeform Template property to display the Freeform Layout dialog.

 Customize Original Password Control

  1. Display the Change Password > Controls property page.

  2. Optionally, change the display size of the Original Password text box in the Original Password Properties > Size property.

  3. Optionally, change the number of characters saved by the Original Password text box in the Original Password Properties > MaxLength property.

  4. Optionally, click '...' in the Original Password Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the text box override the properties of the selected cascading style sheet.

  5. Optionally, enter help text into the Original Password Properties > Bubble Help Text property.

  6. Optionally, change the Original Password label in the Original Password Row Properties > Row Label property.

  7. Optionally, click '...' in the Original Password Row Properties > Row Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  8. Optionally, click '...' in the Original Password Row Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the label override the properties of the selected cascading style sheet.

 Customize New Password Control

  1. Optionally, change the display size of the New Password text box in the New Password Properties > Size property.

  2. Optionally, change the number of characters saved by the Original Password text box in the New Password Properties > MaxLength property.

  3. Optionally, click '...' in the New Password Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the text box override the properties of the selected cascading style sheet.

  4. Optionally, enter help text into the New Password Properties > Bubble Help Text property.

  5. Optionally, change the New Password label in the New Password Row Properties > Row Label property.

  6. Optionally, click '...' in the New Password Row Properties > Row Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  7. Optionally, click '...' in the New Password Row Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the label override the properties of the selected cascading style sheet.

 Customize Confirm Password Control

  1. Optionally, change the display size of the Confirm Password text box in the Confirm Password Properties > Size property.

  2. Optionally, change the number of characters saved by the Confirm Password text box in the Confirm Password Properties > MaxLength property.

  3. Optionally, click '...' in the Confirm Password Properties > In-Line Style property to display the Style Editor dialog. The style attributes defined here for the text box override the properties of the selected cascading style sheet.

  4. Optionally, enter help text into the Confirm Password Properties > Bubble Help Text property.

  5. Optionally, change the Confirm Password label in the Confirm Password Row Properties > Row Label property.

  6. Optionally, click '...' in the Confirm Password Row Properties > Row Label In-Line Style property to display the Style Editor dialog. The style attributes defined here for the label override the properties of the selected cascading style sheet.

  7. Optionally, click '...' in the Confirm Password Row Properties > Cell In-Line Style property to display the Style Editor dialog. The style attributes defined here for the cell that contains the label override the properties of the selected cascading style sheet.

Limitations

Web publishing applications only.

See Also