index.js

import Cycle from '@cycle/core';
import {makeDOMDriver, div, label, input, hr, h1, button} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';
import Rx from 'rx';

function main({DOM, HTTP}) {
  const username$ = DOM.select('.username')
    .events('input')
    .map(ev => ev.target.value)
    .startWith("");

  const password$ = DOM.select('.password')
    .events('input')
    .map(ev => ev.target.value)
    .startWith("");

  const loginRequest$ = DOM.select('.submit')
    .events('click')
    .withLatestFrom(
      username$,
      password$,
      (done, username, password) => ({
        name: "login-auth",
        url: "/api/auth",
        method: "POST",
        user: username,
        password: password,
      })
    );

  const loginResult$ = HTTP
    .filter(res$ => res$.request.name === 'login-auth')
    .mergeAll()
    .catch(err => Rx.Observable.just({error: err}))
    .map(res => res.body)
    .startWith(null);

  const vtree$ = loginResult$
    .map(result => {
      if (result && result.error) {
        return h1(`Error`);
      } else if (result && result.token){
        return h1(`Token ${result.token}`);
      }
    })
    .map(memberArea => div([
      label('Username:'),
      input('.username', {attributes: {type: 'text'}}),
      label('Password:'),
      input('.password', {attributes: {type: 'password'}}),
      button(".submit", "Login"),
      hr(),
      memberArea
    ]));

  return {
    DOM: vtree$,
    HTTP: loginRequest$,
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver(),
});