From 905501e0533080168b344efc328d9ff621bf22ea Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Mon, 18 Mar 2019 13:47:47 +0500
Subject: [PATCH] packages/client: Use bloomer in login & register forms

---
 packages/client/src/components/Input.tsx   | 30 ++++++++++++++++------
 packages/client/src/login/LoginForm.tsx    |  8 +++++-
 packages/client/src/login/RegisterForm.tsx |  7 +++--
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/Input.tsx b/packages/client/src/components/Input.tsx
index cecae3c..f2c9949 100644
--- a/packages/client/src/components/Input.tsx
+++ b/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>
     )
   }
 }
diff --git a/packages/client/src/login/LoginForm.tsx b/packages/client/src/login/LoginForm.tsx
index 5695186..1c1775a 100644
--- a/packages/client/src/login/LoginForm.tsx
+++ b/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'
diff --git a/packages/client/src/login/RegisterForm.tsx b/packages/client/src/login/RegisterForm.tsx
index 92fa075..3a6a98a 100644
--- a/packages/client/src/login/RegisterForm.tsx
+++ b/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>
     )