Creating a login webpage for your mainframe application

Demo describing how to create a login page for a AS/400 connection with z/Scope Anywhere and HostSurfer.

by Cybele Software

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://zanywhere.cybelesoft.com/terminal.api.min.js"></script>
<div id="hs-view"></div>
<div style="display:none">

  <div class="wrapper" id="loginForm">
    <div class="apppnl form-signin">
      <h3 class="form-signin-heading">Application Login</h3>
      <h4 class="form-signin-heading">Please, type your Username and Password</h4>
        <input type="text" class="form-control" name="username" placeholder="Username" required="" maxlength="6" hs-field="hs.data.username"/>
	      <input type="password" class="form-control" name="password" placeholder="Password" maxlength="6" hs-field="hs.data.password"/><br/>
        <h4>Last updates:</h4>
        <p>Shops: {{ hs.data.shopsUpdate }}  - Accounts: {{ hs.data.accountsUpdate }}</p>
        <div class="pull-right">
        <button class="btn btn-primary" tabindex="0" onclick="hs.send.enter()">Sign in</button>      
        </div>
    </div>
  </div>
  
</div>

CSS

html {
  height: 100%;
}
body {
	background: #000 !important;	
  height: 100%;
}

.emu { position: absolute; width: 100%; height: 100%; z-index: 0; }
.emu iframe { width: 100%; height: 100%; }

.apppnl {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
}

.wrapper {
  position: relative;
	margin-top: 70px;
  margin-bottom: 70px;
  margin-left: auto;
  margin-right: auto;
}

.form-signin {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    height: 100%;
    padding: 50px;
}
  .form-signin-heading {
	  margin-bottom: 30px;
	}

	.form-control {
	  position: relative;
	  font-size: 1rem;
	  height: auto;
	  padding: .5rem;
	}

	input[type="text"] {
	  margin-bottom: -1px;
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
    font-size: 1.5rem;
	}

	input[type="password"] {
	  margin-bottom: 20px;
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
    font-size: 1.5rem;
  }

JavaScript

hs = new zScope.HostSurfer({
	term: {
  	url: "https://zanywhere.cybelesoft.com/hsdemo/"
  }
});
hs.register({
    id: 'cics',
    match: [{ text: "CICS", row: 5, col: 1 }],
    apply: {
        handler: function (hs) {
            if (hs.screens.length == 1) { hs.send.enter(); }
        }
    }
});
hs.register({
    id: 'bluecardLogin',
    match: [
      { text: "USERNAME", row: 19, col: 55 },
      { text: "PASSWORD", row: 20, col: 55 }
    ],
    apply: {
        fields: [
          { name: 'username', row: 19, col: 67, len: 6 },
          { name: 'password', row: 20, col: 67, len: 6 },
          { name: 'shopsUpdate', row: 18, col: 29, len: 8 },
          { name: 'accountsUpdate', row: 18, col: 62, len: 8 }
        ],
				render: {
            view: { template: "#loginForm" }
        }
    }
});