updated channel login

client/build/components/ChannelSelectDropdown/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _publish_channel_select_states = require("../../constants/publish_channel_select_states");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChannelSelectDropdown = function ChannelSelectDropdown(_ref) {
+  var selectedChannel = _ref.selectedChannel,
+      handleSelection = _ref.handleSelection,
+      loggedInChannelName = _ref.loggedInChannelName;
+  return _react.default.createElement("select", {
+    id: "channel-name-select",
+    className: "select select--arrow",
+    value: selectedChannel,
+    onChange: handleSelection
+  }, loggedInChannelName && _react.default.createElement("option", {
+    value: loggedInChannelName,
+    id: "publish-channel-select-channel-option"
+  }, loggedInChannelName), _react.default.createElement("option", {
+    value: _publish_channel_select_states.LOGIN
+  }, "Existing"), _react.default.createElement("option", {
+    value: _publish_channel_select_states.CREATE
+  }, "New"));
+};
+
+var _default = ChannelSelectDropdown;
+exports.default = _default;

client/build/components/ChooseAnonymousPublishRadio/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChooseAnonymousPublishRadio = function ChooseAnonymousPublishRadio(_ref) {
+  var publishInChannel = _ref.publishInChannel,
+      toggleAnonymousPublish = _ref.toggleAnonymousPublish;
+  return _react.default.createElement("div", null, _react.default.createElement("input", {
+    type: "radio",
+    name: "anonymous-or-channel",
+    id: "anonymous-radio",
+    className: "input-radio",
+    value: "anonymous",
+    checked: !publishInChannel,
+    onChange: toggleAnonymousPublish
+  }), _react.default.createElement("label", {
+    className: "label label--pointer",
+    htmlFor: "anonymous-radio"
+  }, "Anonymous"));
+};
+
+var _default = ChooseAnonymousPublishRadio;
+exports.default = _default;

client/build/components/ChooseChannelPublishRadio/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ChooseChannelPublishRadio = function ChooseChannelPublishRadio(_ref) {
+  var publishInChannel = _ref.publishInChannel,
+      toggleAnonymousPublish = _ref.toggleAnonymousPublish;
+  return _react.default.createElement("div", null, _react.default.createElement("input", {
+    type: "radio",
+    name: "anonymous-or-channel",
+    id: "channel-radio",
+    className: "input-radio",
+    value: "in a channel",
+    checked: publishInChannel,
+    onChange: toggleAnonymousPublish
+  }), _react.default.createElement("label", {
+    className: "label label--pointer",
+    htmlFor: "channel-radio"
+  }, "In a channel"));
+};
+
+var _default = ChooseChannelPublishRadio;
+exports.default = _default;

client/build/components/ErrorDisplay/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ErrorDisplay = function ErrorDisplay(_ref) {
+  var errorMessage = _ref.errorMessage,
+      defaultMessage = _ref.defaultMessage;
+  return _react.default.createElement("div", null, errorMessage ? _react.default.createElement("p", {
+    className: "info-message--failure"
+  }, errorMessage) : _react.default.createElement("p", {
+    className: "info-message"
+  }, defaultMessage));
+};
+
+var _default = ErrorDisplay;
+exports.default = _default;

client/build/components/Label/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Label = function Label(_ref) {
+  var value = _ref.value;
+  return _react.default.createElement("label", {
+    className: "label"
+  }, value);
+};
+
+var _default = Label;
+exports.default = _default;

client/build/components/PublishDescriptionInput/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _ExpandingTextArea = _interopRequireDefault(require("@components/ExpandingTextArea"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishDescriptionInput = function PublishDescriptionInput(_ref) {
+  var description = _ref.description,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Description:'
+    }),
+    content: _react.default.createElement(_ExpandingTextArea.default, {
+      id: "publish-description",
+      className: "textarea textarea--primary textarea--full-width",
+      rows: 1,
+      maxLength: 2000,
+      style: {
+        maxHeight: 200
+      },
+      name: "description",
+      placeholder: "Optional description",
+      value: description,
+      onChange: handleInput
+    })
+  });
+};
+
+var _default = PublishDescriptionInput;
+exports.default = _default;

client/build/components/PublishDetailsRow/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var PublishDetailsRow =
+/*#__PURE__*/
+function (_React$Component) {
+  function PublishDetailsRow() {
+    _classCallCheck(this, PublishDetailsRow);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(PublishDetailsRow).apply(this, arguments));
+  }
+
+  _createClass(PublishDetailsRow, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'publish-details-row'
+      }, _react.default.createElement("div", {
+        className: 'publish-details-label'
+      }, this.props.label), _react.default.createElement("div", {
+        className: 'publish-details-content'
+      }, this.props.content));
+    }
+  }]);
+
+  _inherits(PublishDetailsRow, _React$Component);
+
+  return PublishDetailsRow;
+}(_react.default.Component);
+
+var _default = PublishDetailsRow;
+exports.default = _default;

client/build/components/PublishLicenseInput/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishLicenseInput = function PublishLicenseInput(_ref) {
+  var handleSelect = _ref.handleSelect;
+  return _react.default.createElement(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'License:'
+    }),
+    content: _react.default.createElement("select", {
+      type: "text",
+      name: "license",
+      id: "publish-license",
+      className: "select select--primary",
+      onChange: handleSelect
+    }, _react.default.createElement("option", {
+      value: " "
+    }, "Unspecified"), _react.default.createElement("option", {
+      value: "Public Domain"
+    }, "Public Domain"), _react.default.createElement("option", {
+      value: "Creative Commons"
+    }, "Creative Commons"))
+  });
+};
+
+var _default = PublishLicenseInput;
+exports.default = _default;

client/build/components/PublishNsfwInput/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var PublishNsfwInput = function PublishNsfwInput(_ref) {
+  var nsfw = _ref.nsfw,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Mature:'
+    }),
+    content: _react.default.createElement("input", {
+      className: "input-checkbox",
+      type: "checkbox",
+      id: "publish-nsfw",
+      name: "nsfw",
+      value: nsfw,
+      onChange: handleInput
+    })
+  });
+};
+
+var _default = PublishNsfwInput;
+exports.default = _default;

client/build/containers/ChannelLoginForm/view.js

@@ -9,6 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _request = _interopRequireDefault(require("../../utils/request"));
 
+var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+
+var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -31,6 +37,48 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
+var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) {
+  var channelName = _ref.channelName,
+      handleInput = _ref.handleInput;
+  return _react.default.createElement(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Name:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
+      type: "text",
+      id: "channel-login-name-input",
+      className: "input-text",
+      name: "name",
+      placeholder: "Your Channel Name",
+      value: channelName,
+      onChange: handleInput
+    }))
+  });
+};
+
+var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref2) {
+  var channelPassword = _ref2.channelPassword,
+      handleInput = _ref2.handleInput;
+  return _react.default.createElement(_PublishDetailsRow.default, {
+    label: _react.default.createElement(_Label.default, {
+      value: 'Password:'
+    }),
+    content: _react.default.createElement("div", {
+      className: "input-area--primary"
+    }, _react.default.createElement("input", {
+      type: "password",
+      id: "channel-login-password-input",
+      name: "password",
+      className: "input-text",
+      placeholder: "",
+      value: channelPassword,
+      onChange: handleInput
+    }))
+  });
+};
+
 var ChannelLoginForm =
 /*#__PURE__*/
 function (_React$Component) {
@@ -74,12 +122,12 @@ function (_React$Component) {
         }),
         credentials: 'include'
       };
-      (0, _request.default)('login', params).then(function (_ref) {
-        var success = _ref.success,
-            channelName = _ref.channelName,
-            shortChannelId = _ref.shortChannelId,
-            channelClaimId = _ref.channelClaimId,
-            message = _ref.message;
+      (0, _request.default)('login', params).then(function (_ref3) {
+        var success = _ref3.success,
+            channelName = _ref3.channelName,
+            shortChannelId = _ref3.shortChannelId,
+            channelClaimId = _ref3.channelClaimId,
+            message = _ref3.message;
 
         if (success) {
           _this2.props.onChannelLogin(channelName, shortChannelId, channelClaimId);
@@ -105,56 +153,19 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("form", {
-        id: "channel-login-form"
-      }, _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "channel-login-name-input"
-      }, "Name:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary flex-container--row flex-container--left-bottom"
-      }, _react.default.createElement("span", null, "@"), _react.default.createElement("input", {
-        type: "text",
-        id: "channel-login-name-input",
-        className: "input-text",
-        name: "name",
-        placeholder: "Your Channel Name",
-        value: this.state.channelName,
-        onChange: this.handleInput
-      })))), _react.default.createElement("div", {
-        className: "row row--wide row--short"
-      }, _react.default.createElement("div", {
-        className: "column column--3 column--sml-10"
-      }, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "channel-login-password-input"
-      }, "Password:")), _react.default.createElement("div", {
-        className: "column column--6 column--sml-10"
-      }, _react.default.createElement("div", {
-        className: "input-text--primary"
-      }, _react.default.createElement("input", {
-        type: "password",
-        id: "channel-login-password-input",
-        name: "password",
-        className: "input-text",
-        placeholder: "",
-        value: this.state.channelPassword,
-        onChange: this.handleInput
-      })))), this.state.error ? _react.default.createElement("p", {
-        className: "info-message--failure"
-      }, this.state.error) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Enter the name and password for your channel"), _react.default.createElement("div", {
-        className: "row row--wide"
-      }, _react.default.createElement("button", {
+      return _react.default.createElement("div", null, _react.default.createElement(ChannelLoginNameInput, {
+        channelName: this.state.channelName,
+        handleInput: this.handleInput
+      }), _react.default.createElement(ChannelLoginPasswordInput, {
+        channelPassword: this.state.channelPassword,
+        handleInput: this.handleInput
+      }), _react.default.createElement(_ErrorDisplay.default, {
+        errorMessage: this.state.error,
+        defaultMessage: 'Enter the name and password for your channel'
+      }), _react.default.createElement("button", {
         className: "button--primary",
         onClick: this.loginToChannel
-      }, "Authenticate")));
+      }, "Authenticate"));
     }
   }]);
 

client/build/containers/ChannelSelect/view.js

@@ -11,9 +11,19 @@ var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLogin
 
 var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
 
-var states = _interopRequireWildcard(require("../../constants/publish_channel_select_states"));
+var _publish_channel_select_states = require("../../constants/publish_channel_select_states");
 
-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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
+
+var _ChooseAnonymousPublishRadio = _interopRequireDefault(require("@components/ChooseAnonymousPublishRadio"));
+
+var _ChooseChannelPublishRadio = _interopRequireDefault(require("@components/ChooseChannelPublishRadio"));
+
+var _ErrorDisplay = _interopRequireDefault(require("@components/ErrorDisplay"));
+
+var _Label = _interopRequireDefault(require("@components/Label"));
+
+var _ChannelSelectDropdown = _interopRequireDefault(require("@components/ChannelSelectDropdown"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -69,49 +79,27 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement("form", null, _react.default.createElement("div", null, _react.default.createElement("input", {
-        type: "radio",
-        name: "anonymous-or-channel",
-        id: "anonymous-radio",
-        className: "input-radio",
-        value: "anonymous",
-        checked: !this.props.publishInChannel,
-        onChange: this.toggleAnonymousPublish
-      }), _react.default.createElement("label", {
-        className: "label label--pointer",
-        htmlFor: "anonymous-radio"
-      }, "Anonymous")), _react.default.createElement("div", null, _react.default.createElement("input", {
-        type: "radio",
-        name: "anonymous-or-channel",
-        id: "channel-radio",
-        className: "input-radio",
-        value: "in a channel",
-        checked: this.props.publishInChannel,
-        onChange: this.toggleAnonymousPublish
-      }), _react.default.createElement("label", {
-        className: "label label--pointer",
-        htmlFor: "channel-radio"
-      }, "In a channel")), this.props.channelError ? _react.default.createElement("p", {
-        className: "info-message--failure"
-      }, this.props.channelError) : _react.default.createElement("p", {
-        className: "info-message"
-      }, "Publish anonymously or in a channel")), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
-        className: "label",
-        htmlFor: "channel-name-select"
-      }, "Channel:")), _react.default.createElement("div", null, _react.default.createElement("select", {
-        type: "text",
-        id: "channel-name-select",
-        className: "select select--arrow",
-        value: this.props.selectedChannel,
-        onChange: this.handleSelection
-      }, this.props.loggedInChannelName && _react.default.createElement("option", {
-        value: this.props.loggedInChannelName,
-        id: "publish-channel-select-channel-option"
-      }, this.props.loggedInChannelName), _react.default.createElement("option", {
-        value: states.LOGIN
-      }, "Existing"), _react.default.createElement("option", {
-        value: states.CREATE
-      }, "New"))), this.props.selectedChannel === states.LOGIN && _react.default.createElement(_ChannelLoginForm.default, null), this.props.selectedChannel === states.CREATE && _react.default.createElement(_ChannelCreateForm.default, null)));
+      return _react.default.createElement("div", null, _react.default.createElement(_PublishDetailsRow.default, {
+        label: _react.default.createElement(_ChooseAnonymousPublishRadio.default, {
+          publishInChannel: this.props.publishInChannel,
+          toggleAnonymousPublish: this.toggleAnonymousPublish
+        }),
+        content: _react.default.createElement(_ChooseChannelPublishRadio.default, {
+          publishInChannel: this.props.publishInChannel,
+          toggleAnonymousPublish: this.toggleAnonymousPublish
+        })
+      }), _react.default.createElement(_ErrorDisplay.default, {
+        errorMessage: this.props.channelError,
+        defaultMessage: 'Publish anonymously or in a channel'
+      }), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement(_PublishDetailsRow.default, {
+        label: _react.default.createElement(_Label.default, {
+          value: 'Channel:'
+        }),
+        content: _react.default.createElement(_ChannelSelectDropdown.default, {
+          selectedChannel: this.props.selectedChannel,
+          handleSelection: this.handleSelection
+        }, "loggedInChannelName=", this.props.loggedInChannelName)
+      }), this.props.selectedChannel === _publish_channel_select_states.LOGIN && _react.default.createElement(_ChannelLoginForm.default, null), this.props.selectedChannel === _publish_channel_select_states.CREATE && _react.default.createElement(_ChannelCreateForm.default, null)));
     }
   }]);
 

client/build/containers/PublishMetadataInputs/view.js

@@ -7,7 +7,11 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ExpandingTextArea = _interopRequireDefault(require("@components/ExpandingTextArea"));
+var _PublishDescriptionInput = _interopRequireDefault(require("@components/PublishDescriptionInput"));
+
+var _PublishLicenseInput = _interopRequireDefault(require("@components/PublishLicenseInput"));
+
+var _PublishNsfwInput = _interopRequireDefault(require("@components/PublishNsfwInput"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -67,47 +71,15 @@ function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, this.props.showMetadataInputs && _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
-        htmlFor: "publish-license",
-        className: "label"
-      }, "Description:")), _react.default.createElement("div", null, _react.default.createElement(_ExpandingTextArea.default, {
-        id: "publish-description",
-        className: "textarea textarea--primary textarea--full-width",
-        rows: 1,
-        maxLength: 2000,
-        style: {
-          maxHeight: 200
-        },
-        name: "description",
-        placeholder: "Optional description",
-        value: this.props.description,
-        onChange: this.handleInput
-      }))), _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
-        htmlFor: "publish-license",
-        className: "label"
-      }, "License:")), _react.default.createElement("div", null, _react.default.createElement("select", {
-        type: "text",
-        name: "license",
-        id: "publish-license",
-        className: "select select--primary",
-        onChange: this.handleSelect
-      }, _react.default.createElement("option", {
-        value: " "
-      }, "Unspecified"), _react.default.createElement("option", {
-        value: "Public Domain"
-      }, "Public Domain"), _react.default.createElement("option", {
-        value: "Creative Commons"
-      }, "Creative Commons")))), _react.default.createElement("div", null, _react.default.createElement("div", null, _react.default.createElement("label", {
-        htmlFor: "publish-nsfw",
-        className: "label"
-      }, "Mature:")), _react.default.createElement("div", null, _react.default.createElement("input", {
-        className: "input-checkbox",
-        type: "checkbox",
-        id: "publish-nsfw",
-        name: "nsfw",
-        value: this.props.nsfw,
-        onChange: this.handleInput
-      })))), _react.default.createElement("button", {
+      return _react.default.createElement("div", null, this.props.showMetadataInputs && _react.default.createElement("div", null, _react.default.createElement(_PublishDescriptionInput.default, {
+        description: this.props.description,
+        handleInput: this.handleInput
+      }), _react.default.createElement(_PublishLicenseInput.default, {
+        handleSelect: this.handleSelect
+      }), _react.default.createElement(_PublishNsfwInput.default, {
+        nsfw: this.props.nsfw,
+        handleInput: this.handleInput
+      })), _react.default.createElement("button", {
         className: "button--secondary",
         onClick: this.toggleShowInputs
       }, this.props.showMetadataInputs ? 'less' : 'more'));

client/scss/_input.scss

@@ -50,7 +50,7 @@ option {
   padding-right: 1.5em;
 }
 
-.input-text--primary, .select--primary {
+.input-area--primary {
   border-bottom: 1px solid #9b9b9b;
 }
 
@@ -62,8 +62,8 @@ option {
   border-bottom: 1px solid #9b9b9b;
 }
 
-.textarea--primary:focus {
-  border-bottom: 1px solid #9b9b9b;
+.input-area--primary:focus {
+  border-bottom: 1px solid black;
 }
 
 .input-text--full-width, .textarea--full-width {

client/scss/all.scss

@@ -23,6 +23,7 @@
 @import 'components/_column';
 @import 'components/_row';
 @import 'components/_nav-bar';
+@import 'components/_publish-details-row';
 @import 'containers/_dropzone';
 @import 'containers/_publish-url-input';
 @import 'containers/_site-description';

client/scss/components/_publish-details-row.scss

@@ -0,0 +1,14 @@
+.publish-details-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.publish-details-label {
+  width: 30%;
+}
+.publish-details-content {
+  width: 70%;
+}

client/src/components/ChannelSelectDropdown/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { LOGIN, CREATE } from '../../constants/publish_channel_select_states';
+
+const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChannelName }) => {
+  return (
+    <select
+      id='channel-name-select'
+      className='select select--arrow'
+      value={selectedChannel}
+      onChange={handleSelection}>
+      { loggedInChannelName && (
+        <option
+          value={loggedInChannelName}
+          id='publish-channel-select-channel-option'
+        >
+          {loggedInChannelName}
+        </option>
+      )}
+      <option value={LOGIN}>Existing</option>
+      <option value={CREATE}>New</option>
+    </select>
+  );
+};
+
+export default ChannelSelectDropdown;

client/src/components/ChooseAnonymousPublishRadio/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ChooseAnonymousPublishRadio = ({ publishInChannel, toggleAnonymousPublish }) => {
+  return (
+    <div>
+      <input
+        type='radio'
+        name='anonymous-or-channel'
+        id='anonymous-radio'
+        className='input-radio'
+        value='anonymous'
+        checked={!publishInChannel}
+        onChange={toggleAnonymousPublish}
+      />
+      <label
+        className='label label--pointer'
+        htmlFor='anonymous-radio'
+      >
+        Anonymous
+      </label>
+    </div>
+  );
+};
+
+export default ChooseAnonymousPublishRadio;

client/src/components/ChooseChannelPublishRadio/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ChooseChannelPublishRadio = ({ publishInChannel, toggleAnonymousPublish }) => {
+  return (
+    <div>
+      <input
+        type='radio'
+        name='anonymous-or-channel'
+        id='channel-radio'
+        className='input-radio'
+        value='in a channel'
+        checked={publishInChannel}
+        onChange={toggleAnonymousPublish}
+      />
+      <label
+        className='label label--pointer'
+        htmlFor='channel-radio'
+      >
+        In a channel
+      </label>
+    </div>
+  );
+}
+
+export default ChooseChannelPublishRadio;

client/src/components/ErrorDisplay/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const ErrorDisplay = ({ errorMessage, defaultMessage }) => {
+  return (
+    <div>
+      { errorMessage ? (
+        <p className='info-message--failure'>{errorMessage}</p>
+      ) : (
+        <p className='info-message'>{defaultMessage}</p>
+      )}
+    </div>
+  );
+};
+
+export default ErrorDisplay;

client/src/components/Label/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Label = ({ value }) => {
+  return (
+    <label
+      className='label'
+    >
+      {value}
+    </label>
+  );
+}
+export default Label;

client/src/components/PublishDescriptionInput/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+import ExpandingTextArea from '@components/ExpandingTextArea';
+
+const PublishDescriptionInput = ({ description, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Description:'} />
+      }
+      content={
+        <ExpandingTextArea
+          id='publish-description'
+          className='textarea textarea--primary textarea--full-width'
+          rows={1}
+          maxLength={2000}
+          style={{ maxHeight: 200 }}
+          name='description'
+          placeholder='Optional description'
+          value={description}
+          onChange={handleInput}
+        />
+      }
+    />
+  );
+};
+
+export default PublishDescriptionInput;

client/src/components/PublishDetailsRow/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+class PublishDetailsRow extends React.Component {
+  render () {
+    return (
+      <div className={'publish-details-row'}>
+        <div className={'publish-details-label'}>{this.props.label}</div>
+        <div className={'publish-details-content'}>{this.props.content}</div>
+      </div>
+    );
+  }
+}
+
+export default PublishDetailsRow;

client/src/components/PublishLicenseInput/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+
+const PublishLicenseInput = ({ handleSelect }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'License:'} />
+      }
+      content={
+        <select
+          type='text'
+          name='license'
+          id='publish-license'
+          className='select select--primary'
+          onChange={handleSelect}
+        >
+          <option value=' '>Unspecified</option>
+          <option value='Public Domain'>Public Domain</option>
+          <option value='Creative Commons'>Creative Commons</option>
+        </select>
+      }
+    />
+  );
+};
+
+export default PublishLicenseInput;

client/src/components/PublishNsfwInput/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+
+const PublishNsfwInput = ({ nsfw, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Mature:'} />
+      }
+      content={
+        <input
+          className='input-checkbox'
+          type='checkbox'
+          id='publish-nsfw'
+          name='nsfw'
+          value={nsfw}
+          onChange={handleInput}
+        />
+      }
+    />
+  );
+};
+
+export default PublishNsfwInput;

client/src/containers/ChannelLoginForm/view.jsx

@@ -1,5 +1,55 @@
 import React from 'react';
 import request from '../../utils/request';
+import ErrorDisplay from '@components/ErrorDisplay';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import Label from '@components/Label';
+
+const ChannelLoginNameInput  = ({ channelName, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Name:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <span>@</span>
+          <input
+            type='text'
+            id='channel-login-name-input'
+            className='input-text'
+            name='name'
+            placeholder='Your Channel Name'
+            value={channelName}
+            onChange={handleInput}
+          />
+        </div>
+      }
+    />
+  );
+};
+
+const ChannelLoginPasswordInput  = ({ channelPassword, handleInput }) => {
+  return (
+    <PublishDetailsRow
+      label={
+        <Label value={'Password:'} />
+      }
+      content={
+        <div className='input-area--primary'>
+          <input
+            type='password'
+            id='channel-login-password-input'
+            name='password'
+            className='input-text'
+            placeholder=''
+            value={channelPassword}
+            onChange={handleInput}
+          />
+        </div>
+      }
+    />
+  );
+};
 
 class ChannelLoginForm extends React.Component {
   constructor (props) {
@@ -45,35 +95,21 @@ class ChannelLoginForm extends React.Component {
   }
   render () {
     return (
-      <form id='channel-login-form'>
-        <div className='row row--wide row--short'>
-          <div className='column column--3 column--sml-10'>
-            <label className='label' htmlFor='channel-login-name-input'>Name:</label>
-          </div><div className='column column--6 column--sml-10'>
-            <div className='input-text--primary flex-container--row flex-container--left-bottom'>
-              <span>@</span>
-              <input type='text' id='channel-login-name-input' className='input-text' name='name' placeholder='Your Channel Name' value={this.state.channelName} onChange={this.handleInput} />
-            </div>
-          </div>
-        </div>
-        <div className='row row--wide row--short'>
-          <div className='column column--3 column--sml-10'>
-            <label className='label' htmlFor='channel-login-password-input' >Password:</label>
-          </div><div className='column column--6 column--sml-10'>
-            <div className='input-text--primary'>
-              <input type='password' id='channel-login-password-input' name='password' className='input-text' placeholder='' value={this.state.channelPassword} onChange={this.handleInput} />
-            </div>
-          </div>
-        </div>
-        { this.state.error ? (
-          <p className='info-message--failure'>{this.state.error}</p>
-        ) : (
-          <p className='info-message'>Enter the name and password for your channel</p>
-        )}
-        <div className='row row--wide'>
-          <button className='button--primary' onClick={this.loginToChannel}>Authenticate</button>
-        </div>
-      </form>
+      <div>
+        <ChannelLoginNameInput
+          channelName={this.state.channelName}
+          handleInput={this.handleInput}
+        />
+        <ChannelLoginPasswordInput
+          channelPassword={this.state.channelPassword}
+          handleInput={this.handleInput}
+        />
+        <ErrorDisplay
+          errorMessage={this.state.error}
+          defaultMessage={'Enter the name and password for your channel'}
+        />
+        <button className='button--primary' onClick={this.loginToChannel}>Authenticate</button>
+      </div>
     );
   }
 }

client/src/containers/ChannelSelect/view.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import ChannelLoginForm from '@containers/ChannelLoginForm';
 import ChannelCreateForm from '@containers/ChannelCreateForm';
-import * as states from '../../constants/publish_channel_select_states';
+import { LOGIN, CREATE } from '../../constants/publish_channel_select_states';
+import PublishDetailsRow from '@components/PublishDetailsRow';
+import ChooseAnonymousPublishRadio from '@components/ChooseAnonymousPublishRadio';
+import ChooseChannelPublishRadio from '@components/ChooseChannelPublishRadio';
+import ErrorDisplay from '@components/ErrorDisplay';
+import Label from '@components/Label';
+import ChannelSelectDropdown from '@components/ChannelSelectDropdown';
 
 class ChannelSelect extends React.Component {
   constructor (props) {
@@ -24,35 +30,41 @@ class ChannelSelect extends React.Component {
   render () {
     return (
       <div>
-        <form>
-          <div>
-            <input type='radio' name='anonymous-or-channel' id='anonymous-radio' className='input-radio' value='anonymous' checked={!this.props.publishInChannel} onChange={this.toggleAnonymousPublish} />
-            <label className='label label--pointer' htmlFor='anonymous-radio'>Anonymous</label>
-          </div>
-          <div>
-            <input type='radio' name='anonymous-or-channel' id='channel-radio' className='input-radio' value='in a channel' checked={this.props.publishInChannel} onChange={this.toggleAnonymousPublish} />
-            <label className='label label--pointer' htmlFor='channel-radio'>In a channel</label>
-          </div>
-          { this.props.channelError ? (
-            <p className='info-message--failure'>{this.props.channelError}</p>
-          ) : (
-            <p className='info-message'>Publish anonymously or in a channel</p>
-          )}
-        </form>
+        <PublishDetailsRow
+          label={
+            <ChooseAnonymousPublishRadio
+              publishInChannel={this.props.publishInChannel}
+              toggleAnonymousPublish={this.toggleAnonymousPublish}
+            />
+          }
+          content={
+            <ChooseChannelPublishRadio
+              publishInChannel={this.props.publishInChannel}
+              toggleAnonymousPublish={this.toggleAnonymousPublish}
+            />
+          }
+        />
+        <ErrorDisplay
+          errorMessage={this.props.channelError}
+          defaultMessage={'Publish anonymously or in a channel'}
+        />
+
         { this.props.publishInChannel && (
           <div>
-            <div>
-              <label className='label' htmlFor='channel-name-select'>Channel:</label>
-            </div>
-            <div>
-              <select type='text' id='channel-name-select' className='select select--arrow' value={this.props.selectedChannel} onChange={this.handleSelection}>
-                { this.props.loggedInChannelName && <option value={this.props.loggedInChannelName} id='publish-channel-select-channel-option'>{this.props.loggedInChannelName}</option> }
-                <option value={states.LOGIN}>Existing</option>
-                <option value={states.CREATE}>New</option>
-              </select>
-            </div>
-            { (this.props.selectedChannel === states.LOGIN) && <ChannelLoginForm /> }
-            { (this.props.selectedChannel === states.CREATE) && <ChannelCreateForm /> }
+            <PublishDetailsRow
+              label={
+                <Label value={'Channel:'} />
+              }
+              content={
+                <ChannelSelectDropdown
+                  selectedChannel={this.props.selectedChannel}
+                  handleSelection={this.handleSelection}>
+                  loggedInChannelName={this.props.loggedInChannelName}
+                </ChannelSelectDropdown>
+              }
+            />
+            { (this.props.selectedChannel === LOGIN) && <ChannelLoginForm /> }
+            { (this.props.selectedChannel === CREATE) && <ChannelCreateForm /> }
           </div>
         )}
       </div>

client/src/containers/PublishMetadataInputs/view.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import ExpandingTextArea from '@components/ExpandingTextArea';
+import PublishDescriptionInput from '@components/PublishDescriptionInput';
+import PublishLicenseInput from '@components/PublishLicenseInput';
+import PublishNsfwInput from '@components/PublishNsfwInput';
 
 class PublishMetadataInputs extends React.Component {
   constructor (props) {
@@ -27,58 +29,19 @@ class PublishMetadataInputs extends React.Component {
       <div>
         {this.props.showMetadataInputs && (
           <div>
-            <div>
-              <div>
-                <label htmlFor='publish-license' className='label'>Description:</label>
-              </div>
-              <div>
-                <ExpandingTextArea
-                  id='publish-description'
-                  className='textarea textarea--primary textarea--full-width'
-                  rows={1}
-                  maxLength={2000}
-                  style={{ maxHeight: 200 }}
-                  name='description'
-                  placeholder='Optional description'
-                  value={this.props.description}
-                  onChange={this.handleInput} />
-              </div>
-            </div>
+            <PublishDescriptionInput
+              description={this.props.description}
+              handleInput={this.handleInput}
+            />
 
-            <div>
-              <div>
-                <label htmlFor='publish-license' className='label'>License:</label>
-              </div>
-              <div>
-                <select
-                  type='text'
-                  name='license'
-                  id='publish-license'
-                  className='select select--primary'
-                  onChange={this.handleSelect}
-                >
-                  <option value=' '>Unspecified</option>
-                  <option value='Public Domain'>Public Domain</option>
-                  <option value='Creative Commons'>Creative Commons</option>
-                </select>
-              </div>
-            </div>
+            <PublishLicenseInput
+              handleSelect={this.handleSelect}
+            />
 
-            <div>
-              <div>
-                <label htmlFor='publish-nsfw' className='label'>Mature:</label>
-              </div>
-              <div>
-                <input
-                  className='input-checkbox'
-                  type='checkbox'
-                  id='publish-nsfw'
-                  name='nsfw'
-                  value={this.props.nsfw}
-                  onChange={this.handleInput}
-                />
-              </div>
-            </div>
+            <PublishNsfwInput
+              nsfw={this.props.nsfw}
+              handleInput={this.handleInput}
+            />
           </div>
         )}
         <button

index.js

@@ -85,6 +85,7 @@ function Server () {
     // sync sequelize
     createDatabaseIfNotExists()
       .then(() => {
+        logger.info('getting LBC balance from lbrynet...');
         return getWalletBalance();
       })
       .then(balance => {