Add OAuth authentication

.github/workflows/e2e.yml

@@ -10,9 +10,16 @@ on:
       - develop
 
 jobs:
+  build:
+    uses: mailchimp/wordpress/.github/workflows/build-release-zip.yml@develop
+
   cypress:
+    needs: build
     name: ${{ matrix.core.name }}
     runs-on: ubuntu-latest
+    env:
+      CYPRESS_MAILCHIMP_USERNAME: ${{ secrets.MAILCHIMP_USERNAME }}
+      CYPRESS_MAILCHIMP_PASSWORD: ${{ secrets.MAILCHIMP_PASSWORD }}
     strategy:
       matrix:
         core:
@@ -24,15 +31,25 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
 
+    - name: Download build zip
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ github.event.repository.name }}
+        path: ${{ github.event.repository.name }}
+
+    - name: Display structure of downloaded files
+      run: ls -R
+      working-directory: ${{ github.event.repository.name }}
+
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
 
-    - name: Set the core version
-      run: ./tests/bin/set-core-version.js ${{ matrix.core.version }}
+    - name: Set the core version and plugins config
+      run: ./tests/bin/set-core-version.js --core=${{ matrix.core.version }} --plugins=./${{ github.event.repository.name }}
 
     - name: Set up WP environment
       run: npm run env:start
@@ -41,6 +58,7 @@ jobs:
       run: npm run cypress:run
 
     - name: Update summary
+      if: always()
       run: |
         npx mochawesome-merge ./tests/cypress/reports/*.json -o tests/cypress/reports/mochawesome.json
         rm -rf ./tests/cypress/reports/mochawesome-*.json

README.md

@@ -2,7 +2,7 @@
 
 > Add a Mailchimp signup form widget to your WordPress site.
 
-[![Support Level](https://img.shields.io/badge/support-active-green.svg?label=Support)](#support-level) [![GPL-2.0-or-later License](https://img.shields.io/github/license/mailchimp/wordpress?label=License)](https://github.com/mailchimp/wordpress/blob/develop/LICENSE.md) ![WordPress Plugin Version](https://img.shields.io/wordpress/plugin/v/mailchimp?label=Version) ![WordPress Minimum](https://img.shields.io/wordpress/plugin/wp-version/mailchimp?label=WordPress%20minimum) ![PHP Minimum](https://img.shields.io/wordpress/plugin/required-php/mailchimp?label=PHP%20minimum) ![WordPress Tested Up To](https://img.shields.io/wordpress/plugin/tested/mailchimp?label=WordPress) [![E2E Cypress Tests](https://github.com/mailchimp/wordpress/actions/workflows/e2e.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/e2e.yml) [![PHP Compatibility](https://github.com/mailchimp/wordpress/actions/workflows/php-compat.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/php-compat.yml) [![PHP Linting](https://github.com/mailchimp/wordpress/actions/workflows/phpcs.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/phpcs.yml) [![JS Linting](https://github.com/mailchimp/wordpress/actions/workflows/eslint.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/eslint.yml) 
+[![Support Level](https://img.shields.io/badge/support-active-green.svg?label=Support)](#support-level) [![GPL-2.0-or-later License](https://img.shields.io/github/license/mailchimp/wordpress?label=License)](https://github.com/mailchimp/wordpress/blob/develop/LICENSE.md) ![WordPress Plugin Version](https://img.shields.io/wordpress/plugin/v/mailchimp?label=Version) ![WordPress Minimum](https://img.shields.io/wordpress/plugin/wp-version/mailchimp?label=WordPress%20minimum) ![PHP Minimum](https://img.shields.io/wordpress/plugin/required-php/mailchimp?label=PHP%20minimum) ![WordPress Tested Up To](https://img.shields.io/wordpress/plugin/tested/mailchimp?label=WordPress) [![E2E Cypress Tests](https://github.com/mailchimp/wordpress/actions/workflows/e2e.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/e2e.yml) [![PHP Compatibility](https://github.com/mailchimp/wordpress/actions/workflows/php-compat.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/php-compat.yml) [![PHP Linting](https://github.com/mailchimp/wordpress/actions/workflows/phpcs.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/phpcs.yml) [![JS Linting](https://github.com/mailchimp/wordpress/actions/workflows/eslint.yml/badge.svg)](https://github.com/mailchimp/wordpress/actions/workflows/eslint.yml)
 
 ## Overview
 
@@ -18,6 +18,21 @@ WordPress.com compatibility is limited to Business tier users only. [How to add
 
 ![Configuring extra fields on your Signup Form (optional)](https://github.com/mailchimp/wordpress/blob/develop/.wordpress-org/screenshot-4.jpg?raw=true)
 
+## Access Token Encryption
+
+Starting in version 1.6.0, authentication has changed to use OAuth. As part of this process, we retrieve an access token that can be used to make API requests. To provide a high-level of security, this access token is encrypted before being stored in the WordPress database. In order to ensure this access token can be decrypted when used, the plugin relies on certain security constants that should remain unchanged.
+
+With no additional configuration, we use the standard `LOGGED_IN_KEY` and `LOGGED_IN_SALT` constants that are normally set in your site's `wp-config.php` file. Some sites make use of security plugins that rotate these constants on a periodic basis. When this happens, we won't be able to decrypt the access token and you’ll need to reconnect your Mailchimp account to generate a new access token.
+
+To prevent such issues, it is recommended to define two additional constants in your site's `wp-config.php` file: `MAILCHIMP_SF_ENCRYPTION_KEY` and `MAILCHIMP_SF_ENCRYPTION_SALT`. These constants should consist of a combination of characters, preferably at least 32 characters long. Once set, these values should not be changed. For strong values, you can copy some of the values from [here](https://api.wordpress.org/secret-key/1.1/salt/) and use them. You'll end up with additional code like the following in your `wp-config.php` file:
+
+```php
+define( 'MAILCHIMP_SF_ENCRYPTION_KEY', 'put your unique phrase here' );
+define( 'MAILCHIMP_SF_ENCRYPTION_SALT', 'put your unique phrase here' );
+```
+
+If these constants are added after you've already authenticated with Mailchimp, you will need to reconnect your account. To avoid this, you can copy the values from `LOGGED_IN_KEY` and `LOGGED_IN_SALT` (if they exist) to `MAILCHIMP_SF_ENCRYPTION_KEY` and `MAILCHIMP_SF_ENCRYPTION_SALT` respectively.
+
 ## Frequently Asked Questions
 
 ### Can I have multiple forms on one page?
@@ -41,9 +56,9 @@ This section describes how to install the plugin and get started using it.
 
 ### Advanced
 
-If you have a custom coded sidebar or bells and whistles that prevent enabling widgets  through the WordPress GUI, complete these steps instead.
+If you have a custom coded sidebar or bells and whistles that prevent enabling widgets through the WordPress GUI, complete these steps instead.
 
-WordPress v2.8 or higher: 
+WordPress v2.8 or higher:
 ` [mailchimpsf_form] `
 
 If you are adding it inside a php code block, pop this in:
@@ -89,6 +104,23 @@ Currently we have the plugin configured so it can be translated and the followin
 * sv_SE - Swedish in Sweden (thanks to [Sebastian Johnsson](http://www.agiley.se/) for contributing)
 * tr_TR - Turkish in Turkey (thanks to [Hakan E.](http://kazancexpert.com/) for contributing)
 
+## E2E tests
+The `tests` directory contains end-to-end tests for the project, utilizing Cypress to run tests in an environment created using wp-env.
+
+### Pre-requisites
+- Node.js v20
+- Docker
+- Create an account in [Mailchimp](https://mailchimp.com/)
+
+### Run E2E tests in local
+1. Run `npm install`.
+2. Run `npm run build`.
+3. Run `npm run env:start`.
+4. Set Mailchimp credentials as environment variables:
+    - run `export CYPRESS_MAILCHIMP_USERNAME="your mailchimp username"`
+	- run `export CYPRESS_MAILCHIMP_PASSWORD="your mailchimp password"`
+5. Run `npm run cypress:run`. You can also run `npm run cypress:open` to run tests in UI mode.
+
 ## Support Level
 
 **Active:** Mailchimp is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress.  Bug reports, feature requests, questions, and pull requests are welcome.

css/admin.css

@@ -254,3 +254,15 @@ th.mailchimp-connect {
 #mc-message {
 	margin-top: 26px;
 }
+
+/**
+ * Mailchimp OAuth CSS
+ */
+.mailchimp-sf-oauth-section .oauth-error {
+	display: block;
+	color: #db3a1b;
+}
+
+.mailchimp-sf-oauth-connect-wrapper {
+	display: flex;
+}