Slacken Google Drive access scope and make Google Drive implementation public

src/bitmappery.vue

@@ -54,6 +54,7 @@
             :type="dialog.type"
             :title="dialog.title"
             :message="dialog.message"
+            :link="dialog.link"
             :confirm-handler="dialog.confirm"
             :cancel-handler="dialog.cancel"
         />

src/components/dialog-window/dialog-window.vue

@@ -28,6 +28,7 @@
     >
         <h4 class="dialog-window__title">{{ title }}</h4>
         <p class="dialog-window__message">{{ message }}</p>
+        <a v-if="link" class="dialog-window__link" target="_blank" rel="noopener noreferrer" :href="link.href">{{ link.title }}</a>
         <div class="dialog-window__actions">
             <button
                 v-t="'ok'"
@@ -66,6 +67,10 @@ export default {
             required: true,
             validator: value => /info|confirm|error/.test(value)
         },
+        link: {
+            type: Object,
+            default: null,
+        },
         confirmHandler: {
             type: Function,
             default: null,
@@ -126,6 +131,11 @@ export default {
         white-space: pre-line;
     }
 
+    &__link {
+        display: block;
+        margin-bottom: $spacing-medium;
+    }
+
     button {
         display: inline-block;
         width: 45%;

src/components/file-import/dropbox-connector/dropbox-connector.vue

@@ -92,6 +92,10 @@ export default {
                 type: "confirm",
                 title: this.$t( "establishConnection" ),
                 message: this.$t( "connectionExpl" ),
+                link: {
+                    href  : "https://www.igorski.nl/bitmappery/privacy",
+                    title : this.$t( "privacyPolicy" )
+                },
                 confirm: () => this.login(),
             });
         }

src/components/file-import/dropbox-connector/messages.json

@@ -3,7 +3,8 @@
         "connectingToDropbox": "Connecting to Dropbox",
         "connectedToDropbox": "Connected to Dropbox",
         "establishConnection": "Establish connection",
-        "connectionExpl": "In order to import files from or save projects to Dropbox you must first connect BitMappery to Dropbox and grant read and write permissions. Dropbox connects directly to your machine without middleware, keeping your data private.",
+        "connectionExpl": "In order to import files from or save projects to Dropbox you must first connect to Dropbox and grant BitMappery read and write permission. Dropbox connects directly to your machine without middleware, keeping your data private at all times.\n\nFor more information, consult the privacy policy.",
+        "privacyPolicy": "BitMappery privacy policy",
         "loginToDropbox": "Log into Dropbox",
         "login": "Login",
         "importFromDropbox": "Import from Dropbox"

src/components/file-import/file-import.vue

@@ -45,7 +45,7 @@
                 ></button>
                 <component :is="dropboxImportType" />
                 <button
-                    v-if="supportsGoogleDrive && !drive"
+                    v-if="!drive"
                     v-t="'importFromGoogleDrive'"
                     type="button"
                     class="button button--block drive"
@@ -116,10 +116,6 @@ export default {
             return null;
         },
     },
-    created() {
-        // TODO: Google Drive integration is currently under development (needs validation by Google)
-        this.supportsGoogleDrive = new URLSearchParams( window.location.search ).has( "drive" );
-    },
     methods: {
         ...mapMutations([
             "openModal",

src/components/file-import/google-drive-connector/google-drive-connector.vue

@@ -100,6 +100,10 @@ export default {
                 type: "confirm",
                 title: this.$t( "establishConnection" ),
                 message: this.$t( "connectionExpl" ),
+                link: {
+                    href  : "https://www.igorski.nl/bitmappery/privacy",
+                    title : this.$t( "privacyPolicy" )
+                },
                 confirm: () => this.login(),
             });
         }

src/components/file-import/google-drive-connector/messages.json

@@ -3,7 +3,8 @@
         "connectingToDrive": "Connecting to Google Drive",
         "connectedToDrive": "Connected to Google Drive",
         "establishConnection": "Establish connection",
-        "connectionExpl": "In order to import files from or save projects to Google Drive you must first connect to Google Drive and grant read and write permissions to the igorski.nl productivity suite.\n\nGoogle Drive connects directly to your machine without any middleware, keeping your data and file access private at all times. Meaning: igorski.nl servers cannot access your data.",
+        "connectionExpl": "In order to import files from or save projects to Google Drive you must first connect to Google Drive and grant BitMappery read and write permission.\n\nDrive operates under stricter restrictions than Dropbox, it is not possible to access just any file or folder in your Google Drive, only those created by the BitMappery app.\n\nGoogle Drive connects directly to your machine without any middleware, keeping your data and file access private at all times. For more information, consult the privacy policy.",
+        "privacyPolicy": "BitMappery privacy policy",
         "loginToDrive": "Log into Google Drive",
         "login": "Login",
         "importFromDrive": "Import from Google Drive",

src/services/google-drive-service.js

@@ -25,7 +25,7 @@ import { base64toBlob } from "@/utils/file-util";
 import { blobToResource } from "@/utils/resource-manager";
 
 const GOOGLE_API     = "https://apis.google.com/js/api.js";
-const ACCESS_SCOPES  = "https://www.googleapis.com/auth/drive"; // drive.file
+const ACCESS_SCOPES  = "https://www.googleapis.com/auth/drive.file"; // auth/drive is restricted for production ($$$!)
 const DISCOVERY_DOCS = [ "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest" ];
 
 const MIME_FOLDER = "application/vnd.google-apps.folder";
@@ -207,10 +207,16 @@ export const getFolderHierarchy = async fileId => {
         if ( !id ) {
             break;
         }
-        ({ result } = await gapi.client.drive.files.get({
-            fileId : id,
-            fields : "id, name, mimeType, parents"
-        }));
+        try {
+            ({ result } = await gapi.client.drive.files.get({
+                fileId : id,
+                fields : "id, name, mimeType, parents"
+            }));
+        } catch {
+            // likely access restriction (e.g. reached root folder under drive.file scope)
+            result.parents = [];
+            break;
+        }
         if ( !result?.id ) {
             break;
         }

src/store/index.js

@@ -132,8 +132,8 @@ export default {
          * types can be info, error or confirm. When type is confirm, optional
          * confirmation and cancellation handler can be passed.
          */
-        openDialog( state, { type = "info", title = "", message = "", confirm = null, cancel = null }) {
-            state.dialog = { type, title , message, confirm, cancel };
+        openDialog( state, { type = "info", title = "", message = "", link = null, confirm = null, cancel = null }) {
+            state.dialog = { type, title , message, link, confirm, cancel };
         },
         closeDialog( state ) {
             state.dialog = null;