Allow embedding forms within other websites

[susnux]

• Resolves #324

• Add embedded endpoint for page controller and allow inserting submissions without CSFR as anonymous submissions for public shares.

• Added sub-menu entry for copying the embedding code to the clipboard and added documentation on how to use the embedded view.

• Switched to vue-clipboard2 to allow copying to clipboard from sub-menu entry (allows setting a container for the copy action).

[codecov[bot]]

Codecov Report

Merging #1353 (ec98396) into master (f33167c) will decrease coverage by 0.22%. The diff coverage is 0.00%.

:exclamation: Current head ec98396 differs from pull request most recent head c57c54b. Consider uploading reports for the commit c57c54b to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##             master    #1353      +/-   ##
============================================
- Coverage     36.71%   36.49%   -0.23%     
- Complexity      513      517       +4     
============================================
  Files            49       49              
  Lines          1980     1992      +12     
============================================
  Hits            727      727              
- Misses         1253     1265      +12     

[jotoeri]

Hmm, i'm not sure, if tweaking the csp is a good idea here. I would need to dig into that to properly judge it. Maybe @ChristophWurst or @nickvergessen could give a comment on that, if they find some time.

Probably also to allow the cors-requests now could allow to make it work without the csp stuff. CORS should work now with latest server 25. #1139 I personally have unfortunately no time for this until at least november. Sorry for that.

[susnux]

i'm not sure, if tweaking the csp is a good idea here

At least that is what appointments and calendar do (I draw inspiration from them).

With this changes CSFR protection is disabled for public shares, but at least you can not assign responses to an specific user, because if the CSFR token does not match (which happens if you embed the form) the responses are assigned to anonymous.

I personally have unfortunately no time for this until at least november. Sorry for that.

No problem :)

[nickvergessen]

Sorry, that's not my area of expertise

[Chartman123]

I think that you should try to further improve the styling of the embedded form. I opened the embedded route in a maximized browser window and got the following result:

For the embedded view, I'd suggest to remove the background and the rounded corners and only show the app content itself. Furthermore I'd suggest to keep the width of the form content the way we have it inside Nextcloud or for the public view 🙂

[susnux]

For the embedded view, I'd suggest to remove the background and the rounded corners and only show the app content itself.

That is already documented in the `Embedding.md":

#content-vue.app-forms-embedded {
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin: 0;
}

But I could change it to be the default.

Furthermore I'd suggest to keep the width of the form content the way we have it inside Nextcloud or for the public view

The only difference to the public view is: No width limit (so taking 100%), that is also why it is not centered anymore. I did this so the view is bound to the iframe size, as you would control the size and alignment normally by the iframe when embedding.