WIP: Use flexbox for Login

app/components/AlignedLabelledInput.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Label from './Label';
+import TextInput from './TextInput';
+
+const style = {
+  display: 'flex',
+  alignItems: 'stretch',
+  width: '100%',
+  flexWrap: 'wrap',
+  backgroundColor: 'yellow'
+};
+
+const labelStyle = {
+  flex: 1,
+  display: 'flex',
+  backgroundColor: 'red',
+  justifyContent: 'center'
+};
+
+export default () => <div style={style}>
+  <div style={labelStyle}>
+    <Label value="Username" />
+  </div>
+  <TextInput />
+  <div style={labelStyle}>
+    <Label />
+  </div>
+</div>;

app/components/Button.jsx

@@ -1,29 +1,23 @@
 import React from 'react';
 
-class Button extends React.Component {
-  render() {
-    const style = {
-      WebkitAppearance: 'none',
-      fontFamily: 'inherit',
-      fontSize: '1em',
-      fontWeight: '300',
-      color: '#fff',
-      background: '#00A2FF',
-      padding: '0.6em',
-      paddingLeft: '1em',
-      paddingRight: '1em',
-      margin: '0.2em',
-      borderRadius: '0.2em',
-      border: 'thin solid #00A2FF',
-      cursor: 'pointer',
-      float: 'left',
-      clear: 'both'
-    };
-
-    return <button style={style} onclick={this.props.onclick}>
-      {this.props.value}
-    </button>;
-  }
-}
+const style = {
+  WebkitAppearance: 'none',
+  fontFamily: 'inherit',
+  fontSize: '1em',
+  fontWeight: '300',
+  color: '#fff',
+  background: '#00A2FF',
+  padding: '0.6em',
+  paddingLeft: '1em',
+  paddingRight: '1em',
+  margin: '0.2em',
+  borderRadius: '0.2em',
+  border: 'thin solid #00A2FF',
+  cursor: 'pointer',
+};
 
-export default Button;
+export default ({ onclick, value }) => <button
+  style={style}
+  onclick={onclick}>
+  {value}
+</button>;

app/components/Label.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
 
-class TextInput extends React.Component {
-  render() {
-    const style = {
-      WebkitAppearance: 'none',
-      fontFamily: 'inherit',
-      fontWeight: '400',
-      padding: '0.2em',
-      paddingLeft: '0.4em',
-      paddingRight: '0.4em',
-      marginLeft: '-7em',
-      float: 'left',
-      clear: 'both',
-    };
-    return <label htmlFor={this.props.htmlFor} style={style}>{this.props.value}</label>;
-  }
-}
+const style = {
+  flex: 1,
+  textAlign: 'right',
+  WebkitAppearance: 'none',
+  fontFamily: 'inherit',
+  fontWeight: '400',
+  padding: '0.2em',
+  paddingLeft: '0.4em',
+  paddingRight: '0.4em',
+};
 
-export default TextInput;
+export default ({ htmlFor, value }) => <label 
+  htmlFor={htmlFor} 
+  style={style}>
+  {value}
+</label>;

app/components/LabelledTextInput.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import uuid from 'uuid';
+import Label from './Label';
+import TextInput from './TextInput';
+
+const style = {
+  flex: 1,
+  flexWrap: 'wrap',
+};
+
+export default (props) => {
+  const id = uuid.v4();
+  return (<div style={style}>
+    <Label htmlFor={id} value={props.labelValue} />
+    <TextInput id={id}
+      name={props.name}
+      placeholder={props.placeholder}
+      defaultValue={props.defaultValue}
+      onChange={props.onChange}
+      type={props.type}
+    />
+  </div>);
+};

app/components/SignInForm.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
-import TextInput from './TextInput.jsx';
-import Label from './Label.jsx';
+import TextInput from './TextInput';
+import Label from './Label';
+import LabelledTextInput from './LabelledTextInput';
 import Button from './Button.jsx';
 import {signin} from '../actions';
 
@@ -31,35 +32,35 @@ class SignInForm extends React.Component {
 
   render() {
     const style = {
-      margin: 'auto',
       marginTop: '1.6em',
-      marginBottom: '10em'
+      marginBottom: '10em',
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: '90%'
     };
     return (
-      <form onSubmit={this.login} style={style}>
-        <Label htmlFor="username" value="Username" />
-        <TextInput id="username"
+        <form onSubmit={this.login} style={style}>
+
+        <LabelledTextInput
+          labelValue="Username"
           name="username"
           placeholder="Username"
           onChange={this.onChange}
-          label="Username"
           type="email"
         />
-        <Label htmlFor="password" value="Password" />
-        <TextInput id="password" 
-          name="password" 
-          placeholder="Password" 
-          onChange={this.onChange} 
-          label="Password"
+        <LabelledTextInput
+          labelValue="Password"
+          name="password"
+          placeholder="Password"
+          onChange={this.onChange}
           type="password"
         />
-        <Label htmlFor="server" value="Zulip Server" />
-        <TextInput id="server" 
-          name="realm" 
-          placeholder="https://recurse.zulipchat.com" 
-          defaultValue="https://recurse.zulipchat.com" 
-          onChange={this.onChange} 
-          label="Zulip Server"
+        <LabelledTextInput
+          labelValue="Zulip Server"
+          name="realm"
+          placeholder="https://recurse.zulipchat.com"
+          defaultValue="https://recurse.zulipchat.com"
+          onChange={this.onChange}
           type="url"
         />
         <Button value="Sign In" onclick={this.login} />

app/components/SignInPage.jsx

@@ -1,21 +1,28 @@
 import React from 'react';
-import SignInForm from './SignInForm.jsx';
-import Heading from './Heading.jsx';
-import Subheading from './Subheading.jsx';
+import AlignedLabelledInput from './AlignedLabelledInput';
+import SignInForm from './SignInForm';
+import Heading from './Heading';
+import Subheading from './Subheading';
 
 class SignInPage extends React.Component {
   render() {
     const style = {
       height: '100%',
       display: 'flex',
+      flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
       flexDirection: 'column'
     };
+    //<Label value="Username" />
+
     return (
       <div style={style}>
+
         <Heading text='Welcome to Tulip' />
         <Subheading text='An experimental Zulip client' />
+        <AlignedLabelledInput />
+        <AlignedLabelledInput />
         <SignInForm />
       </div>
     );

app/components/TextInput.jsx

@@ -5,6 +5,7 @@ class TextInput extends React.Component {
     const base = this.props.size || 1;
     const size = (ratio=1) => base *  ratio + 'em';
     const style = {
+      height: size(1.8),
       WebkitAppearance: 'none',
       fontFamily: 'inherit',
       fontWeight: '300',
@@ -18,7 +19,6 @@ class TextInput extends React.Component {
       paddingRight: size(0.4),
       marginRight: size(0.1),
       borderRadius: size(0.2),
-      float: 'left'
     };
     let type = this.props.type;
     if (!type) type = "text";

package.json

@@ -42,6 +42,7 @@
     "redux": "^3.5.2",
     "redux-thunk": "^2.1.0",
     "throng": "^4.0.0",
+    "uuid": "^3.1.0",
     "webpack": "^1.13.2",
     "zulip-js": "^1.0.11"
   },