revised frontend (auto completion, util helper module)

handlers/tmpls/protected.html

@@ -40,7 +40,7 @@
                     <div class="field">
                         <div class="ui left icon input">
                             <i class="key icon"></i>
-                            <input type="password" name="password" placeholder="Password" required>
+                            <input type="password" name="password" placeholder="Password" autocomplete="off" required>
                         </div>
                     </div>
                     <button class="ui fluid large button" type="submit">Login</button>

static/src/Card/Card.js

@@ -25,12 +25,12 @@ export default class CardComponent extends Component {
                     {this.props.metaHeader}
                 </Card.Meta>
                 <Card.Description>
-                    {this.props.description}
+                    {this.props.description} 
                     {this.props.deletionURL && <Clipboard component="i" className="trash link icon" style={{ float: "right" }} button-title="Copy the deletion URL to the clipboard" data-clipboard-text={this.props.deletionURL} onSuccess={this.onDeletonLinkCopy} />}
                 </Card.Description>
             </Card.Content>
             <Card.Content extra>
-                {!this.props.showInfoURL ? <div className='ui two buttons'>
+                {!this.props.customExtraContent ? <div className='ui two buttons'>
                     <Modal closeIcon trigger={<Button icon='qrcode' content='Show QR-Code' />}>
                         <Modal.Header className='ui center aligned'>{this.props.description}</Modal.Header>
                         <Modal.Content style={{ textAlign: 'center' }}>
@@ -43,10 +43,7 @@ export default class CardComponent extends Component {
                             Copy to Clipboard
                         </div>
                     </Clipboard>
-                </div> : <div className='ui two buttons'>
+                </div> : this.props.customExtraContent}
-                        <Button icon='clock' content='Show recent visitors' />
-                        <Button icon='line chart' content='Delete Entry' />
-                    </div>}
             </Card.Content>
         </Card>)
     }

static/src/Home/Home.js

@@ -116,7 +116,7 @@ export default class HomeComponent extends Component {
                   minDate={moment()} />
               </Form.Field>}
               {setOptions.includes("protected") && <Form.Field>
-                <Input type="password" label='Password' onChange={this.handlePasswordChange} autoComplete="off" /></Form.Field>}
+                <Input type="password" label='Password' onChange={this.handlePasswordChange} /></Form.Field>}
             </Form.Group>
           </Form>
         </Segment>

static/src/Lookup/Lookup.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Segment, Header, Form, Input, Card } from 'semantic-ui-react'
+import { Segment, Header, Form, Input, Card, Button } from 'semantic-ui-react'
 import toastr from 'toastr'
 
 import CustomCard from '../Card/Card'
@@ -40,14 +40,17 @@ export default class LookupComponent extends Component {
             <div>
                 <Segment raised>
                     <Header size='huge'>URL Lookup</Header>
-                    <Form onSubmit={this.handleURLSubmit} autoComplete="off">
+                    <Form onSubmit={this.handleURLSubmit}>
                         <Form.Field>
-                            <Input required size='big' ref={input => this.urlInput = input} action={{ icon: 'arrow right', labelPosition: 'right', content: 'Lookup' }} type='url' onChange={this.handleURLChange} name='url' placeholder={window.location.origin + "/..."} />
+                            <Input required size='big' ref={input => this.urlInput = input} action={{ icon: 'arrow right', labelPosition: 'right', content: 'Lookup' }} type='url' onChange={this.handleURLChange} name='url' placeholder={window.location.origin + "/..."} autoComplete="off"/>
                         </Form.Field>
                     </Form>
                 </Segment>
                 <Card.Group itemsPerRow="2">
-                    {links.map((link, i) => <CustomCard key={i} header={new URL(link[0]).hostname} metaHeader={link[1]} description={link[0]} expireDate={link[5]} showInfoURL />)}
+                    {links.map((link, i) => <CustomCard key={i} header={new URL(link[0]).hostname} metaHeader={link[1]} description={link[0]} expireDate={link[5]} customExtraContent={<div className='ui two buttons'>
+                        <Button icon='clock' content='Show recent visitors' />
+                        <Button icon='line chart' content='Delete Entry' />
+                    </div>} />)}
                 </Card.Group>
             </div>
         )

static/src/Recent/Recent.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Container, Table, Button, Icon } from 'semantic-ui-react'
 import toastr from 'toastr'
 import Moment from 'react-moment';
-
+import util from '../util/util'
 export default class RecentComponent extends Component {
     state = {
         recent: null
@@ -28,11 +28,8 @@ export default class RecentComponent extends Component {
         this.props.history.push(`/visitors/${id}`)
     }
 
-    onEntryDeletion(visit) {
+    onEntryDeletion(entry) {
-        fetch(visit.DeletionURL)
+        util.deleteEntry(entry.DeletionURL)
-            .then(res => res.ok ? res.json() : Promise.reject(res.json()))
-            .then(() => this.loadRecentURLs())
-            .catch(e => e instanceof Promise ? e.then(error => toastr.error(`Could not delete: ${error.error}`)) : null)
     }
 
     render() {
@@ -53,7 +50,7 @@ export default class RecentComponent extends Component {
                         {recent && Object.keys(recent).map(key => <Table.Row key={key} title="Click to view visitor statistics">
                             <Table.Cell onClick={this.onRowClick.bind(this, key)}>{recent[key].Public.URL}</Table.Cell>
                             <Table.Cell onClick={this.onRowClick.bind(this, key)}><Moment>{recent[key].Public.CreatedOn}</Moment></Table.Cell>
-                            <Table.Cell onClick={this.onRowClick.bind(this, key)}>{`${window.location.origin}/${key}`}</Table.Cell>
+                            <Table.Cell>{`${window.location.origin}/${key}`}</Table.Cell>
                             <Table.Cell onClick={this.onRowClick.bind(this, key)}>{recent[key].Public.VisitCount}</Table.Cell>
                             <Table.Cell><Button animated='vertical' onClick={this.onEntryDeletion.bind(this, recent[key])}>
                                 <Button.Content hidden>Delete</Button.Content>

static/src/util/util.js

@@ -0,0 +1,10 @@
+import toastr from 'toastr'
+
+export default class UtilHelper {
+    static deleteEntry(url) {
+        fetch(url)
+            .then(res => res.ok ? res.json() : Promise.reject(res.json()))
+            .then(() => this.loadRecentURLs())
+            .catch(e => e instanceof Promise ? e.then(error => toastr.error(`Could not delete: ${error.error}`)) : null)
+    }
+};