Submit user generated content to Apostrophe CMS sites. 

Submit user generated content to Apostrophe CMS sites

alexbea

alexgilbert

boutell

stuartromanek

austinstarin

bgantick

bobclewell

grdunn

mtthwmnc

ngranahan

apostrophe-pieces-submit-widgets

Error

Ignore

Warn

License

Maintenance

Miscellaneous

Quality

Supply chain risk

Vulnerability

Admins only

Organization members

Dashboard

<upgradeLink>Upgrade</upgradeLink> to access this feature

About

Blog

Socket CLI

Customers

Socket Dependency Search

Docs

Socket for GitHub

Love

Impersonation Mode Active

Update your browser to the latest version for the best experience.

Your web browser is outdated

Use another browser for the best experience.

Your web browser is unsupported

{{count, number}} commits last two months

{{count, number}} critical severity alert

{{count, number}} critical severity alerts

{{count, number}} dependency vulnerability

{{count, number}} dependency vulnerabilities

{{count, number}} development dependencies

{{count, number}} transitive dependencies

{{count, number}} version published last month

{{count, number}} versions published last month

{{count, number}} version published in last two months

{{count, number}} versions published in last two months

{{count, number}} version published last week

{{count, number}} versions published last week

{{count, number}} version published last year

{{count, number}} versions published last year

Socket undergoes annual SOC2 Type II audits. Socket customers can request a copy of the full SOC2 Type II report.

Allows organization owners and admins to access detailed records of actions taken by members of their organization, complete with timestamps.

Prevent compromised packages from infiltrating your supply chain by monitoring for changes in real-time.

Join our Discord community to get help from Socket engineers and other Socket users.

Compare millions of open source packages on socket.dev

Detect malicious code and risky behavior (e.g. network) in your dependencies using "deep package inspection"

All data is encrypted in transit and at rest using industry standard encryption algorithms.

Get a dedicated Socket account manager and access to Socket’s Customer Success team.

Get dedicated support from Socket engineers via email and Slack.

"Shift left" with the Socket Chrome extension and give intervene early, before developers choose risky or low quality dependencies.

Catch developers using risky dependencies and give them a "speed bump" to encourage good behavior

Install the Socket GitHub app to receive real-time dependency scanning and reports with every pull request.

Integrate Socket into your GitHub SCM to prevent risky dependencies from being installed.

Socket scans for vulnerabilities in your dependencies, including CVEs, security advisories, and more.

Socket supports dependencies in many languages, with most popular ecosystems coming in 2024. We've got you covered no matter what languages you use.

Enforce license policies across your organization

Receive a Microsoft Teams message to the channel of your choice anytime Socket runs a new analysis, has a new finding, or a policy has changed.

Get help migrating from Socket's free plan to Socket's paid plans.

Run Socket on-premises or in your own cloud environment.

Query for any dependency (at any version) across your entire organization

Integrate Socket into your CI/CD pipeline to prevent risky dependencies from being deployed to production.

Analyze an entire project to find supply chain risks

Tag projects to organize and filter your projects

Restrict access based on the roles of individual users within an organization.

Receive a Slack message to the channel of your choice anytime Socket runs a new analysis, has a new finding, or a policy has changed.

Socket is SOC2 Type II compliant and undergoes annual audits.

The Socket CLI allows teams to prevent risky dependencies from being installed, and to get dependency insights from the command line.

Socket supports SAML SSO for single sign-on and identity management.

Integrate Socket into your VS Code IDE to prevent risky dependencies from being installed.

Get a POST request anytime Socket runs a new analysis, has a new finding, or a policy has changed.

Socket will analyzed your SBOMs up to a maximum number of dependencies.

API that allows you to analyze a project, lookup package scores and alerts, and more.

Create API tokens to authenticate with the Socket API and CLI.

The number of developers in your team. A developer is someone who made a commit to your organization's repositories scanned by Socket in the past month.

Use Socket to protect your private repositories.

Socket is always free for open source projects.

Socket retains all reporting data for 3 months, 1 year, or a custom term of your choice.

Access the threat feed that powers Socket.

Unlimited scale, self-hosting, and priority support for large teams.

For open-source projects, individuals, and small teams.

For growing teams with enhanced scale, security, and support.

There is a package with a similar name that is downloaded much more often.

There are packages with similar names that are downloaded much more often.

This may not be the package you want!

Instance

Alert Locations

Package

The {{ecosystem}} package {{- packageName}} receives a total of <strong>{{numWeeklyDownloadCount, number}}</strong> weekly downloads. As such, {{- packageName}} popularity was classified as <strong>{{popularity}}</strong>.

Is {{- packageName}} popular?

Is {{- packageName}} safe to use?

Is {{- packageName}} well maintained?

What is {{- packageName}}?

{{packageDescription}}Version: {{versionString}} was published by {{publisherName}}. Start using Socket to analyze {{- packageName}} and its {{dependencyCount, number}} dependencies to secure your app from supply chain attacks.

Sorry, it seems this package was removed from the registry

Package was removed

This package version has been unpublished, mostly likely due to security reasons

Package version was removed

Provide a detailed description of the malware...

Socket fights vulnerabilities and provides visibility, defense-in-depth, and proactive supply chain protection for JavaScript, Python, and Go dependencies.

Socket - Secure your dependencies. Ship with confidence.

Compare versions

{{- packageName}} - npm Package Compare versions

  "name": "apostrophe-pieces-submit-widgets",

  "description": "Submit user generated content to Apostrophe CMS sites",

  "homepage": "https://github.com/punkave/apostrophe-submit-pieces#readme",

  "homepage": "https://github.com/apostrophecms/apostrophe-pieces-submit-widgets#readme",

apos.define('apostrophe-pieces-submit-widgets', {

    self.play = function($widget, data, options) {

      var $form = $widget.find('[data-apos-pieces-submit-form]');

      var schema = self.options.submitSchema;

      var piece = _.cloneDeep(self.options.piece);

      return apos.schemas.populate($form, schema, piece, function(err) {

          apos.utils.error('For setup error: ', err);

          alert('A problem occurred setting up the contact form.');

            apos.utils.error('Piece submission error: ', err);

            alert('Something was not right. Please review your submission.');

            // Replace the form with its formerly hidden thank you message

            $form.replaceWith($form.find('[data-apos-pieces-submit-thank-you]'));

          return apos.schemas.convert($form, schema, piece, callback);

        function submitToServer(callback) {

          return self.api('submit', piece, function(data) {

This module extends the [Apostrophe CMS](http://apostrophecms.org), allowing sie visitors to submit new [pieces](http://apostrophecms.org/docs/tutorials/getting-started/reusable-content-with-pieces.html) of any type you wish. The feature is packaged as a widget, so you can easily add it to any page template.

Here's how to set it up. Our example is based on the [apostrophe-events](https://www.npmjs.com/package/apostrophe-events) module, which extends pieces.

  // For example: we're using the "apostrophe-events" module

  // and we'll want submissions of events. "apostrophe-events"

    // Let's add an attachment field so the user can upload an image

  // ** The name you give this module is significant. **

  // It should begin with the name of the pieces module you want

  // to add the submissions feature to, and end with -submit-widgets

    // Your module extends this one, and adds capabilities

    extend: 'apostrophe-pieces-submit-widgets',

    // Always spell out the schema field names the user is allowed to edit.

    // You almost certainly don't want them to have control

    // of the "published" field, for instance

    fields: [ 'title', 'body', 'image', 'startDate', 'endDate' ]

  // Optional: if you want to let the public attach files.

**Notice that you don't configure this module directly — you add a module that extends it, with a name based on the name of your pieces module.** If you don't like the naming convention, you can name your module whatever you like, as long as you set the `piecesModuleName` option to the appropriate module's name.

Once you have the module set up, you can add a submission form widget to any `apos.area` or `apos.singleton` call:

{{ apos.singleton(data.page, 'submit', 'apostrophe-events-submit') }}

> If you use a singleton, you will still need to click the "Add Submit [x]" button once on each page that contains the singleton. The plus side of this feature is that it means you don't have to enable the singleton on every page of the type and you can remove the submission form again.

Newly submitted pieces are initially unpublished. This makes them easy to moderate: just click on the admin bar, choose the type of piece, click "Manage" and use the "Published" filter to view unpublished pieces. Then edit them and set them to "Published: Yes" if appropriate.

> This module also adds a `submitted: true` property. If you wish, you can add that to your pieces module's schema as a boolean field and configure a filter for it so you can always distinguish between visitor submissions and your own unpublished content.

It might not be obvious, but this module also works great for "contact us" forms. Just create a pieces module with appropriate schema fields and use this widget to accept the submissions. You can override the `beforeInsert` method to send email, if desired.

You'll notice that even if your schema contains an area with `apostrophe-images` and `apostrophe-files` widgets and the field is part of your `fields` array, the public still can't submit them for permissions reasons.

This is, by and large, a good thing. You don't want the public to have unrestricted access to browse your media library, or clutter it up.

Instead, define a widget that contains its own `attachment` field, and use that widget in an `area` or `singleton` field in your piece type's schema. What this does is associate a file directly with the widget and the piece it is a part of. It won't appear in the shared media library. It is directly attached to the piece.

**A `submitted-image-widgets` module is defined in the example `app.js` above.**

In `lib/modules/apostrophe-events-pages/views/show.html`, or anywhere else you have access to the piece, you can display the image like this:

When accepting user submissions, it's usually better to minimize the complexity of what users can do, so they don't become confused by the process. Rather than areas, offer them a rich text singleton, a clearly labeled attachment field, etc.

## If it doesn't work: some tricky edge cases

> Keep in mind that you can do this for an entire blog by setting the flag for the `apostrophe-blog-pages` module, and so on for any subclass of `apostrophe-pieces-pages`.

### Are you trying to use the `apostrophe-images` and `apostrophe-files` widgets?

That's not a good fit with submissions, but you can define your own widgets with file attachments that are better suited to submissions. See above.

### AJAX and assets: when the form is dynamically loaded

This widget sets its `scene: 'user'` option, which automatically loads the extra user-oriented CSS and JavaScript it needs at the time the page containing the widget is loaded. 99% of the time, that's perfectly sufficient.

However, if you are loading the widget into the page later via an "infinite scroll" plugin like [jQuery Bottomless](https://github.com/punkave/jquery-bottomless), Apostrophe won't know the extra assets are needed until too late.

To address that scenario, set the `scene: 'user'` option for any page type that might load the widget via AJAX.

2.0.3: Fixes the package URL in package.json. Adds keywords for NPM search. Improves error logging.

2.0.2: assets were still being pushed `always`, which resulted in errors for any page that *didn't* contain the widgets and tried to run that javascript without `scene: 'user'`. Fixed! You should *not* need to set `scene: 'user'` for every page type on your site.

2.0.1: the documentation is complete and the examples are well-tested. Default styles are pushed to hide the "thank you" message until it replaces the form. Since `scene: 'user'` is set for the widget, we push the assets for the widget only for `scene: 'user'`, which saves overhead on pages that don't include it.

		{
		"name": "apostrophe-pieces-submit-widgets",
		"version": "2.0.2",
		"version": "2.0.3",
		"description": "Submit user generated content to Apostrophe CMS sites",
		"main": "index.js",
		"author": "P'unk Ave",
		"homepage": "https://github.com/punkave/apostrophe-submit-pieces#readme",
		"homepage": "https://github.com/apostrophecms/apostrophe-pieces-submit-widgets#readme",
		"dependencies": {
		"async": "^2.1.2",
		"lodash": "^4.16.6"
		}
		},
		"keywords": [
		"apostrophecms",
		"apostrophe",
		"apostrophe-cms",
		"cms",
		"content management",
		"content management system"
		]
		}

		@@ -13,2 +13,3 @@ apos.define('apostrophe-pieces-submit-widgets', {
		if (err) {
		apos.utils.error('For setup error: ', err);
		alert('A problem occurred setting up the contact form.');
		@@ -34,2 +35,3 @@ return;
		if (err) {
		apos.utils.error('Piece submission error: ', err);
		alert('Something was not right. Please review your submission.');
		@@ -36,0 +38,0 @@ } else {

New alerts

Fixed alerts

Improved metrics

Worsened metrics

		@@ -114,2 +114,3 @@ # apostrophe-pieces-submit-widgets

		2.0.3: Fixes the package URL in package.json. Adds keywords for NPM search. Improves error logging.
		2.0.2: assets were still being pushed `always`, which resulted in errors for any page that didn't contain the widgets and tried to run that javascript without `scene: 'user'`. Fixed! You should not need to set `scene: 'user'` for every page type on your site.
		@@ -116,0 +117,0 @@ 2.0.1: the documentation is complete and the examples are well-tested. Default styles are pushed to hide the "thank you" message until it replaces the form. Since `scene: 'user'` is set for the widget, we push the assets for the widget only for `scene: 'user'`, which saves overhead on pages that don't include it.