animations
7 months ago
images
3 months ago
javascript
2 months ago
modals
3 months ago
stylesheet
2 months ago
templates
1 year ago
admin.php
3 months ago
connect-oneclick.php
3 months ago
connect.php
7 months ago
dashboard-oneclick.php
3 months ago
dashboard.php
3 months ago
oneclick.php
3 months ago
preview-site.php
7 months ago
system-report.php
4 months ago
connect.php
171 lines
| 1 | <div id="nitropack-connect"> |
| 2 | <div class="nitropack-connect-inner card"> |
| 3 | <div class="row"> |
| 4 | <div class="left-col"> |
| 5 | <div class="progress-wrapper"> |
| 6 | <div class="progress-bar"> |
| 7 | <div class="progress" style="width: 33.33%;"></div> |
| 8 | </div> |
| 9 | <div class="step"><?php esc_html_e( 'Step 1/3', 'nitropack' ); ?></div> |
| 10 | </div> |
| 11 | <div class="headline-container"> |
| 12 | <h1><?php esc_html_e( 'Connect NitroPack to your WordPress site', 'nitropack' ); ?></h1> |
| 13 | <p><?php esc_html_e( 'You\'re just one click away from connecting NitroPack to your site.', 'nitropack' ); ?> |
| 14 | </p> |
| 15 | </div> |
| 16 | <form action="options.php" method="post" id="api-details-form" style="display: none"> |
| 17 | <div id="manual-connect-fields"> |
| 18 | <div class="form-row"> |
| 19 | <label><span><?php esc_html_e( 'API key', 'nitropack' ); ?></span> |
| 20 | <div class="tooltip"><span class="tooltip-icon" data-tooltip-target="tooltip-api-key"> |
| 21 | <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/info.svg'; ?>"> |
| 22 | </span> |
| 23 | <div id="tooltip-api-key" role="tooltip" class="tooltip-container hidden"> |
| 24 | <?php |
| 25 | esc_html_e( 'API Key is a unique alphanumeric identifier assigned to each website using NitroPack.', 'nitropack' ); |
| 26 | ?> |
| 27 | <div class="tooltip-arrow" data-popper-arrow></div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <input id="nitropack-siteid-input" name="nitropack-siteId" type="text" |
| 31 | class="form-control" placeholder="<?php esc_html_e( 'API key ', 'nitropack' ); ?>"> |
| 32 | </label> |
| 33 | </div> |
| 34 | <div class="form-row"> |
| 35 | <label><span><?php esc_html_e( 'API secret key', 'nitropack' ); ?></span> |
| 36 | <div class="tooltip"><span class="tooltip-icon" |
| 37 | data-tooltip-target="tooltip-secret-key"> |
| 38 | <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/info.svg'; ?>"> |
| 39 | </span> |
| 40 | <div id="tooltip-secret-key" role="tooltip" class="tooltip-container hidden"> |
| 41 | <?php |
| 42 | esc_html_e( 'Site secret is a confidential alphanumeric key associated with your website, designed to ensure secure communication between NitroPack and your site.', 'nitropack' ); |
| 43 | ?> |
| 44 | <div class="tooltip-arrow" data-popper-arrow></div> |
| 45 | </div> |
| 46 | </div> |
| 47 | <input id="nitropack-sitesecret-input" name="nitropack-siteSecret" type="text" |
| 48 | class="form-control" |
| 49 | placeholder="<?php esc_html_e( 'API secret key', 'nitropack' ); ?>"> |
| 50 | <p class="learn-more"> |
| 51 | <?php esc_html_e( 'Learn where to find your site\'s API details', 'nitropack' ); ?> |
| 52 | <a href="https://nitropack.io/blog/post/how-to-get-your-api-keys" |
| 53 | target="_blank"><?php esc_html_e( 'here', 'nitropack' ); ?></a></a> |
| 54 | </label> |
| 55 | </div> |
| 56 | </div> |
| 57 | </form> |
| 58 | <a href="#" class="btn btn-primary btn-xl w-100" id="connect-nitropack"> |
| 59 | <img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/loading.svg'; ?>" alt="loading" |
| 60 | class="icon-left hidden"> |
| 61 | <?php esc_html_e( 'Connect NitroPack', 'nitropack' ); ?> |
| 62 | </a> |
| 63 | <div class="help main"> |
| 64 | <?php _e( 'Having trouble connecting? Explore our <a href="#" class="btn-manual-connect">manual connect</a> option, browse our <a href="https://support.nitropack.io/en/collections/6175768-nitropack-for-wordpress-and-woocommerce" target="_blank">FAQ section</a>, or reach out to our <a href="https://support.nitropack.io/en/" target="_blank">support team</a>.', 'nitropack' ); ?> |
| 65 | </div> |
| 66 | <div class="help manual" style="display: none"><?php esc_html_e( 'Or', 'nitropack' ); ?> <a href="#" |
| 67 | class="btn-automatic-connect"><?php esc_html_e( 'connect automatically', 'nitropack' ); ?></a> |
| 68 | </div> |
| 69 | </div> |
| 70 | <div class="right-col logos"> |
| 71 | <div id="nitropack-wp-animation"></div> |
| 72 | <script> |
| 73 | lottie.loadAnimation({ |
| 74 | container: document.getElementById('nitropack-wp-animation'), |
| 75 | renderer: 'svg', // Render as 'svg', 'canvas', or 'html' |
| 76 | loop: false, |
| 77 | autoplay: true, |
| 78 | path: '<?php echo plugin_dir_url( __FILE__ ) . 'animations/nitropack+wp.json'; ?>' |
| 79 | }); |
| 80 | </script> |
| 81 | </div> |
| 82 | </div> |
| 83 | </div> |
| 84 | </div> |
| 85 | <script> |
| 86 | (function ($) { |
| 87 | |
| 88 | let connectPopup = null; |
| 89 | const homePageUrl = "<?php echo get_home_url(); ?>"; |
| 90 | const nitroNonce = '<?php echo wp_create_nonce( NITROPACK_NONCE ); ?>'; |
| 91 | |
| 92 | $(document).ready(function () { |
| 93 | function automaticConnect() { |
| 94 | if (!connectPopup || !connectPopup.window) { |
| 95 | let screenWidth = window.screen.availWidth; |
| 96 | let screenHeight = window.screen.availHeight; |
| 97 | let windowWidth = 800; |
| 98 | let windowHeight = 700; |
| 99 | let leftPos = window.top.outerWidth / 2 + window.top.screenX - (windowWidth / 2); |
| 100 | let topPos = window.top.outerHeight / 2 + window.top.screenY - (windowHeight / 2); |
| 101 | |
| 102 | connectPopup = window.open("https://<?php echo NITROPACKIO_HOST; ?>/auth?website=" + homePageUrl, "QuickConnect", "width=" + windowWidth + ",height=" + windowHeight + ",left=" + leftPos + ",top=" + topPos); |
| 103 | } else if (connectPopup && connectPopup.window) { |
| 104 | connectPopup.focus(); |
| 105 | } |
| 106 | } |
| 107 | $('.btn-manual-connect').click(function (e) { |
| 108 | $('#api-details-form, .help').toggle(); |
| 109 | }); |
| 110 | $('.btn-automatic-connect').click(function () { |
| 111 | automaticConnect(); |
| 112 | }); |
| 113 | $("#connect-nitropack").on("click", function (e) { |
| 114 | e.preventDefault(); |
| 115 | let siteId = $("#nitropack-siteid-input").val(); |
| 116 | let siteSecret = $("#nitropack-sitesecret-input").val(); |
| 117 | let loading_icon = $(this).find('.icon-left'); |
| 118 | let isManualConnect = $("#api-details-form").is(":visible"); |
| 119 | |
| 120 | loading_icon.removeClass('hidden'); |
| 121 | |
| 122 | if (isManualConnect || (siteId && siteSecret)) { |
| 123 | |
| 124 | $.post(ajaxurl, { |
| 125 | action: 'nitropack_verify_connect', |
| 126 | siteId: siteId, |
| 127 | siteSecret: siteSecret, |
| 128 | nonce: nitroNonce |
| 129 | }) |
| 130 | .done(function (response) { |
| 131 | let resp = JSON.parse(response); |
| 132 | if (resp.status == "success") { |
| 133 | $(".success-container").removeClass('hidden'); |
| 134 | $(".header, .connect").addClass('hidden'); |
| 135 | window.location.href = resp.url; |
| 136 | } else { |
| 137 | $("#nitropack-siteid-input, #nitropack-sitesecret-input").val(""); |
| 138 | $("#main .notification").remove(); |
| 139 | let errorMessage = resp.message ? resp.message : "<?php esc_html_e( 'Api details verification failed! Please check whether you entered correct details.', 'nitropack' ); ?>"; |
| 140 | |
| 141 | if ($('#api-details-form .nitro-notification').length) { |
| 142 | $('#api-details-form .nitro-notification .notification-inner p').text(errorMessage); |
| 143 | } else { |
| 144 | $('#api-details-form').prepend('<div class="nitro-notification notification-error"><div class="text-box text-center"><div class="notification-inner" style="justify-content: center; gap: 0;""><img src="<?php echo plugin_dir_url( __FILE__ ) . 'images/alert-circle.svg'; ?>" alt="Error" class="icon"><p>' + errorMessage + '</p></div></div></div>'); |
| 145 | } |
| 146 | loading_icon.addClass('hidden'); |
| 147 | } |
| 148 | }) |
| 149 | .fail(function () { |
| 150 | console.error("An error occurred during the AJAX request."); |
| 151 | }) |
| 152 | } else if (!isManualConnect) { |
| 153 | automaticConnect(); |
| 154 | } |
| 155 | }); |
| 156 | }); |
| 157 | |
| 158 | window.addEventListener("message", function (e) { |
| 159 | if (e.data.messageType == "nitropack-connect") { |
| 160 | $("#nitropack-siteid-input").val(e.data.api.key); |
| 161 | $("#nitropack-sitesecret-input").val(e.data.api.secret); |
| 162 | $("#connect-nitropack").click(); |
| 163 | if (connectPopup && !connectPopup.closed) { |
| 164 | connectPopup.close(); |
| 165 | connectPopup = null; |
| 166 | } |
| 167 | } |
| 168 | }); |
| 169 | |
| 170 | })(jQuery); |
| 171 | </script> |