diff options
Diffstat (limited to 'src/leap/bitmask_js/app/components')
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 e903e5f..0000000 --- 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 a3b6409..0000000 --- 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 7515ba8..0000000 --- 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 fc88d45..0000000 --- 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 4552db1..0000000 --- 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" /> - - <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 0d557d2..0000000 --- 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 4f7b628..0000000 --- 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> </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> </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 d0ef092..0000000 --- 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 e69de29..0000000 --- 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 910d58b..0000000 --- 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 3172bba..0000000 --- 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 e7c6f2a..0000000 --- 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 0b4ba13..0000000 --- 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 e69de29..0000000 --- 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 f4f32cf..0000000 --- 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 ffc3285..0000000 --- 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 4e7f3ee..0000000 --- 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 46170d2..0000000 --- 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 bc5e023..0000000 --- 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> </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 613b88f..0000000 --- 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 20674be..0000000 --- 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 3154022..0000000 --- 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 3336ffb..0000000 --- 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 |