feat: change to small corner/bottom consent modal

3box · May 19, 2020 · 910d1c4 · 910d1c4
1 parent f7e6ece
commit 910d1c4
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 51 deletions.
diff --git a/iframe/css/style.scss b/iframe/css/style.scss
@@ -31,7 +31,7 @@ p {
   margin: 0;
 }
 
-p {
+p, span {
   font-family: 'JetBrains';
 }
 
@@ -55,32 +55,31 @@ button {
 
 .card {
   width: 420px;
-  // height: 565px;
   border: 1px solid $borderColor;
   border-radius: $radius;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
   background-color: white;
+  box-shadow: 0px 4px 10px 1px #00000025;
+  margin-top: 10px;
+  margin-left: 10px;
 }
 
 .cardMobile {
-  width: 100vw !important;
+  width: 85vw !important;
   height: 100vh !important;
-  border: none !important;
   justify-content: flex-start !important;
+  margin-top: 0px !important;
+  margin-left: 0px !important;
 }
 
 .content {
   width: 100%;
-  padding-top: 20px;
+  padding-top: 5px;
 }
 
 .contentMobile {
-  width: 100% !important;
-  height: 80% !important;
-  padding-top: 125px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
@@ -89,7 +88,7 @@ button {
 .controls {
   width: 100%;
   height: 52px;
-  border-bottom: 1px solid $borderColor;
+  // border-bottom: 1px solid $borderColor;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -119,6 +118,13 @@ button {
         opacity: 1;
       }
     }
+
+    span {
+      margin-left: 15px;
+      font-weight: 400;
+      color: #b9bbbc;
+      font-size: 13px;
+    }
   }
 
   .close {
@@ -451,8 +457,7 @@ button {
 }
 
 .primaryButton {
-  background-color: $threeBoxBlue;
-  color: white;
+  color: $threeIdOrange;
 }
 
 .secondaryButton {

diff --git a/iframe/css/variables.scss b/iframe/css/variables.scss
@@ -7,6 +7,8 @@ $inputPadding: 12px 14px;
 $threeBoxBlue: #1168df;
 $threeBoxBlueHover: #0950b0;
 
+$threeIdOrange: orange;
+
 $symbolGrey: #D8D8D8;
 
 $indexModalPreviewImageHeight: 100px;
@@ -88,4 +90,4 @@ $dropShadow: 0px 4px 10px 4px #00000025,
 
 // $commentPictureDimension: 40px;
 
-// $commentPictureDimension-mobile: 50px;
+// $commentPictureDimension-mobile: 50px;
diff --git a/iframe/html/template.js b/iframe/html/template.js
@@ -7,14 +7,17 @@ const spaceString = (spaces) => spaces.join(', ')
 const template = (data,isMobile) => `
   <div class='${style.card} ${isMobile ? style.cardMobile : ''}'>
     <div class=${style.controls}>
-      <a
-      href="https://3box.io"
-      rel="noopener noreferrer"
-      target="_blank"
-      class=${style.controls_logo}
-      >
-        ${assets.Logo}
-      </a>
+      <div class=${style.controls_logo}>
+        <a
+        href="https://3box.io"
+        rel="noopener noreferrer"
+        target="_blank"
+        class=${style.controls_logo}
+        >
+          ${assets.Logo}
+        </a>
+        <span> Connect your data </span>
+      </div>
 
       <div class='${style.close}' onClick="hideIframe()">
         <div class='${style.close_line} ${style.flip}'></div>
@@ -24,25 +27,10 @@ const template = (data,isMobile) => `
 
     <div class='${style.content} ${isMobile ? style.contentMobile : ''}' id='content' >
       <div class='${style.header}'>
-        <img
-          src='${`https://${data.request.origin}/favicon.ico`}'
-          class='${style.headerLogo}'
-          onError='handleBrokenImage(this)'
-          id='siteFavicon'
-        />
-
-        <div class='${style.headerText}'>
-          <div class='${style.primary}'>
-            ${data.request.origin}
-          </div>
-          <p class='${style.sub}'> wants to access your data </p>
-        </div>
-
         <div class='${style.promptText}'>
           <div class='${style.subText}'>
             <p>
-            <span>${capitalizeFirst(data.request.origin)}</span> uses 3ID to give you privacy and control over your data.
-            This app wants to access: ${spaceString(data.request.spaces)}.
+            This site wants to access your profile${data.request.spaces.length === 0 ? '. ' : ' and ' + data.request.spaces.length + 'data sources.'}
             </p>
             ${data.error ? error(data) : ``}
           </div>
@@ -51,14 +39,10 @@ const template = (data,isMobile) => `
           <button id='accept' class='${style.primaryButton}'>
             Continue
           </button>
-          <button id='decline' class='${style.secondaryButton}' onClick="hideIframe()">
-            Cancel
-          </button>
         </div>
       </div>
     </div>
   </div>
-  <div class='${style.onClickOutside}' id='onClickOutside' onClick="handleOpenWalletOptions()"></div>
 `
 export default template
 

diff --git a/iframe/index.js b/iframe/index.js
@@ -24,7 +24,6 @@ const render = async (request) => {
     request
   }
   if (errorMessage) data.error = errorMessage
-  if (request.type === 'authenticate' && request.spaces.length === 0) data.request.spaces = ['3Box']
   root.innerHTML = template(data, checkIsMobile())
 }
 
@@ -45,9 +44,6 @@ const getConsent = async (req) => {
       document.getElementById("accept").style.opacity = .5;
       resolve(true)
     })
-    decline.addEventListener('click', () => {
-      resolve(false)
-    })
   })
 
   return result

diff --git a/public/index.html b/public/index.html
@@ -10,10 +10,8 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <style>
     body {
-      background-color: #f7f7f9;
+      background: none transparent;
       display: flex;
-      justify-content: center;
-      align-items: center;
       height: 100vh;
     }
   </style>
@@ -24,4 +22,4 @@
 </body>
 <script type="text/javascript" src="index.js"></script>
 
-</html>
+</html>
diff --git a/src/threeIdConnect.js b/src/threeIdConnect.js
@@ -8,9 +8,11 @@ const IDENTITY_WALLET_IFRAME_URL = ' http://127.0.0.1:30001'
 
 const HIDE_IFRAME_STYLE = 'position: fixed; width:0; height:0; border:0; border:none !important'
 const DISPLAY_IFRAME_STYLE = 'border:none border:0; z-index: 500; position: fixed;'
+const IFRAME_TOP = `top: 10px; right: 10px`
+const IFRAME_BOTTOM = `bottom: 0px; left: 0px;`
 
 const hide = (iframe) => () => iframe.style = HIDE_IFRAME_STYLE
-const display = (iframe) => (height = '100%', width = '100%', top = '0', left= '0') => iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; top: ${top}; left: ${left};`
+const display = (iframe) => (mobile = false, height = '210px', width = '440px') => iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; ${mobile ? IFRAME_BOTTOM: IFRAME_TOP}`
 // TODO maybe have some more ui options here, because these can change after iframe loads
 
 /**
@@ -34,6 +36,7 @@ class ThreeIdConnect {
     this.iframe = document.createElement('iframe')
     this.iframe.src = ' http://127.0.0.1:30001' || IDENTITY_WALLET_IFRAME_URL
     this.iframe.style = HIDE_IFRAME_STYLE
+    this.iframe.allowTransparency = true
     this.iframe.frameBorder = 0
 
     this.iframeLoadedPromise = new Promise((resolve, reject) => {

diff --git a/src/threeIdConnectService.js b/src/threeIdConnectService.js
@@ -9,6 +9,9 @@ const store = require('store')
 const consentKey = (address, domain, space) => `3id_consent_${address}_${domain}_${space}`
 const serializedKey = (address) => `serialized3id_${address}`
 
+const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+const checkIsMobile = () => mobileRegex.test(navigator.userAgent)
+
 async function getLinkedData(address) {
   try {
     return API.getRootStoreAddress(address)
@@ -125,7 +128,7 @@ class ThreeIdConnectService {
     *  Tells parent window to display iframe
     */
   async displayIframe() {
-    return this.display()
+    return this.display(checkIsMobile())
   }
 
   /**