feat(ui): add bookmarklet

ui/public/bookmarklet.js

@@ -0,0 +1,19 @@
+function b() {
+  var r = new Request(FP_URL + '/articles')
+  var h = new Headers({
+    'Accept': 'application/json',
+    'Content-Type': 'application/json'
+  });
+  h.set('Authorization', 'Basic ' + FP_CRED);
+  fetch(r, {
+    method: 'POST',
+    headers: h,
+    mode: 'cors',
+    body: JSON.stringify([{title: document.title, url: document.location.href}])
+  }).then(function() {
+    alert('Webpage added to your readflow.')
+  }, function(err) {
+    alert('Unable to send the web page to readflow: ', err.message)
+  })
+}
+b()

ui/src/common/helpers.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode, MouseEvent } from "react"
 import { ApolloError } from "apollo-boost"
 import { FormState } from "react-use-form-state"
+import { API_BASE_URL } from "../constants";
 
 export interface GQLResponsePattern<T> {
   Loading: () => ReactNode
@@ -77,3 +78,19 @@ export function isValidForm(form: FormState<any>) {
   })
   return result
 }
+
+export function getBookmarklet(apiKey: string) {
+  const {origin} = document.location
+  const cred = btoa('api:'+apiKey)
+  return `javascript:(function(){
+FP_URL="${API_BASE_URL}";
+FP_CRED="${cred}";
+var js=document.body.appendChild(document.createElement("script"));
+js.onerror=function(){alert("Sorry, unable to load bookmarklet.")};
+js.src="${origin}/bookmarklet.js"})();`
+}
+
+export function preventBookmarkletClick(e: MouseEvent<any>) {
+  e.preventDefault()
+  alert("Don't click on me! But drag and drop me to your toolbar.")
+}

ui/src/settings/api-keys/ApiKeysTable.tsx

@@ -4,6 +4,8 @@ import { ApiKey } from './models'
 import Empty from '../../common/Empty'
 import { Link } from 'react-router-dom'
 import TimeAgo from '../../common/TimeAgo'
+import { getBookmarklet, preventBookmarkletClick } from '../../common/helpers'
+import Icon from '../../common/Icon';
 
 export interface OnSelectedFn {
   (ids: number[]): void
@@ -70,6 +72,7 @@ export default ({data, onSelected}: Props) => {
           </th>
           <th>Alias</th>
           <th>Token</th>
+          <th>Bookmarklet</th>
           <th>Last usage</th>
           <th>Created</th>
           <th>Updated</th>
@@ -90,7 +93,14 @@ export default ({data, onSelected}: Props) => {
                 {apiKey.alias}
               </Link>
             </th>
-            <td><span className="masked">{apiKey.token}</span></td>
+            <td>
+              <span className="masked">{apiKey.token}</span>
+            </td>
+            <td>
+              <a title="Bookmark me!" href={getBookmarklet(apiKey.token)} onClick={preventBookmarkletClick}>
+                <Icon name="bookmark" />
+              </a>
+            </td>
             <td><TimeAgo dateTime={apiKey.last_usage_at} /></td>
             <td><TimeAgo dateTime={apiKey.created_at} /></td>
             <td><TimeAgo dateTime={apiKey.updated_at} /></td>