[refactor] move js to top-level folder

23 files changed, 0 insertions, 1664 deletions

diff --git a/src/leap/bitmask_js/app/components/area.js b/src/leap/bitmask_js/app/components/area.js
deleted file mode 100644
index e903e5f5..00000000
--- a/src/leap/bitmask_js/app/components/area.js
+++ /dev/null
@@ -1,65 +0,0 @@
-//
-// A bootstrap panel, but with some extra options
-//
-
-import React from 'react'
-// import {Panel} from 'react-bootstrap'
-
-class Area extends React.Component {
-
-  static get defaultProps() {return{
-     position: null,  // top or bottom
-     size: 'small',   // small or big
-     type: null,      // light or dark
-     className: null
-  }}
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    let style = {}
-    let innerstyle = {}
-    if (this.props.position == 'top') {
-      style.borderBottomRightRadius = '0px'
-      style.borderBottomLeftRadius = '0px'
-      style.marginBottom = '0px'
-      style.borderBottom = '0px'
-      if (this.props.size == 'big') {
-        innerstyle.padding = '25px'
-      }
-    } else if (this.props.position == 'bottom') {
-      style.borderTopRightRadius = '0px'
-      style.borderTopLeftRadius = '0px'
-      style.borderTop = '0px'
-      if (this.props.size == 'big') {
-        innerstyle.padding = '15px 25px'
-      }
-    }
-
-    let type = this.props.type ? "area-" + this.props.type : ""
-    let className = ['panel', 'panel-default', type, this.props.className].join(' ')
-    return(
-      <div className={className} style={style}>
-        <div className="panel-body" style={innerstyle}>
-          {this.props.children}
-        </div>
-      </div>
-    )
-  }
-
-}
-
-// Area.propTypes = {
-//   children: React.PropTypes.oneOfType([
-//     React.PropTypes.element,
-//     React.PropTypes.arrayOf(React.PropTypes.element)
-//   ])
-// }
-
-//Area.propTypes = {
-//  children: React.PropTypes.element.isRequired
-//}
-
-export default Area
diff --git a/src/leap/bitmask_js/app/components/center.js b/src/leap/bitmask_js/app/components/center.js
deleted file mode 100644
index a3b6409a..00000000
--- a/src/leap/bitmask_js/app/components/center.js
+++ /dev/null
@@ -1,52 +0,0 @@
-//
-// puts a block right in the center of the window
-//
-
-import React from 'react'
-
-const CONTAINER_CSS = {
-  position: 'absolute',
-  display: 'flex',
-  justifyContent: 'center',
-  alignContent: 'center',
-  alignItems: 'center',
-  top: "0px",
-  left: "0px",
-  height: "100%",
-  width: "100%"
-}
-
-const ITEM_CSS = {
-  flex: "0 1 auto"
-}
-
-class Center extends React.Component {
-
-  static get defaultProps() {return{
-    width: null
-  }}
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    let style = this.props.width ? Object.assign({width: this.props.width + 'px'}, ITEM_CSS) : ITEM_CSS
-    return (
-      <div className="center-container" style={CONTAINER_CSS}>
-        <div className="center-item" style={style}>
-          {this.props.children}
-        </div>
-      </div>
-    )
-  }
-}
-
-Center.propTypes = {
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.element,
-    React.PropTypes.arrayOf(React.PropTypes.element)
-  ])
-}
-
-export default Center
diff --git a/src/leap/bitmask_js/app/components/debug_panel.js b/src/leap/bitmask_js/app/components/debug_panel.js
deleted file mode 100644
index 7515ba84..00000000
--- a/src/leap/bitmask_js/app/components/debug_panel.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import App from '../app'
-
-
-class DebugPanel extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.click = this.click.bind(this)
-  }
-
-  componentDidMount() {
-    this.click(window.location.hash.replace('#', ''))
-  }
-
-  click(panel_name) {
-    window.location.hash = panel_name
-    App.show(panel_name)
-  }
-
-  panel(panel_name) {
-    return elem(
-      'a',
-      { onClick: () => this.click(panel_name), key: panel_name },
-      panel_name
-    )
-  }
-
-  render() {
-    return elem('div', {className: 'debug-panel'},
-      this.panel('splash'),
-      this.panel('greeter'),
-      this.panel('wizard'),
-      this.panel('main')
-    )
-  }
-
-}
-
-export default DebugPanel
\ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/error_panel.js b/src/leap/bitmask_js/app/components/error_panel.js
deleted file mode 100644
index fc88d459..00000000
--- a/src/leap/bitmask_js/app/components/error_panel.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import Center from './center'
-import Area from './area'
-
-export default class ErrorPanel extends React.Component {
-
-  constructor(props) {
-    super(props)
-  }
-
-  render () {
-    return (
-      <Center width="400">
-        <Area>
-          <h1>Error</h1>
-          {this.props.error}
-        </Area>
-      </Center>
-    )
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/greeter_panel.js b/src/leap/bitmask_js/app/components/greeter_panel.js
deleted file mode 100644
index 4552db18..00000000
--- a/src/leap/bitmask_js/app/components/greeter_panel.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import Login from './login'
-import Center from './center'
-import Splash from './splash'
-import Area from './area'
-import { Glyphicon } from 'react-bootstrap'
-import App from 'app'
-
-export default class GreeterPanel extends React.Component {
-
-  constructor(props) {
-    super(props)
-  }
-
-  newAccount() {
-    App.show('wizard')
-  }
-
-  render () {
-    return <div>
-      <Splash speed="slow" mask={false} />
-      <Center width="400">
-        <Area position="top" type="light" className="greeter">
-          <Login {...this.props} rememberAllowed={false}/>
-        </Area>
-        <Area position="bottom" type="dark" className="greeter">
-          <Glyphicon glyph="user" />
-          &nbsp;
-          <a href="#" onClick={this.newAccount.bind(this)}>Create a new account...</a>
-        </Area>
-      </Center>
-    </div>
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/list_edit.js b/src/leap/bitmask_js/app/components/list_edit.js
deleted file mode 100644
index 0d557d22..00000000
--- a/src/leap/bitmask_js/app/components/list_edit.js
+++ /dev/null
@@ -1,122 +0,0 @@
-//
-// A simple list of items, with minus and plus buttons to add and remove
-// items.
-//
-
-import React from 'react'
-import {Button, ButtonGroup, ButtonToolbar, Glyphicon, FormControl} from 'react-bootstrap'
-
-const CONTAINER_CSS = {
-  display: "flex",
-  flexDirection: "column"
-}
-const SELECT_CSS = {
-  padding: "0px",
-  flex: "1 1 1000px",
-  overflowY: "scroll"
-}
-const OPTION_CSS = {
-  padding: "10px"
-}
-const TOOLBAR_CSS = {
-  paddingTop: "10px",
-  flex: "0 0 auto"
-}
-
-class ListEdit extends React.Component {
-
-  static get defaultProps() {return{
-    width: null,
-    items: [
-      'aaaaaaa',
-      'bbbbbbb',
-      'ccccccc'
-    ],
-    selected: null,
-    onRemove: null,
-    onAdd: null,
-  }}
-
-  constructor(props) {
-    super(props)
-    let index = 0
-    if (props.selected) {
-      index = props.items.indexOf(props.selected)
-    }
-    this.state = {
-      selected: index
-    }
-    this.click  = this.click.bind(this)
-    this.add    = this.add.bind(this)
-    this.remove = this.remove.bind(this)
-  }
-
-  setSelected(index) {
-    this.setState({
-      selected: index
-    })
-  }
-
-  click(e) {
-    let row = parseInt(e.target.value)
-    if (row >= 0) {
-      this.setState({selected: row})
-    }
-  }
-
-  add() {
-    if (this.props.onAdd) {
-      this.props.onAdd()
-    }
-  }
-
-  remove() {
-    if (this.state.selected >= 0 && this.props.onRemove) {
-      if (this.props.items.length == this.state.selected + 1) {
-        // if we remove the last item, set the selected item
-        // to the one right before it.
-        this.setState({selected: (this.state.selected - 1)})
-      }
-      this.props.onRemove(this.props.items[this.state.selected])
-    }
-  }
-
-  render() {
-    let options = null
-    if (this.props.items) {
-      options = this.props.items.map((item, i) => {
-        return <option style={OPTION_CSS} key={i} value={i}>{item}</option>
-      }, this)
-    }
-    return(
-      <div style={CONTAINER_CSS}>
-        <FormControl
-          value={this.state.selected}
-          style={SELECT_CSS} className="select-list"
-          componentClass="select" size="5" onChange={this.click}>
-          {options}
-        </FormControl>
-        <ButtonToolbar className="pull-right" style={TOOLBAR_CSS}>
-          <ButtonGroup>
-            <Button onClick={this.add}>
-              <Glyphicon glyph="plus" />
-            </Button>
-            <Button disabled={this.state.selected < 0} onClick={this.remove}>
-              <Glyphicon glyph="minus" />
-            </Button>
-          </ButtonGroup>
-        </ButtonToolbar>
-      </div>
-    )
-  }
-
-}
-
-ListEdit.propTypes = {
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.element,
-    React.PropTypes.arrayOf(React.PropTypes.element)
-  ])
-}
-
-export default ListEdit
diff --git a/src/leap/bitmask_js/app/components/login.js b/src/leap/bitmask_js/app/components/login.js
deleted file mode 100644
index 4f7b6289..00000000
--- a/src/leap/bitmask_js/app/components/login.js
+++ /dev/null
@@ -1,302 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-import { FormGroup, ControlLabel, FormControl, HelpBlock, Button,
-  Checkbox, Glyphicon, Overlay, Tooltip, Alert } from 'react-bootstrap'
-import Spinner from './spinner'
-
-import Validate from 'lib/validate'
-import App from 'app'
-import Account from 'models/account'
-
-class Login extends React.Component {
-
-  static get defaultProps() {return{
-    rememberAllowed: false,   // if set, show remember password checkbox
-    domain: null,             // if set, only allow this domain
-    onLogin: null
-  }}
-
-  constructor(props) {
-    super(props)
-
-    // validation states can be null, 'success', 'warning', or 'error'
-
-    this.state = {
-      loading: false,
-
-      authError: false,     // authentication error message
-
-      username: "etest1@riseup.net",
-      usernameState: null,  // username validation state
-      usernameError: false, // username help message
-
-      password: "whatever",
-      passwordState: null,  // password validation state
-      passwordError: false, // password help message
-
-      disabled: false,
-      remember: false       // remember is checked?
-    }
-
-    // prebind:
-    this.onUsernameChange = this.onUsernameChange.bind(this)
-    this.onUsernameBlur   = this.onUsernameBlur.bind(this)
-    this.onPassword = this.onPassword.bind(this)
-    this.onSubmit   = this.onSubmit.bind(this)
-    this.onRemember = this.onRemember.bind(this)
-  }
-
-  componentDidMount() {
-    Validate.loadPasswdLib()
-  }
-
-  render () {
-    let rememberCheck = ""
-    let submitButton  = ""
-    let usernameHelp  = null
-    let passwordHelp  = null
-    let message = null
-
-    if (this.props.rememberAllowed) {
-      let props = {
-        style: {marginTop: "0px"},
-        onChange: this.onRemember
-      }
-
-      if (this.state.remember) {
-        rememberCheck = <Checkbox {...props} checked>
-          Remember username and password
-        </Checkbox>
-      } else {
-        rememberCheck = <Checkbox {...props}>
-          Remember username and password
-        </Checkbox>
-      }
-    }
-
-    if (this.state.authError) {
-      // style may be: success, warning, danger, info
-      message = (
-        <Alert bsStyle="danger">{this.state.authError}</Alert>
-      )
-    }
-
-    if (this.state.usernameError) {
-      usernameHelp = <HelpBlock>{this.state.usernameError}</HelpBlock>
-      // let props = {shouldUpdatePosition: true, show:true, placement:"right",
-      //              target:this.refs.username}
-      // usernameHelp = (
-      //   <Overlay {...props}>
-      //     <Tooltip id="username-tooltip">{this.state.usernameError}</Tooltip>
-      //   </Overlay>
-      // )
-    } else {
-      //usernameHelp = <HelpBlock>&nbsp;</HelpBlock>
-    }
-
-    if (this.state.passwordError) {
-      passwordHelp = <HelpBlock>{this.state.passwordError}</HelpBlock>
-      // let props = {shouldUpdatePosition: true, show:true, placement:"right",
-      //              target:this.refs.password, component: {this}}
-      // passwordHelp = (
-      //   <Overlay {...props}>
-      //     <Tooltip id="password-tooltip">{this.state.passwordError}</Tooltip>
-      //   </Overlay>
-      // )
-    } else {
-      //passwordHelp = <HelpBlock>&nbsp;</HelpBlock>
-    }
-
-    let buttonProps = {
-      type: "button",
-      onClick: this.onSubmit,
-      disabled: !this.maySubmit()
-    }
-    if (this.state.loading) {
-       submitButton = <Button block {...buttonProps}><Spinner /></Button>
-    } else {
-       submitButton = <Button block {...buttonProps}>Log In</Button>
-    }
-
-    let usernameref = null
-    if (this.props.domain) {
-      usernameref = function(c) {
-        if (c != null) {
-          let textarea = ReactDOM.findDOMNode(c)
-          let start = textarea.value.indexOf('@')
-          if (textarea.selectionStart > start) {
-            textarea.setSelectionRange(start, start)
-          }
-        }
-      }
-    }
-
-    let form = <form onSubmit={this.onSubmit}>
-      {message}
-      <FormGroup style={{marginBottom: '10px' }} controlId="loginUsername" validationState={this.state.usernameState}>
-        <ControlLabel>Username</ControlLabel>
-        <FormControl
-          componentClass="textarea"
-          style={{resize: "none"}}
-          rows="1"
-          ref={usernameref}
-          autoFocus
-          value={this.state.username}
-          onChange={this.onUsernameChange}
-          onBlur={this.onUsernameBlur} />
-        {this.state.usernameState == 'success' ? null : <FormControl.Feedback/>}
-        {usernameHelp}
-      </FormGroup>
-
-      <FormGroup controlId="loginPassword" validationState={this.state.passwordState}>
-        <ControlLabel>Password</ControlLabel>
-        <FormControl
-          type="password"
-          ref="password"
-          value={this.state.password}
-          onChange={this.onPassword} />
-        {this.state.passwordState == 'success' ? null : <FormControl.Feedback/>}
-        {passwordHelp}
-      </FormGroup>
-
-      {submitButton}
-      {rememberCheck}
-    </form>
-
-    return form
-  }
-
-  //
-  // Here we do a partial validation, because the user has not stopped typing.
-  //
-  onUsernameChange(e) {
-    let username = e.target.value.toLowerCase().replace("\n", "")
-    if (this.props.domain) {
-      let [userpart, domainpart] = username.split(
-        new RegExp('@|' + this.props.domain.replace(".", "\\.") + '$')
-      )
-      username = [userpart, this.props.domain].join('@')
-    }
-    let error = Validate.usernameInteractive(username, this.props.domain)
-    let state = null
-    if (error) {
-      state = 'error'
-    } else {
-      if (username && username.length > 0) {
-        let finalError = Validate.username(username)
-        state = finalError ? null : 'success'
-      }
-    }
-    this.setState({
-      username: username,
-      usernameState: state,
-      usernameError: error ? error : null
-    })
-  }
-
-  //
-  // Here we do a more complete validation, since the user have left the field.
-  //
-  onUsernameBlur(e) {
-    let username = e.target.value.toLowerCase()
-    this.setState({
-      username: username
-    })
-    if (username.length > 0) {
-      this.validateUsername(username)
-    } else {
-      this.setState({
-        usernameState: null,
-        usernameError: null
-      })
-    }
-  }
-
-  onPassword(e) {
-    let password = e.target.value
-    this.setState({password: password})
-    if (password.length > 0) {
-      this.validatePassword(password)
-    } else {
-      this.setState({
-        passwordState: null,
-        passwordError: null
-      })
-    }
-  }
-
-  onRemember(e) {
-    let currentValue = e.target.value == 'on' ? true : false
-    let value = !currentValue
-    this.setState({remember: value})
-  }
-
-  validateUsername(username) {
-    let error = Validate.username(username, this.props.domain)
-    this.setState({
-      usernameState: error ? 'error' : 'success',
-      usernameError: error ? error : null
-    })
-  }
-
-  validatePassword(password) {
-    let state = null
-    let message = null
-    let result = Validate.passwordStrength(password)
-    if (result) {
-      message = "Time to crack: " + result.crack_times_display.offline_slow_hashing_1e4_per_second
-      if (result.score == 0) {
-        state = 'error'
-      } else if (result.score == 1 || result.score == 2) {
-        state = 'warning'
-      } else {
-        state = 'success'
-      }
-    }
-    this.setState({
-      passwordState: state,
-      passwordError: message
-    })
-  }
-
-  maySubmit() {
-    return(
-      !this.stateLoading &&
-      !this.state.usernameError &&
-      this.state.username != "" &&
-      this.state.password != ""
-    )
-  }
-
-  onSubmit(e) {
-    e.preventDefault() // don't reload the page please!
-    if (!this.maySubmit()) { return }
-    this.setState({loading: true})
-
-    let account = new Account(this.state.username)
-    account.login(this.state.password).then(
-      account => {
-        this.setState({loading: false})
-        if (this.props.onLogin) {
-          this.props.onLogin(account)
-        }
-      },
-      error => {
-        console.log(error)
-        if (error == "") {
-          error = 'Something failed, but we did not get a message'
-        }
-        this.setState({
-          loading: false,
-          usernameState: 'error',
-          passwordState: 'error',
-          authError: error
-        })
-      }
-    )
-  }
-
-}
-
-export default Login
\ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/main_panel/account_list.js b/src/leap/bitmask_js/app/components/main_panel/account_list.js
deleted file mode 100644
index d0ef092f..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/account_list.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react'
-import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
-
-import App from 'app'
-import Account from 'models/account'
-
-export default class AccountList extends React.Component {
-
-  static get defaultProps() {return{
-    account: null,
-    accounts: [],
-    onAdd: null,
-    onRemove: null,
-    onSelect: null
-  }}
-
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      mode: 'expanded'
-    }
-
-    // prebind:
-    this.select = this.select.bind(this)
-    this.add    = this.add.bind(this)
-    this.remove = this.remove.bind(this)
-    this.expand = this.expand.bind(this)
-    this.collapse = this.collapse.bind(this)
-  }
-
-  select(e) {
-    let account = this.props.accounts.find(
-      account => account.id == e.currentTarget.dataset.id
-    )
-    if (this.props.onSelect) {
-      this.props.onSelect(account)
-    }
-  }
-
-  add() {
-    App.show('wizard')
-  }
-
-  remove() {
-  }
-
-  expand() {
-    this.setState({mode: 'expanded'})
-  }
-
-  collapse() {
-    this.setState({mode: 'collapsed'})
-  }
-
-  render() {
-    let style = {}
-    let expandButton = null
-    let plusminusButtons = null
-
-    if (this.state.mode == 'expanded') {
-      expandButton = (
-        <Button onClick={this.collapse} className="expander btn-inverse btn-flat pull-right">
-          <Glyphicon glyph="triangle-left" />
-        </Button>
-      )
-      plusminusButtons = (
-        <ButtonGroup style={style}>
-          <Button onClick={this.add} className="btn-inverse">
-            <Glyphicon glyph="plus" />
-          </Button>
-          <Button disabled={this.props.account == null} onClick={this.remove} className="btn-inverse">
-            <Glyphicon glyph="minus" />
-          </Button>
-        </ButtonGroup>
-      )
-    } else {
-      style.width = '60px'
-      expandButton = (
-        <Button onClick={this.expand} className="expander btn-inverse btn-flat pull-right">
-          <Glyphicon glyph="triangle-right" />
-        </Button>
-      )
-    }
-
-    let items = this.props.accounts.map((account, i) => {
-      let className = account == this.props.account ? 'active' : 'inactive'
-      return (
-        <li key={i} className={className} onClick={this.select} data-id={account.id}>
-          <span className="username">{account.userpart}</span>
-          <span className="domain">{account.domain}</span>
-          <span className="arc top"></span>
-          <span className="arc bottom"></span>
-        </li>
-      )
-    })
-
-
-    return (
-      <div className="accounts" style={style}>
-        <ul>
-          {items}
-        </ul>
-        <ButtonToolbar>
-          {plusminusButtons}
-          {expandButton}
-        </ButtonToolbar>
-      </div>
-    )
-  }
-
-
-}
diff --git a/src/leap/bitmask_js/app/components/main_panel/email_section.js b/src/leap/bitmask_js/app/components/main_panel/email_section.js
deleted file mode 100644
index e69de29b..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/email_section.js
+++ /dev/null
diff --git a/src/leap/bitmask_js/app/components/main_panel/index.js b/src/leap/bitmask_js/app/components/main_panel/index.js
deleted file mode 100644
index 910d58b6..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-//
-// The main panel manages the current account and the list of available accounts
-//
-// It displays multiple sections, one for each service.
-//
-
-import React from 'react'
-import App from 'app'
-import Login from 'components/login'
-
-import './main_panel.less'
-import AccountList from './account_list'
-import UserSection from './user_section'
-
-export default class MainPanel extends React.Component {
-
-  static get defaultProps() {return{
-    initialAccount: null
-  }}
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      account: null,
-      accounts: []
-    }
-    this.activateAccount = this.activateAccount.bind(this)
-  }
-
-  componentWillMount() {
-    if (this.props.initialAccount) {
-      this.setState({
-        account: this.props.initialAccount,
-        accounts: [this.props.initialAccount]
-      })
-    }
-  }
-
-  activateAccount(account) {
-    this.setState({
-      account: account,
-      accounts: [account]
-    })
-  }
-
-  render() {
-    return (
-      <div className="main-panel">
-        <AccountList account={this.state.account} accounts={this.state.accounts} onSelect={this.activateAccount} />
-        <div className="body">
-          <UserSection account={this.state.account} onLogin={this.activateAccount} onLogout={this.activateAccount}/>
-        </div>
-      </div>
-    )
-  }
-
-}
diff --git a/src/leap/bitmask_js/app/components/main_panel/main_panel.less b/src/leap/bitmask_js/app/components/main_panel/main_panel.less
deleted file mode 100644
index 3172bba5..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/main_panel.less
+++ /dev/null
@@ -1,208 +0,0 @@
-// The space around account entries:
-@accounts-padding: 8px;
-@accounts-width: 200px;
-
-//
-// LAYOUT
-//
-
-.main-panel {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-
-  > .body {
-    flex: 1 1 auto;
-    overflow: auto;
-  }
-
-  .accounts {
-    flex: 0 0 auto;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    display: flex;
-    flex-direction: column;
-    ul {
-      flex: 1 1 1000px;
-    }
-    .btn-toolbar {
-      flex: 0 0 auto;
-    }
-
-  }
-
-}
-
-//
-// Style
-//
-
-.main-panel > .body {
-  padding: 20px;
-}
-
-.main-panel .accounts {
-  background-color: #333;
-  width: @accounts-width;
-  padding: @accounts-padding;
-  padding-right: 0px;
-}
-
-.main-panel .accounts ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.main-panel .accounts li {
-  position: relative;
-  cursor: pointer;
-  color: white;
-  padding: 15px;
-  background-color: #444;
-  margin-bottom: @accounts-padding;
-  border-top-left-radius: @accounts-padding;
-  border-bottom-left-radius: @accounts-padding;
-  z-index: 100;
-}
-
-.main-panel .accounts li span.domain {
-  display: block;
-  font-weight: bold;
-  //margin-left: 40px;
-}
-
-.main-panel .accounts li span.username {
-  display: block;
-  //margin-left: 40px;
-  //line-height: 7px;
-  //margin-bottom: 4px;
-}
-
-/*.main-panel .accounts li span.icon {
-  display: block;
-  height: 32px;
-  width: 32px;
-  background-color: #999;
-  float: left;
-}
-*/
-
-.main-panel .accounts li.active {
-  background-color: white;
-  color: #333;
-}
-
-.main-panel .accounts li.active span.arc {
-  display: block;
-  height: @accounts-padding;
-  width: @accounts-padding;
-  background-color: white;
-  position: absolute;
-  right: 0;
-}
-
-.main-panel .accounts li.active span.arc.top {
-  top: 0;
-  margin-top: -@accounts-padding;
-}
-.main-panel .accounts li.active span.arc.bottom {
-  bottom: 0;
-  margin-bottom: -@accounts-padding;
-}
-.main-panel .accounts li.active span.arc:after {
-  display: block;
-  content: "";
-  border-radius: 100%;
-  height: 0px;
-  width: 0px;
-  margin-left: -@accounts-padding;
-}
-.main-panel .accounts li.active span.arc.top:after {
-  border: @accounts-padding solid transparent;
-  border-right: @accounts-padding solid #333;
-  margin-top: -@accounts-padding;
-  transform: rotate(45deg);
-}
-.main-panel .accounts li.active span.arc.bottom:after {
-  border: @accounts-padding solid #333;
-}
-
-.main-panel .accounts .btn.expander {
-   margin-right: @accounts-padding;
-}
-
-
-//
-// SECTIONS
-//
-
-@icon-size: 32px;
-@status-size: 24px;
-@section-padding: 10px;
-
-// service sections layout
-
-.main-panel .service-section {
-  display: flex;
-  flex-direction: row;
-  > .icon {
-    flex: 0 0 auto;
-  }
-  > .body {
-    flex: 1 1 auto;
-  }
-  > .buttons {
-    flex: 0 0 auto;
-  }
-  > .status {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.main-panel .service-section div {
-  //outline: 1px solid rgba(0,0,0,0.1);
-}
-
-// service sections style
-
-.main-panel .service-section {
-  background: #f6f6f6;
-  border-radius: 4px;
-  padding: 10px;
-  &.wide-margin {
-    padding: 20px 20px 20px 10px; // arbitrary, looks nice
-  }
-  > .icon {
-    padding-right: @section-padding;
-    img {
-      width: @icon-size;
-      height: @icon-size;
-    }
-  }
-  > .body {
-    h1 {
-      margin: 0;
-      padding: 0;
-      font-size: @icon-size - 10;
-      line-height: @icon-size;
-    }
-  }
-  > .buttons {
-    padding-left: 10px;
-  }
-  > .status {
-    padding-left: @section-padding;
-    width: @section-padding + @status-size;
-    img {
-      width: @status-size;
-      height: @status-size;
-    }
-  }
-}
-
diff --git a/src/leap/bitmask_js/app/components/main_panel/section_layout.js b/src/leap/bitmask_js/app/components/main_panel/section_layout.js
deleted file mode 100644
index e7c6f2ab..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/section_layout.js
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// This is the layout for a service section in the main window.
-// It does not do anything except for arrange items using css and html.
-//
-
-import React from 'react'
-
-export default class SectionLayout extends React.Component {
-
-  static get defaultProps() {return{
-    icon: null,
-    buttons: null,
-    status: null,
-    className: "",
-    style: {}
-  }}
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    let className = ["service-section", this.props.className].join(' ')
-    let status = null
-    let icon = null
-    let buttons = null
-
-    if (this.props.status) {
-      status = (
-        <div className="status">
-          <img src={'img/' + this.props.status + '.svg' } />
-        </div>
-      )
-    }
-    if (this.props.icon) {
-      icon = (
-        <div className="icon">
-          <img src={'img/' + this.props.icon + '.svg'} />
-        </div>
-      )
-    }
-    if (this.props.buttons)
-      buttons = (
-        <div className="buttons">
-          {this.props.buttons}
-        </div>
-      )
-    return(
-      <div className={className} style={this.props.style}>
-        {icon}
-        <div className="body">
-          {this.props.children}
-        </div>
-        {buttons}
-        {status}
-      </div>
-    )
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/main_panel/user_section.js b/src/leap/bitmask_js/app/components/main_panel/user_section.js
deleted file mode 100644
index 0b4ba136..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/user_section.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import { Button, Glyphicon, Alert } from 'react-bootstrap'
-import SectionLayout from './section_layout'
-import Login from 'components/login'
-import Spinner from 'components/spinner'
-import Account from 'models/account'
-
-import bitmask from 'lib/bitmask'
-
-export default class UserSection extends React.Component {
-
-  static get defaultProps() {return{
-    account: null,
-    onLogout: null,
-    onLogin: null
-  }}
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      error: null,
-      loading: false
-    }
-    this.logout = this.logout.bind(this)
-  }
-
-  logout() {
-    this.setState({loading: true})
-    this.props.account.logout().then(
-      account => {
-        this.setState({error: null, loading: false})
-        if (this.props.onLogout) {
-          this.props.onLogout(account)
-        }
-      }, error => {
-        this.setState({error: error, loading: false})
-      }
-    )
-  }
-
-  render () {
-    let message = null
-    if (this.state.error) {
-      // style may be: success, warning, danger, info
-      message = (
-        <Alert bsStyle="danger">{this.state.error}</Alert>
-      )
-    }
-
-    if (this.props.account.authenticated) {
-      let button = null
-      if (this.state.loading) {
-        button = <Button disabled={true}><Spinner /></Button>
-      } else {
-        button = <Button onClick={this.logout}>Log Out</Button>
-      }
-      return (
-        <SectionLayout icon="user" buttons={button} status="on">
-          <h1>{this.props.account.address}</h1>
-          {message}
-        </SectionLayout>
-      )
-    } else {
-      return (
-        <SectionLayout icon="user" className="wide-margin">
-          <Login onLogin={this.props.onLogin} domain={this.props.account.domain} />
-        </SectionLayout>
-      )
-    }
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/main_panel/vpn_section.js b/src/leap/bitmask_js/app/components/main_panel/vpn_section.js
deleted file mode 100644
index e69de29b..00000000
--- a/src/leap/bitmask_js/app/components/main_panel/vpn_section.js
+++ /dev/null
diff --git a/src/leap/bitmask_js/app/components/panel_switcher.js b/src/leap/bitmask_js/app/components/panel_switcher.js
deleted file mode 100644
index f4f32cf6..00000000
--- a/src/leap/bitmask_js/app/components/panel_switcher.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-import DebugPanel from './debug_panel'
-import Splash from './splash'
-import GreeterPanel from './greeter_panel'
-import MainPanel from './main_panel'
-import Wizard from './wizard'
-
-import App from 'app'
-import 'lib/common'
-
-export default class PanelSwitcher extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      panel: null,
-      panel_properties: null,
-      debug: false
-    }
-    App.switcher = this
-  }
-
-  show(component_name, properties={}) {
-    this.setState({panel: component_name, panel_properties: properties})
-  }
-
-  render() {
-    let elems = []
-    if (this.panelExist(this.state.panel)) {
-      elems.push(
-        this.panelRender(this.state.panel, this.state.panel_properties)
-      )
-    }
-    if (this.state.debug) {
-      elems.push(
-        elem(DebugPanel, {key: 'debug'})
-      )
-    }
-    return <div id="root">{elems}</div>
-  }
-
-  panelExist(panel) {
-    return panel && this['render_'+panel]
-  }
-
-  panelRender(panel_name, props) {
-    let panel = this['render_'+panel_name](props)
-    return elem('div', {key: 'panel'}, panel)
-  }
-
-  render_splash(props)  {return elem(Splash, props)}
-  render_wizard(props)  {return elem(Wizard, props)}
-  render_greeter(props) {return elem(GreeterPanel, props)}
-  render_main(props)    {return elem(MainPanel, props)}}
diff --git a/src/leap/bitmask_js/app/components/spinner/index.js b/src/leap/bitmask_js/app/components/spinner/index.js
deleted file mode 100644
index ffc32850..00000000
--- a/src/leap/bitmask_js/app/components/spinner/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import './spinner.css';
-
-class Spinner extends React.Component {
-  render() {
-    let props = {}
-    return <div className="spinner">
-      <div className="spin1"></div>
-      <div className="spin2"></div>
-      <div className="spin3"></div>
-    </div>
-  }
-}
-
-export default Spinner
\ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/spinner/spinner.css b/src/leap/bitmask_js/app/components/spinner/spinner.css
deleted file mode 100644
index 4e7f3ee8..00000000
--- a/src/leap/bitmask_js/app/components/spinner/spinner.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.spinner {
-  height: 18px;
-  display: inline-block;
-}
-
-.spinner > div {
-  width: 18px;
-  height: 18px;
-  background-color: #000;
-  vertical-align: middle;
-  border-radius: 100%;
-  display: inline-block;
-  animation: bouncedelay 1.5s infinite ease-in-out;
-  animation-fill-mode: both;
-}
-
-.spinner .spin1 { animation-delay: -.46s }
-.spinner .spin2 { animation-delay: -.24s }
-
-@keyframes bouncedelay {
-  0%, 80%, 100% {
-    transform: scale(0.5);
-  } 40% {
-    transform: scale(0.9);
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/splash.js b/src/leap/bitmask_js/app/components/splash.js
deleted file mode 100644
index 46170d23..00000000
--- a/src/leap/bitmask_js/app/components/splash.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * A simple animated splash screen
- */
-
-import React from 'react'
-import * as COLOR from '../lib/colors'
-
-const colorList = [
-  COLOR.red200, COLOR.pink200, COLOR.purple200, COLOR.deepPurple200,
-  COLOR.indigo200, COLOR.blue200, COLOR.lightBlue200, COLOR.cyan200,
-  COLOR.teal200, COLOR.green200, COLOR.lightGreen200, COLOR.lime200,
-  COLOR.yellow200, COLOR.amber200, COLOR.orange200, COLOR.deepOrange200
-]
-
-export default class Splash extends React.Component {
-
-  static get defaultProps() {return{
-    speed: "fast",
-    mask: true,
-    onClick: null
-  }}
-
-  constructor(props) {
-    super(props)
-    this.counter = 0
-    this.interval = null
-    this.ctx = null
-    this.stepAngle = 0
-    this.resize = this.resize.bind(this)
-    this.click  = this.click.bind(this)
-    if (this.props.speed == "fast") {
-      this.fps = 30
-      this.stepAngle = 0.005
-    } else {
-      this.fps = 30
-      this.stepAngle = 0.0005
-    }
-  }
-
-  componentDidMount() {
-    this.interval = setInterval(this.tick.bind(this), 1000/this.fps)
-    this.canvas   = this.refs.canvas
-    this.ctx      = this.canvas.getContext('2d')
-    window.addEventListener('resize', this.resize)
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.interval)
-    window.removeEventListener('resize', this.resize)
-  }
-
-  click() {
-    if (this.props.onClick) {
-      this.props.onClick()
-    }
-  }
-
-  tick() {
-    this.counter++
-    this.updateCanvas()
-  }
-
-  resize() {
-    this.canvas.width = window.innerWidth
-    this.canvas.height = window.innerHeight
-    this.updateCanvas()
-  }
-
-  updateCanvas() {
-    const arcCount = 16
-    const arcAngle = 1 / arcCount
-    const x = this.canvas.width / 2
-    const y = this.canvas.height / 2
-    const radius = screen.height + screen.width
-
-    for (let i = 0; i < arcCount; i++) {
-      let startAngle = Math.PI * 2 * i/arcCount + this.stepAngle*this.counter
-      let endAngle   = Math.PI * 2 * (i+1)/arcCount + this.stepAngle*this.counter
-
-      this.ctx.fillStyle = colorList[i % colorList.length]
-      this.ctx.strokeStyle = colorList[i % colorList.length]
-      this.ctx.beginPath()
-      this.ctx.moveTo(x, y)
-      this.ctx.arc(x, y, radius, startAngle, endAngle)
-      this.ctx.lineTo(x, y)
-      this.ctx.fill()
-      this.ctx.stroke()
-    }
-
-  }
-
-  render () {
-    let overlay = null
-    let mask = null
-    if (this.props.onClick) {
-      overlay = React.DOM.div({
-        style: {
-          position: 'absolute',
-          height: '100%',
-          width: '100%',
-          backgroundColor: 'transparent'
-        },
-        onClick: this.click
-      })
-    }
-    if (this.props.mask) {
-      mask = React.DOM.img({
-        src: 'img/mask.svg',
-        style: {
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          marginLeft: -330/2 + 'px',
-          marginTop: -174/2 + 'px',
-        }
-      })
-    }
-    return React.DOM.div(
-      {style: {overflow: 'hidden'}},
-      React.DOM.canvas({
-        ref: 'canvas',
-        style: {position: 'absolute'},
-        width: window.innerWidth,
-        height: window.innerHeight,
-      }),
-      mask,
-      overlay
-    )
-  }
-
-}
-
diff --git a/src/leap/bitmask_js/app/components/wizard/add_provider_modal.js b/src/leap/bitmask_js/app/components/wizard/add_provider_modal.js
deleted file mode 100644
index bc5e0236..00000000
--- a/src/leap/bitmask_js/app/components/wizard/add_provider_modal.js
+++ /dev/null
@@ -1,94 +0,0 @@
-//
-// A modal popup to add a new provider.
-//
-
-import React from 'react'
-import { FormGroup, ControlLabel, FormControl, HelpBlock, Button, Modal } from 'react-bootstrap'
-import Spinner from '../spinner'
-import Validate from '../../lib/validate'
-import App from '../../app'
-
-class AddProviderModal extends React.Component {
-
-  static get defaultProps() {return{
-    title: 'Add a provider',
-    onClose: null
-  }}
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      validationState: null,
-      errorMsg: null,
-      domain: ""
-    }
-    this.accept   = this.accept.bind(this)
-    this.cancel   = this.cancel.bind(this)
-    this.changed  = this.changed.bind(this)
-  }
-
-  accept() {
-    if (this.state.domain) {
-      App.providers.add(this.state.domain)
-    }
-    this.props.onClose()
-  }
-
-  cancel() {
-    this.props.onClose()
-  }
-
-  changed(e) {
-    let domain = e.target.value
-    let newState = null
-    let newMsg   = null
-
-    if (domain.length > 0) {
-      let error = Validate.domain(domain)
-      newState = error ? 'error' : 'success'
-      newMsg   = error
-    }
-    this.setState({
-      domain: domain,
-      validationState: newState,
-      errorMsg: newMsg
-    })
-  }
-
-  render() {
-    let help = null
-    if (this.state.errorMsg) {
-      help = <HelpBlock>{this.state.errorMsg}</HelpBlock>
-    } else {
-      help = <HelpBlock>&nbsp;</HelpBlock>
-    }
-    let form = <form onSubmit={this.accept} autoComplete="off">
-      <FormGroup controlId="addprovider" validationState={this.state.validationState}>
-        <ControlLabel>Domain</ControlLabel>
-        <FormControl
-          type="text"
-          ref="domain"
-          autoFocus
-          value={this.state.domain}
-          onChange={this.changed}
-          onBlur={this.changed} />
-        <FormControl.Feedback/>
-        {help}
-      </FormGroup>
-      <Button onClick={this.accept}>Add</Button>
-    </form>
-
-    return(
-      <Modal show={true} onHide={this.cancel}>
-        <Modal.Header closeButton>
-          <Modal.Title>{this.props.title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          {form}
-        </Modal.Body>
-      </Modal>
-    )
-  }
-}
-
-export default AddProviderModal
\ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/wizard/index.js b/src/leap/bitmask_js/app/components/wizard/index.js
deleted file mode 100644
index 613b88fd..00000000
--- a/src/leap/bitmask_js/app/components/wizard/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-//
-// The provider setup wizard
-//
-
-import React from 'react'
-import App from 'app'
-
-import ProviderSelectStage from './provider_select_stage'
-import './wizard.less'
-
-export default class Wizard extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      stage: 'provider'
-    }
-  }
-
-  setStage(stage) {
-    this.setState({stage: stage})
-  }
-
-  render() {
-    let stage = null
-    switch(this.state.stage) {
-      case 'provider':
-        stage = <ProviderSelectStage />
-        break
-    }
-    return(
-      <div className="wizard">
-        {stage}
-      </div>
-    )
-  }
-
-}
diff --git a/src/leap/bitmask_js/app/components/wizard/provider_select_stage.js b/src/leap/bitmask_js/app/components/wizard/provider_select_stage.js
deleted file mode 100644
index 20674be1..00000000
--- a/src/leap/bitmask_js/app/components/wizard/provider_select_stage.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react'
-import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
-
-import App from 'app'
-import ListEdit from 'components/list_edit'
-import StageLayout from './stage_layout'
-import AddProviderModal from './add_provider_modal'
-
-export default class ProviderSelectStage extends React.Component {
-
-  static get defaultProps() {return{
-    title: "Choose a provider",
-    subtitle: "This doesn't work yet"
-  }}
-
-  constructor(props) {
-    super(props)
-    let domains = this.currentDomains()
-    this.state = {
-      domains: domains,
-      showModal: false
-    }
-    this.add = this.add.bind(this)
-    this.remove = this.remove.bind(this)
-    this.close = this.close.bind(this)
-    this.previous = this.previous.bind(this)
-  }
-
-  currentDomains() {
-    // return(App.providers.domains().slice() || [])
-    return ['domain1', 'domain2', 'domain3']
-  }
-
-  add() {
-    this.setState({showModal: true})
-  }
-
-  remove(provider) {
-    // App.providers.remove(provider)
-    this.setState({domains: this.currentDomains()})
-  }
-
-  close() {
-    let domains = this.currentDomains()
-    if (domains.length != this.state.domains.length) {
-      // this is ugly, but i could not get selection working
-      // by passing it as a property
-      this.refs.list.setSelected(0)
-    }
-    this.setState({
-      domains: domains,
-      showModal: false
-    })
-  }
-
-  previous() {
-    App.start()
-  }
-
-  render() {
-    let modal = null
-    if (this.state.showModal) {
-      modal = <AddProviderModal onClose={this.close} />
-    }
-    let buttons = (
-      <ButtonToolbar className="pull-right">
-        <Button onClick={this.previous}>
-          <Glyphicon glyph="chevron-left" />
-          Previous
-        </Button>
-        <Button>
-          Next
-          <Glyphicon glyph="chevron-right" />
-        </Button>
-      </ButtonToolbar>
-    )
-    let select = <ListEdit ref="list" items={this.state.domains}
-      onRemove={this.remove} onAdd={this.add} />
-    return(
-      <StageLayout title={this.props.title} subtitle={this.props.subtitle} buttons={buttons}>
-        {select}
-        {modal}
-      </StageLayout>
-    )
-  }
-}
diff --git a/src/leap/bitmask_js/app/components/wizard/stage_layout.js b/src/leap/bitmask_js/app/components/wizard/stage_layout.js
deleted file mode 100644
index 31540221..00000000
--- a/src/leap/bitmask_js/app/components/wizard/stage_layout.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-
-class StageLayout extends React.Component {
-
-  static get defaultProps() {return{
-    title: 'untitled',
-    subtitle: null,
-    buttons: null
-  }}
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    let subtitle = null
-    if (this.props.subtitle) {
-      subtitle = <span>{this.props.subtitle}</span>
-    }
-    return(
-      <div className="stage">
-        <div className="header">
-          {this.props.title}
-          {subtitle}
-        </div>
-        <div className="body">
-          {this.props.children}
-        </div>
-        <div className="footer">
-          {this.props.buttons}
-        </div>
-      </div>
-    )
-  }
-}
-
-export default StageLayout
\ No newline at end of file
diff --git a/src/leap/bitmask_js/app/components/wizard/wizard.less b/src/leap/bitmask_js/app/components/wizard/wizard.less
deleted file mode 100644
index 3336ffb8..00000000
--- a/src/leap/bitmask_js/app/components/wizard/wizard.less
+++ /dev/null
@@ -1,36 +0,0 @@
-.wizard .stage {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.wizard .stage .footer {
-  flex: 0 0 auto;
-  background-color: #ddd;
-  padding: 20px;
-  text-align: right;
-}
-
-.wizard .stage .header {
-  flex: 0 0 auto;
-  padding: 20px;
-  background-color: #333;
-  color: white;
-  font-size: 2em;
-  span {
-    margin-left: 10px;
-    font-size: 0.5em;
-  }
-}
-
-.wizard .stage .body {
-  flex: 1 1 auto;
-  padding: 20px;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
\ No newline at end of file