1 files changed, 57 insertions, 0 deletions
diff --git a/src/leap/bitmask_js/app/components/main_panel/index.js b/src/leap/bitmask_js/app/components/main_panel/index.js
new file mode 100644
index 0000000..910d58b
--- /dev/null
+++ b/src/leap/bitmask_js/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>
+    )
+  }
+
+}