diff options
Diffstat (limited to 'www')
47 files changed, 3236 insertions, 0 deletions
diff --git a/www/README.md b/www/README.md new file mode 100644 index 0000000..f1d7c34 --- /dev/null +++ b/www/README.md @@ -0,0 +1,90 @@ +Bitmask Javascript UI +================================================================= + +Here lies the user interface for Bitmask, written in Javascript. + +quick start: + + npm install # installs development dependencies in "node_modules" + npm run watch # continually rebuilds source .js into "public" + bitmaskd # launch backend + npm run open # opens http://localhost:7070/ in a browser + +build for deployment: + + npm install + npm run build:production + +After 'build', 'build:production', or 'watch' is run, everything needed for +Bitmask JS is contained in the 'public' directory. No additional files are +needed. Open the public/index.html file in a browser or web widget. Because of +the single origin policy of browsers, you will need to open public/index.html +through the webserver included with bitmaskd (e.g. http://localhost:7070) + +Development Dependencies +----------------------------------------------------------------- + +This application has no "runtime" dependencies: all the javascript needed is +bundled and included. However, there are many development dependencies. +Run `npm ls` for a full list. + +**npm** + +Package management, controlled by the package.json file. + +**webpack** + +Asset bundling and transformation. It takes all your javascript and CSS and +bundles it into one (or more) files, handling support for 'require' and scope +separation. + +loaders & plugins: + +* babel-loader: use Babel with Webpack. + +* style-loader/css-loader: standard css loader. + +* less-loader: allows use the less stylesheet. + +* copy-webpack-plugin: allows us to specify what files to copy using Webpack. + +* extract-text-webpack-plugin: allows you to split js and css into separate + files. + +**babel** + +Babel is used to compile javascript into javascript, transforming along the +way. We have enabled these plugins: + +* babel-presets-react: Adds support for React features, such as JSX (html + inlined in js files). + +* babel-presets-es2015: Allows the use of modern ES6 javascript. + +* babel-presets-stage-0: Allows the use of some ES7 proposals, even though + these are not standardized yet. Makes classes nicer. + +**react** + +React is an efficient way to generate HTML views with Javascript. It allows you +to create interactive UIs without ever modifying the DOM by using "one way" +data binding. This greatly simplifies the code and reduces errors. + +**bootstrap** + +The world's most popular CSS styles for UI elements. The npm package includes +both pre-compiled css and less stylesheets. Even though Semantic UI is better, +Bootstrap components for React are much more stable, I have found, and also are +easy to theme. + +To integrate Bootstrap with React: + +* react-bootstrap: React components that use Bootstrap styles. These component + include all the needed javascript and don't require JQuery, although they do + require that the bootstrap CSS is loaded independently. + +**zxcvbn** + +A password strength checker that doesn't suck, but which is big. This JS is +only loaded when we think we are about to need it. + diff --git a/www/__init__.py b/www/__init__.py new file mode 100644 index 0000000..d407605 --- /dev/null +++ b/www/__init__.py @@ -0,0 +1,5 @@ +try: + __import__('pkg_resources').declare_namespace(__name__) +except ImportError: + from pkgutil import extend_path + __path__ = extend_path(__path__, __name__) diff --git a/www/app/app.js b/www/app/app.js new file mode 100644 index 0000000..57120a4 --- /dev/null +++ b/www/app/app.js @@ -0,0 +1,33 @@ +import bitmask from 'lib/bitmask' +import Account from 'models/account' + +class Application { + constructor() { + } + + // + // main entry point for the application + // + start() { + Account.active().then(account => { + if (account == null) { + this.show('greeter', {onLogin: this.onLogin.bind(this)}) + } else { + this.show('main', {initialAccount: account}) + } + }, error => { + this.show('error', {error: error}) + }) + } + + onLogin(account) { + this.show('main', {initialAccount: account}) + } + + show(panel, properties) { + this.switcher.show(panel, properties) + } +} + +var App = new Application +export default App
\ No newline at end of file diff --git a/www/app/components/area.js b/www/app/components/area.js new file mode 100644 index 0000000..e903e5f --- /dev/null +++ b/www/app/components/area.js @@ -0,0 +1,65 @@ +// +// 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/www/app/components/center.js b/www/app/components/center.js new file mode 100644 index 0000000..a3b6409 --- /dev/null +++ b/www/app/components/center.js @@ -0,0 +1,52 @@ +// +// 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/www/app/components/debug_panel.js b/www/app/components/debug_panel.js new file mode 100644 index 0000000..7515ba8 --- /dev/null +++ b/www/app/components/debug_panel.js @@ -0,0 +1,40 @@ +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/www/app/components/error_panel.js b/www/app/components/error_panel.js new file mode 100644 index 0000000..fc88d45 --- /dev/null +++ b/www/app/components/error_panel.js @@ -0,0 +1,21 @@ +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/www/app/components/greeter_panel.js b/www/app/components/greeter_panel.js new file mode 100644 index 0000000..4552db1 --- /dev/null +++ b/www/app/components/greeter_panel.js @@ -0,0 +1,34 @@ +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/www/app/components/list_edit.js b/www/app/components/list_edit.js new file mode 100644 index 0000000..0d557d2 --- /dev/null +++ b/www/app/components/list_edit.js @@ -0,0 +1,122 @@ +// +// 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/www/app/components/login.js b/www/app/components/login.js new file mode 100644 index 0000000..4f7b628 --- /dev/null +++ b/www/app/components/login.js @@ -0,0 +1,302 @@ +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/www/app/components/main_panel/account_list.js b/www/app/components/main_panel/account_list.js new file mode 100644 index 0000000..d0ef092 --- /dev/null +++ b/www/app/components/main_panel/account_list.js @@ -0,0 +1,113 @@ +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/www/app/components/main_panel/email_section.js b/www/app/components/main_panel/email_section.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/www/app/components/main_panel/email_section.js diff --git a/www/app/components/main_panel/index.js b/www/app/components/main_panel/index.js new file mode 100644 index 0000000..910d58b --- /dev/null +++ b/www/app/components/main_panel/index.js @@ -0,0 +1,57 @@ +// +// 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/www/app/components/main_panel/main_panel.less b/www/app/components/main_panel/main_panel.less new file mode 100644 index 0000000..3172bba --- /dev/null +++ b/www/app/components/main_panel/main_panel.less @@ -0,0 +1,208 @@ +// 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/www/app/components/main_panel/section_layout.js b/www/app/components/main_panel/section_layout.js new file mode 100644 index 0000000..e7c6f2a --- /dev/null +++ b/www/app/components/main_panel/section_layout.js @@ -0,0 +1,59 @@ +// +// 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/www/app/components/main_panel/user_section.js b/www/app/components/main_panel/user_section.js new file mode 100644 index 0000000..0b4ba13 --- /dev/null +++ b/www/app/components/main_panel/user_section.js @@ -0,0 +1,71 @@ +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/www/app/components/main_panel/vpn_section.js b/www/app/components/main_panel/vpn_section.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/www/app/components/main_panel/vpn_section.js diff --git a/www/app/components/panel_switcher.js b/www/app/components/panel_switcher.js new file mode 100644 index 0000000..f4f32cf --- /dev/null +++ b/www/app/components/panel_switcher.js @@ -0,0 +1,56 @@ +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/www/app/components/spinner/index.js b/www/app/components/spinner/index.js new file mode 100644 index 0000000..ffc3285 --- /dev/null +++ b/www/app/components/spinner/index.js @@ -0,0 +1,15 @@ +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/www/app/components/spinner/spinner.css b/www/app/components/spinner/spinner.css new file mode 100644 index 0000000..4e7f3ee --- /dev/null +++ b/www/app/components/spinner/spinner.css @@ -0,0 +1,26 @@ +.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/www/app/components/splash.js b/www/app/components/splash.js new file mode 100644 index 0000000..46170d2 --- /dev/null +++ b/www/app/components/splash.js @@ -0,0 +1,132 @@ +/* + * 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/www/app/components/wizard/add_provider_modal.js b/www/app/components/wizard/add_provider_modal.js new file mode 100644 index 0000000..bc5e023 --- /dev/null +++ b/www/app/components/wizard/add_provider_modal.js @@ -0,0 +1,94 @@ +// +// 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/www/app/components/wizard/index.js b/www/app/components/wizard/index.js new file mode 100644 index 0000000..613b88f --- /dev/null +++ b/www/app/components/wizard/index.js @@ -0,0 +1,38 @@ +// +// 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/www/app/components/wizard/provider_select_stage.js b/www/app/components/wizard/provider_select_stage.js new file mode 100644 index 0000000..20674be --- /dev/null +++ b/www/app/components/wizard/provider_select_stage.js @@ -0,0 +1,86 @@ +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/www/app/components/wizard/stage_layout.js b/www/app/components/wizard/stage_layout.js new file mode 100644 index 0000000..3154022 --- /dev/null +++ b/www/app/components/wizard/stage_layout.js @@ -0,0 +1,37 @@ +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/www/app/components/wizard/wizard.less b/www/app/components/wizard/wizard.less new file mode 100644 index 0000000..3336ffb --- /dev/null +++ b/www/app/components/wizard/wizard.less @@ -0,0 +1,36 @@ +.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 diff --git a/www/app/css/bootstrap.less b/www/app/css/bootstrap.less new file mode 100644 index 0000000..3b77228 --- /dev/null +++ b/www/app/css/bootstrap.less @@ -0,0 +1,5 @@ +// +// require npm modules 'bootstrap' +// +@import "~bootstrap/less/bootstrap"; + diff --git a/www/app/css/common.css b/www/app/css/common.css new file mode 100644 index 0000000..4b48010 --- /dev/null +++ b/www/app/css/common.css @@ -0,0 +1,59 @@ +body { + padding: 0; + margin: 0; +} + +.debug-panel { + background-color: rgba(0,0,0,0.1); + position: absolute; + bottom: 0; + left: 50%; + z-index: 1000; + padding: 20px; +} +.debug-panel a { + cursor: pointer; + margin: 10px; +} + + +.area-light { + background-color: #f7f7f7; +} +.area-dark { + background-color: #e7e7e7; +} +.area-clear { + background-color: #fff; +} + +/* + * Greeter + */ +.greeter { + border-color: #555; + border-width: 8px; +} + +/* + * bootstrap + */ + +.help-block { + margin: 2px 0 0 0; + font-size: small; + opacity: 0.7; +} +.btn.btn-inverse { + color: white; + background-color: #333; +} +.btn.btn-flat { + border-color: transparent; + background-color: transparent; +} + +/*.btn.btn-default { + background-color: #eee !important; +} +*/
\ No newline at end of file diff --git a/www/app/img/arrow-down.svg b/www/app/img/arrow-down.svg new file mode 100644 index 0000000..14c4b5d --- /dev/null +++ b/www/app/img/arrow-down.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg4986" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="arrow-down.svg"> + <defs + id="defs4988" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="16" + inkscape:cy="16" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="869" + inkscape:window-height="648" + inkscape:window-x="1049" + inkscape:window-y="24" + inkscape:window-maximized="0" /> + <metadata + id="metadata4991"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <g + transform="matrix(0.38339748,0,0,0.40552158,-78.363595,-91.56011)" + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="text3021"> + <path + inkscape:connector-curvature="0" + d="m 277.42382,253.6675 c -7e-5,1.41967 -0.4956,2.62503 -1.48661,3.61607 l -26.15625,26.15625 c -1.0179,1.01786 -2.23664,1.52679 -3.65625,1.52679 -1.44646,0 -2.65182,-0.50893 -3.61607,-1.52679 l -26.15625,-26.15625 c -1.01786,-0.96426 -1.52679,-2.16961 -1.52679,-3.61607 0,-1.41961 0.50893,-2.63836 1.52679,-3.65625 l 2.97321,-3.01339 c 1.04464,-0.99104 2.26338,-1.48657 3.65625,-1.48661 1.41963,4e-5 2.62499,0.49557 3.61607,1.48661 l 19.52679,19.52678 19.52678,-19.52678 c 0.99102,-0.99104 2.19638,-1.48657 3.61608,-1.48661 1.39279,4e-5 2.61154,0.49557 3.65625,1.48661 l 3.01339,3.01339 c 0.99101,1.04468 1.48654,2.26343 1.48661,3.65625" + id="path3147" /> + </g> + </g> +</svg> diff --git a/www/app/img/arrow-up.svg b/www/app/img/arrow-up.svg new file mode 100644 index 0000000..30ea8fd --- /dev/null +++ b/www/app/img/arrow-up.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg4938" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="arrow-up.svg"> + <defs + id="defs4940" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="16" + inkscape:cy="16" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="852" + inkscape:window-height="637" + inkscape:window-x="926" + inkscape:window-y="356" + inkscape:window-maximized="0" /> + <metadata + id="metadata4943"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <g + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="text3017" + transform="matrix(0.38339753,0,0,0.40552158,-32.550528,-82.646856)"> + <path + d="m 156.40467,251.17438 c 1.01779,1.01787 1.52672,2.23662 1.52678,3.65625 -6e-5,1.41966 -0.4956,2.62501 -1.48661,3.61607 l -3.01339,3.0134 c -1.01791,1.01786 -2.23666,1.52679 -3.65625,1.52678 -1.44648,1e-5 -2.65184,-0.50892 -3.61607,-1.52678 l -19.52679,-19.48661 -19.52678,19.48661 c -0.9643,1.01786 -2.16966,1.52679 -3.61607,1.52678 -1.44644,1e-5 -2.6518,-0.50892 -3.616074,-1.52678 l -3.013393,-3.0134 c -1.017859,-0.96427 -1.526787,-2.16963 -1.526785,-3.61607 -2e-6,-1.41963 0.508926,-2.63838 1.526785,-3.65625 l 26.156247,-26.15625 c 0.99104,-0.99103 2.1964,-1.48656 3.61607,-1.48661 1.39283,5e-5 2.61158,0.49558 3.65625,1.48661 l 26.11608,26.15625" + id="path3144" + inkscape:connector-curvature="0" /> + </g> + </g> +</svg> diff --git a/www/app/img/cloud.svg b/www/app/img/cloud.svg new file mode 100644 index 0000000..bf7a94a --- /dev/null +++ b/www/app/img/cloud.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg4890" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="New document 26"> + <defs + id="defs4892" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="16" + inkscape:cy="16" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="825" + inkscape:window-height="672" + inkscape:window-x="1093" + inkscape:window-y="24" + inkscape:window-maximized="0" /> + <metadata + id="metadata4895"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <g + transform="matrix(0.36296297,0,0,0.35353541,-29.370372,-250.08767)" + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="text3105"> + <path + inkscape:connector-curvature="0" + d="m 163.57143,765.50502 c -8e-5,4.25894 -1.51347,7.9018 -4.54018,10.92857 -3.00007,3.00001 -6.62953,4.5 -10.88839,4.5 l -43.71429,0 c -4.955367,0 -9.200898,-1.75446 -12.736604,-5.26339 -3.50893,-3.5357 -5.263392,-7.78124 -5.263392,-12.73661 0,-3.53569 0.950892,-6.76336 2.852678,-9.68303 1.901781,-2.9464 4.406243,-5.14283 7.513393,-6.58929 -0.05358,-0.74996 -0.08037,-1.32585 -0.08036,-1.72768 -1e-5,-5.67853 2.008916,-10.52674 6.026785,-14.54464 4.01784,-4.0178 8.86605,-6.02673 14.54465,-6.02678 4.2321,5e-5 8.06246,1.17862 11.49107,3.53571 3.45531,2.35719 5.97316,5.43755 7.55357,9.24107 1.87495,-1.66067 4.09816,-2.49102 6.66964,-2.49107 2.83923,5e-5 5.26333,1.00451 7.27232,3.01339 2.00887,2.00897 3.01333,4.43308 3.0134,7.27232 -7e-5,2.00897 -0.54918,3.85718 -1.64732,5.54465 3.45528,0.8036 6.30796,2.61163 8.55803,5.4241 2.24992,2.78574 3.37492,5.98663 3.375,9.60268" + id="path3210" /> + </g> + </g> +</svg> diff --git a/www/app/img/disabled.svg b/www/app/img/disabled.svg new file mode 100644 index 0000000..90804d8 --- /dev/null +++ b/www/app/img/disabled.svg @@ -0,0 +1,72 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3243" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="disabled.svg"> + <defs + id="defs3245" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1" + inkscape:cx="17.941968" + inkscape:cy="7.7251942" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:snap-global="false" + inkscape:window-width="1879" + inkscape:window-height="1056" + inkscape:window-x="1961" + inkscape:window-y="24" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3273" /> + </sodipodi:namedview> + <metadata + id="metadata3248"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#808080;stroke:#000000;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill-opacity:1" + d="m 26.607098,9.8590516 c 1.095246,1.8715424 1.642877,3.9185224 1.642902,6.1409504 -2.5e-5,2.222447 -0.547656,4.274744 -1.642902,6.156901 -1.095289,1.871529 -2.584005,3.354927 -4.466145,4.450195 C 20.269406,27.702363 18.222425,28.249996 16,28.25 13.77755,28.249996 11.725251,27.702363 9.843099,26.607098 7.9715637,25.51183 6.4881673,24.028432 5.3929019,22.156903 4.2976327,20.274746 3.75,18.222449 3.75,16.000002 3.75,13.777574 4.2976327,11.730594 5.3929019,9.8590516 6.4881673,7.9769072 7.9715637,6.4881927 9.843099,5.3929062 11.725251,4.2976564 13.77755,3.7500236 16,3.75 c 2.222425,2.36e-5 4.269406,0.5476564 6.140953,1.6429062 1.88214,1.0952865 3.370856,2.584001 4.466145,4.4661454" + id="path3275" + inkscape:connector-curvature="0" /> + <path + style="fill:#000000;fill-opacity:1;stroke:none" + d="m 8.0269717,14.182874 15.9772693,0.09375 1e-6,3.585262 -15.9772703,-0.09375 z" + id="rect4059" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + </g> +</svg> diff --git a/www/app/img/envelope.svg b/www/app/img/envelope.svg new file mode 100644 index 0000000..5775e09 --- /dev/null +++ b/www/app/img/envelope.svg @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3145" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="envelope.svg"> + <defs + id="defs3147" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="22.627417" + inkscape:cx="14.496338" + inkscape:cy="14.835533" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="1879" + inkscape:window-height="1056" + inkscape:window-x="1961" + inkscape:window-y="24" + inkscape:window-maximized="1" + showguides="true" + inkscape:guide-bbox="true" /> + <metadata + id="metadata3150"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + inkscape:connector-curvature="0" + id="path4141" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 29.999988,11.952225 c -0.46857,0.485929 -0.999616,0.912958 -1.561898,1.281087 -2.608371,1.663939 -5.23236,3.342604 -7.778252,5.08017 -1.311994,0.912958 -2.93637,2.032068 -4.638839,2.032068 l -0.01561,0 -0.01561,0 c -1.702468,0 -3.326844,-1.11911 -4.638839,-2.032068 -2.5458975,-1.752291 -5.1698865,-3.416231 -7.7626395,-5.08017 -0.577899,-0.368129 -1.108945,-0.795158 -1.577515,-1.281087 l 0,12.644634 C 2.0107855,25.89267 2.4356205,26 3.8100905,26 l 24.4683525,0 c 1.37447,0 1.721558,-0.253927 1.721558,-1.549738 l 0,-12.498037 z m 0,-4.562107 C 29.999988,6.313336 29.739813,6 28.284765,6 L 3.4515205,6 c -1.67123,0 -1.440748,0.925932 -1.440748,2.368995 0,2.622709 1.095024,3.007381 2.686464,4.021712 2.420943,1.590314 4.873125,3.180628 7.2940645,4.785667 1.015235,0.662631 2.90163,2.017343 3.998462,2.017343 l 0.01561,0 0.01561,0 c 1.265137,0 2.983227,-1.354712 3.99846,-2.017343 2.42094,-1.605039 4.873122,-3.195353 7.309683,-4.785667 2.638916,-1.960744 2.670846,-1.966834 2.670846,-5.045368 z" + sodipodi:nodetypes="cccscscccsssscccsssccscscccc" /> + </g> +</svg> diff --git a/www/app/img/gear.svg b/www/app/img/gear.svg new file mode 100644 index 0000000..be5a5b3 --- /dev/null +++ b/www/app/img/gear.svg @@ -0,0 +1,61 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg4177" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="gear.svg"> + <defs + id="defs4179" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="11.400883" + inkscape:cy="17.428852" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="962" + inkscape:window-height="797" + inkscape:window-x="874" + inkscape:window-y="135" + inkscape:window-maximized="0" /> + <metadata + id="metadata4182"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="path3123" + d="m 19.299476,19.29948 c 0.911441,-0.91145 1.367172,-2.011273 1.36719,-3.299478 -1.8e-5,-1.288183 -0.455749,-2.388006 -1.36719,-3.299479 -0.911473,-0.911445 -2.0113,-1.367172 -3.299478,-1.36719 -1.288206,1.8e-5 -2.388033,0.455745 -3.299479,1.36719 -0.911468,0.911473 -1.367195,2.011296 -1.367186,3.299479 -9e-6,1.288205 0.455718,2.388028 1.367186,3.299478 0.911446,0.911463 2.011273,1.367195 3.299479,1.367186 1.288178,9e-6 2.388005,-0.455723 3.299478,-1.367186 M 30,14.01302 l 0,4.046878 c -3.2e-5,0.145843 -0.04864,0.285597 -0.145834,0.419268 -0.09725,0.133692 -0.218781,0.212682 -0.364583,0.236978 l -3.372397,0.510417 c -0.230927,0.656259 -0.467905,1.209211 -0.710936,1.658854 0.42532,0.607645 1.075496,1.446189 1.950518,2.515628 0.121501,0.145838 0.182266,0.297747 0.182293,0.455727 -2.7e-5,0.157989 -0.05471,0.297747 -0.164064,0.419272 -0.32815,0.449657 -0.929711,1.105903 -1.804688,1.968747 -0.875022,0.862849 -1.446203,1.294272 -1.713539,1.294272 -0.145856,0 -0.30384,-0.05468 -0.473961,-0.16406 L 20.867185,25.40625 c -0.534739,0.279517 -1.087691,0.510416 -1.658854,0.69271 -0.194462,1.652774 -0.370676,2.782982 -0.528646,3.390623 -0.08508,0.340277 -0.303836,0.510416 -0.656251,0.510416 l -4.046873,0 c -0.170148,0 -0.322062,-0.05469 -0.455727,-0.164064 -0.121543,-0.09722 -0.188383,-0.224828 -0.200524,-0.382812 L 12.809894,26.09896 c -0.595496,-0.194444 -1.142372,-0.419272 -1.640625,-0.674481 l -2.5703126,1.950522 c -0.1215336,0.109375 -0.2734427,0.16406 -0.4557272,0.16406 -0.1701434,0 -0.322057,-0.06684 -0.4557317,-0.200519 C 6.1562431,25.953126 5.1536442,24.932293 4.6796872,24.276042 4.5946132,24.154517 4.5520785,24.014759 4.552083,23.85677 4.5520785,23.71094 4.6006928,23.571186 4.697917,23.437498 4.880206,23.182294 5.1900993,22.781256 5.6276057,22.234376 6.0650985,21.675354 6.3932261,21.243931 6.6119793,20.940104 6.2838472,20.332472 6.0347185,19.730911 5.8645842,19.135416 L 2.5286463,18.643229 C 2.3706576,18.618911 2.2430535,18.546014 2.1458338,18.424481 2.0486097,18.29081 1.9999999,18.144976 1.9999999,17.986979 l 0,-4.046874 c 0,-0.14582 0.04861,-0.285574 0.1458339,-0.419272 0.09722,-0.133665 0.2126736,-0.21266 0.3463529,-0.236978 L 5.882814,12.773438 C 6.0529484,12.214425 6.2899269,11.655399 6.5937495,11.096354 6.1076333,10.403662 5.4574623,9.5651225 4.6432275,8.5807307 4.5216985,8.4349149 4.4609339,8.2890809 4.4609385,8.1432288 4.4609339,8.0217224 4.5156234,7.8819635 4.6249977,7.7239612 4.9409706,7.286482 5.5364521,6.6363065 6.4114559,5.7734392 7.2986054,4.8984626 7.8758617,4.4609607 8.1432292,4.460938 c 0.1579796,2.27e-5 0.3159638,0.060787 0.473957,0.1822936 L 11.13281,6.5937491 c 0.534712,-0.2794906 1.087664,-0.510394 1.658854,-0.6927057 0.194434,-1.6527563 0.370648,-2.7829639 0.528646,-3.3906274 0.08506,-0.3402505 0.303809,-0.5103894 0.656251,-0.5104166 l 4.046873,0 c 0.170125,2.72e-5 0.315959,0.054717 0.437502,0.1640638 0.133666,0.097247 0.20658,0.224851 0.218749,0.3828125 l 0.510416,3.3541677 c 0.595468,0.1944665 1.142345,0.4192902 1.640625,0.6744804 l 2.588542,-1.950522 c 0.109357,-0.1093516 0.255186,-0.1640411 0.437502,-0.1640638 0.157962,2.27e-5 0.309871,0.060787 0.455728,0.1822936 1.567686,1.4462032 2.57029,2.4791866 3.007814,3.0989549 0.08504,0.097242 0.127577,0.2309261 0.127605,0.4010423 -2.8e-5,0.1458521 -0.04864,0.285611 -0.145834,0.4192721 -0.182317,0.2552264 -0.492214,0.6623438 -0.929689,1.2213521 -0.437525,0.546894 -0.765648,0.972242 -0.984374,1.276042 0.315946,0.607659 0.565079,1.20314 0.747395,1.786458 l 3.335938,0.510416 c 0.157957,0.02432 0.285561,0.103313 0.382813,0.236983 0.09719,0.121539 0.145802,0.261297 0.145834,0.419268" + inkscape:connector-curvature="0" /> + </g> +</svg> diff --git a/www/app/img/mask.svg b/www/app/img/mask.svg new file mode 100644 index 0000000..f254c5e --- /dev/null +++ b/www/app/img/mask.svg @@ -0,0 +1,133 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="330" + height="174" + id="svg3088" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="mask.svg" + inkscape:export-filename="/home/elijah/dev/leap/leap_assets/svg/masks/favicon.png" + inkscape:export-xdpi="5.625" + inkscape:export-ydpi="5.625"> + <defs + id="defs3090" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1" + inkscape:cx="-53.46511" + inkscape:cy="109.89316" + inkscape:current-layer="outline" + showgrid="false" + inkscape:document-units="px" + inkscape:grid-bbox="true" + showguides="true" + inkscape:guide-bbox="true" + inkscape:snap-global="false" + objecttolerance="20" + inkscape:snap-bbox="true" + inkscape:bbox-paths="true" + inkscape:bbox-nodes="true" + inkscape:snap-bbox-edge-midpoints="true" + inkscape:snap-bbox-midpoints="true" + inkscape:object-paths="true" + inkscape:snap-intersection-paths="true" + inkscape:object-nodes="true" + inkscape:snap-smooth-nodes="true" + inkscape:snap-midpoints="true" + inkscape:snap-object-midpoints="true" + inkscape:snap-center="true" + borderlayer="true" + inkscape:window-width="1205" + inkscape:window-height="835" + inkscape:window-x="547" + inkscape:window-y="65" + inkscape:window-maximized="0" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0"> + <inkscape:grid + type="xygrid" + id="grid3096" + empspacing="5" + visible="true" + enabled="true" + snapvisiblegridlinesonly="true" + originx="93.682631" + originy="42.998542" /> + <sodipodi:guide + orientation="1,0" + position="1593.6826,42.998542" + id="guide3104" /> + </sodipodi:namedview> + <metadata + id="metadata3093"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="rainbow" + inkscape:groupmode="layer" + transform="translate(93.682631,67.00146)" + style="display:inline" /> + <g + inkscape:groupmode="layer" + id="layer3" + inkscape:label="mask" + style="display:inline" + transform="translate(93.682631,-124.99854)"> + <g + style="display:inline" + id="mask_group" + transform="matrix(3.9239993,0,0,3.9239993,3.1838955,50.448418)"> + <g + style="display:inline;fill:none;stroke:none" + id="eyes" + transform="matrix(0.09628644,0,0,0.09628644,-13.900612,-8.2957126)"> + <path + inkscape:connector-curvature="0" + id="path3911" + d="m 290.22501,383.61826 c 20.26573,-0.36718 40.73803,7.19583 59.875,14.1875 16.78643,6.13291 31.49775,16.91475 46.90625,25.96875 10.4842,6.16049 30.96875,19.28125 30.96875,19.28125 0,0 -38.82581,37.01847 -66.03125,43.375 -32.32466,7.55263 -60.041,1.91037 -89.21875,-21.40625 -16.83219,-13.45099 -39.0625,-56.3125 -39.0625,-56.3125 0,0 30.15123,-21.96471 47.90625,-24.4375 2.88277,-0.40149 5.76115,-0.6038 8.65625,-0.65625 z" + style="fill:none;stroke:none" /> + <path + inkscape:connector-curvature="0" + id="path3905" + d="m 662.31876,383.61826 c 3.62101,-0.0338 7.24028,0.15439 10.84375,0.65625 17.75502,2.47279 47.90625,24.4375 47.90625,24.4375 0,0 -22.23031,42.86151 -39.0625,56.3125 -29.17775,23.31662 -56.92534,28.95888 -89.25,21.40625 -27.20544,-6.35653 -66,-43.375 -66,-43.375 0,0 20.48455,-13.12076 30.96875,-19.28125 15.4085,-9.054 30.11982,-19.83584 46.90625,-25.96875 18.4535,-6.74197 38.13407,-14.00499 57.6875,-14.1875 z" + style="fill:none;stroke:none" /> + </g> + <g + transform="matrix(0.09628644,0,0,0.09628644,-13.900612,-8.2957126)" + id="outline" + style="display:inline;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:34.52383041;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"> + <path + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:34.52383041;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" + d="m 15.279428,283.46896 c -25.395028,0.29417 -55.766384,5.34416 -78.180213,28.13341 -41.610535,42.30754 -51.078425,104.6937 -48.792595,157.09543 3.09273,70.89956 32.510261,141.31677 77.548216,194.99548 31.2063109,37.1934 76.153265,78.38052 133.88163,80.25276 47.504344,1.54066 79.677684,-32.88465 104.209624,-52.03872 20.47502,-15.98652 48.9415,-34.77084 73.785,-45.16092 23.14757,-9.6808 48.52598,-9.92084 46.79322,-9.92791 l 0.0516,0 0.18099,0 0.0374,0 c -0.66133,10e-4 23.72172,0.24775 46.86792,9.92791 24.83448,10.3863 53.25033,29.1637 73.73901,45.16092 24.54335,19.16296 56.75051,53.57941 104.25562,52.03872 57.72835,-1.87224 102.6753,-43.05936 133.88161,-80.25276 45.03797,-53.67871 74.4555,-124.09592 77.54823,-194.99548 2.28583,-52.40173 -7.18206,-114.78789 -48.7926,-157.09543 -23.93638,-24.33729 -56.72446,-28.56338 -83.25052,-28.08445 -48.19226,0.87016 -84.29897,26.42928 -118.66787,41.05093 -54.0567,22.99749 -87.02303,49.00558 -132.76414,63.00349 -21.77603,6.66401 -34.39981,5.08622 -52.7914,5.43773 0.056,0.003 -0.3257,-9.9e-4 -0.20684,0 l 0.0517,0.003 C 306.19197,392.6499 293.62549,394.2572 271.7817,387.57244 226.04064,373.57447 193.0743,347.56638 139.0176,324.56889 109.7526,312.1186 85.70157,293.58692 47.530399,287.26753 Z m 34.627384,178.97027 c 23.183949,-0.42116 50.684478,9.04508 78.892638,19.37771 20.17182,7.38892 40.67441,22.09527 64.84232,36.33321 4.96838,2.92699 8.62977,5.38188 15.53835,9.70038 -2.26657,1.82188 -3.6667,3.15806 -6.13031,5.0518 -18.1082,13.91961 -41.91482,28.10355 -53.89449,30.90989 C 107.47079,573.5771 77.906523,567.87377 39.556515,537.14768 33.193809,532.04987 18.009057,512.07472 7.2933506,494.69124 4.3472031,489.91186 2.3990912,486.35502 -0.00326604,482.19423 1.7100438,481.12731 2.8139795,480.32504 4.6648396,479.22192 17.902804,471.33198 35.387531,463.8423 40.217235,463.16791 c 3.107262,-0.43388 6.308905,-0.66727 9.689577,-0.72868 z m 547.057498,0.003 c 4.28838,-0.0401 8.3533,0.18703 12.2118,0.72581 4.82969,0.67438 22.31443,8.16408 35.5524,16.05399 1.85085,1.10314 2.95478,1.9054 4.6681,2.97234 -2.40237,4.16077 -4.35047,7.71762 -7.29663,12.49702 -10.71569,17.38346 -25.90044,37.3586 -32.26315,42.45641 -38.34309,30.72057 -67.96379,36.42857 -109.64478,26.66454 -11.97755,-2.80584 -35.76998,-16.98865 -53.86576,-30.907 -2.46056,-1.89253 -3.85789,-3.22816 -6.1217,-5.04893 6.91251,-4.32099 10.57578,-6.77746 15.54699,-9.70614 24.16791,-14.23793 44.67048,-28.94429 64.84232,-36.33321 27.19699,-9.96224 53.7382,-19.16304 76.37041,-19.37483 z" + id="path3871" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cssssssccccssssssssscccssccssscsssscsssssscsssscsss" /> + </g> + </g> + </g> +</svg> diff --git a/www/app/img/off.svg b/www/app/img/off.svg new file mode 100644 index 0000000..35c49a5 --- /dev/null +++ b/www/app/img/off.svg @@ -0,0 +1,88 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3243" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="off.svg"> + <defs + id="defs3245" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="16" + inkscape:cx="2.564547" + inkscape:cy="9.5625231" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:snap-global="false" + inkscape:window-width="1920" + inkscape:window-height="1056" + inkscape:window-x="1920" + inkscape:window-y="24" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3273" /> + </sodipodi:namedview> + <metadata + id="metadata3248"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f08080;stroke:#000000;stroke-width:1.50000000000000000;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill-opacity:1" + d="m 26.607099,9.8590516 c 1.095245,1.8715414 1.642877,3.9185224 1.642901,6.1409504 -2.4e-5,2.222445 -0.547656,4.274746 -1.642901,6.156901 -1.095291,1.87153 -2.584007,3.354927 -4.466146,4.450195 C 20.269405,27.702363 18.222426,28.249996 16,28.25 13.77755,28.249996 11.725251,27.702363 9.8430986,26.607098 7.9715637,25.51183 6.4881674,24.028433 5.3929018,22.156903 4.2976327,20.274748 3.75,18.222447 3.75,16.000002 3.75,13.777574 4.2976327,11.730593 5.3929018,9.8590516 6.4881674,7.9769071 7.9715637,6.4881926 9.8430986,5.392906 11.725251,4.2976563 13.77755,3.7500236 16,3.75 c 2.222426,2.36e-5 4.269405,0.5476563 6.140953,1.642906 1.882139,1.0952866 3.370855,2.5840011 4.466146,4.4661456" + id="path3275" + inkscape:connector-curvature="0" /> + <g + id="g3758" + transform="matrix(0.865313,0,0,0.865313,2.163376,2.175981)"> + <rect + transform="matrix(-0.70710678,-0.70710678,-0.70710678,0.70710678,0,0)" + style="fill:#000000;fill-opacity:1;stroke:none" + id="rect4057" + width="18" + height="3" + x="-31.781626" + y="-1.4338233" + ry="0" /> + <rect + transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)" + ry="0" + y="21.281626" + x="-9.0661755" + height="3" + width="18" + id="rect4059" + style="fill:#000000;fill-opacity:1;stroke:none" /> + </g> + </g> +</svg> diff --git a/www/app/img/on.svg b/www/app/img/on.svg new file mode 100644 index 0000000..36938e0 --- /dev/null +++ b/www/app/img/on.svg @@ -0,0 +1,78 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3243" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="on.svg"> + <defs + id="defs3245" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="1" + inkscape:cx="76.360017" + inkscape:cy="-4.203893" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:snap-global="false" + inkscape:window-width="1920" + inkscape:window-height="1056" + inkscape:window-x="1920" + inkscape:window-y="24" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3273" /> + </sodipodi:namedview> + <metadata + id="metadata3248"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#9acd32;stroke:#000000;stroke-width:1.50000000000000000;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill-opacity:1" + d="m 26.607098,9.8590516 c 1.095246,1.8715424 1.642877,3.9185224 1.642902,6.1409504 -2.5e-5,2.222447 -0.547656,4.274744 -1.642902,6.156901 -1.095289,1.871529 -2.584005,3.354927 -4.466145,4.450195 C 20.269406,27.702363 18.222425,28.249996 16,28.25 13.77755,28.249996 11.725251,27.702363 9.843099,26.607098 7.9715637,25.51183 6.4881673,24.028432 5.3929019,22.156903 4.2976327,20.274746 3.75,18.222449 3.75,16.000002 3.75,13.777574 4.2976327,11.730594 5.3929019,9.8590516 6.4881673,7.9769072 7.9715637,6.4881927 9.843099,5.3929062 11.725251,4.2976564 13.77755,3.7500236 16,3.75 c 2.222425,2.36e-5 4.269406,0.5476564 6.140953,1.6429062 1.88214,1.0952865 3.370856,2.584001 4.466145,4.4661454" + id="path3275" + inkscape:connector-curvature="0" /> + <path + style="fill:#000000;fill-opacity:1;stroke:none" + d="M 16.816995,19.463899 11.276562,13.923466 8.7414,16.458629 14.281832,21.999061 z" + id="rect4057" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + <path + style="fill:#000000;fill-opacity:1;stroke:none" + d="m 11.792505,19.521247 9.473539,-9.340956 2.535164,2.535163 -9.473539,9.340957 z" + id="rect4059" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + </g> +</svg> diff --git a/www/app/img/planet.svg b/www/app/img/planet.svg new file mode 100644 index 0000000..5697d5d --- /dev/null +++ b/www/app/img/planet.svg @@ -0,0 +1,60 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3069" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="planet.svg"> + <defs + id="defs3071" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="-15.657999" + inkscape:cy="16" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="1879" + inkscape:window-height="1056" + inkscape:window-x="1961" + inkscape:window-y="24" + inkscape:window-maximized="1" /> + <metadata + id="metadata3074"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + inkscape:connector-curvature="0" + d="M 25.899531,6.1005234 C 28.543727,8.7447734 30,12.260523 30,16.000055 30,19.739586 28.543727,23.255281 25.899531,25.899531 23.255227,28.543727 19.739531,30 16,30 12.260469,30 8.7447734,28.543727 6.1004687,25.899531 3.4562734,23.255281 2,19.739586 2,16.000055 2,12.260523 3.4561641,8.7447734 6.1004687,6.1005234 8.7447734,3.4562734 12.260469,2 16,2 c 3.739531,0 7.255227,1.4562734 9.899531,4.1005234 z M 24.662062,24.662117 c 1.724243,-1.724297 2.870711,-3.872094 3.343375,-6.208726 -0.368429,0.54239 -0.720835,0.743586 -0.939093,-0.470477 -0.224766,-1.979414 -2.042797,-0.714984 -3.185985,-1.418047 -1.203234,0.810961 -3.907586,-1.576695 -3.447992,1.116281 0.709133,1.214664 3.828344,-1.625586 2.273578,0.944508 -0.991867,1.794188 -3.626929,5.767672 -3.284148,7.827367 0.04326,3.000813 -3.066164,0.625735 -4.137492,-0.369687 -0.720672,-1.993906 -0.245602,-5.478977 -2.130024,-6.455477 -2.045367,-0.08881 -3.8008904,-0.274695 -4.5935857,-2.561289 -0.477039,-1.635922 0.5076094,-4.07132 2.2607267,-4.447297 2.566211,-1.612351 3.482883,1.888196 5.88957,1.953274 0.74725,-0.781867 2.784031,-1.030477 2.952906,-1.907227 -1.579101,-0.278633 2.003422,-1.327758 -0.151156,-1.924508 -1.188633,0.139782 -1.954476,1.232493 -1.322562,2.159008 -2.303383,0.537086 -2.377157,-3.3333122 -4.591289,-2.112523 -0.05627,1.930195 -3.6154457,0.625789 -1.231454,0.23439 0.81911,-0.357875 -1.336015,-1.3949683 -0.171718,-1.2065151 0.571922,-0.031062 2.497359,-0.7057969 1.976297,-1.1594297 1.072148,-0.6655469 1.973125,1.5938668 3.022523,-0.051461 C 17.95218,7.3391953 16.876805,7.105625 15.927156,7.7468906 15.391766,7.1474062 16.87243,5.852625 18.178422,5.2931172 18.61368,5.1066328 19.029414,5.0050234 19.347258,5.0337891 20.005094,5.7937266 21.221672,5.9253594 21.285328,4.9424062 19.656133,4.1621797 17.859812,3.75 16,3.75 13.330648,3.75 10.791836,4.5983125 8.6907969,6.1669141 9.2554453,6.4255859 9.5759688,6.7476406 9.0319922,7.1593828 8.6093672,8.4186719 6.8945312,10.109117 5.3891484,9.8698047 4.6075,11.217742 4.0927266,12.702781 3.8726641,14.259242 c 1.260875,0.417156 1.5515937,1.242774 1.2806718,1.518946 -0.6424687,0.560218 -1.0373125,1.354335 -1.24075,2.223648 0.4104297,2.511141 1.5906407,4.825516 3.4253516,6.660281 C 9.6516563,26.975781 12.727883,28.25 16,28.25 c 3.272062,0 6.348344,-1.274219 8.662062,-3.587883 z" + id="path67" /> + </g> +</svg> diff --git a/www/app/img/unknown.svg b/www/app/img/unknown.svg new file mode 100644 index 0000000..6003863 --- /dev/null +++ b/www/app/img/unknown.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3243" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="question.svg"> + <defs + id="defs3245" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="7.9999996" + inkscape:cx="12.965251" + inkscape:cy="9.8979426" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:snap-global="false" + inkscape:window-width="1328" + inkscape:window-height="840" + inkscape:window-x="1987" + inkscape:window-y="24" + inkscape:window-maximized="0"> + <inkscape:grid + type="xygrid" + id="grid3273" /> + </sodipodi:namedview> + <metadata + id="metadata3248"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f0e68c;stroke:#000000;stroke-width:1.50000000000000000;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill-opacity:1" + d="m 26.607099,9.8590516 c 1.095245,1.8715424 1.642877,3.9185224 1.642901,6.1409504 -2.4e-5,2.222446 -0.547656,4.274745 -1.642901,6.1569 -1.09529,1.871531 -2.584007,3.354928 -4.466146,4.450196 C 20.269406,27.702362 18.222426,28.249996 16,28.25 13.77755,28.249996 11.725251,27.702362 9.8430986,26.607098 7.9715638,25.51183 6.4881674,24.028433 5.392902,22.156902 4.2976328,20.274747 3.75,18.222448 3.75,16.000002 3.75,13.777574 4.2976328,11.730594 5.392902,9.8590516 6.4881674,7.9769072 7.9715638,6.4881927 9.8430986,5.3929062 11.725251,4.2976564 13.77755,3.7500236 16,3.75 c 2.222426,2.36e-5 4.269406,0.5476564 6.140953,1.6429062 1.882139,1.0952865 3.370856,2.584001 4.466146,4.4661454" + id="path3275" + inkscape:connector-curvature="0" /> + <g + transform="matrix(0.93378097,0,0,0.80060225,2.1910082,2.2390946)" + style="font-size:24.20675278px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FreeSans;-inkscape-font-specification:FreeSans" + id="text2987"> + <path + style="font-weight:bold;font-family:Droid Sans;-inkscape-font-specification:Droid Sans Bold" + d="m 13.191315,20.187003 0,-0.859172 c -3e-6,-0.394747 0.03717,-0.750801 0.111525,-1.068159 0.08178,-0.325085 0.200741,-0.630826 0.35688,-0.917225 0.163567,-0.294121 0.371746,-0.576642 0.62454,-0.847561 0.252786,-0.27864 0.55762,-0.565031 0.914506,-0.859172 0.312264,-0.255419 0.576207,-0.483757 0.791827,-0.685016 0.21561,-0.201235 0.390332,-0.398613 0.524168,-0.592131 0.133823,-0.201235 0.230479,-0.410223 0.289965,-0.626963 0.05947,-0.216716 0.08921,-0.468275 0.08922,-0.754678 -7e-6,-0.441183 -0.144989,-0.804977 -0.434948,-1.09138 -0.282536,-0.286378 -0.717484,-0.429572 -1.304843,-0.429586 -0.513019,1.4e-5 -1.066927,0.112248 -1.661723,0.336702 -0.587368,0.224482 -1.197037,0.499262 -1.82901,0.82434 -1.453521,0.818948 -2.5794663,-1.530369 -1.137556,-2.565904 0.319705,-0.1934915 0.665432,-0.3753865 1.037183,-0.5456882 0.379184,-0.1780102 0.769521,-0.3328158 1.171013,-0.4644172 0.408922,-0.1393083 0.821564,-0.2476722 1.237927,-0.325092 0.416357,-0.077386 0.825282,-0.1160872 1.226776,-0.1161044 0.758365,1.72e-5 1.442385,0.096771 2.052061,0.2902608 0.609663,0.1857836 1.126395,0.4605635 1.550198,0.8243395 0.423786,0.3638075 0.747208,0.8050035 0.970268,1.3235875 0.230475,0.518614 0.345718,1.110745 0.345727,1.776396 -9e-6,0.48765 -0.05205,0.924976 -0.156135,1.311978 -0.104099,0.379285 -0.260234,0.735339 -0.468404,1.06816 -0.200755,0.325102 -0.457263,0.642454 -0.769524,0.952055 -0.304843,0.301881 -0.661723,0.623102 -1.070639,0.963666 -0.312278,0.255437 -0.568786,0.479906 -0.769524,0.673405 -0.193316,0.185774 -0.345734,0.363801 -0.457252,0.534079 -0.111531,0.170295 -0.189599,0.348321 -0.234203,0.534081 -0.03718,0.178033 -0.05576,0.390891 -0.05576,0.638574 l 0,0.696625 c -0.345863,2.197824 -2.53083,2.209243 -2.944261,0" + id="path2996" + inkscape:connector-curvature="0" + sodipodi:nodetypes="csccccccccccccccccccccccccccscscc" /> + <path + style="font-weight:bold;font-family:Droid Sans;-inkscape-font-specification:Droid Sans Bold" + d="m 13.14689,25.354041 c -3e-6,-0.326839 0.03795,-0.601524 0.113851,-0.824056 0.08174,-0.229482 0.192668,-0.413764 0.332795,-0.552849 0.140122,-0.139078 0.303601,-0.239911 0.490435,-0.302501 0.192667,-0.06259 0.397016,-0.09388 0.613044,-0.09388 0.204344,3e-6 0.397016,0.03129 0.578014,0.09388 0.186828,0.06259 0.350305,0.163423 0.490434,0.302501 0.14012,0.139085 0.251052,0.323367 0.332796,0.552849 0.08174,0.222532 0.122603,0.497217 0.122609,0.824056 -6e-6,0.312934 -0.04088,0.580665 -0.122609,0.803194 -0.08175,0.222531 -0.192676,0.406813 -0.332796,0.552848 -0.140129,0.146036 -0.303606,0.250347 -0.490434,0.312933 -0.180998,0.06954 -0.37367,0.104311 -0.578014,0.104311 -0.216028,0 -0.420377,-0.03477 -0.613044,-0.104311 -0.186834,-0.06259 -0.350313,-0.166897 -0.490435,-0.312933 -0.140127,-0.146035 -0.251058,-0.330317 -0.332795,-0.552848 -0.07591,-0.222529 -0.113854,-0.49026 -0.113851,-0.803194" + id="path2992" + inkscape:connector-curvature="0" /> + </g> + </g> +</svg> diff --git a/www/app/img/user.svg b/www/app/img/user.svg new file mode 100644 index 0000000..ad86a75 --- /dev/null +++ b/www/app/img/user.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg4842" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="New document 23"> + <defs + id="defs4844" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="11.197802" + inkscape:cx="16" + inkscape:cy="16" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:window-width="814" + inkscape:window-height="735" + inkscape:window-x="1104" + inkscape:window-y="24" + inkscape:window-maximized="0" /> + <metadata + id="metadata4847"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <g + transform="matrix(0.42424241,0,0,0.45370367,-116.34456,-343.34663)" + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="text3085"> + <path + inkscape:connector-curvature="0" + d="m 340.24077,812.48026 c -6e-5,3.21429 -0.97773,5.74553 -2.93304,7.59375 -1.9554,1.875 -4.55362,2.81249 -7.79464,2.8125 l -35.11607,0 c -3.24108,-1e-5 -5.83929,-0.9375 -7.79464,-2.8125 -1.95536,-1.84822 -2.93304,-4.37946 -2.93304,-7.59375 0,-1.41964 0.0402,-2.7991 0.12054,-4.13839 0.10714,-1.36606 0.29464,-2.82588 0.5625,-4.37947 0.29464,-1.58034 0.65625,-3.04016 1.08482,-4.37946 0.42857,-1.33927 1.00446,-2.63837 1.72768,-3.89732 0.72321,-1.28569 1.55356,-2.37051 2.49107,-3.25447 0.93749,-0.91069 2.07588,-1.6339 3.41518,-2.16964 1.36606,-0.53569 2.86606,-0.80354 4.5,-0.80357 0.24106,3e-5 0.80355,0.29467 1.6875,0.88393 0.88391,0.56252 1.87498,1.20538 2.97321,1.92857 1.12498,0.69645 2.57141,1.33931 4.33929,1.92857 1.79462,0.56252 3.58926,0.84377 5.38393,0.84375 1.79461,2e-5 3.57586,-0.28123 5.34375,-0.84375 1.7946,-0.58926 3.24103,-1.23212 4.33928,-1.92857 1.12496,-0.72319 2.12943,-1.36605 3.01339,-1.92857 0.88389,-0.58926 1.44639,-0.8839 1.6875,-0.88393 1.63389,3e-5 3.12049,0.26788 4.45983,0.80357 1.36602,0.53574 2.5178,1.25895 3.45535,2.16964 0.93745,0.88396 1.76781,1.96878 2.49107,3.25447 0.72317,1.25895 1.29906,2.55805 1.72768,3.89732 0.42852,1.3393 0.77673,2.79912 1.04465,4.37946 0.29458,1.55359 0.48208,3.01341 0.5625,4.37947 0.10708,1.33929 0.16065,2.71875 0.16071,4.13839 M 322.84345,765.7124 c 3.02674,3.00005 4.54013,6.62951 4.54018,10.8884 -5e-5,4.25896 -1.51344,7.90181 -4.54018,10.92857 -3.00004,3.00002 -6.6295,4.50002 -10.88839,4.5 -4.25896,2e-5 -7.90181,-1.49998 -10.92858,-4.5 -3.00001,-3.02676 -4.50001,-6.66961 -4.5,-10.92857 -10e-6,-4.25889 1.49999,-7.88835 4.5,-10.8884 3.02677,-3.02673 6.66962,-4.54012 10.92858,-4.54018 4.25889,6e-5 7.88835,1.51345 10.88839,4.54018" + id="path3195" /> + </g> + </g> +</svg> diff --git a/www/app/img/wait.svg b/www/app/img/wait.svg new file mode 100644 index 0000000..2ae0113 --- /dev/null +++ b/www/app/img/wait.svg @@ -0,0 +1,75 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32px" + height="32px" + id="svg3243" + version="1.1" + inkscape:version="0.48.4 r9939" + sodipodi:docname="wait.svg"> + <defs + id="defs3245" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="8" + inkscape:cx="-30.255727" + inkscape:cy="10.507144" + inkscape:current-layer="layer1" + showgrid="true" + inkscape:grid-bbox="true" + inkscape:document-units="px" + inkscape:snap-global="false" + inkscape:window-width="1920" + inkscape:window-height="1056" + inkscape:window-x="1920" + inkscape:window-y="24" + inkscape:window-maximized="1"> + <inkscape:grid + type="xygrid" + id="grid3273" /> + </sodipodi:namedview> + <metadata + id="metadata3248"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + id="layer1" + inkscape:label="Layer 1" + inkscape:groupmode="layer"> + <path + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f0e68c;stroke:#000000;stroke-width:1.50000000000000000;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome;fill-opacity:1" + d="m 26.607099,9.8590516 c 1.095245,1.8715424 1.642877,3.9185224 1.642901,6.1409504 -2.4e-5,2.222446 -0.547656,4.274745 -1.642901,6.1569 -1.09529,1.871531 -2.584007,3.354928 -4.466146,4.450196 C 20.269406,27.702362 18.222426,28.249996 16,28.25 13.77755,28.249996 11.725251,27.702362 9.8430986,26.607098 7.9715638,25.51183 6.4881674,24.028433 5.392902,22.156902 4.2976328,20.274747 3.75,18.222448 3.75,16.000002 3.75,13.777574 4.2976328,11.730594 5.392902,9.8590516 6.4881674,7.9769072 7.9715638,6.4881927 9.8430986,5.3929062 11.725251,4.2976564 13.77755,3.7500236 16,3.75 c 2.222426,2.36e-5 4.269406,0.5476564 6.140953,1.6429062 1.882139,1.0952865 3.370856,2.584001 4.466146,4.4661454" + id="path3275" + inkscape:connector-curvature="0" /> + <g + transform="matrix(0.23090279,0,0,0.23090276,-12.029146,-19.708792)" + style="font-size:72px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:FontAwesome;-inkscape-font-specification:FontAwesome" + id="text2993"> + <path + inkscape:connector-curvature="0" + d="m 151.24208,161.07719 c -6e-5,0.13394 -0.0135,0.22769 -0.0402,0.28125 -1.71434,7.17858 -5.30363,13.00447 -10.76786,17.47767 -5.46433,4.44643 -11.86611,6.66964 -19.20535,6.66965 -3.91075,-1e-5 -7.70092,-0.73661 -11.37054,-2.20982 -3.64287,-1.47322 -6.89733,-3.5759 -9.76339,-6.30804 l -5.183039,5.18304 c -0.508932,0.50892 -1.11161,0.76339 -1.808035,0.76339 -0.696431,0 -1.299109,-0.25447 -1.808036,-0.76339 -0.508929,-0.50893 -0.763393,-1.11161 -0.763393,-1.80804 l 0,-18 c 0,-0.69641 0.254464,-1.29909 0.763393,-1.80804 0.508927,-0.5089 1.111605,-0.76337 1.808036,-0.76339 l 18.000004,0 c 0.6964,2e-5 1.29908,0.25449 1.80803,0.76339 0.50891,0.50895 0.76337,1.11163 0.76339,1.80804 -2e-5,0.69645 -0.25448,1.29912 -0.76339,1.80804 l -5.50446,5.50446 c 1.90176,1.76787 4.05801,3.13394 6.46875,4.09821 2.41069,0.9643 4.91515,1.44644 7.51339,1.44643 3.58925,10e-6 6.93746,-0.87053 10.04464,-2.6116 3.1071,-1.74107 5.59817,-4.13839 7.47322,-7.19197 0.29459,-0.45534 1.00441,-2.0223 2.12946,-4.70089 0.21424,-0.61605 0.61602,-0.92409 1.20536,-0.92411 l 7.71428,0 c 0.34816,2e-5 0.6428,0.13395 0.88393,0.40179 0.2678,0.24109 0.40173,0.53573 0.40179,0.88393 m 1.00446,-32.14286 0,18 c -6e-5,0.69646 -0.25452,1.29914 -0.76339,1.80803 -0.50899,0.50896 -1.11167,0.76343 -1.80804,0.7634 l -18,0 c -0.69646,3e-5 -1.29914,-0.25444 -1.80803,-0.7634 -0.50897,-0.50889 -0.76343,-1.11157 -0.76339,-1.80803 -4e-5,-0.6964 0.25442,-1.29907 0.76339,-1.80804 l 5.54464,-5.54464 c -3.96433,-3.6696 -8.63843,-5.50442 -14.02232,-5.50446 -3.58931,4e-5 -6.93752,0.87058 -10.04464,2.6116 -3.10716,1.74112 -5.59823,4.13844 -7.47322,7.19197 -0.29465,0.45539 -1.00447,2.02235 -2.12946,4.70089 -0.2143,0.6161 -0.61608,0.92414 -1.20536,0.92411 l -7.995534,0 c -0.348216,3e-5 -0.656252,-0.12051 -0.924107,-0.36161 -0.241073,-0.26783 -0.361608,-0.57586 -0.361608,-0.92411 l 0,-0.28125 c 1.741069,-7.17853 5.357137,-12.99102 10.848219,-17.4375 5.49105,-4.47316 11.91962,-6.70976 19.28571,-6.70982 3.91068,6e-5 7.71425,0.75006 11.41071,2.25 3.69639,1.47327 6.97763,3.56255 9.84375,6.26786 l 5.22322,-5.18304 c 0.50887,-0.50887 1.11155,-0.76334 1.80803,-0.76339 0.69637,5e-5 1.29905,0.25452 1.80804,0.76339 0.50887,0.50898 0.76333,1.11166 0.76339,1.80804" + id="path3126" /> + </g> + </g> +</svg> diff --git a/www/app/index.html b/www/app/index.html new file mode 100644 index 0000000..440e0b6 --- /dev/null +++ b/www/app/index.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Bitmask</title> + <link rel="stylesheet" href="css/bootstrap.min.css"> + <link rel="stylesheet" href="css/common.css"> + </head> + <body> + <div id="app"></div> + <script src="app.bundle.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/www/app/main.js b/www/app/main.js new file mode 100644 index 0000000..0d712af --- /dev/null +++ b/www/app/main.js @@ -0,0 +1,23 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import PanelSwitcher from 'components/panel_switcher' +import App from 'app' + +class Main extends React.Component { + render() { + return React.createElement(PanelSwitcher) + } + + // + // main entry point for app execution + // + componentDidMount() { + App.start() + } +} + +ReactDOM.render( + React.createElement(Main), + document.getElementById('app') +)
\ No newline at end of file diff --git a/www/app/models/account.js b/www/app/models/account.js new file mode 100644 index 0000000..367961b --- /dev/null +++ b/www/app/models/account.js @@ -0,0 +1,88 @@ +// +// An account is an abstraction of a user and a provider. +// The user part is optional, so an Account might just represent a provider. +// + +import bitmask from 'lib/bitmask' + +export default class Account { + + constructor(address, props={}) { + if (!address.match('@')) { + this._address = '@' + address + } else { + this._address = address + } + this._authenticated = props.authenticated + } + + // + // currently, bitmask.js uses address for id, so we return address here too. + // also, we don't know uuid until after authentication. + // + // TODO: change to uuid when possible. + // + get id() { + return this._address + } + + get domain() { + return this._address.split('@')[1] + } + + get address() { + return this._address + } + + get userpart() { + return this._address.split('@')[0] + } + + get authenticated() { + return this._authenticated + } + + // + // returns a promise, fulfill is passed account object + // + login(password) { + return bitmask.user.auth(this.address, password).then( + response => { + if (response.uuid) { + this._uuid = response.uuid + this._authenticated = true + } + return this + } + ) + } + + // + // returns a promise, fulfill is passed account object + // + logout() { + return bitmask.user.logout(this.id).then( + response => { + this._authenticated = false + this._address = '@' + this.domain + return this + } + ) + } + + // + // returns a promise, fullfill is passed account object + // + static active() { + return bitmask.user.active().then( + response => { + if (response.user == '<none>') { + return null + } else { + return new Account(response.user, {authenticated: true}) + } + } + ) + } + +}
\ No newline at end of file diff --git a/www/notes.txt b/www/notes.txt new file mode 100644 index 0000000..39d60ed --- /dev/null +++ b/www/notes.txt @@ -0,0 +1,173 @@ + + +# BITMASK API + +https://0xacab.org/leap/leap_pycommon/blob/develop/src/leap/common/events/catalog.py + + + + +https://github.com/rofrischmann/react-layout-components/blob/develop/modules/components/Box.jsx +https://github.com/tastejs/todomvc/tree/master/examples + +ES6 + + https://github.com/DrkSephy/es6-cheatsheet + http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html + +React component examples + + https://github.com/Khan/perseus/tree/master/src/components + https://react.parts/web + +Props versus States + + https://github.com/uberVU/react-guide/blob/master/props-vs-state.md + + +Localization + + https://github.com/martinandert/counterpart + http://www.localeplanet.com/ + +Flexbox + + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes + +Style + + Flat/Low Saturation visual language: https://www.youtube.com/watch?v=jAhjPd4uNFY + + +testing +----------------------------------------- + +https://github.com/airbnb/enzyme + + +webpack +------------------------------------------ + +https://github.com/webpack/docs/wiki/optimization + +https://github.com/rauschma/webpack-es6-demo + +https://github.com/shakacode/react-webpack-rails-tutorial + +https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack#27651720 + +react ui components +-------------------------------------------- + +material design + + material-ui + http://www.material-ui.com + materialize + materialize looks to have the best css + https://react-materialize.github.io + http://materializecss.com + mui + https://www.muicss.com + react-material + react-polymer + +elemental + http://elemental-ui.com/ + react-only toolkit + +foundation + used by pixelated user agent + +grommet.io + +topcoat + react-topui + +belle + "configurable react components with great UX" + use belle or bootstrap theme + nikgraf.github.com/belle + +react-islands + react implementation of yandex's islands design + github.com/narqo/react-islands + +Pivotol UI + react ui components styles for the Pivotal brand + http://styleguide.pivotal.io + +react +------------------------ + +react with es6 classes: + +https://facebook.github.io/react/docs/reusable-components.html#es6-classes + + +redux +----------------- + +http://redux.js.org/ +https://github.com/reactjs/redux + Redux is a predictable state container for JavaScript apps. + functional programming + + oop with redux + https://github.com/newtoncodes/react-redux-oop + https://github.com/ddsol/redux-schema + + boilerplates + https://github.com/markerikson/react-redux-links/blob/master/boilerplates-and-starter-kits.md + https://github.com/tsaiDavid/simple-redux-boilerplate + +ec6 +------------------ + + http://frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/ + https://www.infoq.com/news/2015/03/react-es6-classes + https://github.com/google/traceur-compiler/wiki/Getting-Started + http://www.developerdrive.com/2011/08/top-10-must-follow-javascript-best-practices-2/ + + +react templates +--------------------------------- + +https://wix.github.io/react-templates/ + + +Toolchain +------------------- + +processors + traceur + babel + +front-end package management + bower - https://bower.io/ + component + npm + browserify + http://browserify.org/ + and many others + https://github.com/wilmoore/frontend-packagers + +module builder + browserify + webpack + +testing framework + https://github.com/karma-runner/karma + +full frameworks +------------------------ + +http://aurelia.io/ + + +watcherify +---------------------------- + + +#!/bin/bash +watchify client/main.js -o public/bundle.js -dv & +nodemon --exec npm run babel-node -- app.js diff --git a/www/package.json b/www/package.json new file mode 100644 index 0000000..128a9e7 --- /dev/null +++ b/www/package.json @@ -0,0 +1,33 @@ +{ + "name": "bitmask_js", + "version": "0.0.1", + "description": "bitmask user interface in javascript", + "license": "GPL-3.0", + "homepage": "https://bitmask.net", + "repository": "https://leap.se/git/bitmask_client.git", + "dependencies": {}, + "devDependencies": { + "babel": "^6.5.2", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.9.0", + "babel-preset-react": "^6.11.1", + "babel-preset-stage-0": "^6.5.0", + "bootstrap": "^3.3.7", + "copy-webpack-plugin": "^3.0.1", + "css-loader": "^0.23.1", + "less": "^2.7.1", + "less-loader": "^2.2.3", + "react": "^15.2.1", + "react-bootstrap": "^0.30.2", + "react-dom": "^15.2.1", + "style-loader": "^0.13.1", + "webpack": "^1.13.1", + "zxcvbn": "^4.3.0" + }, + "scripts": { + "open": "gnome-open http://localhost:7070", + "watch": "NODE_ENV=development webpack --watch", + "build": "NODE_ENV=development webpack", + "build:production": "NODE_ENV=production webpack" + } +} diff --git a/www/webpack.config.js b/www/webpack.config.js new file mode 100644 index 0000000..7b46e1b --- /dev/null +++ b/www/webpack.config.js @@ -0,0 +1,77 @@ +var path = require('path') +var webpack = require('webpack') +var CopyWebpackPlugin = require('copy-webpack-plugin'); + +var config = { + context: path.join(__dirname, 'app'), + entry: './main.js', + output: { + path: path.join(__dirname, 'public'), + filename: 'app.bundle.js' + }, + resolve: { + modulesDirectories: ['node_modules', './app'], + extensions: ['', '.js', '.jsx'] + }, + module: { + loaders: [ + // babel transform + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/, + query: { + presets: ['react', 'es2015'] + } + }, + { + test: /\.css$/, + loader: "style!css" + }, + { + test: /\.less$/, + loader: "style!css!less?noIeCompat" + } + ] + }, + plugins: [ + // don't bundle when there is an error: + new webpack.NoErrorsPlugin(), + + // https://webpack.github.io/docs/code-splitting.html + // new webpack.optimize.CommonChunkPlugin('common.js') + + // https://github.com/kevlened/copy-webpack-plugin + new CopyWebpackPlugin([ + { from: 'css/*.css' }, + { from: 'img/*'}, + { from: 'index.html' }, + { from: '../node_modules/bootstrap/dist/css/bootstrap.min.css', to: 'css' }, + { from: '../node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', to: 'fonts' }, + { from: '../node_modules/zxcvbn/dist/zxcvbn.js', to: 'js' } + ]) + ], + stats: { + colors: true + }, + // source-map can be used in production or development + // but it creates a separate file. + devtool: 'source-map' +} + +/* +if (process.env.NODE_ENV == 'production') { + // see https://github.com/webpack/docs/wiki/optimization + config.plugins.push( + new webpack.optimize.UglifyJsPlugin({ + compress: { warnings: false }, + output: { comments: false } + }), + new webpack.optimize.DedupePlugin() + ) +} else { + config.devtool = 'inline-source-map'; +} +*/ + +module.exports = config |
