SHARE
TWEET

Untitled

a guest Oct 23rd, 2017 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link rel="import" href="../../bower_components/polymer/polymer.html">
  2. <link rel="import" href="../../bower_components/polymer/polymer-element.html">
  3. <!--<link rel="import" href="../../bower_components/paper-material/paper-material.html">-->
  4. <!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
  5. <!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
  6. <!--<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
  7. <!--<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">-->
  8.  
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  10.  
  11. <link rel="import" href="../../elements/elements.html">
  12.  
  13. <!--<script src="https://apis.google.com/js/platform.js"></script>-->
  14. <!--<meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com">-->
  15.  
  16. <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  17. <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  18.  
  19. <dom-module id="log-in">
  20.   <template>
  21.     <custom-style>
  22.   <style>
  23.   #card{
  24.     width: 50%;
  25.     height: 50%;
  26.     padding-top: 25%;
  27.     padding-left: 25%;
  28.   }
  29.  
  30.  
  31. @media (max-width:425px) {
  32.   paper-material {
  33.     width: 80%;
  34.     /*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
  35.     background-color: #ffffff;
  36.  
  37.     position: fixed;
  38.     top: 50%;
  39.     left: 50%;
  40.     transform: translate(-50%, -50%);
  41.     transform: -webkit-translate(-50%, -50%);
  42.     transform: -moz-translate(-50%, -50%);
  43.     transform: -ms-translate(-50%, -50%);
  44.  
  45.   }
  46.   .loginHead{
  47.     /*padding-top: 14%;*/
  48.     color: rgb(63,81,181);
  49.     font-weight: bold;
  50.     font-size: large;
  51.     align-self: flex-start;
  52.     padding-left: 4%;
  53.   }
  54.   .logoAndHead{
  55.     padding-left: 23%;
  56.     padding-top: 4%;
  57.     /*line-height: 3em;*/
  58.   }
  59.   .headText{
  60.     padding-top: 9%;
  61.   }
  62. }
  63.  
  64.  
  65.     @media (min-width: 426px) {
  66.       paper-material {
  67.         width: 50%;
  68.         /*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
  69.         background-color: #ffffff;
  70.  
  71.         position: fixed;
  72.         top: 50%;
  73.         left: 50%;
  74.         transform: translate(-50%, -50%);
  75.         transform: -webkit-translate(-50%, -50%);
  76.         transform: -moz-translate(-50%, -50%);
  77.         transform: -ms-translate(-50%, -50%);
  78.  
  79.       }
  80.       .loginHead{
  81.         color: rgb(63,81,181);
  82.         /*padding-top: 9%;*/
  83.         font-weight: bold;
  84.         font-size: large;
  85.         align-self: flex-start;
  86.         padding-left: 2%;
  87.       }
  88.  
  89.     }
  90.   @media (min-width: 426px)and (max-width: 1000px){
  91.     .logoAndHead{
  92.       padding-left: 33%;
  93.       padding-top: 4%;
  94.       /*line-height: 3em;*/
  95.     }
  96.     .headText{
  97.       padding-top: 7%;
  98.     }
  99.   }
  100.  
  101.   @media (min-width: 1001px) and (max-width: 2000px){
  102.     .logoAndHead{
  103.       padding-left: 37%;
  104.       padding-top: 4%;
  105.       /*line-height: 3em;*/
  106.     }
  107.     .headText{
  108.       padding-top: 5%;
  109.     }
  110.   }
  111.   @media (min-width: 2001px) {
  112.     .logoAndHead{
  113.       padding-left: 45%;
  114.       padding-top: 4%;
  115.       /*line-height: 3em;*/
  116.     }
  117.     .headText{
  118.       padding-top: 2%;
  119.     }
  120.   }
  121.  
  122.   .egluImg{
  123.       /*float: left;*/
  124.     }
  125.     .egluImg>img{
  126.       height: 45px;
  127.       width: 51px;
  128.     }
  129.  
  130.     paper-input{
  131.       width: 100%;
  132.     }
  133.     paper-button{
  134.       color: white;
  135.       background-color:rgb(63,81,181) ;
  136.     }
  137.  
  138.     .logo{
  139.       padding-bottom: 4%;
  140.     }
  141.     a{
  142.       color: rgb(107, 106, 106);
  143.     }
  144.     .loginText{
  145.       color: rgb(63,81,181);
  146.       font-size: large;
  147.       font-weight: bolder;
  148.       align-self: flex-end;
  149.       padding-left: 2%;
  150.     }
  151.     img{
  152.       vertical-align: middle;
  153.     }
  154.  
  155.   </style>
  156.  
  157.     </custom-style>
  158.  
  159.  
  160.         <div class="loginContainer">
  161.  
  162.           <paper-material elevation="1">
  163.             <div class="logo">
  164.           <div class="logoAndHead">
  165.             <span class="egluImg" style="float: left">
  166.               <img src="../../images/eglu-logo.jpg" >
  167.             </span>
  168.             <div class="layout horizontal wrap headText">
  169.             <span class="loginHead">
  170.               <img src="../../images/logo_text.svg" >
  171.             </span>
  172.             <span class="loginText">Login</span>
  173.             </div>
  174.           </div>
  175.           <!--<center>-->
  176.               <div style="padding-left: 8%;padding-right: 8%">
  177.  
  178.               <paper-input label="User Name" value="{{userName}}"></paper-input>
  179.  
  180.                 <paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"></paper-input>
  181.                 <!--<i class="material-icons" on-click="_showHide" id="eye">visibility_off</i>-->
  182.                 <div>
  183.                   <paper-button id="loginButton" raised on-click="sendRequest">Log in</paper-button>
  184.                 </div>
  185.  
  186.  
  187.             <div style="padding-top: 2px">
  188.               <a href="https://myeglu.com/oauth/forgot-password.html">Forgot Password?</a>
  189.               <br>
  190.             </div>
  191.               </div>
  192.           <!--</center>-->
  193.           <!--<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>-->
  194.         </div>
  195.           </paper-material> <!--<google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"></google-signin>-->
  196.  
  197.  
  198.         </div>
  199.     <div style="text-align: center">
  200.         <paper-toast id="errToast"></paper-toast>
  201.     </div>
  202.  
  203.       <!--<google-signin-aware-->
  204.         <!--id="signin"-->
  205.         <!--on-click="_googleSignIn"-->
  206.         <!--scopes="https://www.googleapis.com/auth/drive"-->
  207.         <!--on-google-signin-aware-success="handleSignin"-->
  208.         <!--google-signin-aware-error="handleError">-->
  209.       <!--</google-signin-aware>-->
  210.  
  211.     <iron-ajax
  212.               id="authenticate"
  213.               method="POST"
  214.               content-type="application/json"
  215.                url="https://staging.myeglu.com/api/v1/customers"
  216.                body="{{ajaxBody}}"
  217.                handle-as="json"
  218.                 last-response="{{code}}"
  219.                 on-error="_handleError"
  220.                 on-response="_handleResponse">
  221.  
  222.     </iron-ajax>
  223.   </template>
  224.  
  225.   <script>
  226.     class LogIn extends Polymer.Element{
  227.       static get is() {
  228.         return "log-in";
  229.       }
  230.       static get properties() {
  231.         return {
  232.           userName:{
  233.             type:String,
  234.             value:'',
  235.             notify:true
  236.           },
  237.           password:{
  238.             type:String
  239.           },
  240.           code:{
  241.             type:Object,
  242.             notify:true
  243.           },
  244.           ajaxBody: {
  245.             type: String,
  246.             computed: 'processBody(userName, password)'
  247.           },
  248.           integrator:{
  249.             type:String,
  250.             notify:true,
  251.             computed:'setIntegrator(userName)'
  252.           },
  253.           gResponse:Object
  254.         }
  255.       }
  256.       constructor() {
  257.         super();
  258.       }
  259.       ready(){
  260.         super.ready();
  261.       }
  262.       handleSignin(response){
  263.         var user = gapi.auth2.getAuthInstance()['currentUser'].get();
  264.         console.log('User name: ' + user.getBasicProfile().getName());
  265.         console.log('User token: ' + response.detail.id_token);
  266.       }
  267.       handleError(){
  268.  
  269.       }
  270.  
  271.       sendRequest(){
  272. //          this.$.authenticate.headers={"clientid":"web"};
  273.         this.$.authenticate.generateRequest();
  274.       }
  275.       _showHide(){
  276.         var p = this.$.password;
  277.         var q=p.getAttribute('type');
  278.  
  279.  
  280.         if(q=='text'){
  281.           p.setAttribute('type','password');
  282.           this.$.eye.innerHTML = '<i class="material-icons">visibility_off</i>';
  283.         }
  284.         if(q=='password'){
  285.           p.setAttribute('type','text');
  286.           this.$.eye.innerHTML = '<i class="material-icons">visibility</i>';
  287.         }
  288.       }
  289.       processBody(userName, password) {
  290.         return JSON.stringify({emailId: userName, password: password,authProvider: "INTERNAL"});
  291.       }
  292.       _handleResponse(e){
  293.         console.log('status'+e.detail.xhr.status);
  294.         if(this.code.message=="Login Success"){
  295.           var expiry = new Date();
  296.           expiry.setTime(expiry.getTime()+(15*24*60*60*1000)); // one week
  297.           console.log('it is called');
  298.  
  299.           this.setCookie('token',this.code.token,15);
  300.           this.setCookie('loggedIn','yes',15);
  301.           this.setCookie('email',this.userName,15);
  302.           window.location.href = "/admin/";
  303. //          window.location.href = "/";
  304.         }
  305.         else
  306.           window.alert('wrong credentials, Try again');
  307.       }
  308.       _handleError(e){
  309.         if(e.detail.request.xhr.response.message=='Wrong password') {
  310.  
  311.           this.$.errToast.text = 'Wrong Password';
  312.           this.$.errToast.show();
  313.         }
  314.         if(e.detail.request.xhr.response.loginState=='ACCOUNT_NOT_FOUND') {
  315.  
  316.           this.$.errToast.text = 'You are not eGlu User or check your credentials';
  317.           this.$.errToast.show();
  318.         }
  319.       }
  320.       setCookie(cname, cvalue, exdays) {
  321.         var d = new Date();
  322.         d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  323.         var expires = "expires="+d.toUTCString();
  324.         document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  325.       }
  326.       setIntegrator(userName){
  327.         return userName;
  328.       }
  329.       onSignIn() {
  330.         var profile = googleUser.getBasicProfile();
  331.         console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  332.         console.log('Name: ' + profile.getName());
  333.         console.log('Image URL: ' + profile.getImageUrl());
  334.         console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
  335.         window.location.href = "../../index.html";
  336.       }
  337.       onFailure(error) {
  338.         alert(error);
  339.       }
  340.       renderButton () {
  341.         gapi.signin2.render('gSignIn', {
  342.           'scope': 'profile email',
  343.           'width': 240,
  344.           'height': 50,
  345.           'longtitle': true,
  346.           'theme': 'dark',
  347.           'onsuccess': onSuccess,
  348.           'onfailure': onFailure
  349.         });
  350.       }
  351.       enterAccount(event) {
  352.         if (event.keyCode == 13) {
  353.           this.$.loginButton.click();
  354.         }
  355.       }
  356.     }
  357.     customElements.define(LogIn.is, LogIn);
  358.   </script>
  359. </dom-module>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top