Clean up container/component relationship

client/src/js/components/pages/Chat.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import ChatTitle from '../ChatTitle';
+import Search from '../Search';
+import MessageBox from '../MessageBox';
+import MessageInput from '../MessageInput';
+import UserList from '../UserList';
+
+export default class Chat extends Component {
+  handleCloseClick = () => {
+    const { tab, part, closePrivateChat, disconnect } = this.props;
+
+    if (tab.isChannel()) {
+      part([tab.name], tab.server);
+    } else if (tab.name) {
+      closePrivateChat(tab.server, tab.name);
+    } else {
+      disconnect(tab.server);
+    }
+  };
+
+  handleSearch = phrase => {
+    const { tab, searchMessages } = this.props;
+    if (tab.isChannel()) {
+      searchMessages(tab.server, tab.name, phrase);
+    }
+  };
+
+  handleNickClick = nick => {
+    const { tab, openPrivateChat, select } = this.props;
+    openPrivateChat(tab.server, nick);
+    select(tab.server, nick);
+  };
+
+  render() {
+    const {
+      channel,
+      currentInputHistoryEntry,
+      hasMoreMessages,
+      messages,
+      nick,
+      search,
+      showUserList,
+      tab,
+      title,
+      users,
+
+      fetchMessages,
+      inputActions,
+      runCommand,
+      sendMessage,
+      toggleSearch,
+      toggleUserList
+    } = this.props;
+
+    let chatClass;
+    if (tab.isChannel()) {
+      chatClass = 'chat-channel';
+    } else if (tab.name) {
+      chatClass = 'chat-private';
+    } else {
+      chatClass = 'chat-server';
+    }
+
+    return (
+      <div className={chatClass}>
+        <ChatTitle
+          channel={channel}
+          tab={tab}
+          title={title}
+          onCloseClick={this.handleCloseClick}
+          onToggleSearch={toggleSearch}
+          onToggleUserList={toggleUserList}
+        />
+        <Search
+          search={search}
+          onSearch={this.handleSearch}
+        />
+        <MessageBox
+          hasMoreMessages={hasMoreMessages}
+          messages={messages}
+          tab={tab}
+          onFetchMore={fetchMessages}
+          onNickClick={this.handleNickClick}
+        />
+        <MessageInput
+          currentHistoryEntry={currentInputHistoryEntry}
+          nick={nick}
+          tab={tab}
+          onCommand={runCommand}
+          onMessage={sendMessage}
+          {...inputActions}
+        />
+        <UserList
+          showUserList={showUserList}
+          users={users}
+          onNickClick={this.handleNickClick}
+        />
+      </div>
+    );
+  }
+}

client/src/js/components/pages/Connect.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import Navicon from '../../containers/Navicon';
+
+export default class Connect extends Component {
+  state = {
+    showOptionals: false,
+    passwordTouched: false
+  };
+
+  handleSubmit = e => {
+    const { connect, select, join } = this.props;
+
+    e.preventDefault();
+
+    let address = e.target.address.value.trim();
+    const nick = e.target.nick.value.trim();
+    const channels = e.target.channels.value.split(',').map(s => s.trim()).filter(s => s);
+    const opts = {
+      name: e.target.name.value.trim(),
+      tls: e.target.ssl.checked
+    };
+
+    if (this.state.showOptionals) {
+      opts.realname = e.target.realname.value.trim();
+      opts.username = e.target.username.value.trim();
+
+      if (this.state.passwordTouched) {
+        opts.password = e.target.password.value.trim();
+      }
+    }
+
+    if (address.indexOf('.') > 0 && nick) {
+      connect(address, nick, opts);
+
+      const i = address.indexOf(':');
+      if (i > 0) {
+        address = address.slice(0, i);
+      }
+
+      select(address);
+
+      if (channels.length > 0) {
+        join(channels, address);
+      }
+    }
+  };
+
+  handleShowClick = () => {
+    this.setState({ showOptionals: !this.state.showOptionals });
+  };
+
+  handlePasswordChange = () => {
+    this.setState({ passwordTouched: true });
+  };
+
+  render() {
+    const { defaults } = this.props;
+    let optionals = null;
+
+    if (this.state.showOptionals) {
+      optionals = (
+        <div>
+          <input name="username" type="text" placeholder="Username" />
+          <input
+            name="password"
+            type="password"
+            placeholder="Password"
+            defaultValue={defaults.password ? '      ' : null}
+            onChange={this.handlePasswordChange}
+          />
+          <input name="realname" type="text" placeholder="Realname" />
+        </div>
+      );
+    }
+
+    return (
+      <div className="connect">
+        <Navicon />
+        <form className="connect-form" onSubmit={this.handleSubmit}>
+          <h1>Connect</h1>
+          <input name="name" type="text" placeholder="Name" defaultValue={defaults.name} />
+          <input name="address" type="text" placeholder="Address" defaultValue={defaults.address} />
+          <input name="nick" type="text" placeholder="Nick" />
+          <input
+            name="channels"
+            type="text"
+            placeholder="Channels"
+            defaultValue={defaults.channels ? defaults.channels.join(',') : null}
+          />
+          {optionals}
+          <p>
+            <label htmlFor="ssl"><input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL</label>
+            <i className="icon-ellipsis" onClick={this.handleShowClick} />
+          </p>
+          <input type="submit" value="Connect" />
+        </form>
+      </div>
+    );
+  }
+}

client/src/js/components/pages/Settings.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Navicon from '../../containers/Navicon';
+import FileInput from '../FileInput';
+
+const Settings = ({ settings, onCertChange, onKeyChange, uploadCert }) => {
+  const status = settings.get('uploadingCert') ? 'Uploading...' : 'Upload';
+  const error = settings.get('certError');
+
+  return (
+    <div className="settings">
+      <Navicon />
+      <h1>Settings</h1>
+      <h2>Client Certificate</h2>
+      <div>
+        <p>Certificate</p>
+        <FileInput
+          name={settings.get('certFile') || 'Select Certificate'}
+          onChange={onCertChange}
+        />
+      </div>
+      <div>
+        <p>Private Key</p>
+        <FileInput
+          name={settings.get('keyFile') || 'Select Key'}
+          onChange={onKeyChange}
+        />
+      </div>
+      <button onClick={uploadCert}>{status}</button>
+      { error ? <p className="error">{error}</p> : null }
+    </div>
+  );
+};
+
+export default Settings;