riot login

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.2/riot+compiler.min.js"></script>
<login></login>

<script type="riot/tag">
 <boton>
     <button onclick={ doSomething}> subbutton</button>
     
     doSomething(){
         console.log("doing");
         console.log(opts);
     }
 </boton>
    
 <login>
  <form onsubmit="{ login }">
    <input name="username" type="text" placeholder="username">
    <input name="password" type="password" placeholder="password">
      <br>  
     <button type="submit" >done</button>
          <boton></boton>
  </form>

  login() {
        console.log("login1");
        opts.login({
          username: this.username.value,
          password: this.password.value
        });
        return false;
  }

  // any tag on the system can listen to login event
  opts.on('login', function() {
        console.log('login...');
    $('body').addClass('logged')
  })
        
 </login>
</script>

CSS

body, html{
    width:100%;
    height:100%;
}

.logged{
    background:red;
}

JavaScript

// Login API
var auth = riot.observable()

auth.login = function(params) {
    console.log('en auth');
  //$.get('/api', params, function(json) {  auth.trigger('login', json) });
    auth.trigger('login');
}

riot.mount('login', auth)