diff options
Diffstat (limited to 'web/react/components/admin_console')
-rw-r--r-- | web/react/components/admin_console/admin_controller.jsx | 57 | ||||
-rw-r--r-- | web/react/components/admin_console/admin_sidebar.jsx | 164 | ||||
-rw-r--r-- | web/react/components/admin_console/email_settings.jsx | 311 | ||||
-rw-r--r-- | web/react/components/admin_console/jobs_settings.jsx | 183 | ||||
-rw-r--r-- | web/react/components/admin_console/select_team_modal.jsx | 124 |
5 files changed, 839 insertions, 0 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx new file mode 100644 index 000000000..b069f6432 --- /dev/null +++ b/web/react/components/admin_console/admin_controller.jsx @@ -0,0 +1,57 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminSidebar = require('./admin_sidebar.jsx'); +var EmailTab = require('./email_settings.jsx'); +var JobsTab = require('./jobs_settings.jsx'); +var Navbar = require('../../components/navbar.jsx'); + +export default class AdminController extends React.Component { + constructor(props) { + super(props); + + this.selectTab = this.selectTab.bind(this); + + this.state = { + selected: 'email_settings' + }; + } + + selectTab(tab) { + this.setState({selected: tab}); + } + + render() { + var tab = ''; + + if (this.state.selected === 'email_settings') { + tab = <EmailTab />; + } else if (this.state.selected === 'job_settings') { + tab = <JobsTab />; + } + + return ( + <div> + <AdminSidebar + selected={this.state.selected} + selectTab={this.selectTab} + /> + <div className='inner__wrap channel__wrap'> + <div className='row header'> + <Navbar teamDisplayName='Admin Console' /> + </div> + <div className='row main'> + <div + id='app-content' + className='app__content admin' + > + <div className='wrapper--fixed'> + {tab} + </div> + </div> + </div> + </div> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx new file mode 100644 index 000000000..64a99b1f4 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -0,0 +1,164 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SidebarHeader = require('../sidebar_header.jsx'); + +export default class AdminSidebar extends React.Component { + constructor(props) { + super(props); + + this.isSelected = this.isSelected.bind(this); + this.handleClick = this.handleClick.bind(this); + + this.state = { + }; + } + + handleClick(name) { + this.props.selectTab(name); + } + + isSelected(name) { + if (this.props.selected === name) { + return 'active'; + } + + return ''; + } + + render() { + return ( + <div className='sidebar--left sidebar--collapsable'> + <div> + <SidebarHeader + teamDisplayName='Admin Console' + teamType='I' + /> + <ul className='nav nav-pills nav-stacked'> + <li> + <a href='#' + className='nav__menu-item active' + > + <span className='icon fa fa-gear'></span> <span>{'Basic Settings'}</span></a> + <ul className='nav nav__sub-menu'> + <li> + <a + href='#' + className={this.isSelected('email_settings')} + onClick={this.handleClick.bind(null, 'email_settings')} + > + {'Email Settings'} + </a> + </li> + <li><a href='#'>{'Other Settings'}</a></li> + </ul> + </li> + <li> + <a + href='#' + className='nav__menu-item' + > + <span className='icon fa fa-gear'></span> <span>{'Jobs'}</span> + </a> + <ul className='nav nav__sub-menu hide'> + <li> + <a + href='#' + className={this.isSelected('job_settings')} + onClick={this.handleClick.bind(null, 'job_settings')} + > + {'Job Settings'} + </a> + </li> + </ul> + </li> + <li> + <a + href='#' + className='nav__menu-item' + > + <span className='icon fa fa-gear'></span> + <span>{'Team Settings (306)'}</span> + <span className='menu-icon--right'> + <i className='fa fa-plus'></i> + </span> + </a> + <ul className='nav nav__sub-menu hide'> + <li> + <a + href='#' + className='nav__sub-menu-item active' + > + {'Adal '} + <span className='menu-icon--right menu__close'>{'x'}</span> + </a> + </li> + <li> + <ul className='nav nav__inner-menu'> + <li> + <a + href='#' + className='active' + > + {'- Users'} + </a> + </li> + <li><a href='#'>{'- View Statistics'}</a></li> + <li> + <a href='#'> + {'- View Audit Log'} + <span className='badge pull-right small'>{'1'}</span> + </a> + </li> + </ul> + </li> + <li> + <a + href='#' + className='nav__sub-menu-item' + > + {'Boole '} + <span className='menu-icon--right menu__close'>{'x'}</span> + </a> + </li> + <li> + <ul className='nav nav__inner-menu hide'> + <li> + <a + href='#' + className='active' + > + {'- Users'} + </a> + </li> + <li><a href='#'>{'- View Statistics'}</a></li> + <li> + <a href='#'> + {'- View Audit Log'} + <span className='badge pull-right small'>{'1'}</span> + </a> + </li> + </ul> + </li> + <li> + <span + data-toggle='modal' + data-target='#select-team' + className='nav-more' + > + {'Select a team'} + </span> + </li> + </ul> + </li> + </ul> + </div> + </div> + ); + } +} + +AdminSidebar.propTypes = { + selected: React.PropTypes.string, + selectTab: React.PropTypes.func +};
\ No newline at end of file diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx new file mode 100644 index 000000000..59475dc94 --- /dev/null +++ b/web/react/components/admin_console/email_settings.jsx @@ -0,0 +1,311 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class EmailSettings extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( + <div> + <h3>{'Email Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='email' + > + {'Bypass Email: '} + <a + href='#' + data-trigger='hover click' + data-toggle='popover' + data-position='bottom' + data-content={'Here\'s some more help text inside a popover for the Bypass Email field just to show how popovers look.'} + > + {'(?)'} + </a> + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='byPassEmail' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='byPassEmail' + value='option2' + /> + {'False'} + </label> + <p className='help-text'>{'This is some sample help text for the Bypass Email field'}</p> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='smtpUsername' + > + {'SMTP Username:'} + </label> + <div className='col-sm-8'> + <input + type='email' + className='form-control' + id='smtpUsername' + placeholder='Enter your SMTP username' + value='' + /> + <div className='help-text'> + <div className='alert alert-warning'><i className='fa fa-warning'></i>{' This is some error text for the Bypass Email field'}</div> + </div> + <p className='help-text'>{'This is some sample help text for the SMTP username field'}</p> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='smtpPassword' + > + {'SMTP Password:'} + </label> + <div className='col-sm-8'> + <input + type='password' + className='form-control' + id='smtpPassword' + placeholder='Enter your SMTP password' + value='' + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='smtpServer' + > + {'SMTP Server:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='smtpServer' + placeholder='Enter your SMTP server' + value='' + /> + <div className='help-text'> + <a + href='#' + className='help-link' + > + {'Test Connection'} + </a> + <div className='alert alert-success'><i className='fa fa-check'></i>{' Connection successful'}</div> + <div className='alert alert-warning hide'><i className='fa fa-warning'></i>{' Connection unsuccessful'}</div> + </div> + </div> + </div> + <div className='form-group'> + <label className='control-label col-sm-4'>{'Use TLS:'}</label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='tls' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='tls' + value='option2' + /> + {'False'} + </label> + </div> + </div> + <div className='form-group'> + <label className='control-label col-sm-4'>{'Use Start TLS:'}</label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='starttls' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='starttls' + value='option2' + /> + {'False'} + </label> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackEmail' + > + {'Feedback Email:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackEmail' + placeholder='Enter your feedback email' + value='' + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Feedback Username:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your feedback username' + value='' + /> + </div> + </div> + <div className='form-group'> + <div className='col-sm-offset-4 col-sm-8'> + <div className='checkbox'> + <label><input type='checkbox' />{'Remember me'}</label> + </div> + </div> + </div> + + <div + className='panel-group' + id='accordion' + role='tablist' + aria-multiselectable='true' + > + <div className='panel panel-default'> + <div + className='panel-heading' + role='tab' + id='headingOne' + > + <h3 className='panel-title'> + <a + className='collapsed' + role='button' + data-toggle='collapse' + data-parent='#accordion' + href='#collapseOne' + aria-expanded='true' + aria-controls='collapseOne' + > + {'Advanced Settings '} + <i className='fa fa-plus'></i> + <i className='fa fa-minus'></i> + </a> + </h3> + </div> + <div + id='collapseOne' + className='panel-collapse collapse' + role='tabpanel' + aria-labelledby='headingOne' + > + <div className='panel-body'> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push server:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your Apple push server' + value='' + /> + <p className='help-text'>{'This is some sample help text for the Apple push server field'}</p> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push certificate public:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your public apple push certificate' + value='' + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push certificate private:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your private apple push certificate' + value='' + /> + </div> + </div> + </div> + </div> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + <button + type='submit' + className='btn btn-primary' + > + {'Submit'} + </button> + </div> + </div> + </form> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/jobs_settings.jsx b/web/react/components/admin_console/jobs_settings.jsx new file mode 100644 index 000000000..c36d20df7 --- /dev/null +++ b/web/react/components/admin_console/jobs_settings.jsx @@ -0,0 +1,183 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class Jobs extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( + <div> + <h3>{' ************** JOB Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='email' + > + {'Bypass Email: '} + <a + href='#' + data-trigger='hover click' + data-toggle='popover' + data-position='bottom' + data-content={'Here\'s some more help text inside a popover for the Bypass Email field just to show how popovers look.'} + > + {'(?)'} + </a> + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='byPassEmail' + value='option1' + /> + {'True'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='byPassEmail' + value='option2' + /> + {'False'} + </label> + <p className='help-text'>{'This is some sample help text for the Bypass Email field'}</p> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='smtpUsername' + > + {'SMTP Username:'} + </label> + <div className='col-sm-8'> + <input + type='email' + className='form-control' + id='smtpUsername' + placeholder='Enter your SMTP username' + value='' + /> + <div className='help-text'> + <div className='alert alert-warning'><i className='fa fa-warning'></i>{' This is some error text for the Bypass Email field'}</div> + </div> + <p className='help-text'>{'This is some sample help text for the SMTP username field'}</p> + </div> + </div> + <div + className='panel-group' + id='accordion' + role='tablist' + aria-multiselectable='true' + > + <div className='panel panel-default'> + <div + className='panel-heading' + role='tab' + id='headingOne' + > + <h3 className='panel-title'> + <a + className='collapsed' + role='button' + data-toggle='collapse' + data-parent='#accordion' + href='#collapseOne' + aria-expanded='true' + aria-controls='collapseOne' + > + {'Advanced Settings '} + <i className='fa fa-plus'></i> + <i className='fa fa-minus'></i> + </a> + </h3> + </div> + <div + id='collapseOne' + className='panel-collapse collapse' + role='tabpanel' + aria-labelledby='headingOne' + > + <div className='panel-body'> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push server:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your Apple push server' + value='' + /> + <p className='help-text'>{'This is some sample help text for the Apple push server field'}</p> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push certificate public:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your public apple push certificate' + value='' + /> + </div> + </div> + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='feedbackUsername' + > + {'Apple push certificate private:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='feedbackUsername' + placeholder='Enter your private apple push certificate' + value='' + /> + </div> + </div> + </div> + </div> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + <button + type='submit' + className='btn btn-primary' + > + {'Submit'} + </button> + </div> + </div> + </form> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx new file mode 100644 index 000000000..fa30de7b2 --- /dev/null +++ b/web/react/components/admin_console/select_team_modal.jsx @@ -0,0 +1,124 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class SelectTeam extends React.Component { + constructor(props) { + super(props); + + this.state = { + }; + } + + render() { + return ( + <div className='modal fade' + id='select-team' + tabIndex='-1' + role='dialog' + aria-labelledby='teamsModalLabel' + > + <div className='modal-dialog' + role='document' + > + <div className='modal-content'> + <div className='modal-header'> + <button + type='button' + className='close' + data-dismiss='modal' + aria-label='Close' + > + <span aria-hidden='true'>×</span> + </button> + <h4 + className='modal-title' + id='teamsModalLabel' + > + {'Select a team'} + </h4> + </div> + <div className='modal-body'> + <table className='more-channel-table table'> + <tbody> + <tr> + <td> + <p className='more-channel-name'>{'Descartes'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Grouping'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Adventure'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Crossroads'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Sky scraping'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Outdoors'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Microsoft'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + <tr> + <td> + <p className='more-channel-name'>{'Apple'}</p> + </td> + <td className='td--action'> + <button className='btn btn-primary'>{'Join'}</button> + </td> + </tr> + </tbody> + </table> + </div> + <div className='modal-footer'> + <button + type='button' + className='btn btn-default' + data-dismiss='modal' + > + {'Close'} + </button> + </div> + </div> + </div> + </div> + ); + } +}
\ No newline at end of file |