Developing a Custom Logon Page

Typically a logon page appears in a separate window. After successful logon, a user is redirected to a new window that displays the content the user is authorized to view.

There are several ways to achieve this logon sequence. In this topic you will use application states.

Procedure: How to Develop a Custom Logon Page

In the States pane on the right, select Base state.
Click New State.
In the pop-up dialog box, set the following values and click OK.
- Name=Signon
- Based on=Base state. This value means that all the components from the Base state will be copied to the new state.
- Select the check box labeled Set as start state. When the application is run, this state will be displayed as the first window.
With the Signon state selected, delete the button and the ibiMREdomain component from it.
Move the ibiMREsignon component to the middle of the page, and set the middle layout constraints so that the logon prompt is always positioned in the middle of the page.
From the Controls component folder, select SWFLoader and drag it to the upper-left corner. Constrain it to the upper-left corner, using the layout constraints shown in the following image.
Point to the IBILogo file as described in Adding Custom Animation.
Run the application. The logon prompt is in the middle of the window. Even if you resize the browser window, the logon prompt will always appear in the middle.
Create a new state, name it Domains, and base it on the Base state.
Select the Domains state and delete the ibiMREsignon component.
Move the ibiMREdomains component to the top, and align the Refresh button underneath it.
To change the application from the Signon state to the Domains state upon successful logon, add the following code to the onPass function, in which the value of currentState is set to 'Domains'.
```
<mx:Script>
   <![CDATA[
      public function onPass():void
      {
        domains.refreshDomains();
        currentState='Domains'
      }
   ]]>
</mx:Script>
```
Run the application and log on. After you log on, you are redirected to the Managed Reporting domains.

Procedure: How to Create a Signoff Button

A signoff button enables you to log off Managed Reporting.

In Source view, enter the following code immediately after the OnPass function, which refreshes the domains.
```
public function signoff():void
{
   mre.mreSession.getMREsignoff();
   currentState='Signon';
}
```
The code mre.mreSession.getMREsignoff() executes the log off.

The code currentState='Signon' redirects you to the Signon state of the application.
In Design view, insert a button in the Domain state.
Set the Label property of the button to Signoff.
Assign the signoff function to the button as follows. You can do this in either the MXML code in Source view, or in the properties pane in the On click property field, as shown in the image.
```
<mx:Button x="426" y="94" label="Sign Off" width="108" click="{signoff()}" id="button3"/>
```
Run the application, and click the newly created button.

You are redirected to the logon window.