packages/client: Use bloomer in login & register forms

packages/client/src/components/Input.tsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import {Control, Field, Input as I, Label} from 'bloomer'
+import {IconType} from 'react-icons'
 
 export interface IInputProps {
   name: string
@@ -7,6 +9,8 @@ export interface IInputProps {
   onChange?: (name: this['name'], value: string) => void
   placeholder?: string
   readOnly?: boolean
+  label: string
+  Icon?: IconType
 }
 
 export class Input extends React.PureComponent<IInputProps> {
@@ -16,15 +20,25 @@ export class Input extends React.PureComponent<IInputProps> {
     }
   }
   render() {
+    const {Icon} = this.props
     return (
-      <input
-        name={this.props.name}
-        type={this.props.type}
-        value={this.props.value}
-        onChange={this.handleChange}
-        placeholder={this.props.placeholder}
-        readOnly={!!this.props.readOnly}
-      />
+      <Field>
+        <Label>{this.props.label}</Label>
+        <Control hasIcons>
+          <I
+            className='input'
+            name={this.props.name}
+            type={this.props.type}
+            value={this.props.value}
+            onChange={this.handleChange}
+            placeholder={this.props.placeholder}
+            readOnly={!!this.props.readOnly}
+          />
+          {Icon && <span className='icon is-left is-small'>
+            <Icon />
+          </span>}
+        </Control>
+      </Field>
     )
   }
 }

packages/client/src/login/LoginForm.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {ICredentials, IUser} from '@rondo/common'
 import {Input} from '../components/Input'
 import {Redirect} from '../components/Redirect'
+import {FaUser, FaLock} from 'react-icons/fa'
 
 export interface ILoginFormProps {
   error?: string
@@ -23,6 +24,8 @@ export class LoginForm extends React.PureComponent<ILoginFormProps> {
       <form onSubmit={this.props.onSubmit}>
         <p className='error'>{this.props.error}</p>
         <Input
+          Icon={FaUser}
+          label='Username'
           name='username'
           type='text'
           onChange={this.props.onChange}
@@ -30,13 +33,16 @@ export class LoginForm extends React.PureComponent<ILoginFormProps> {
           placeholder='Username'
         />
         <Input
+          Icon={FaLock}
+          label='Password'
           name='password'
           type='password'
           onChange={this.props.onChange}
           value={this.props.data.password}
           placeholder='Password'
         />
-        <Input
+        <input
+          className='button is-primary'
           name='submit'
           type='submit'
           value='Log In'

packages/client/src/login/RegisterForm.tsx

@@ -21,6 +21,7 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
       <form onSubmit={this.props.onSubmit}>
         <p className='error'>{this.props.error}</p>
         <Input
+          label='Username'
           name='username'
           type='email'
           onChange={this.props.onChange}
@@ -28,16 +29,18 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
           placeholder='Email'
         />
         <Input
+          label='Password'
           name='password'
           type='password'
           onChange={this.props.onChange}
           value={this.props.data.password}
           placeholder='Password'
         />
-        <Input
+        <input
+          className='button is-primary'
           name='submit'
           type='submit'
-          value='Register'
+          value='Log In'
         />
       </form>
     )