Implement client connect form defaults

client/gulpfile.js

@@ -1,5 +1,6 @@
 var path = require('path');
 var exec = require('child_process').exec;
+var url = require('url');
 
 var gulp = require('gulp');
 var gutil = require('gulp-util');
@@ -10,6 +11,7 @@ var gzip = require('gulp-gzip');
 var concat = require('gulp-concat');
 var cache = require('gulp-cached');
 var express = require('express');
+var proxy = require('express-http-proxy');
 var webpack = require('webpack');
 
 gulp.task('html', function() {
@@ -64,8 +66,8 @@ function compress() {
     .pipe(gulp.dest('dist/gz'));
 }
 
-gulp.task('gzip', ['html', 'css', 'js', 'fonts'], compress);
-gulp.task('gzip:dev', ['html', 'css', 'fonts'], compress);
+gulp.task('gzip', ['css', 'js', 'fonts'], compress);
+gulp.task('gzip:dev', ['css', 'fonts'], compress);
 
 gulp.task('bindata', ['gzip', 'config'], function(cb) {
   exec('go-bindata -nomemcopy -nocompress -pkg assets -o ../assets/bindata.go -prefix "dist/gz" dist/gz/...', cb);
@@ -75,8 +77,7 @@ gulp.task('bindata:dev', ['gzip:dev', 'config'], function(cb) {
   exec('go-bindata -debug -pkg assets -o ../assets/bindata.go -prefix "dist/gz" dist/gz/...', cb);
 });
 
-gulp.task('dev', ['html', 'css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'], function() {
-  gulp.watch('src/*.html', ['html']);
+gulp.task('dev', ['css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'], function() {
   gulp.watch('src/css/*.css', ['css']);
 
   var config = require('./webpack.config.dev.js');
@@ -92,9 +93,11 @@ gulp.task('dev', ['html', 'css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'],
 
   app.use('/', express.static('dist'));
 
-  app.get('*', function (req, res) {
-    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
-  });
+  app.use('*', proxy('localhost:1337', {
+    forwardPath: function(req, res) {
+      return url.parse(req.url).path;
+    }
+  }));
 
   app.listen(3000, function (err) {
     if (err) {
@@ -106,6 +109,6 @@ gulp.task('dev', ['html', 'css', 'fonts', 'config', 'gzip:dev', 'bindata:dev'],
   });
 });
 
-gulp.task('build', ['html', 'css', 'js', 'fonts', 'config', 'gzip', 'bindata']);
+gulp.task('build', ['css', 'js', 'fonts', 'config', 'gzip', 'bindata']);
 
 gulp.task('default', ['dev']);

client/package.json

@@ -17,6 +17,7 @@
     "eslint-loader": "^1.2.0",
     "eslint-plugin-react": "^3.15.0",
     "express": "^4.13.3",
+    "express-http-proxy": "^0.6.0",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "3.1.0",
     "gulp-cached": "^1.1.0",

client/src/css/style.css

@@ -156,11 +156,11 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 .connect {
   display: flex;
   justify-content: center;
-  align-items: center;
   position: absolute;
   top: 0;
   width: 100%;
   bottom: 0;
+  overflow: auto;
 }
 
 .connect .navicon, .settings .navicon {
@@ -169,6 +169,12 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   left: 0;
 }
 
+.connect-form {
+  margin: auto 0;
+  padding-top: 20px;
+  width: 300px;
+}
+
 .connect-form h1 {
   margin-bottom: 15px;
   text-align: center;
@@ -177,17 +183,19 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 .connect-form input {
   display: block;
   margin: 5px 0px;
-  padding: 10px;
+  padding: 15px;
   border: none;
 }
 
 .connect-form input[type="submit"],
-.connect-form input[type="text"] {
-  width: 200px;
+.connect-form input[type="text"],
+.connect-form input[type="password"] {
+  width: 100%;
 }
 
 .connect-form input[type="submit"] {
   height: 50px;
+  margin-bottom: 20px;
   font-family: Montserrat, sans-serif;
   background: #6BB758;
   color: #FFF;
@@ -569,4 +577,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   .search {
     right: 0;
   }
+
+  .connect-form {
+    width: 100%;
+    margin: auto 50px;
+    max-width: 400px;
+  }
 }

client/src/js/containers/Connect.js

@@ -51,13 +51,19 @@ class Connect extends Component {
   };
 
   render() {
+    const defaults = window.__ENV__.defaults;
     let optionals = null;
 
     if (this.state.showOptionals) {
       optionals = (
         <div>
           <input name="username" type="text" placeholder="Username" />
-          <input name="password" type="text" placeholder="Password" />
+          <input
+            name="password"
+            type="password"
+            placeholder="Password"
+            defaultValue={defaults.password}
+          />
           <input name="realname" type="text" placeholder="Realname" />
         </div>
       );
@@ -68,13 +74,18 @@ class Connect extends Component {
         <Navicon />
         <form ref="form" className="connect-form" onSubmit={this.handleSubmit}>
           <h1>Connect</h1>
-          <input name="name" type="text" placeholder="Name" defaultValue="Freenode" />
-          <input name="address" type="text" placeholder="Address" defaultValue="irc.freenode.net" />
+          <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" />
+          <input
+            name="channels"
+            type="text"
+            placeholder="Channels"
+            defaultValue={defaults.channels ? defaults.channels.join(',') : null}
+          />
           {optionals}
           <p>
-            <label><input name="ssl" type="checkbox" />SSL</label>
+            <label><input name="ssl" type="checkbox" defaultChecked={defaults.ssl} />SSL</label>
             <i className="icon-ellipsis" onClick={this.handleShowClick}></i>
           </p>
           <input type="submit" value="Connect" />