File "integration-cloudflare-modal.php"
Full Path: /home/digimqhe/flashdigi.uk/comment-content/plugins/hummingbird-performance/admin/modals/integration-cloudflare-modal.php
File size: 12.36 KB
MIME-type: text/x-php
Charset: utf-8
<?php
/**
* Integrations Cloudflare connect modal.
*
* @since 3.0.0
* @package Hummingbird
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="sui-modal sui-modal-md">
<div
role="dialog"
id="cloudflare-connect"
class="sui-modal-content"
aria-live="polite"
aria-modal="true"
aria-labelledby="cloudflare-connect-title"
aria-describedby="cloudflare-connect-desc"
>
<div id="slide-cloudflare-connect" class="sui-modal-slide sui-loaded sui-active">
<div class="sui-box sui-padding-bottom">
<div class="sui-box-header sui-flatten sui-content-center sui-spacing-top--60">
<figure class="sui-box-logo" aria-hidden="true">
<img src="<?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large.png' ); ?>" alt="<?php esc_attr_e( 'Connect Cloudflare', 'wphb' ); ?>"
srcset="<?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large.png' ); ?> 1x, <?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large@2x.png' ); ?> 2x">
</figure>
<button class="sui-button-icon sui-button-float--right" data-modal-close="">
<span class="sui-icon-close sui-md" aria-hidden="true"></span>
<span class="sui-screen-reader-text"><?php esc_attr_e( 'Close this modal', 'wphb' ); ?></span>
</button>
<h3 id="cloudflare-connect-title" class="sui-box-title sui-lg">
<?php esc_html_e( 'Connect Cloudflare', 'wphb' ); ?>
</h3>
<p id="cloudflare-connect-desc" class="sui-description">
<?php
printf( /* translators: %1$s - opening <a> tag, %2$s - closing </a> tag */
esc_html__( 'Connect to your Cloudflare account with either a Global API key or an API token and configure your settings in Hummingbird. Need help getting your API credentials? %1$sFollow the steps%2$s below.', 'wphb' ),
'<a href="#" id="cloudflare-connect-steps">',
'</a>'
)
?>
</p>
</div>
<div class="sui-side-tabs" style="margin-top: 20px;">
<div class="sui-tabs-menu" style="justify-content: center">
<label for="cf-api-key-tab" class="sui-tab-item active">
<input type="radio" name="cf_connection_type" value="key" id="cf-api-key-tab" data-tab-menu="cf-api-key" checked="checked">
<?php esc_html_e( 'Global API Key', 'wphb' ); ?>
</label>
<label for="cf-token-tab" class="sui-tab-item">
<input type="radio" name="cf_connection_type" value="token" id="cf-token-tab" data-tab-menu="cf-token">
<?php esc_html_e( 'API Token', 'wphb' ); ?>
</label>
</div>
<form id="cloudflare-credentials" class="sui-tabs-content">
<div class="sui-tab-content sui-tab-boxed sui-no-margin sui-no-padding active" style="border: 0" data-tab-content="cf-api-key">
<div class="sui-box-body sui-no-padding-bottom">
<div class="sui-form-field">
<label for="cloudflare-email" id="label-cloudflare-email" class="sui-label">
<?php esc_html_e( 'Cloudflare account email', 'wphb' ); ?>
</label>
<input type="email"
placeholder="<?php esc_attr_e( 'Enter email address here', 'wphb' ); ?>"
id="cloudflare-email"
name="cloudflare-email"
class="sui-form-control"
aria-labelledby="label-cloudflare-email"
/>
</div>
<div class="sui-form-field" id="api-key-form-field">
<label for="cloudflare-api-key" id="label-cloudflare-api-key" class="sui-label">
<?php esc_html_e( 'Cloudflare Global API key', 'wphb' ); ?>
</label>
<div class="sui-with-button sui-with-button-inside">
<input type="password"
placeholder="<?php esc_attr_e( 'Enter 37 digit API key here', 'wphb' ); ?>"
id="cloudflare-api-key"
name="cloudflare-api-key"
class="sui-form-control"
autocomplete="off"
aria-labelledby="error-api-key label-cloudflare-api-key"
/>
<span id="error-api-key" class="sui-error-message" style="display: none;" role="alert"></span>
<button class="sui-button-icon" type="button">
<span aria-hidden="true" class="sui-icon-eye"></span>
<span class="sui-password-text sui-screen-reader-text">
<?php esc_html_e( 'Show API key', 'wphb' ); ?>
</span>
<span class="sui-password-text sui-screen-reader-text sui-hidden">
<?php esc_html_e( 'Hide API key', 'wphb' ); ?>
</span>
</button>
</div>
</div>
</div>
</div>
<div class="sui-tab-content sui-tab-boxed sui-no-margin sui-no-padding" style="border: 0" data-tab-content="cf-token">
<div class="sui-box-body sui-no-padding-bottom">
<div class="sui-form-field" id="api-token-form-field">
<label for="cloudflare-api-token" id="label-cloudflare-api-token" class="sui-label">
<?php esc_html_e( 'Cloudflare API token', 'wphb' ); ?>
</label>
<div class="sui-with-button sui-with-button-inside">
<input type="password"
minlength="1"
placeholder="<?php esc_attr_e( 'Enter 40 digit API token here', 'wphb' ); ?>"
id="cloudflare-api-token"
name="cloudflare-api-token"
class="sui-form-control"
autocomplete="off"
aria-labelledby="error-api-token label-cloudflare-api-token"
/>
<span id="error-api-token" class="sui-error-message" style="display: none;" role="alert"></span>
<button class="sui-button-icon" type="button">
<span aria-hidden="true" class="sui-icon-eye"></span>
<span class="sui-password-text sui-screen-reader-text">
<?php esc_html_e( 'Show API token', 'wphb' ); ?>
</span>
<span class="sui-password-text sui-screen-reader-text sui-hidden">
<?php esc_html_e( 'Hide API token', 'wphb' ); ?>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="sui-box-footer sui-flatten sui-content-separated sui-no-padding-bottom">
<small class="sui-no-margin-bottom">
<a href="#" class="cloudflare-connect-steps" id="cloudflare-show-key-help">
<span><?php esc_html_e( 'Need help getting your Global API key?', 'wphb' ); ?></span>
<span class="sui-icon-chevron-down" aria-hidden="true"></span>
</a>
</small>
<button class="sui-button sui-button-blue" id="cloudflare-connect-save" aria-live="polite" form="cloudflare-credentials" disabled="disabled">
<span class="sui-button-text-default" aria-hidden="true">
<?php esc_html_e( 'Connect', 'wphb' ); ?>
</span>
<span class="sui-button-text-onload">
<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
<?php esc_html_e( 'Connecting...', 'wphb' ); ?>
</span>
</button>
</div>
<ol id="cloudflare-key-how-to" class="sui-border-frame sui-hidden">
<li>
<?php
printf( /* translators: %1$s - opening a tag, %2$s - closing a tag */
esc_html__( '%1$sLog in%2$s to your Cloudflare account.', 'wphb' ),
'<a target="_blank" href="https://dash.cloudflare.com/login">',
'</a>'
);
?>
</li>
<li><?php esc_html_e( 'Go to My Profile.', 'wphb' ); ?></li>
<li><?php esc_html_e( 'Switch to API Tokens tab.', 'wphb' ); ?></li>
<li>
<?php
printf( /* translators: %1$s - opening <strong> tag, %2$s - closing </strong> tag */
esc_html__( "Click '%1\$sView%2\$s' button and copy the Global API Key identifier.", 'wphb' ),
'<strong>',
'</strong>'
)
?>
</li>
</ol>
<ol id="cloudflare-token-how-to" class="sui-border-frame sui-hidden">
<li>
<?php
printf( /* translators: %1$s - <a>, %2$s - </a> */
esc_html__( '%1$sLog in%2$s to your Cloudflare account.', 'wphb' ),
'<a target="_blank" href="https://dash.cloudflare.com/login">',
'</a>'
);
?>
</li>
<li><?php esc_html_e( 'Go to My Profile.', 'wphb' ); ?></li>
<li>
<?php
printf( /* translators: %1$s - opening <strong> tag, %2$s - closing </strong> tag */
esc_html__( "Switch to the API Tokens tab, and click '%1\$sCreate Token%2\$s'.", 'wphb' ),
'<strong>',
'</strong>'
)
?>
</li>
<li>
<?php
printf( /* translators: %1$s - opening <strong> tag, %2$s - closing </strong> tag */
esc_html__( "Find the WordPress row and click '%1\$sUse Template%2\$s'.", 'wphb' ),
'<strong>',
'</strong>'
)
?>
</li>
<li>
<?php
printf( /* translators: %1$s - opening <strong> tag, %2$s - closing </strong> tag */
esc_html__( "Under Zone Resources, first select '%1\$sSpecific Zone%2\$s' from the dropdown menu and then select this website's domain name.", 'wphb' ),
'<strong>',
'</strong>'
)
?>
</li>
<li>
<?php
printf( /* translators: %1$s - opening <strong> tag, %2$s - closing </strong> tag */
esc_html__( "Click '%1\$sContinue to summary%2\$s', and then click '%1\$sCreate Token%2\$s'.", 'wphb' ),
'<strong>',
'</strong>'
)
?>
</li>
<li><?php esc_html_e( 'Copy the WordPress API token and paste it into the Cloudflare API token field in Hummingbird.', 'wphb' ); ?></li>
</ol>
</div>
</div>
<div id="slide-cloudflare-zones" class="sui-modal-slide">
<div class="sui-box">
<div class="sui-box-header sui-flatten sui-content-center sui-spacing-top--60">
<figure class="sui-box-logo" aria-hidden="true">
<img src="<?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large.png' ); ?>" alt="<?php esc_attr_e( 'Connect Cloudflare', 'wphb' ); ?>"
srcset="<?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large.png' ); ?> 1x, <?php echo esc_url( WPHB_DIR_URL . 'admin/assets/image/integrations/icon-cloudflare-large@2x.png' ); ?> 2x">
</figure>
<button class="sui-button-icon sui-button-float--right" onclick="window.location.reload()">
<span class="sui-icon-close sui-md" aria-hidden="true"></span>
<span class="sui-screen-reader-text"><?php esc_attr_e( 'Close this modal', 'wphb' ); ?></span>
</button>
<h3 class="sui-box-title sui-lg">
<?php esc_html_e( 'Connect Cloudflare', 'wphb' ); ?>
</h3>
<p class="sui-description">
<?php esc_html_e( 'Select the zone that matches your domain name.', 'wphb' ); ?>
</p>
</div>
<div class="sui-box-body">
<div class="sui-form-field">
<label class="sui-label">
<?php esc_html_e( 'Select Zone', 'wphb' ); ?>
</label>
<select id="cloudflare-zones" class="sui-select" data-placeholder="<?php esc_attr_e( 'Select zone', 'wphb' ); ?>">
<option></option>
</select>
</div>
<div class="sui-notice sui-notice-warning">
<div class="sui-notice-content">
<div class="sui-notice-message">
<span class="sui-notice-icon sui-icon-info sui-md" aria-hidden="true"></span>
<p>
<?php esc_html_e( 'Cloudflare is connected, but it appears you don’t have any active zones for this domain. Double check your domain has been added to Cloudflare and tap re-check when ready or select one of the zones from the dropdown list below.', 'wphb' ); ?>
</p>
</div>
</div>
</div>
</div>
<div class="sui-box-footer sui-flatten sui-content-separated">
<button class="sui-button sui-button-ghost" id="cf-recheck-zones" aria-live="polite">
<span class="sui-button-text-default" aria-hidden="true">
<span class="sui-icon-update" aria-hidden="true"></span>
<?php esc_html_e( 'Re-check', 'wphb' ); ?>
</span>
<span class="sui-button-text-onload">
<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
<?php esc_html_e( 'Re-checking...', 'wphb' ); ?>
</span>
</button>
<button class="sui-button sui-button-blue" id="cloudflare-zone-save" aria-live="polite">
<span class="sui-button-text-default" aria-hidden="true">
<?php esc_html_e( 'Enable Cloudflare', 'wphb' ); ?>
</span>
<span class="sui-button-text-onload">
<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
<?php esc_html_e( 'Enabling...', 'wphb' ); ?>
</span>
</button>
</div>
</div>
</div>
</div>
</div>