From 834e12cb094d7103ff17327d7c2097dc6581224b Mon Sep 17 00:00:00 2001 From: tijmen Date: Tue, 25 Aug 2026 16:56:54 +0200 Subject: [PATCH 1/6] Init onboarding --- src/class-tiny-onboarding.php | 92 +++++++++++++++++++++++++++++++++++ src/class-tiny-plugin.php | 1 + src/views/onboarding-1.php | 6 +++ tiny-compress-images.php | 1 + 4 files changed, 100 insertions(+) create mode 100644 src/class-tiny-onboarding.php create mode 100644 src/views/onboarding-1.php diff --git a/src/class-tiny-onboarding.php b/src/class-tiny-onboarding.php new file mode 100644 index 00000000..85bd0372 --- /dev/null +++ b/src/class-tiny-onboarding.php @@ -0,0 +1,92 @@ +settings = $settings; + } + + function admin_init() { + // $this->set_is_onboarded( 0 ); + if ( $this->is_new_user() && !$this->is_onboarded() ) { + // if user is new and not onboarded + $this->set_is_onboarded( 1 ); + wp_safe_redirect( admin_url( 'options-general.php?page=' . $this->onboarding_url ) ); + exit(); + } + } + + function admin_menu() { + add_submenu_page( + null, + 'Onboarding TinyPNG', + 'Welcome to TinyPNG', + 'manage_options', + $this->onboarding_url, + array( $this, 'render_onboarding_page'), + ); + } + + function render_onboarding_page() { + include __DIR__ . '/views/onboarding-1.php'; + } + + /** + * Checks if user is 'new' + * + * @return bool true if user has no compressions or api key + */ + function is_new_user() { + $api_key = $this->settings->get_api_key(); + $compression_count = $this->settings->get_compression_count(); + return empty( $api_key ) && empty($compression_count); + } + + function is_onboarded() { + $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); + return get_option( $onboarding_status_field ); + } + + /** + * Sets the onboarding status + * + * @param int $is_onboarded status + */ + function set_is_onboarded( $is_onboarded ) { + $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); + return update_option( $onboarding_status_field, $is_onboarded ); + } +} \ No newline at end of file diff --git a/src/class-tiny-plugin.php b/src/class-tiny-plugin.php index ff0708e0..9761272b 100644 --- a/src/class-tiny-plugin.php +++ b/src/class-tiny-plugin.php @@ -82,6 +82,7 @@ public function init() { ); $this->tiny_compatibility(); + new Tiny_Onboarding( $this->settings ); } public function cli_init() { diff --git a/src/views/onboarding-1.php b/src/views/onboarding-1.php new file mode 100644 index 00000000..b9bc033a --- /dev/null +++ b/src/views/onboarding-1.php @@ -0,0 +1,6 @@ +
+

Tinify Account

+

Increase performance and save space with the best + compression algorithm in WordPress.

+ settings->render_account_status(); ?> +
\ No newline at end of file diff --git a/tiny-compress-images.php b/tiny-compress-images.php index 37ccc7e0..561158f7 100644 --- a/tiny-compress-images.php +++ b/tiny-compress-images.php @@ -28,6 +28,7 @@ require dirname( __FILE__ ) . '/src/class-tiny-conversion.php'; require dirname( __FILE__ ) . '/src/class-tiny-picture.php'; require dirname( __FILE__ ) . '/src/class-tiny-apache-rewrite.php'; +require dirname( __FILE__ ) . '/src/class-tiny-onboarding.php'; require dirname( __FILE__ ) . '/src/compatibility/wpml/class-tiny-wpml.php'; require dirname( __FILE__ ) . '/src/compatibility/as3cf/class-tiny-as3cf.php'; require dirname( __FILE__ ) . '/src/compatibility/woocommerce/class-tiny-woocommerce.php'; From 858e24815398163b2054b8f3bb442c33f37b927c Mon Sep 17 00:00:00 2001 From: tijmen Date: Thu, 27 Aug 2026 11:40:14 +0200 Subject: [PATCH 2/6] onboarding scaffolding --- src/class-tiny-onboarding.php | 74 +++++++++++++++++++++++++++-------- src/class-tiny-settings.php | 10 +++++ src/css/admin.css | 7 ++++ src/js/admin.js | 12 ++++++ src/views/onboarding-1.php | 6 ++- src/views/onboarding-2.php | 1 + 6 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 src/views/onboarding-2.php diff --git a/src/class-tiny-onboarding.php b/src/class-tiny-onboarding.php index 85bd0372..01260404 100644 --- a/src/class-tiny-onboarding.php +++ b/src/class-tiny-onboarding.php @@ -24,6 +24,8 @@ class Tiny_Onboarding extends Tiny_WP_Base { private $onboarding_url = 'tiny-onboarding'; + private $steps = array(1, 2); + /** * Tiny settings * @@ -40,28 +42,37 @@ public function __construct( $settings ) { } function admin_init() { - // $this->set_is_onboarded( 0 ); - if ( $this->is_new_user() && !$this->is_onboarded() ) { + if ( $this->is_onboarded() ) { // if user is new and not onboarded $this->set_is_onboarded( 1 ); - wp_safe_redirect( admin_url( 'options-general.php?page=' . $this->onboarding_url ) ); + wp_safe_redirect( $this->get_step_url( 1 ) ); exit(); } } function admin_menu() { - add_submenu_page( - null, - 'Onboarding TinyPNG', - 'Welcome to TinyPNG', - 'manage_options', - $this->onboarding_url, - array( $this, 'render_onboarding_page'), - ); - } - - function render_onboarding_page() { - include __DIR__ . '/views/onboarding-1.php'; + $title = __( 'Welcome to TinyPNG', 'tiny-compress-images' ); + + foreach ( $this->steps as $step ) { + $slug = $this->get_step_slug( $step ); + + $hook = add_submenu_page( + 'options-general.php', + $title, + $title, + 'manage_options', + $slug, + function () use ( $step ) { + include __DIR__ . '/views/onboarding-' . $step . '.php'; + } + ); + + if ( ! $hook ) { + continue; + } + + remove_submenu_page( 'options-general.php', $slug ); + } } /** @@ -70,9 +81,9 @@ function render_onboarding_page() { * @return bool true if user has no compressions or api key */ function is_new_user() { - $api_key = $this->settings->get_api_key(); + $has_api_key = $this->settings->has_api_key(); $compression_count = $this->settings->get_compression_count(); - return empty( $api_key ) && empty($compression_count); + return ! $has_api_key && empty($compression_count); } function is_onboarded() { @@ -80,6 +91,26 @@ function is_onboarded() { return get_option( $onboarding_status_field ); } + /** + * Returns the page slug of the given onboarding step + * + * @param int $step + * @return string + */ + private function get_step_slug( $step ) { + return $this->onboarding_url . '-' . $step; + } + + /** + * Retrieves the url of the given onboarding step + * + * @param int $step + * @return string + */ + public function get_step_url( $step ) { + return admin_url( 'options-general.php?page=' . $this->get_step_slug( $step ) ); + } + /** * Sets the onboarding status * @@ -89,4 +120,13 @@ function set_is_onboarded( $is_onboarded ) { $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); return update_option( $onboarding_status_field, $is_onboarded ); } + + function render_register() { + $compressor = $this->settings->get_compressor(); + if ( $compressor->can_create_key() ) { + include __DIR__ . '/views/account-status-create-advanced.php'; + } else { + include __DIR__ . '/views/account-status-create-simple.php'; + } + } } \ No newline at end of file diff --git a/src/class-tiny-settings.php b/src/class-tiny-settings.php index 342f9d8e..dba27600 100644 --- a/src/class-tiny-settings.php +++ b/src/class-tiny-settings.php @@ -227,6 +227,16 @@ protected function get_api_key_pending() { } } + public function has_api_key() { + $api_key = $this->get_api_key(); + if ( empty($api_key) ) { + return false; + } + + $pending_key = $this->get_api_key_pending(); + return !empty( $pending_key ); + } + protected function clear_api_key_pending() { delete_option( self::get_prefixed_name( 'api_key_pending' ) ); } diff --git a/src/css/admin.css b/src/css/admin.css index 977dadf1..1992d8e5 100644 --- a/src/css/admin.css +++ b/src/css/admin.css @@ -481,4 +481,11 @@ fieldset.tinypng_convert_fields[disabled] { .tiny-mt-2 { margin-top: 10px; +} + +.tiny-onboarding { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/src/js/admin.js b/src/js/admin.js index 03312c0a..180dd4b2 100644 --- a/src/js/admin.js +++ b/src/js/admin.js @@ -170,6 +170,13 @@ var status = jQuery.parseJSON(json); if (status.ok) { + // when in onboarding + const nextStep = jQuery('#tiny-onboarding-step').data('next-step'); + if (nextStep) { + window.location = nextStep; + return; + } + var target = jQuery('#tiny-account-status'); if (target.length) { jQuery.get(ajaxurl + (ajaxurl.indexOf( '?' ) > 0 ? '&' : '?') + 'action=tiny_account_status', function(data) { @@ -295,6 +302,7 @@ }); } + console.log('adminpage:', adminpage); switch (adminpage) { case 'upload-php': eventOn('click', 'button.tiny-compress', compressImage); @@ -312,6 +320,10 @@ case 'post-php': eventOn('click', 'button.tiny-compress', compressImage); break; + case 'settings_page_tiny-onboarding': + eventOn('click', '[data-tiny-action=create-key]', submitKey); + eventOn('click', '[data-tiny-action=update-key]', submitKey); + break; case 'settings_page_tinify': changeEnterKeyTarget('div.tiny-account-status create', '[data-tiny-action=create-key]'); changeEnterKeyTarget('div.tiny-account-status update', '[data-tiny-action=update-key]'); diff --git a/src/views/onboarding-1.php b/src/views/onboarding-1.php index b9bc033a..3b3882df 100644 --- a/src/views/onboarding-1.php +++ b/src/views/onboarding-1.php @@ -1,6 +1,8 @@ -
+

Tinify Account

Increase performance and save space with the best compression algorithm in WordPress.

- settings->render_account_status(); ?> +
+ settings->render_account_status(); ?> +
\ No newline at end of file diff --git a/src/views/onboarding-2.php b/src/views/onboarding-2.php new file mode 100644 index 00000000..89435c7c --- /dev/null +++ b/src/views/onboarding-2.php @@ -0,0 +1 @@ +

test

\ No newline at end of file From 57eda31ca6a917cb79eda125d36bcc5b455b803e Mon Sep 17 00:00:00 2001 From: tijmen Date: Thu, 27 Aug 2026 12:12:48 +0200 Subject: [PATCH 3/6] format --- src/class-tiny-settings.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/class-tiny-settings.php b/src/class-tiny-settings.php index dba27600..d24823ac 100644 --- a/src/class-tiny-settings.php +++ b/src/class-tiny-settings.php @@ -229,12 +229,12 @@ protected function get_api_key_pending() { public function has_api_key() { $api_key = $this->get_api_key(); - if ( empty($api_key) ) { + if ( empty( $api_key ) ) { return false; } $pending_key = $this->get_api_key_pending(); - return !empty( $pending_key ); + return ! empty( $pending_key ); } protected function clear_api_key_pending() { From 20e022126662dce204a02f685301e64d84a4e7de Mon Sep 17 00:00:00 2001 From: tijmen Date: Thu, 27 Aug 2026 12:13:59 +0200 Subject: [PATCH 4/6] use onboarding flag --- src/class-tiny-onboarding.php | 179 +++++++++++++++++----------------- src/views/onboarding-1.php | 12 +-- tiny-compress-images.php | 2 + 3 files changed, 97 insertions(+), 96 deletions(-) diff --git a/src/class-tiny-onboarding.php b/src/class-tiny-onboarding.php index 01260404..382b863c 100644 --- a/src/class-tiny-onboarding.php +++ b/src/class-tiny-onboarding.php @@ -21,112 +21,111 @@ /** * Class responsible for onboarding a new user */ - class Tiny_Onboarding extends Tiny_WP_Base { +class Tiny_Onboarding extends Tiny_WP_Base { + + private $onboarding_url = 'tiny-onboarding'; + private $steps = array( 1, 2 ); - private $onboarding_url = 'tiny-onboarding'; - private $steps = array(1, 2); - /** * Tiny settings * * @var Tiny_Settings */ - private $settings; + private $settings; /** * @param Tiny_Settings $settings */ - public function __construct( $settings ) { - parent::__construct(); - $this->settings = $settings; - } - - function admin_init() { - if ( $this->is_onboarded() ) { - // if user is new and not onboarded - $this->set_is_onboarded( 1 ); - wp_safe_redirect( $this->get_step_url( 1 ) ); - exit(); - } - } - - function admin_menu() { - $title = __( 'Welcome to TinyPNG', 'tiny-compress-images' ); - - foreach ( $this->steps as $step ) { - $slug = $this->get_step_slug( $step ); - - $hook = add_submenu_page( - 'options-general.php', - $title, - $title, - 'manage_options', - $slug, - function () use ( $step ) { - include __DIR__ . '/views/onboarding-' . $step . '.php'; - } - ); - - if ( ! $hook ) { - continue; - } - - remove_submenu_page( 'options-general.php', $slug ); - } - } + public function __construct( $settings ) { + parent::__construct(); + $this->settings = $settings; + } + + function admin_init() { + if ( $this->is_onboarded() ) { + // if user is not onboarded + $this->set_is_onboarded( 1 ); + wp_safe_redirect( $this->get_step_url( 1 ) ); + exit(); + } + } + + function admin_menu() { + $title = __( 'Welcome to TinyPNG', 'tiny-compress-images' ); + + foreach ( $this->steps as $step ) { + $slug = $this->get_step_slug( $step ); + + $hook = add_submenu_page( + 'options-general.php', + $title, + $title, + 'manage_options', + $slug, + function () use ( $step ) { + include __DIR__ . '/views/onboarding-' . $step . '.php'; + } + ); + + if ( ! $hook ) { + continue; + } + + remove_submenu_page( 'options-general.php', $slug ); + } + } /** - * Checks if user is 'new' + * Checks wether user is onboarded + * defaults to true * - * @return bool true if user has no compressions or api key + * @return boolean true if onboarded */ - function is_new_user() { - $has_api_key = $this->settings->has_api_key(); - $compression_count = $this->settings->get_compression_count(); - return ! $has_api_key && empty($compression_count); - } - - function is_onboarded() { - $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); - return get_option( $onboarding_status_field ); - } - - /** - * Returns the page slug of the given onboarding step - * - * @param int $step - * @return string - */ - private function get_step_slug( $step ) { - return $this->onboarding_url . '-' . $step; - } - - /** - * Retrieves the url of the given onboarding step - * - * @param int $step - * @return string - */ - public function get_step_url( $step ) { - return admin_url( 'options-general.php?page=' . $this->get_step_slug( $step ) ); - } + function is_onboarded() { + $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); + return 1 === get_option( $onboarding_status_field, 1 ); + } + + /** + * Returns the page slug of the given onboarding step + * + * @param int $step + * @return string + */ + private function get_step_slug( $step ) { + return $this->onboarding_url . '-' . $step; + } + + /** + * Retrieves the url of the given onboarding step + * + * @param int $step + * @return string + */ + public function get_step_url( $step ) { + return admin_url( 'options-general.php?page=' . $this->get_step_slug( $step ) ); + } /** * Sets the onboarding status * - * @param int $is_onboarded status + * @param int $is_onboarded status */ - function set_is_onboarded( $is_onboarded ) { - $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); - return update_option( $onboarding_status_field, $is_onboarded ); - } - - function render_register() { - $compressor = $this->settings->get_compressor(); - if ( $compressor->can_create_key() ) { - include __DIR__ . '/views/account-status-create-advanced.php'; - } else { - include __DIR__ . '/views/account-status-create-simple.php'; - } - } -} \ No newline at end of file + static function set_is_onboarded( $is_onboarded ) { + $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); + return update_option( $onboarding_status_field, $is_onboarded ); + } + + function render_register() { + $compressor = $this->settings->get_compressor(); + if ( $compressor->can_create_key() ) { + include __DIR__ . '/views/account-status-create-advanced.php'; + } else { + include __DIR__ . '/views/account-status-create-simple.php'; + } + } + + static function on_activate() { + self::set_is_onboarded( 0 ); + } +} diff --git a/src/views/onboarding-1.php b/src/views/onboarding-1.php index 3b3882df..d25e4ce9 100644 --- a/src/views/onboarding-1.php +++ b/src/views/onboarding-1.php @@ -1,8 +1,8 @@
-

Tinify Account

-

Increase performance and save space with the best - compression algorithm in WordPress.

-
- settings->render_account_status(); ?> -
+

Tinify Account

+

Increase performance and save space with the best + compression algorithm in WordPress.

+
+ settings->render_account_status(); ?> +
\ No newline at end of file diff --git a/tiny-compress-images.php b/tiny-compress-images.php index 561158f7..ca34d7ce 100644 --- a/tiny-compress-images.php +++ b/tiny-compress-images.php @@ -47,3 +47,5 @@ __FILE__, array( 'Tiny_Plugin', 'uninstall' ) ); + +register_activation_hook(__FILE__, array('Tiny_Onboarding', 'on_activate') ); \ No newline at end of file From fccfe39a1626025539901bc6d4097485349f5172 Mon Sep 17 00:00:00 2001 From: tijmen Date: Thu, 27 Aug 2026 13:18:17 +0200 Subject: [PATCH 5/6] transport to step 2 on api key registration --- src/class-tiny-onboarding.php | 24 ++++++++++++++++++------ src/js/admin.js | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/class-tiny-onboarding.php b/src/class-tiny-onboarding.php index 382b863c..48cc29bc 100644 --- a/src/class-tiny-onboarding.php +++ b/src/class-tiny-onboarding.php @@ -43,11 +43,12 @@ public function __construct( $settings ) { function admin_init() { if ( $this->is_onboarded() ) { - // if user is not onboarded - $this->set_is_onboarded( 1 ); - wp_safe_redirect( $this->get_step_url( 1 ) ); - exit(); + return; } + + $this->set_is_onboarded( 1 ); + wp_safe_redirect( $this->get_step_url( 1 ) ); + exit(); } function admin_menu() { @@ -83,7 +84,7 @@ function () use ( $step ) { */ function is_onboarded() { $onboarding_status_field = self::get_prefixed_name( 'onboarding_status' ); - return 1 === get_option( $onboarding_status_field, 1 ); + return 1 === (int) get_option( $onboarding_status_field, 1 ); } /** @@ -125,7 +126,18 @@ function render_register() { } } + /** + * Decides on activation whether this site still needs onboarding. + * + * A site that already has a key, or that has compressed before, keeps the + * default onboarded state so it is never sent through onboarding again. + */ static function on_activate() { - self::set_is_onboarded( 0 ); + $api_key = get_option( self::get_prefixed_name( 'api_key' ) ); + $compression_count = get_option( self::get_prefixed_name( 'status' ) ); + + if ( empty( $api_key ) && empty( $compression_count ) ) { + self::set_is_onboarded( 0 ); + } } } diff --git a/src/js/admin.js b/src/js/admin.js index 180dd4b2..fb4a1369 100644 --- a/src/js/admin.js +++ b/src/js/admin.js @@ -320,7 +320,7 @@ case 'post-php': eventOn('click', 'button.tiny-compress', compressImage); break; - case 'settings_page_tiny-onboarding': + case 'settings_page_tiny-onboarding-1': eventOn('click', '[data-tiny-action=create-key]', submitKey); eventOn('click', '[data-tiny-action=update-key]', submitKey); break; From c0860e075025b83d5b95972bd8ae47ad2fe3de1a Mon Sep 17 00:00:00 2001 From: tijmen Date: Tue, 1 Sep 2026 17:33:50 +0200 Subject: [PATCH 6/6] onboarding --- src/class-tiny-onboarding.php | 63 +++++++++++++++++++++++++++++---- src/class-tiny-settings.php | 2 +- src/css/admin.css | 10 ++++++ src/js/admin.js | 30 ++++++++++++---- src/views/onboarding-1.php | 22 +++++++++--- src/views/onboarding-2.php | 65 ++++++++++++++++++++++++++++++++++- 6 files changed, 172 insertions(+), 20 deletions(-) diff --git a/src/class-tiny-onboarding.php b/src/class-tiny-onboarding.php index 48cc29bc..97887def 100644 --- a/src/class-tiny-onboarding.php +++ b/src/class-tiny-onboarding.php @@ -23,8 +23,17 @@ */ class Tiny_Onboarding extends Tiny_WP_Base { - private $onboarding_url = 'tiny-onboarding'; - private $steps = array( 1, 2 ); + /** + * Prefix of every onboarding step page slug. + * + * @var string + */ + const PAGE_SLUG = 'tiny-onboarding'; + + /** + * @var string + */ + private $page_title; /** * Tiny settings @@ -47,20 +56,34 @@ function admin_init() { } $this->set_is_onboarded( 1 ); + + if ( self::is_bulk_activation() ) { + return; + } + wp_safe_redirect( $this->get_step_url( 1 ) ); exit(); } + /** + * Onboarding is skipped when activating multiple plugins + * + * @return bool + */ + private static function is_bulk_activation() { + return filter_has_var( INPUT_GET, 'activate-multi' ); + } + function admin_menu() { - $title = __( 'Welcome to TinyPNG', 'tiny-compress-images' ); + $this->page_title = __( 'Welcome to TinyPNG', 'tiny-compress-images' ); foreach ( $this->steps as $step ) { $slug = $this->get_step_slug( $step ); $hook = add_submenu_page( 'options-general.php', - $title, - $title, + $this->page_title, + $this->page_title, 'manage_options', $slug, function () use ( $step ) { @@ -73,9 +96,24 @@ function () use ( $step ) { } remove_submenu_page( 'options-general.php', $slug ); + + /** + * because title is retrieved from submenu, which is not part of the menu, + * resolve it through globals + */ + add_action( 'load-' . $hook, $this->get_method( 'set_page_title' ) ); } } + /** + * Supplies the title of a page that is not listed in the menu. + * + * Hooked to `load-{$hook}` of every onboarding step. + */ + public function set_page_title() { + $GLOBALS['title'] = $this->page_title; + } + /** * Checks wether user is onboarded * defaults to true @@ -94,7 +132,20 @@ function is_onboarded() { * @return string */ private function get_step_slug( $step ) { - return $this->onboarding_url . '-' . $step; + return self::PAGE_SLUG . '-' . $step; + } + + /** + * Whether the current admin request is one of the onboarding steps. + * + * Reads the page WordPress itself resolved, so no request input is touched. + * + * @return bool + */ + public static function is_onboarding_page() { + $page = isset( $GLOBALS['plugin_page'] ) ? $GLOBALS['plugin_page'] : ''; + + return 0 === strpos( $page, self::PAGE_SLUG . '-' ); } /** diff --git a/src/class-tiny-settings.php b/src/class-tiny-settings.php index d24823ac..39ebe67f 100644 --- a/src/class-tiny-settings.php +++ b/src/class-tiny-settings.php @@ -108,7 +108,7 @@ public function admin_init() { ); } - if ( current_user_can( 'manage_options' ) ) { + if ( current_user_can( 'manage_options' ) && ! Tiny_Onboarding::is_onboarding_page() ) { $this->setup_incomplete_checks(); } diff --git a/src/css/admin.css b/src/css/admin.css index 1992d8e5..acd2a259 100644 --- a/src/css/admin.css +++ b/src/css/admin.css @@ -488,4 +488,14 @@ fieldset.tinypng_convert_fields[disabled] { flex-direction: column; justify-content: center; align-items: center; +} + +.tiny-card { + background: #fff; + border: 1px solid #E1E1E1; + border-radius: 8px; + padding: 12px; +} +.tiny-text-center { + text-align: center; } \ No newline at end of file diff --git a/src/js/admin.js b/src/js/admin.js index fb4a1369..8c2f7033 100644 --- a/src/js/admin.js +++ b/src/js/admin.js @@ -135,6 +135,22 @@ return false; } + /** + * Does nothing outside of onboarding + * If key is active, shows continue button + */ + function updateOnboardingContinue() { + const button = jQuery('#tiny-onboarding-continue'); + if (!button.length) { + return; + } + + const status = jQuery('#tiny-account-status p.status').closest('div.status'); + const valid = status.hasClass('status-success') || status.hasClass('status-pending'); + + button.toggle(valid); + } + function submitKey(event) { event.preventDefault(); jQuery(event.target).attr({disabled: true}).addClass('loading'); @@ -170,18 +186,13 @@ var status = jQuery.parseJSON(json); if (status.ok) { - // when in onboarding - const nextStep = jQuery('#tiny-onboarding-step').data('next-step'); - if (nextStep) { - window.location = nextStep; - return; - } - var target = jQuery('#tiny-account-status'); if (target.length) { jQuery.get(ajaxurl + (ajaxurl.indexOf( '?' ) > 0 ? '&' : '?') + 'action=tiny_account_status', function(data) { jQuery(event.target).attr({disabled: false}).removeClass('loading'); target.replaceWith(data); + // The refreshed markup reports whether the key actually works. + updateOnboardingContinue(); }); } jQuery('div.tiny-notice[data-name="setting"]').remove(); @@ -321,8 +332,13 @@ eventOn('click', 'button.tiny-compress', compressImage); break; case 'settings_page_tiny-onboarding-1': + changeEnterKeyTarget('div.tiny-account-status create', '[data-tiny-action=create-key]'); + changeEnterKeyTarget('div.tiny-account-status update', '[data-tiny-action=update-key]'); + eventOn('click', '[data-tiny-action=create-key]', submitKey); eventOn('click', '[data-tiny-action=update-key]', submitKey); + + updateOnboardingContinue(); break; case 'settings_page_tinify': changeEnterKeyTarget('div.tiny-account-status create', '[data-tiny-action=create-key]'); diff --git a/src/views/onboarding-1.php b/src/views/onboarding-1.php index d25e4ce9..c6b8fa3c 100644 --- a/src/views/onboarding-1.php +++ b/src/views/onboarding-1.php @@ -1,8 +1,20 @@
-

Tinify Account

-

Increase performance and save space with the best - compression algorithm in WordPress.

-
+

+

+ +

+
settings->render_account_status(); ?>
-
\ No newline at end of file + +
diff --git a/src/views/onboarding-2.php b/src/views/onboarding-2.php index 89435c7c..c933515f 100644 --- a/src/views/onboarding-2.php +++ b/src/views/onboarding-2.php @@ -1 +1,64 @@ -

test

\ No newline at end of file + + +
+

+

+ +
+ +

+ +
+

+ + > + +

+

+ + > + +

+
+ +

+ + + +

+

+ + + +

+