Help Center

Menu

Login Form Design Area

Last Updated: 17 Dec 2015

This design area allows you to add a login area into the design. If the user has an account, they will be able to enter their username and password and click a login button. Then they will be able to access any additional pages in the Site.

Bookmarks to the headings on this page:

  1. Set Variables
  2. Print Variables
  3. Example

The code that is required for the Login Form design area is shown below. 

<MySource_AREA id_name="login_form" design_area="login_form">
  <MySource_PRINT var="system_messages" /><br />
  <MySource_LOGIN_SECTION>
    <MySource_PRINT var="form_open" />
    Not currently logged in<br />
    Username: 
    <MySource_PRINT var="username_box" size="10" class="sq-data" />
    <br />
    Password: 
    <MySource_PRINT var="password_box" size="10" class="sq-data" />
    <br />
    <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
    <MySource_PRINT var="form_close" />
  </MySource_LOGIN_SECTION>
  <MySource_LOGOUT_SECTION>
    <MySource_PRINT var="form_open" />
    Currently logged in as: 
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
    <br />
    <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
    <MySource_PRINT var="form_close" />
  </MySource_LOGOUT_SECTION>
</MySource_AREA>

Set Variables

The set variables available for the Login Form design area are as follows:

  • give_username_focus: this variable allows you to set whether the username box has focus when the page is loaded. By default, this is set to false. The example below sets this value to true, meaning that it will have focus.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
    <MySource_SET name="give_username_focus" value="true" />
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
        <MySource_PRINT var="username_box" size="10" class="sq-data" />
        <br />
        Password: 
        <MySource_PRINT var="password_box" size="10" class="sq-data" />
        <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
        <br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • forward_www_vars: this variable allows you to set whether to forward all GET and POST vars. By default, this is set to false. The example below sets this value to true.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
    <MySource_SET name="forward_www_vars" value="true" />
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
        <MySource_PRINT var="username_box" size="10" class="sq-data" />
        <br />
        Password: 
        <MySource_PRINT var="password_box" size="10" class="sq-data" />
        <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
        <br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 

The print variables that can be used in the Login Form design area are as follows:

  • form_open: this variable stats the login and logout form by printing the HTML <form> tag. This is required for this design area.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
    <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
        <MySource_PRINT var="username_box" size="10" class="sq-data" />
        <br />
        Password: 
        <MySource_PRINT var="password_box" size="10" class="sq-data" />
        <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
    <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • form_close: this variable ends the login and logout form by printing the HTML </form> tag. This is required for this design area.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password: 
         <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
    <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
    <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • login_heading: this variable will print the heading that has been sent by the operation wanting the login box. For example, on the main Squiz Matrix login box, this is set to Login.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
    <MySource_PRINT var="login_heading" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password:
         <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • login_message: this variable will print the message that has been sent by the operation wanting the login box. For example, on the main Squiz Matrix login box, this is set to You need to login before you can access the backend.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
    <MySource_PRINT var="login_message" /><br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password: 
         <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • password_box: this variable will print the password box. Any extra arguments that can be added to the HTML <input> tag can also be used with variable. For example, in the code below, size="10" is used with this variable. This will set the size of the box to 10 characters. This is required for this design area.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password: 
    <MySource_PRINT var="password_box" size="10" class="sq-data" />
    <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • referer: this variable will print the URL of the page that the user was last viewing before they got the login box. This URL can be a URL from an external page.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password: 
         <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
    <MySource_PRINT var="referer" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • submit_button: this variable will print the submit button. Any extra arguments that can be added to the HTML <input> tag can also be used with variable. For example, in the code below, value="Login" and value="Logout" is used with this variable. This defines what text to print on the button. This is required for this design area.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password: <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
    <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • system_messages: this variable will print any error messages that the user receives when they are trying to login. For example, if they enter an incorrect password they will receive the message Invalid username or password entered.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
        Username: 
         <MySource_PRINT var="username_box" size="10" class="sq-data" />
         <br />
        Password:
         <MySource_PRINT var="password_box" size="10" class="sq-data" />
         <br />
        <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
         <MySource_PRINT var="form_open" />
         Currently logged in as: 
         <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
         <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
         <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA> 
  • username_box: this variable will print the username box. Any extra arguments that can be added to the HTML <input> tag can also be used with variable. For example, in the code below, size="10" is used with this variable. This defines the size of the box. This is required for this design area.
    <MySource_AREA id_name="login_form" design_area="login_form">
      <MySource_PRINT var="system_messages" /><br />
      <MySource_LOGIN_SECTION>
        <MySource_PRINT var="form_open" />
        Not currently logged in<br />
       Username: 
        <    MySource_PRINT var="username_box" size="10" class="sq-data" />
        <br />
       Password: 
        <MySource_PRINT var="password_box" size="10" class="sq-data" />
        <br />
       <MySource_PRINT var="submit_button" value="Login" class="sq-data" />
       <MySource_PRINT var="form_close" />
      </MySource_LOGIN_SECTION>
      <MySource_LOGOUT_SECTION>
        <MySource_PRINT var="form_open" />
        Currently logged in as: 
        <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" /><br />
        <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
        <MySource_PRINT var="form_close" />
      </MySource_LOGOUT_SECTION>
    </MySource_AREA>

Example

Below is the HTML code that was added to the static HTML file to show where the login design area should go in the design. 

<div id="right-column">
  <h2>Login</h2>
<!-- Login Section -->
</div> 

The required code is added to the parse file for the Login Form design area, as shown below. 

<div id="right-column">
  <h2>Login</h2>
<MySource_AREA id_name="login_form" design_area="login_form">
    <MySource_PRINT var="system_messages" /><br />
    <MySource_LOGIN_SECTION>
      <MySource_PRINT var="form_open" />
      Not currently logged in
      <p>Username: 
      <MySource_PRINT var="username_box" size="10" class="sq-data" />
      </p>      
<p>Password: 
      <MySource_PRINT var="password_box" size="10" class="sq-data" />
      </p><br/>
<MySource_PRINT var="submit_button" value="Login" class="sq-data" style="float: right;" />
    <MySource_PRINT var="form_close" />
    </MySource_LOGIN_SECTION>
    <MySource_LOGOUT_SECTION>
      <MySource_PRINT var="form_open" />
      Currently logged in as: 
      <MySource_PRINT id_name="__global__" var="current_user" default="[Not Logged In]" attr="name" />
      <br />
      <MySource_PRINT var="submit_button" value="Logout" class="sq-backend-data" />
      <MySource_PRINT var="form_close" />
    </MySource_LOGOUT_SECTION>
  </MySource_AREA>
</div> 

The design will now show the login box on the left hand side of the page, as shown in the figure below.

The Login Box in the Design of a Site
 The Login Box in the Design of a Site

Previous Chapter Next Chapter