Hub

SketchSystems.spec

Hub
  Sign-In Page
    forgot password -> Reset Password Email
    email sign-in link -> Sign-In Email
    success -> Post Page
    failure -> Sign-In Page
  Reset Password Page
    set password -> Post Page
  Post Page
    sign out -> Sign-In Page
  
Reset Password Email
  click link -> Reset Password Page
  
Sign-In Email
  click link -> Post Page

SketchSystems_prototype.js

function render(model) {
  const curr = model.active_states[0]
  return $(Container, {}, $(Page, { model: model, state: curr }, []))
}

function Container(props) {
  return $(
    'div',
    {
      style: {
        fontFamily: 'Helvetica',
        fontSize: '12px',
        margin: '0 auto',
        width: '100%',
        height: '100vh',
        backgroundColor: '#eee',
        position: 'relative'
      }
    },
    props.children
  )
}

function Page(props) {
  switch (props.state.name) {
    case 'Post Page':
      return $('div', { position: 'relative' }, [
        $(Cover, {}, []),
        $(
          'div',
          {
            style: { fontSize: '27px', display: 'flex' }
          },
          [$(Slab), $(Slab)]
        ),
        $(
          'a',
          {
            onClick: () => props.model.emit('sign out'),
            style: { position: 'absolute', top: '3px', right: '3px', color: 'white' }
          },
          ' Sign out'
        )
      ])
    case 'Sign-In Page':
      return $('div', { position: 'relative' }, [
        $(Cover, {}, []),
        $('div', {}, [
          $(
            'div',
            {
              style: {
                position: 'absolute',
                top: '150px',
                width: '300px',
                left: '50%',
                marginLeft: '-150px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                backgroundColor: 'white',
                boxSizing: 'border-box',
                padding: '18px'
              }
            },
            [
              $('input', {
                style: { width: '100%', display: 'block', marginBottom: '9px' },
                type: 'text',
                placeholder: 'Email / Username'
              }),
              $('input', {
                style: { width: '100%', display: 'block', marginBottom: '9px' },
                type: 'password',
                placeholder: 'Password'
              }),
              $(
                'button',
                {
                  style: { marginBottom: '9px', width: '100%', height: '21px' },
                  onClick: () => props.model.emit('success')
                },
                'Sign In'
              ),
              $(
                'a',
                {
                  style: { marginBottom: '9px' },
                  onClick: () => props.model.emit('forgot password')
                },
                'Forgot password?'
              ),
              $(
                'button',
                {
                  style: { marginBottom: '9px', width: '100%', height: '21px' },
                  onClick: () => props.model.emit('email sign-in link')
                },
                'Sign in with Email'
              )
            ]
          )
        ])
      ])
    case 'Reset Password Email':
      return $('div', {}, [
        $('p', {}, 'Hello [name], here is your link to reset password'),
        $('a', { onClick: () => props.model.emit('click link') }, 'Reset password')
      ])
    case 'Sign-In Email':
      return $('div', {}, [
        $('p', {}, [
          'Hello [name], ',
          $('a', { onClick: () => props.model.emit('click link') }, 'click here '),
          'to sign in.'
        ]),
      ])
    default:
      return $('h1', { style: { color: 'black' } }, `In "${props.state.name}"`)
  }
}

function Cover(props) {
  return $(
    'div',
    {
      style: {
        backgroundColor: '#333',
        height: '200px',
        boxSizing: 'border-box',
        color: 'white',
        textAlign: 'center',
        padding: '45px'
      }
    },
    [
      $(
        'h1',
        {
          style: { color: 'white' }
        },
        'SPARQ Next'
      ),
      $(
        'div',
        {
          style: {}
        },
        'Some description goes here'
      )
    ]
  )
}

function Slab() {
  return $(
    'div',
    {
      style: {
        flex: 1,
        height: '300px',
        backgroundColor: 'white',
        width: '33%',
        margin: '9px'
      }
    },
    'Post Title'
  )
}