Login form design area

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

The code that is required for the login form design area is shown:

<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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 next example 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 next example 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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>

Print variables

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 variable 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 variable 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 sent by the operation wanting the sign in box. For example, on the main Matrix sign in 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 sign in box. For example, on the main Matrix login box, this is set to you need to log in 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 a variable. For example, in the following code, size="10" is used with this variable. This code will set the size of the box to 10 characters. It 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 a variable. For example, in the following code, value="login" and value="logout" is used with this variable. This code defines what text to print on the button. It 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 trying to login. For example, if they enter an incorrect password, they will receive the following 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 signed 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 signed in as:
     <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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 a variable. For example, in the following code, size="10" is used with this variable. This code defines the size of the box. It 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 signed 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 signed in as:
    <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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

This 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:

<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 signed 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 signed in as:
      <MySource_PRINT id_name="__global__" var="current_user" default="[Not Signed 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:

Help Center

Menu

Login form design area

Set variables

Print variables

Example