Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
​
<link href="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js" rel="import">
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/components/polymer/polymer-element.html" rel="import">
<link rel="import" href="https://polygit.org/components/iron-form/iron-form.html">
<link rel="import" href="https://polygit.org/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/components/paper-spinner/paper-spinner.html">
</head>
<body>
<spp-login></spp-login>
<dom-module id="spp-login">
    <template>
        <iron-form id="loginForm">
            <form action="/login" method="post">
                <paper-input name="username" label="Username" required auto-validate></paper-input>
                <paper-input name="password" label="Password" required auto-validate></paper-input>
​
                <paper-button raised onclick="_delayedSubmit(event);" disabled id="loginFormSubmit">
                    <paper-spinner id="spinner" hidden></paper-spinner>
                    Submit
                </paper-button>
                <paper-button raised onclick="loginForm.reset();">Reset</paper-button>
            </form>
            <div class="output"></div>
        </iron-form>
    </template>
​
    <script>
      class SppLogin extends Polymer.Element {
​
        static get is() {
          return 'spp-login';
        }
​
        static get properties() {
          return {
            username: String,
            password: String,
          };
        }
​
        connectedCallback() {
          super.connectedCallback();
          const loginForm = this.$.loginForm;
          const spinner = this.$.spinner;
          const loginFormSubmit = this.$.loginFormSubmit;
​
          loginForm.addEventListener('iron-form-submit', (event) => {
            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
            spinner.active = false;
            spinner.hidden = true;
            loginFormSubmit.disabled = false;
          });
          loginForm.addEventListener('change', (event) => {
            loginFormSubmit.disabled = !loginForm.validate();
          });
​
          loginForm.addEventListener('iron-form-presubmit', (event) => {
            event.preventDefault();
            console.log('here');
          });
        }
​
        _delayedSubmit(event) {
          const loginForm = this.$.loginForm;
          const spinner = this.$.spinner;
          spinner.active = true;
          spinner.hidden = false;
          loginForm.disabled = true;
          // Simulate a slow server response.
          setTimeout(function() {
            loginForm.submit();
          }, 1000);
        }
      }
​
      window.customElements.define(SppLogin.is, SppLogin);
    </script>
</dom-module>
​
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
moderndeveloperllcpro
0viewers