@tririga/tri-template
Version:
A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.
436 lines (383 loc) • 10.5 kB
JavaScript
/*
@license
IBM Confidential - OCO Source Materials - (C) COPYRIGHT IBM CORP. 2015-2018 - The source code for this program is not published or otherwise divested of its trade secrets, irrespective of what has been deposited with the U.S. Copyright Office.
*/
import { html } from "../@polymer/polymer/lib/utils/html-tag.js";
import { Polymer } from "../@polymer/polymer/lib/legacy/polymer-fn.js";
import "../@polymer/iron-flex-layout/iron-flex-layout.js";
import "../@polymer/iron-flex-layout/iron-flex-layout-classes.js";
import "../@polymer/paper-input/paper-input.js";
import "../@polymer/paper-button/paper-button.js";
import "../@polymer/paper-card/paper-card.js";
import "../@polymer/paper-dialog/paper-dialog.js";
import "../triplat-theme/triplat-theme.js";
import { getModuleUrl } from "../tricore-util/tricore-util.js";
Polymer({
_template: html`
<style include="iron-flex iron-flex-alignment tristyles-theme">
: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;
margin-bottom: 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;
padding-bottom: 18px;
color: #6d6e70;
margin-bottom: 3em;
clear: left;
}
.loginButton{
-webkit-appearance: none;
-webkit-border-radius: 0;
margin-top: 20px;
color: #f0f1e2;
background-color:#f0f1e2 ;
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;
border:2px solid #90a4ae;
font-weight: bold;
border-radius:0;
}
.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: 1em;
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;
}
@media (min-height: 750px) {
#footerWrapper{
position: absolute;
bottom: 0 ;
}
}
#content {
margin: auto;
width: 464px;
}
@media (max-width: 414px) {
#content {
margin: auto;
width: 414px;
}
#tririgaLegal{
margin-left: 5%;
margin-right: 5%;
}
.error {
padding-left: 0;
}
#loginTitle {
font-size:25px;
}
.loginButton{
margin-top: 0;
}
paper-input-container {
width: 50%;
}
#footerWrapper{
margin-top: 0;
}
}
@media (max-width: 375px) {
#content {
margin: auto;
width: 375px;
}
}
@media (max-width: 325px) {
#content {
margin: auto;
width: 320px;
}
#tririgaLegal{
margin-left: 5%;
margin-right: 5%;
}
paper-input-container {
width: 50%;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
#content {
width: 768px;
}
#footer{
min-height: 120px;
}
#loginLogo{
position: relative;
background-repeat:no-repeat;
}
#loginInput input {
font-size:18px ;
}
#loginInput label {
font-size:22px ;
}
#loginTitle {
font-size: 50px;
}
.loginButton{
width:160px;
height:60px;
font-size: 20px;
}
.error, .processing {
font-size: 13px;
padding-left: 2em;
padding-top: 3em;
}
}
</style>
<div id="container" class="body">
<paper-card z="1" elevation="5">
<div>
<img id="loginLogo" src="[[importPath]]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="1" autofocus="" required=""></paper-input>
<paper-input label="Password" value="{{password}}" auto-validate="" type="password" on-keypress="_keyPressHandler" tabindex="2" required=""></paper-input>
</div>
<div class="layout horizontal button-container">
<paper-button id="loginButton" tabindex="3" 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="[[_computeShowError(unauthorize, error, alreadySignOn)]]">
<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 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, 2018 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>
<tbody><tr>
<td>
<div class="flex1" style="padding-top:1em; padding-right:2em;">
<img src="[[importPath]]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>
</tbody></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>
`,
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);
this.$.loginButton.focus();
},
_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();
},
_computeShowError: function(unauthorize, error, alreadySignOn) {
return unauthorize || alreadySignOn ? false : error;
},
_populateFields: function(username, password) {
this.set('username', username);
this.set('password', password);
},
importMeta: getModuleUrl("@element/@element-ui.js")
});