jibu-web/jibu-core-extjs/src/main/webapp/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2
   3 <hml>
   4   <head>
   5     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
   6       <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
   7       <script type="text/javascript" src="ext/ext-all.js"></script>
   8       <script type="text/javascript">
   9         Ext.onReady(function(){
  10         Ext.QuickTips.init();
  11
  12         // Create a variable to hold our EXT Form Panel.
  13         // Assign various config options as seen.
  14         var login = new Ext.FormPanel({
  15         labelWidth:80,
  16         url:'LoginServlet.x',
  17         frame:true,
  18         title:'Please Login',
  19         defaultType:'textfield',
  20         monitorValid:true,
  21         // Specific attributes for the text fields for username / password.
  22         // The "name" attribute defines the name of variables sent to the server.
  23         items:[{
  24         fieldLabel:'Username',
  25         name:'username',
  26         allowBlank:false
  27         },{
  28         fieldLabel:'Password',
  29         name:'password',
  30         inputType:'password',
  31         allowBlank:false
  32         }],
  33
  34         // All the magic happens after the user clicks the button
  35         buttons:[{
  36         text:'Login',
  37         formBind: true,
  38         // Function that fires when user clicks the button
  39         handler:function(){
  40         login.getForm().submit({
  41         method:'POST',
  42         waitTitle:'Connecting',
  43         waitMsg:'Sending data...',
  44
  45         // Functions that fire (success or failure) when the server responds.
  46         // The one that executes is determined by the
  47         // response that comes from login.asp as seen below. The server would
  48         // actually respond with valid JSON,
  49         // something like: response.write "{ success: true}" or
  50         // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
  51         // depending on the logic contained within your server script.
  52         // If a success occurs, the user is notified with an alert messagebox,
  53         // and when they click "OK", they are redirected to whatever page
  54         // you define as redirect.
  55
  56         success:function(){
  57         var redirect = 'MainServlet.y';
  58         window.location = redirect;
  59         },
  60
  61         // Failure function, see comment above re: success and failure.
  62         // You can see here, if login fails, it throws a messagebox
  63         // at the user telling him / her as much.
  64
  65         failure:function(form, action){
  66         if(action.failureType == 'server'){
  67         obj = Ext.util.JSON.decode(action.response.responseText);
  68         Ext.Msg.alert('Login Failed!', obj.errors.reason);
  69         }else{
  70         Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
  71         }
  72         login.getForm().reset();
  73         }
  74         });
  75         }
  76         }]
  77         });
  78
  79
  80         // This just creates a window to wrap the login form.
  81         // The login object is passed to the items collection.
  82         var win = new Ext.Window({
  83         layout:'fit',
  84         width:300,
  85         height:150,
  86         closable: false,
  87         resizable: false,
  88         plain: true,
  89         border: false,
  90         items: [login]
  91         });
  92         win.show();
  93         });
  94       </script>
  95     </head>
  96     <body></body>
  97   </html>