* Implements better listing & css

* Keypress event(Enter) done

src/app/PawnedListItem.css

@@ -0,0 +1,18 @@
+
+.breach-name {
+    font-size: 19px;
+    color: red;
+    font-weight: bold;
+}
+
+
+.breach-description a{
+    color: #565656;
+    font-weight: bold;
+}
+
+
+
+.breach {
+    padding-bottom: 10px;
+}

src/app/PawnedListItem.js

@@ -1,16 +1,23 @@
-import React,{Component} from 'react';
+import React, { Component } from 'react';
+import renderHTML from 'react-render-html';
+import './PawnedListItem.css';
+export default class PawnedListItem extends Component {
 
-export default class PawnedListItem extends Component{
-
-    constructor(props){
+    constructor(props) {
         super(props);
     }
 
-    render(){
-        return(
-           <div>
-               {this.props.breach.Description}
-           </div>
+    render() {
+        return (
+            <div className="breach">
+                <div className="breach-name">
+                    {this.props.breach.Domain}
+                </div>
+                <div className="breach-description">
+                    {renderHTML(this.props.breach.Description)}
+                </div>
+
+            </div>
         )
     }
 }

src/app/SearchField.css

@@ -0,0 +1,75 @@
+.searchWrapper{
+    display: flex;
+    width: 500px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column
+}
+
+.search{
+    
+}
+
+.title{
+    font-size: 45px;
+}
+
+.check-button{
+    height: 52px;
+    padding-bottom: 7px;
+    margin-left: 11px;
+}
+
+.display-message{
+    padding-top: 13px;
+}
+
+.safe-message{
+    color: green;
+}
+
+.not-safe-message{
+    color: #ff4a4a;
+}
+
+.searchResults {
+    padding-top: 21px;
+    max-height: 400px;
+    overflow: auto;
+    margin: 0 .4rem;
+}
+
+.searchResults div{margin: 5px 0}
+
+.search .email-field{
+    border: 1px solid #000;
+    height: 46px;
+    width: 375px;
+    font-family: RMTyperighter;
+    font-size: 18px;
+    padding: 3px;
+}
+
+.hover-field {
+    text-decoration: none
+}
+.hover-field:hover {
+    position: relative
+}
+.hover-field span {
+    display: none;
+    font-size: 12px;
+    color: #000;
+}
+.hover-field:hover span {
+    border: #8f8e8e 1px solid;
+    padding: 5px 20px 5px 5px;
+    display: block;
+    z-index: 100;
+    left: -6px;
+    margin: 10px;
+    width: 250px;
+    position: absolute;
+    top: -46px;
+    text-decoration: none;
+}

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: []
+                });
+            }
         })
     }
 }

src/css/style.css

@@ -48,38 +48,3 @@ footer,header {
     padding: .75em 2em;
     cursor: pointer;
 }
-.searchWrapper{
-    display: flex;
-    width: 500px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column
-}
-.search{
-    
-}
-.searchResults {
-    padding-top: 21px;
-    max-height: 400px;
-    overflow: auto;
-    margin: 0 .4rem;
-}
-.searchResults div{margin: 5px 0}
-.search .email-field{
-    border: 1px solid #000;
-    height: 46px;
-    width: 375px;
-    font-family: RMTyperighter;
-    font-size: 18px;
-    padding: 3px;
-}
-
-.check-button{
-    height: 52px;
-    padding-bottom: 7px;
-    margin-left: 11px;
-}
-
-.title{
-    font-size: 45px;
-}