* Implements better listing & css

* Keypress event(Enter) done

src/app/SearchField.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import PawnedListItem from './PawnedListItem';
+import './SearchField.css';
 
 export default class SearchField extends Component {
 
@@ -8,34 +9,48 @@ export default class SearchField extends Component {
         super(props);
         this.state = {
             isPawnedEmail: '',
-            pawnedList: []
+            pawnedList: [],
+            intiated: false,
+            displayMessage: '',
+            displayMessageStyle: ''
         };
 
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
         this.checkIsPawned = this.checkIsPawned.bind(this);
-        this.videoItems = [];
+        this.breachItems = [];
+        this.displayMessage;
     }
 
     render() {
 
         if (this.state.pawnedList.length > 0) {
-            this.videoItems = this.state.pawnedList.map((breach) => {
+            this.breachItems = this.state.pawnedList.map((breach) => {
                 return <PawnedListItem key={breach.Domain} breach={breach} />
             });
+        } else {
+            this.breachItems = [];
         }
 
         return (
             <div className="searchWrapper">
                 <div className="search">
                     <div className="title">
-                        <label>isPawned</label>
+                        <label class="hover-field">
+                            isPawned
+                        <span>Check wheather your email address is Pawned anywhere</span>
+                        </label>
                     </div>
-                    <input className="email-field pulse" type="email" placeholder="An Email Id" onChange={(event) => this.setState({ isPawnedEmail: event.target.value })} required onFocus={this.onFocus} onBlur={this.onBlur} />
-                    <button className="kool-button-black check-button" onClick={this.checkIsPawned}>Check</button>
+                    <input className="email-field pulse" type="email" placeholder="Enter an Email ID" onKeyPress={(event) => { if (event.key == 'Enter') this.checkIsPawned.call() }} onChange={(event) => this.setState({ isPawnedEmail: event.target.value })} required onFocus={this.onFocus} onBlur={this.onBlur} />
+                    <button className="kool-button-black check-button hover-field" onClick={this.checkIsPawned}>Check
+                    <span>Click to know</span>
+                    </button>
+                </div>
+                <div className={`display-message ${this.state.displayMessageStyle}`}>
+                    {this.state.displayMessage}
                 </div>
                 <div className="searchResults">
-                {this.videoItems}
+                    {this.breachItems}
                 </div>
             </div>
         );
@@ -55,17 +70,29 @@ export default class SearchField extends Component {
 
     checkIsPawned() {
         // axios.get()
+        this.setState({
+            intiated: true
+        });
         console.log(this.state.isPawnedEmail)
         axios({
             method: 'get',
             url: `https://haveibeenpwned.com/api/v2/breachedaccount/${this.state.isPawnedEmail}`
         }).then((response) => {
-            console.log(response);
+            const breachList = response.data;
             this.setState({
-                pawnedList: response.data
-            })
+                pawnedList: response.data,
+                displayMessage: `Your email address is Pawned on ${breachList.length} websites`,
+                displayMessageStyle: 'not-safe-message'
+            });
         }).catch((error) => {
             console.log('Error ', error);
+            if (error.response.status === 404) {
+                this.setState({
+                    displayMessage: `You are safe now.`,
+                    displayMessageStyle: 'safe-message',
+                    pawnedList: []
+                });
+            }
         })
     }
 }