efeichen / mavo-gdrive Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 1.0 289 KB

Google Drive Backend for Mavo

License: MIT License

JavaScript 89.98% HTML 10.02%

mavo-gdrive's People

Contributors

Stargazers

Watchers

Forkers

micpurr

mavo-gdrive's Issues

CORS issue with images if a third-party library is used

Hi Kenneth!
Thank you very much for the excellent plugin! It let me launch a site with a CMS feature for users who don't even know about Github.
Recently I wrote a plugin called Cropper that let end users edit image properties in place. While experimenting with that plugin, I faced an issue: if I try to change an image property that already had a value in the app, e.g., if I try to crop an existing image, I face with CORS and the Cropper plugin breaks. Precisely, the instance of the Cropper object is not being created, so I can't do anything with the image. But every element of the plugin is being created (the preview, the toolbar). This issue doesn't exist in Github: nothing breaks, and the Cropper plugin works as it should.
I made a sample site to play with (and reproduce the issue): https://mavo-cropper-cors-github.firebaseapp.com/
To reproduce the issue login to the chosen backend and edit existing images firstly in the Github section (to see how the Cropper plugin should work) and then in the Google Drive section (to see what goes wrong).
Will you please have a look at the issue and try to fix it? I'll appreciate all your help.

Regards,
Dmitry

Secure API Key

I'm not sure if directly embedding the API key in the JS code is secure yet.

Support for other storage formats is not tested

Incremental authorization

Right now the backend asks for the highest permission from the user, which is daunting.

Handle error cases when retrieving (get) the storage file.

Can't find the file based on ID.
Can't access the file without login.
No permission to read the file.

Path-Based: Should private data be removed after signed out?

Does this still work?

I just tried to make an app using gdrive storage and there's no errors in the console, but when I refresh the data isn't saved.

Here's the whole html file:

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">

    <head>
        <title>Chat Test Mavo</title>
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
                font-size: 13px;
                font-family: Helvetica, Arial, sans-serif;
                line-height: 1;
            }
            table {
                border-collapse: collapse;
                border-spacing: none;
            }
            div[mv-app="chatRemote"] {
                border: 1px solid #ccc;
                padding: 10px;
                margin: 10px;
            }
            .message {
                font-size: 18px;
                line-height: 1.5;
            }
            #draft {
                font-size: 18px;
                padding: 3px;
                display: inline-block;
            }
            #send {
                display: inline-block;
            }

        </style>
        <link rel="stylesheet" href="https://get.mavo.io/stable/mavo.css" />
        <script src="mavo0.2.0.min.js" charset="utf-8"></script>
        <script src="mavo-gdrive.js" charset="utf-8"></script>
        <script src="mavo-sort.js" charset="utf-8"></script>

    </head>
    <body>


        <h1>Public Mavo Chat App</h1>
        <p>Please don't post any bad content. This chat is unmoderated.</p>


        <div mv-app="chatRemote" mv-plugins="gdrive sort" mv-storage="https://drive.google.com/file/d/1G9DipNw0nYqjHg1JM2MEm76PwosvRiXS/view?usp=sharing" 
            mv-unauthenticated-permissions="read edit save" mv-server-push="true" mv-autosave="0"
            mv-bar="none" >
            <div property="message" mv-multiple mv-initial-items="0" mv-sort="timestamp">
                <div class="message">
                    <span property="name"></span>: <span property="text"></span><span property="timestamp" hidden></span>
                </div>
            </div>
        </div>

        <div mv-app="chatLocal" mv-storage="local" mv-autosave>
            Your username: <input property="name" />
            <form mv-action="add(group(name: name, text: draft, timestamp: $now), chatRemote.message); set(draft, '')">
                <input id="draft" placeholder="type message here" disabled="[len(name) = 0]" property="draft" autocomplete="off" mv-value="[if(name, '', 'Please create a name before sending a message')]" />
                <input id="send" type="button" disabled="[len(name) = 0]" value="send message" />
            </form>
        </div>


    </body>
</html>

Add more details to Dev Setup README

Plugin unverified

Need to get Google Drive API credentials verified because the access scope is sensitive.

Support private storage file that give access to certain users

README feedback

You can put instructions for contributors in CONTRIBUTING.md, they don't actually need to be in README.md and they scare off novices. From a quick skim, I thought one needed to use git and Node to use your plugin!

Also, I'm a bit confused by the terminology in it (imagine a novice!). What is a master storage dataset? Remember, the readme is not for developers, it's for anyone who can write basic HTML.

Inside the mv-storage, mv-source, or mv-init attribute of your Mavo app, add the keyword gdrive/

I would suggest gdrive:// to make it clear that it's not just a normal path.

Use this method if you don't wish any storage data to be displayed publically but want to allow users to have their own data after login.

That's pretty cool! But does that mean it's not possible to have a private Google Drive file and give people access to it?

Spelling:
publically -> publicly
sugget -> suggest

When to create storage file if not yet exist?

Right now, Google Drive backend create or get the file right when the user logs in. It feels a little weird because the user hasn't told us to save the data to the backend yet.

There should also be a dialog showing the file path and link to the file saying that your data has been saved.