Add support for multiple Twitter Accounts

.github/workflows/cypress.yml

@@ -58,18 +58,13 @@ jobs:
         run: npm install
 
       - name: Set the core version and plugins config 
-        run: ./tests/bin/set-wp-config.js --core=${{ matrix.core.version }} --plugins=./${{ github.event.repository.name }},https://downloads.wordpress.org/plugin/classic-editor.1.6.1.zip
+        run: ./tests/bin/set-wp-config.js --core=${{ matrix.core.version }} --plugins=./${{ github.event.repository.name }},https://downloads.wordpress.org/plugin/classic-editor.1.6.1.zip,./tests/test-plugin
 
       - name: Set up WP environment
         run: npm run env:start
 
       - name: Test
         run: npm run cypress:run
-        env:
-          CYPRESS_TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY_V2 }}
-          CYPRESS_TWITTER_API_SECRET: ${{ secrets.TWITTER_API_SECRET_V2 }}
-          CYPRESS_TWITTER_ACCESS_TOKEN: ${{ secrets.TWITTER_ACCESS_TOKEN_V2 }}
-          CYPRESS_TWITTER_ACCESS_SECRET: ${{ secrets.TWITTER_ACCESS_SECRET_V2 }}
 
       - name: Update summary
         if: always()
@@ -81,7 +76,7 @@ jobs:
           cat ./tests/cypress/reports/mochawesome.md >> $GITHUB_STEP_SUMMARY
 
       - name: Upload artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-artifact-autoshare-for-twitter

.wp-env.json

@@ -1,7 +1,8 @@
 {
   "plugins": [
     "https://downloads.wordpress.org/plugin/classic-editor.1.6.1.zip",
-    "."
+    ".",
+    "./tests/test-plugin"
   ],
   "env": {
     "tests": {

assets/css/admin-autoshare-for-twitter-settings.css

@@ -86,7 +86,7 @@
 		display: flex;
 	}
 
-	.autoshare-settings form {
+	.autoshare-settings .settings-wrapper {
 		width: 70%;
 		margin-right: 50px;
 	}
@@ -96,8 +96,13 @@
 	}
 }
 
+.autoshare-settings table.twitter_accounts th,
+.autoshare-settings table.twitter_accounts td {
+    padding: 8px 10px;
+}
+
 @media (min-width: 1200px) {
-	.autoshare-settings form {
+	.autoshare-settings .settings-wrapper {
 		width: 60%;
 		margin-right: 10%;
 	}

assets/css/admin-autoshare-for-twitter.css

@@ -216,3 +216,51 @@ tbody .autoshare-for-twitter-status-logo--disabled::before {
 .autoshare-for-twitter-editor-panel .autoshare-for-twitter-tweet-text label {
 	width: 100%;
 }
+
+.autoshare-settings .twitter-account-profile-image {
+	float:left;
+	margin-right: 10px;
+	border-radius: 50%;
+	max-width: 48px;
+}
+
+.autoshare-for-twitter-accounts-wrapper {
+	margin-top: 24px;
+}
+
+#autoshare_for_twitter_metabox .autoshare-for-twitter-accounts-wrapper {
+	margin-top: 12px;
+}
+
+.autoshare-for-twitter-accounts-wrapper .twitter-account-wrapper {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	margin-bottom: 8px;
+}
+
+.autoshare-for-twitter-accounts-wrapper .twitter-account-wrapper img {
+	max-width: 36px;
+	max-height: 36px;
+	border-radius: 50%;
+}
+
+.autoshare-for-twitter-accounts-wrapper .twitter-account-wrapper span.account-details {
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+#autoshare_for_twitter_metabox .twitter-account-wrapper input.autoshare-for-twitter-account-checkbox{
+	margin-left: auto;
+}
+
+.autoshare-for-twitter-accounts-wrapper .twitter-account-wrapper .autoshare-for-twitter-account-toggle {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	margin-left: auto;
+}
+
+.autoshare-for-twitter-accounts-wrapper .twitter-account-wrapper span.connect-account-link {
+	margin-top: 12px;
+	display: block;
+}

assets/js/admin-autoshare-for-twitter-classic-editor.js

@@ -27,7 +27,7 @@
 	// Event handlers.
 	$tweetPost.on('click', handleRequest);
 	$tweetText.change(handleRequest);
-	$tweetPost.change(toggleAllowImageVisibility);
+	$tweetPost.change(toggleVisibility);
 	$allowTweetImage.change(handleRequest);
 	$editLink.on('click', function() {
 		$editBody.slideToggle();
@@ -42,6 +42,7 @@
 		$('#autoshare-for-twitter-override-body').slideToggle();
 		$editLink.show();
 	});
+	$('input.autoshare-for-twitter-account-checkbox').on('change', handleRequest);
 
 	// Runs on page load to auto-enable posts to be tweeted
 	window.onload = function(event) {
@@ -66,19 +67,24 @@
 
 		$icon.removeClass('pending');
 		$tweetPost.prop('checked', false);
-		$('#submit').attr('disabled', true);
+		$('#publish').prop('disabled', false);
 	}
 
 	/**
 	 * AJAX handler
 	 * @param event
 	 */
 	function handleRequest(event, status = $tweetPost.prop('checked')) {
-		var data = {};
+		let data = {};
+		let enabledAccounts = [];
+		$('input.autoshare-for-twitter-account-checkbox:checked').each(function() {
+			enabledAccounts.push($(this).val());
+		});
 		data[adminAutoshareForTwitter.enableAutoshareKey] = status;
 		data[adminAutoshareForTwitter.tweetBodyKey] = $tweetText.val();
 		data[adminAutoshareForTwitter.allowTweetImageKey] = $allowTweetImage.prop('checked');
-		$('#submit').attr('disabled', true);
+		data[adminAutoshareForTwitter.tweetAccountsKey] = enabledAccounts;
+		$('#publish').prop('disabled', true);
 
 		wp.apiFetch({
 			url: adminAutoshareForTwitter.restUrl,
@@ -113,7 +119,7 @@
 					$allowTweetImage.prop('checked', false);
 				}
 
-				$('#submit').attr('disabled', false);
+				$('#publish').prop('disabled', false);
 			})
 			.catch(onRequestFail);
 	}
@@ -173,6 +179,20 @@
 		$('#postimagediv').on( 'click', '#remove-post-thumbnail', toggleAllowImageVisibility );
 	}
 
+	/**
+	 * Show/Hide accounts and visibility options.
+	 */
+	function toggleVisibility( event ) {
+		toggleAllowImageVisibility( event );
+		const autoshareEnabled = $tweetPost.prop('checked');
+		const accountsWrap = $('.autoshare-for-twitter-accounts-wrapper');
+		if ( autoshareEnabled ) {
+			accountsWrap.show();
+		} else {
+			accountsWrap.hide();
+		}
+	}
+
 	/**
 	 * Show/Hide "Use featured image in Tweet" checkbox.
 	 */

includes/admin/assets.php

@@ -8,13 +8,18 @@
 
 namespace TenUp\AutoshareForTwitter\Admin\Assets;
 
+use TenUp\AutoshareForTwitter\Core\Twitter_Accounts as Twitter_Accounts;
+
 use function TenUp\AutoshareForTwitter\Utils\get_autoshare_for_twitter_meta;
 use function TenUp\AutoshareForTwitter\Utils\opted_into_autoshare_for_twitter;
 use function TenUp\AutoshareForTwitter\REST\post_autoshare_for_twitter_meta_rest_route;
 use function TenUp\AutoshareForTwitter\Utils\autoshare_enabled;
 use function TenUp\AutoshareForTwitter\Utils\tweet_image_allowed;
+use function TenUp\AutoshareForTwitter\Utils\get_tweet_accounts;
+use function TenUp\AutoshareForTwitter\Utils\get_default_autoshare_accounts;
 
 use const TenUp\AutoshareForTwitter\Core\Post_Meta\ENABLE_AUTOSHARE_FOR_TWITTER_KEY;
+use const TenUp\AutoshareForTwitter\Core\Post_Meta\TWEET_ACCOUNTS_KEY;
 use const TenUp\AutoshareForTwitter\Core\Post_Meta\TWEET_BODY_KEY;
 use const TenUp\AutoshareForTwitter\Core\Post_Meta\TWITTER_STATUS_KEY;
 use const TenUp\AutoshareForTwitter\Core\Post_Meta\TWEET_ALLOW_IMAGE;
@@ -157,6 +162,12 @@ function enqueue_editor_assets() {
 		return;
 	}
 
+	// Don't load if no Twitter accounts are configured.
+	$accounts = ( new Twitter_Accounts() )->get_twitter_accounts( true );
+	if ( empty( $accounts ) ) {
+		return;
+	}
+
 	wp_enqueue_script(
 		SCRIPT_HANDLE,
 		trailingslashit( AUTOSHARE_FOR_TWITTER_URL ) . 'dist/autoshare-for-twitter.js',
@@ -192,7 +203,12 @@ function localize_data( $handle = SCRIPT_HANDLE ) {
 		);
 	}
 
-	$status_meta = get_autoshare_for_twitter_meta( $post_id, TWITTER_STATUS_KEY );
+	$status_meta    = get_autoshare_for_twitter_meta( $post_id, TWITTER_STATUS_KEY );
+	$accounts       = ( new Twitter_Accounts() )->get_twitter_accounts( true );
+	$tweet_accounts = get_tweet_accounts( $post_id );
+	if ( empty( $tweet_accounts ) ) {
+		$tweet_accounts = get_default_autoshare_accounts();
+	}
 
 	$localization = [
 		'enabled'            => autoshare_enabled( $post_id ),
@@ -207,6 +223,10 @@ function localize_data( $handle = SCRIPT_HANDLE ) {
 		'allowTweetImage'    => tweet_image_allowed( $post_id ),
 		'allowTweetImageKey' => TWEET_ALLOW_IMAGE,
 		'retweetAction'      => 'tenup_autoshare_retweet',
+		'connectAccountUrl'  => admin_url( 'options-general.php?page=autoshare-for-twitter' ),
+		'tweetAccounts'      => $tweet_accounts,
+		'tweetAccountsKey'   => TWEET_ACCOUNTS_KEY,
+		'connectedAccounts'  => $accounts ?? [],
 	];
 
 	wp_localize_script( $handle, 'adminAutoshareForTwitter', $localization );