iZXTM part 1: Login

This is part 1 in a series covering a fun little project that demonstrates how ZXTM can facilitate the rapid deployment of a new web interface variant. My variant of choice in this instance is a UI that doesn't feel out of place on an iPhone, and my victim is ZXTM's own administrative UI (after all, half the Zeus development team are iPhone carriers now ... and the virus is spreading.)

What we're going to do is insert a ZXTM Virtual Server between user agents and the usual ZXTM UI. This Virtual Server will use TrafficScript to effectively "screen-scrape" the real UI and transform it into a sexy iPhone UI. You'd not normally build and deploy a web application in this way, but in the real world of web development you have to move fast. You're probably stuck with a legacy web UI and a very tight deadline. In the worst case you might not even have access to the code running the website; for example, it could be owned by another group in your company, or be a proprietary CMS product. Even if you do have access to the code, pushing changes within that code to live servers could involve process control that makes the idea of rapid deployment laughable. You also have your manager breathing down your neck:

"We must have that iPhone version of our website yesterday! The competition had one last week!"

ZXTM is perfectly positioned for this task. From its perspective you can treat the original website as a blackbox and avoid getting your hands dirty trying to retrofit a new UI within existing legacy code. We all know how that can go. Replacing the "view" component should be easy... Oh, the original development process never had time for neat ideas like MVC? You have an amorphous mass of intertwined spaghetti code and HTML formed through aeons of gluing together quick hacks? The ZXTM blackbox approach looks at things differently. You focus your efforts on designing your sexy iPhone UI, building a set of templates. Then, using the power of TrafficScript, you screen-scrape your existing web interface and populate your iPhone UI templates.

In no time at all you have an iPhone site up and running, and a happy manager. Now you have the time, and brownie points, to re-engineer the old website, making it an exemplar of MVC principals! (One can always dream.) At the very least you have your iPhone presence out there, and some breathing space in which to integrate your iPhone UI design with your backend code.

We begin, as all good software developers should, with code-reuse. A little searching uncovers the iUI framework, this looks like an excellent starting place.

Let's set up our "iZXTM" Virtual Server. Create a HTTP VS and Pool pair as you usually would, I've created mine listening on port 9099. To the pool add a single node: localhost:9090 (the ZXTM admin server.) You must also remember to enable SSL encrypt/decrypt for this VS and Pool pair. Once all this is done, a web browser pointed at the VS should give you the usual ZXTM admin UI. For the purposes of this article I'll refer to the iZXTM VS URL as https://myzxtm:9099/.

Now we want our VS to be able to serve the iUI components. Download and unpack iUI and place the files from the iui directory into your Extra Files > Miscellaneous Files catalog (aka $ZEUSHOME/zxtm/conf/extra/.) Next we set up some TrafficScript to serve these files.

$browser = http.getHeader( "User-Agent" );
if (! (string.contains($browser, "Mobile") &&
       string.contains($browser, "Safari"))) break;

$ciuipath = "/iui/";
if (string.startswith(http.getPath(), $ciuipath)) {
   $file = string.skip(http.getPath(), string.length($ciuipath));
   if (resource.exists($file)) {
      $mime = "text/plain";
      if (string.endswith($file, ".png")) {
         $mime = "image/png";
      }  
      http.sendResponse( 200, $mime, resource.get($file), "" );
   } else {
      http.sendResponse( 404, "text/html", "<h1>File not found</h1>", "" );
   }
}

This is a very simple example of a ZXTM WebServer, for more detail on serving files from ZXTM see our Using ZXTM as a webserver article. I've called the rule above iZXTM Request and hooked it up to my iZXTM VS as a request rule. You should now be able to view iUI files by visiting a URL such as: https://myzxtm:9099/iui/iui.css

The first point of contact for the ZXTM admin UI is the login page, this will be our first iZXTM page. Our "API", as such, is the HTML of the normal ZXTM login page. We want to parse out the important parts of this and re-form them appropriately for the iPhone. Working from iUI examples I quickly knocked up the following HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>__HOSTNAME_SHORT__</title>
   <meta name="viewport" content="width=device-width; initial-scale=1.0;
      maximum-scale=1.0; user-scalable=0;"/>
   <link rel="apple-touch-icon" href="/iui/iZXTM_logo.png" />
   <meta name="apple-touch-fullscreen" content="YES" />
   <style type="text/css" media="screen">
      @import "/iui/iuix.css";
      .panel > h2 {
         text-align: center;
         font-size: 1.2em;
         margin: 0 0 5px 0;
      }
      h3 {
        color: #aa0000;
        font-weight: bold;
        margin: 0 0 5px 0;
      }
   </style> 
</head>
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
  <div class="toolbar">
    <h1 id="pageTitle">ZXTM Login</h1> 
  </div>
  <form class="panel" action="/apps/zxtm/login.cgi" method="POST"
      selected="true">
    <h2>__HOSTNAME__</h2>
    __ERROR__
    <fieldset>
      <div class="row">
        <label>Username</label>
        <input type="text" name="form_username" value="__USER__" />
      </div>
      <div class="row">
        <label>Password</label>
        <input type="password" name="form_password" value="" />
      </div> 
    </fieldset>
    <input type="hidden" name="_form_submitted" value="form" />
    <input class="grayButton" type="submit" value="Login" />
  </form>
</body>

I won't go into details about working out the HTML. Except to mention that iUI intercepts forms submission, and in order to quickly achieve what I wanted with the login page I've included the iUI styling but not the JavaScript. Instead I've added a small JavaScript snippet to slide the browser address bar off the screen as an 'onload' for the 'body' element. (Don't worry, the next part in this series will use the full iUI toolkit!) As you can see I've also customised the styling slightly to improve the look of the login screen and provide error styling (using <h3>.) I've saved this file as iZXTM_login.html in my Extra Files > Miscellaneous Files catalog.

The HTML is a template containing some special tags: __HOSTNAME__, __HOSTNAME_SHORT__, __ERROR__, and __USER__. We want to implement some TrafficScript to intercept responses from the normal ZXTM login page, extract the template variables from the response HTML, fill in the template, and pass the result on to the iPhone browser. Easy!

$browser = http.getHeader( "User-Agent" );
if (! (string.contains($browser, "Mobile") &&
       string.contains($browser, "Safari"))) break;

if (http.getPath() == "/apps/zxtm/login.cgi") {
   # present an iPhone-friendly login screen
   $body = http.getResponseBody();

   # get (short)hostname
   $begin = string.find($body, "Login to ") + 9;
   $end = string.find($body, "<", $begin) - 1;
   $hostname = string.substring($body, $begin, $end);
   $hostnameshort = $hostname;
   if ($dot = string.find($hostnameshort, ".")) {
      $hostnameshort = string.substring($hostnameshort, 0, ($dot - 1));
   }
   # get error, if any
   $error = ""; 
   $begin = string.find($body, "<span class=\"mctwarn\">");
   if ($begin > 0) {
      $begin = $begin + 22;
      $end = string.find($body, "</span>", $begin) - 1;
      $error = string.substring($body, $begin, $end);

   }
   # get username
   $username = "";
   $end = string.find($body, "id=\"username\"");
   if ($end > 0) {
      $end = $end - 34;
      $rend = string.length($body) - $end;
      $begin = string.findr($body, "value=", $rend) + 7;
      $username = string.substring($body, $begin, $end);
   }

   $ilogin = resource.get("iZXTM_login.html");
   $ilogin = string.replace($ilogin, "__HOSTNAME__", $hostname);
   $ilogin = string.replace($ilogin, "__HOSTNAME_SHORT__", $hostnameshort);
   $ilogin = string.replace($ilogin, "__ERROR__", "<h3>" . $error . "</h3>");
   $ilogin = string.replace($ilogin, "__USER__", $username);
   http.setResponseBody($ilogin);
}

I've added this rule to my ZXTM as iZXTM Response and enabled it as a response rule for my iZXTM VS. The TrafficScript above is uncomplicated, there isn't much to say about it. Initially, as for the iZXTM Request rule, we put a check in to ensure the script is only run for Mobile Safari browser variants. Then, if the request is for login.cgi we search the response HTML for the required values, substitute them into our template, and return the modified template to the client.

If you've set all this up you should be able to visit https://myzxtm:9099/ with your iPhone browser and see a slick iPhone login screen. If you log in incorrectly you get the correct feedback, and if you log in correctly you pass through to the normal ZXTM home page.

To get this far, from never having considered iPhone web development before, has taken me about 4 hours. In the next part in this series we'll replace the ZXTM home page with a summary page more suitable for the iPhone.

[Part 2 of this series is now available: iZeus part 2: The "Home" screen]

Yvan Seth [Zeus Dev Team] 03 July 2009