@tririga/tri-template
Version:
A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.
331 lines (293 loc) • 8.26 kB
HTML
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<dom-module id="@element-ui">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
--login-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-family: var(--login-font-family);
@apply(--layout-vertical);
}
#container {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
@apply(--layout-start);
}
paper-card {
background-position: 85% 90%;
background-image: url('images/login_background.png');
width: 400px;
margin-top: 2.5em;
padding: 2em;
background-repeat: no-repeat;
}
.button-container {
margin-top: 30px;
}
.error,
.processing {
font-size: 13px;
padding-left: 2em;
padding-top: 2em;
}
.processing {
color: grey;
}
.error {
font-weight: bold;
color: red;
}
#loginLogo {
position: relative;
padding-bottom: 1em;
background-repeat: no-repeat;
float: right;
}
#loginTitle {
font-weight: normal;
font-size: 40px;
color: #6d6e70;
margin-bottom: 3em;
clear: left;
}
.loginButton {
-webkit-appearance: none;
-webkit-border-radius: 0;
margin-top: 20px;
color: #f0f1e2;
background-color: #003e68;
border: 2px;
width: 80px;
height: 30px;
}
#footerWrapper {
margin-top: 3em;
min-height: 120px;
width: 100%;
}
#footer {
background-color: #dddddd;
width: 100%;
height: 100%;
padding-top: 5px;
padding-bottom: 5em;
font-size: 12px;
min-height: 100px;
}
#tririgaLegal {
font-weight: normal;
font-size: 10px;
color: #999999;
margin-left: 15%;
margin-right: 15%;
}
#tririgaLegal a:link {
color: #999999;
}
paper-button {
font-size: small;
text-transform: none;
color: #003e68;
background-color: #ffffff;
border: 2px solid #003e68;
font-weight: bold;
border-radius: 0;
--paper-button: {
font-family: var(--login-font-family);
};
}
.msgButtonAffirm {
-webkit-appearance: none;
-webkit-border-radius: 0;
color: #003e68;
background-color: #ffffff;
border: 2px solid #003e68;
height: 30px;
font-weight: bold;
}
paper-input {
width: 60%;
--paper-input-container-input: {
font-family: var(--login-font-family);
font-size: 12px;
};
--paper-input-container-label: {
font-family: var(--login-font-family);
};
}
#dialogHeader {
height: 2em;
background: #003e68;
margin: 0;
padding-top: .8em;
padding-bottom: .2em;
padding-left: 1em;
padding-right: .1em;
color: white;
font-size: 1.2em;
font-weight: bold;
line-height: 15px;
}
#dialogBody {
margin-top: .5em;
padding: 10px 15px;
font-size: small;
color: #4C4C4C;
text-align: justify;
line-height: 15px;
}
papaer-dialog {
margin-bottom: -2em;
width: 310px;
background-color: rgba(255, 255, 255, 1);
max-height: 400px;
top: 22.5% ;
white-space: normal;
}
.activeUser {
color: #FFFFC2;
}
</style>
<div id="container">
<paper-card z="1" elevation="5">
<div>
<img id="loginLogo" src="images/login_logo.png" /><br>
<h1 id="loginTitle">[[loginTitle]]</h1>
<div id="loginInput">
<paper-input label="User ID" value="{{username}}" auto-validate on-keypress="_keyPressHandler" tabindex="0" autofocus required></paper-input>
<paper-input label="Password" value="{{password}}" auto-validate type="password" on-keypress="_keyPressHandler" tabindex="0"
required></paper-input>
</div>
<div class="layout horizontal button-container">
<paper-button id="loginButton" tabindex="0" class="loginButton" on-tap="_handleLoginTap">Log In</paper-button>
<div class="flex layout vertical">
<template is="dom-if" if="{{_logging}}">
<div class="processing">Logging in...</div>
</template>
<template is="dom-if" if="{{_unauthorized}}">
<div id="error" class="error">Invalid User ID or Password.</div>
</template>
<template is="dom-if" if="{{_error}}">
<div id="error" class="error">Login failed</div>
</template>
</div>
</div>
</div>
</paper-card>
</div>
<paper-dialog id="message" modal>
<div id="dialogHeader">The user <span class="activeUser">{{username}}</span> is already active.</div>
<div id="dialogBoday">
<div class="flex layout vertical">
<div>You may end the active session or click cancel to log in as another user.</div>
</div>
</div>
<div class="buttons">
<paper-button id="forceLogin" class="msgButtonAffirm" on-tap="_handleForceLogin">End Active Session</paper-button>
<paper-button id="closeDialog" class="msgButtonAffirm" on-tap="_closeDialog">Cancel</paper-button>
</div>
</paper-dialog>
<div id="footerWrapper">
<div id='footer'>
<div id='tririgaLegal'>
<div>
<p style='margin:0px;margin-top:5px;' translate="no">
Licensed Materials - Property of IBM (c) Copyright IBM Corp. 1997, 2015 All Rights Reserved. IBM, the IBM logo, ibm.com and
TRIRIGA are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions
worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks
is available on the Web at <a href="http://www.ibm.com/legal/copytrade.shtml">Copyright and trademark information</a>.
</p>
</div>
<div class="layout horizontal">
<table>
<tr>
<td>
<div class="flex1" style="padding-top:1em; padding-right:2em;">
<img src='images/csi_logo.png' />
</div>
</td>
<td>
<div class="flex5">
<p translate="no" style='margin:0px;margin-top:5px;'>
<i>MasterFormat</i><sup>®</sup> is produced jointly by CSI and Construction Specifications Canada (CSC). U.S.
copyright is held by CSI and Canadian copyright by CSC. All Rights Reserved. For license information, contact
CSI at csi@csinet.org. For more information on MasterFormat visit <a href="http://www.MasterFormat.com">www.MasterFormat.com</a>.
</p>
</div>
</td>
</tr>
</table>
</div>
<div>
<p style='margin-top:0px;margin-top:5px;' translate="no">Portions copyright (C) Free Software Foundation, Inc 1991, 1999.</p>
</div>
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "@element-ui",
properties: {
username: {
type: String,
notify: true,
readOnly: false,
value: ""
},
password: {
type: String,
notify: true,
readOnly: false,
value: ""
},
loginTitle: {
type: String,
notify: false,
readOnly: false,
value: "UX Alt Login Page"
}
},
showAlreadyLoggedMessage: function () {
this.$.message.open();
this._logging = false;
this.async(
function () {
this.$.forceLogin.focus();
}.bind(this), 100
);
},
showUnauthorizedMessage: function () {
this._unauthorized = true;
this._logging = false;
},
showErrorMessage: function () {
this._error = true;
this._logging = false;
},
_handleLoginTap: function (e) {
this._logging = true;
this._unauthorized = false;
this._error = false;
this.fire('login', e);
},
_handleForceLogin: function (e) {
this.fire('force-login', e);
},
_keyPressHandler: function (e) {
var code = e.keyCode;
if (code == 13) {
this._handleLoginTap(e);
this.$.loginButton.focus();
}
},
_closeDialog: function () {
this.$.message.close();
}
});
</script>