summaryrefslogtreecommitdiff
path: root/src/leap/bitmask_js/app/components
diff options
context:
space:
mode:
authorKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-01 01:44:34 -0400
commit4728855b40d2d37da8e035c5081fab5819b07fd0 (patch)
treec8a7c727521fe06a2c4fe9221cb77d30e8f0c3b9 /src/leap/bitmask_js/app/components
parent4613e74ce4e2c8b125a6a61585a4aec5f5151969 (diff)
[refactor] move js to top-level folder
Diffstat (limited to 'src/leap/bitmask_js/app/components')
-rw-r--r--src/leap/bitmask_js/app/components/area.js65
-rw-r--r--src/leap/bitmask_js/app/components/center.js52
-rw-r--r--src/leap/bitmask_js/app/components/debug_panel.js40
-rw-r--r--src/leap/bitmask_js/app/components/error_panel.js21
-rw-r--r--src/leap/bitmask_js/app/components/greeter_panel.js34
-rw-r--r--src/leap/bitmask_js/app/components/list_edit.js122
-rw-r--r--src/leap/bitmask_js/app/components/login.js302
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/account_list.js113
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/email_section.js0
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/index.js57
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/main_panel.less208
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/section_layout.js59
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/user_section.js71
-rw-r--r--src/leap/bitmask_js/app/components/main_panel/vpn_section.js0
-rw-r--r--src/leap/bitmask_js/app/components/panel_switcher.js56
-rw-r--r--src/leap/bitmask_js/app/components/spinner/index.js15
-rw-r--r--src/leap/bitmask_js/app/components/spinner/spinner.css26
-rw-r--r--src/leap/bitmask_js/app/components/splash.js132
-rw-r--r--src/leap/bitmask_js/app/components/wizard/add_provider_modal.js94
-rw-r--r--src/leap/bitmask_js/app/components/wizard/index.js38
-rw-r--r--src/leap/bitmask_js/app/components/wizard/provider_select_stage.js86
-rw-r--r--src/leap/bitmask_js/app/components/wizard/stage_layout.js37
-rw-r--r--src/leap/bitmask_js/app/components/wizard/wizard.less36
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