secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Initial setup modal

Browse Source
This commit is contained in:
James Barnsley
2018-07-10 16:57:06 +12:00
parent 610fe5da24
commit 2f6e8c2a74
5 changed files with 348 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
mopidy_iris/static/app.js
View File

@ -35533,6 +35533,10 @@ var _AddToQueue = __webpack_require__(465);
var _AddToQueue2 = _interopRequireDefault(_AddToQueue);
var _InitialSetup = __webpack_require__(466);
var _InitialSetup2 = _interopRequireDefault(_InitialSetup);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
@ -35561,6 +35565,7 @@ _reactDom2.default.render(_react2.default.createElement(
_reactRouter.Route,
{ path: global.baseURL, component: _App2.default },
_react2.default.createElement(_reactRouter.IndexRoute, { component: _Queue2.default }),
_react2.default.createElement(_reactRouter.Route, { path: 'initial-setup', component: _InitialSetup2.default }),
_react2.default.createElement(_reactRouter.Route, { path: 'queue', component: _Queue2.default }),
_react2.default.createElement(_reactRouter.Route, { path: 'queue/history', component: _QueueHistory2.default }),
_react2.default.createElement(_reactRouter.Route, { path: 'queue/radio', component: _EditRadio2.default }),
@ -59586,7 +59591,7 @@ var App = function (_React$Component) {
// show initial setup if required
if (!this.props.initial_setup_complete) {
_reactRouter.hashHistory.push(global.baseURL + 'modal/initial-setup');
_reactRouter.hashHistory.push(global.baseURL + 'initial-setup');
}
}
}, {
@ -79050,6 +79055,307 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) {
exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(AddToQueue);
/***/ }),
/* 466 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactRedux = __webpack_require__(5);
var _redux = __webpack_require__(3);
var _reactRouter = __webpack_require__(9);
var _reactGa = __webpack_require__(35);
var _reactGa2 = _interopRequireDefault(_reactGa);
var _Modal = __webpack_require__(434);
var _Modal2 = _interopRequireDefault(_Modal);
var _Icon = __webpack_require__(7);
var _Icon2 = _interopRequireDefault(_Icon);
var _SpotifyAuthenticationFrame = __webpack_require__(400);
var _SpotifyAuthenticationFrame2 = _interopRequireDefault(_SpotifyAuthenticationFrame);
var _LastfmAuthenticationFrame = __webpack_require__(401);
var _LastfmAuthenticationFrame2 = _interopRequireDefault(_LastfmAuthenticationFrame);
var _actions = __webpack_require__(17);
var coreActions = _interopRequireWildcard(_actions);
var _actions2 = __webpack_require__(4);
var uiActions = _interopRequireWildcard(_actions2);
var _helpers = __webpack_require__(2);
var helpers = _interopRequireWildcard(_helpers);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var InitialSetup = function (_React$Component) {
_inherits(InitialSetup, _React$Component);
function InitialSetup(props) {
_classCallCheck(this, InitialSetup);
var _this = _possibleConstructorReturn(this, (InitialSetup.__proto__ || Object.getPrototypeOf(InitialSetup)).call(this, props));
_this.state = {
username: 'Anonymous',
allow_reporting: _this.props.allow_reporting,
host: _this.props.host,
port: _this.props.port,
ssl: _this.props.ssl
};
return _this;
}
_createClass(InitialSetup, [{
key: 'handleSubmit',
value: function handleSubmit(e) {
e.preventDefault();
var self = this;
// Force local username change, even if remote connection absent/failed
this.props.pusherActions.setUsername(this.state.username, true);
this.props.uiActions.set({
initial_setup_complete: true,
allow_reporting: this.state.allow_reporting
});
this.props.mopidyActions.set({
host: this.state.host,
port: this.state.port,
ssl: this.state.ssl
});
this.setState({ saving: true });
// Wait a second to allow changes to apply to store
setTimeout(function () {
// We've changed a connection setting, so need to reload
if (self.state.host !== self.props.host || self.state.port !== self.props.port || self.state.ssl !== self.props.ssl) {
window.location.reload(true);
// Safe to just close modal
} else {
self.props.uiActions.closeModal();
}
}, 1000);
return false;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
_Modal2.default,
{ className: 'initial-setup-modal' },
_react2.default.createElement(
'h1',
null,
'Get started'
),
_react2.default.createElement(
'form',
{ onSubmit: function onSubmit(e) {
return _this2.handleSubmit(e);
} },
_react2.default.createElement(
'div',
{ className: 'field text' },
_react2.default.createElement(
'div',
{ className: 'name' },
'Username'
),
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement('input', {
type: 'text',
onChange: function onChange(e) {
return _this2.setState({ username: e.target.value.replace(/\W/g, '') });
},
value: this.state.username }),
_react2.default.createElement(
'div',
{ className: 'description' },
'A non-unique string used to identify this client (no special characters)'
)
)
),
_react2.default.createElement(
'div',
{ className: 'field' },
_react2.default.createElement(
'div',
{ className: 'name' },
'Host'
),
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement('input', {
type: 'text',
onChange: function onChange(e) {
return _this2.setState({ host: e.target.value });
},
value: this.state.host })
)
),
_react2.default.createElement(
'div',
{ className: 'field' },
_react2.default.createElement(
'div',
{ className: 'name' },
'Port'
),
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement('input', {
type: 'text',
onChange: function onChange(e) {
return _this2.setState({ port: e.target.value });
},
value: this.state.port })
)
),
_react2.default.createElement(
'div',
{ className: 'field checkbox' },
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement(
'label',
null,
_react2.default.createElement('input', {
type: 'checkbox',
name: 'ssl',
checked: this.state.ssl,
onChange: function onChange(e) {
return _this2.setState({ ssl: !_this2.state.ssl });
} }),
_react2.default.createElement(
'span',
{ className: 'label has-tooltip' },
'Enable SSL',
_react2.default.createElement(
'span',
{ className: 'tooltip' },
'Requires SSL proxy'
)
)
)
)
),
helpers.isHosted() ? null : _react2.default.createElement(
'div',
{ className: 'field checkbox' },
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement(
'label',
null,
_react2.default.createElement('input', {
type: 'checkbox',
name: 'allow_reporting',
checked: this.state.allow_reporting,
onChange: function onChange(e) {
return _this2.setState({ allow_reporting: !_this2.state.allow_reporting });
} }),
_react2.default.createElement(
'span',
{ className: 'label' },
'Allow reporting of anonymous usage statistics'
)
)
)
),
!this.state.allow_reporting ? _react2.default.createElement(
'p',
{ className: 'description' },
'This anonymous usage data is important in identifying errors and potential features that make Iris better for everyone. Want to know more? Read the ',
_react2.default.createElement(
'a',
{ href: 'https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy', target: '_blank' },
'privacy policy'
),
'.'
) : null,
_react2.default.createElement(
'div',
{ className: 'actions centered-text' },
_react2.default.createElement(
'button',
{ className: "primary large" + (this.state.saving ? " working" : ""), onClick: function onClick(e) {
return _this2.handleSubmit(e);
} },
this.state.saving ? "Saving" : "Save"
)
)
)
);
}
}]);
return InitialSetup;
}(_react2.default.Component);
var mapStateToProps = function mapStateToProps(state, ownProps) {
return {
allow_reporting: state.core.allow_reporting,
host: state.mopidy.host,
port: state.mopidy.port,
ssl: state.mopidy.ssl
};
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return {
coreActions: (0, _redux.bindActionCreators)(coreActions, dispatch),
uiActions: (0, _redux.bindActionCreators)(uiActions, dispatch)
};
};
exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(InitialSetup);
/***/ })
/******/ ]);
//# sourceMappingURL=app.js.map

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
src/js/App.js
View File

@ -92,7 +92,7 @@ class App extends React.Component{
// show initial setup if required
if (!this.props.initial_setup_complete){
hashHistory.push(global.baseURL+'modal/initial-setup');
hashHistory.push(global.baseURL+'initial-setup');
}
}

6
src/js/index.js
View File

@ -39,6 +39,7 @@ import EditPlaylist from './views/modals/EditPlaylist';
import CreatePlaylist from './views/modals/CreatePlaylist';
import EditRadio from './views/modals/EditRadio';
import AddToQueue from './views/modals/AddToQueue';
import InitialSetup from './views/modals/InitialSetup';
/*
// Hijack console error for Raven to capture
@ -55,7 +56,10 @@ ReactDOM.render(
<Router history={hashHistory}>
<Route path={global.baseURL} component={App}>
<IndexRoute component={Queue} />
<IndexRoute component={Queue} />
<Route path="initial-setup" component={InitialSetup} />
<Route path="queue" component={Queue} />
<Route path="queue/history" component={QueueHistory} />
<Route path="queue/radio" component={EditRadio} />

43
src/js/views/modals/InitialSetupModal.js → src/js/views/modals/InitialSetup.js
View File

@ -1,13 +1,20 @@
import React, { PropTypes } from 'react'
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';
import ReactGA from 'react-ga';
import Icon from '../Icon'
import SpotifyAuthenticationFrame from '../Fields/SpotifyAuthenticationFrame'
import LastfmAuthenticationFrame from '../Fields/LastfmAuthenticationFrame'
import Modal from './Modal';
import Icon from '../../components/Icon';
import SpotifyAuthenticationFrame from '../../components/Fields/SpotifyAuthenticationFrame';
import LastfmAuthenticationFrame from '../../components/Fields/LastfmAuthenticationFrame';
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions';
import * as uiActions from '../../services/ui/actions';
import * as helpers from '../../helpers';
export default class InitialSetupModal extends React.Component{
class InitialSetup extends React.Component{
constructor(props){
super(props);
@ -58,7 +65,7 @@ export default class InitialSetupModal extends React.Component{
render(){
return (
<div>
<Modal className="initial-setup-modal">
<h1>Get started</h1>
<form onSubmit={(e) => this.handleSubmit(e)}>
@ -135,7 +142,25 @@ export default class InitialSetupModal extends React.Component{
</div>
</form>
</div>
</Modal>
)
}
}
}
const mapStateToProps = (state, ownProps) => {
return {
allow_reporting: state.core.allow_reporting,
host: state.mopidy.host,
port: state.mopidy.port,
ssl: state.mopidy.ssl
}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(InitialSetup)