general.php
366 lines
| 1 | <div v-if="selected === 'app-1'"> |
| 2 | <div class="sb-tab-box sb-license-box clearfix"> |
| 3 | <div class="tab-label"> |
| 4 | <h3>{{generalTab.licenseBox.title}}</h3> |
| 5 | <p>{{generalTab.licenseBox.description}}</p> |
| 6 | </div> |
| 7 | <div class="ctf-tab-form-field d-flex"> |
| 8 | <div v-if="licenseType === 'free' && licenseStatus == 'valid'" class="ctf-tab-field-inner-wrap ctf-license" :class="['license-' + licenseStatus, 'license-type-' + licenseType, {'form-error': hasError, 'dev-site-license-field': isDevSite}]"> |
| 9 | <div class="upgrade-info"> |
| 10 | <span v-html="generalTab.licenseBox.upgradeText1"></span> |
| 11 | <span v-html="generalTab.licenseBox.upgradeText2"></span> |
| 12 | </div> |
| 13 | <span v-if="!isDevSite" class="license-status" v-html="generalTab.licenseBox.freeText"></span> |
| 14 | <div v-if="isDevSite"> |
| 15 | <a :href="upgradeUrl" target="_blank" class="ctf-btn ctf-btn-blue ctf-upgrade-license-btn"> |
| 16 | <span v-html="svgIcons.rocket"></span> |
| 17 | {{genericText.upgradeToPro}} |
| 18 | </a> |
| 19 | </div> |
| 20 | <div v-else class="d-flex"> |
| 21 | <div class="field-left-content"> |
| 22 | <div class="sb-form-field"> |
| 23 | <input type="password" name="license-key" id="license-key" class="ctf-form-field" :placeholder="generalTab.licenseBox.inactiveFieldPlaceholder" v-model="licenseKey"> |
| 24 | </div> |
| 25 | <div class="form-info d-flex justify-between"> |
| 26 | |
| 27 | <span class="ctf-manage-license"> |
| 28 | <a :href="links.manageLicense">{{generalTab.licenseBox.manageLicense}}</a> |
| 29 | </span> |
| 30 | <span> |
| 31 | <span class="test-connection" @click="testConnection()" v-if="testConnectionStatus === null"> |
| 32 | {{generalTab.licenseBox.test}} |
| 33 | <span v-html="testConnectionIcon()" :class="testConnectionStatus"> |
| 34 | </span> |
| 35 | </span> |
| 36 | <span v-html="testConnectionIcon()" class="test-connection" :class="testConnectionStatus" v-if="testConnectionStatus !== null"> |
| 37 | </span> |
| 38 | </span> |
| 39 | </div> |
| 40 | </div> |
| 41 | <div class="field-right-content"> |
| 42 | <button type="button" class="ctf-btn" v-on:click="licenseActiveAction" :class="{loading: loading, 'sb-btn-blue': licenseType === 'free'}"> |
| 43 | <span v-if="loading && pressedBtnName === 'ctf'" v-html="loaderSVG"></span> |
| 44 | <span class="ctf-license-action-text" v-if="licenseType === 'pro'">{{generalTab.licenseBox.deactivate}}</span> |
| 45 | <span class="ctf-license-action-text" v-if="licenseType === 'free'">{{generalTab.licenseBox.installPro}}</span> |
| 46 | </button> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | |
| 51 | <div v-else class="ctf-tab-field-inner-wrap ctf-license" :class="['license-' + licenseStatus, 'license-type-' + licenseType, {'form-error': hasError, 'dev-site-license-field': isDevSite}]"> |
| 52 | <div class="upgrade-info"> |
| 53 | <span v-html="generalTab.licenseBox.upgradeText1"></span> |
| 54 | <span v-html="generalTab.licenseBox.upgradeText2"></span> |
| 55 | </div> |
| 56 | <span v-if="!isDevSite" class="license-status" v-html="generalTab.licenseBox.freeText"></span> |
| 57 | <div class="mb-6" v-if="licenseErrorMsg !== null"> |
| 58 | <span v-html="licenseErrorMsg" class="ctf-error-text"></span> |
| 59 | </div> |
| 60 | <div v-if="isDevSite"> |
| 61 | <a :href="upgradeUrl" target="_blank" class="ctf-btn ctf-btn-blue ctf-upgrade-license-btn"> |
| 62 | <span v-html="svgIcons.rocket"></span> |
| 63 | {{genericText.upgradeToPro}} |
| 64 | </a> |
| 65 | </div> |
| 66 | <div v-else class="d-flex"> |
| 67 | <div class="field-left-content"> |
| 68 | <div class="sb-form-field"> |
| 69 | <input type="password" name="license-key" id="license-key" class="ctf-form-field" :placeholder="generalTab.licenseBox.inactiveFieldPlaceholder" v-model="licenseKey"> |
| 70 | </div> |
| 71 | <div class="form-info d-flex justify-between"> |
| 72 | |
| 73 | <span class="ctf-manage-license"> |
| 74 | </span> |
| 75 | <span> |
| 76 | <span class="test-connection" @click="testConnection()" v-if="testConnectionStatus === null"> |
| 77 | {{generalTab.licenseBox.test}} |
| 78 | <span v-html="testConnectionIcon()" :class="testConnectionStatus"> |
| 79 | </span> |
| 80 | </span> |
| 81 | <span v-html="testConnectionIcon()" class="test-connection" :class="testConnectionStatus" v-if="testConnectionStatus !== null"> |
| 82 | </span> |
| 83 | <span class="ctf-upgrade"> |
| 84 | <a :href="upgradeUrl" target="_blank">{{generalTab.licenseBox.upgrade}}</a> |
| 85 | </span> |
| 86 | </span> |
| 87 | </div> |
| 88 | </div> |
| 89 | <div class="field-right-content"> |
| 90 | <button type="button" class="ctf-btn sb-btn-blue" v-on:click="activateLicense"> |
| 91 | <span v-if="loading && pressedBtnName === 'ctf'" class="ctf-loader-svg" v-html="loaderSVG"></span> |
| 92 | {{generalTab.licenseBox.activate}} |
| 93 | </button> |
| 94 | </div> |
| 95 | </div> |
| 96 | </div> |
| 97 | |
| 98 | <div v-if="licenseType === 'pro' && licenseStatus === 'valid'" class="ctf-tab-field-inner-wrap ctf-license ctf-license" :class="['license-' + licenseStatus, 'license-type-' + licenseType, {'form-error': hasError}]"> |
| 99 | <span class="license-status" v-html="generalTab.licenseBox.activeText"></span> |
| 100 | <div class="d-flex"> |
| 101 | <div class="field-left-content"> |
| 102 | <div class="sb-form-field"> |
| 103 | <input type="password" name="license-key" id="license-key" class="ctf-form-field" value="******************************" v-model="licenseKey"> |
| 104 | <span class="field-icon fa fa-check-circle"></span> |
| 105 | </div> |
| 106 | <div class="form-info d-flex justify-between"> |
| 107 | <span class="ctf-manage-license"> |
| 108 | <a :href="links.manageLicense" target="_blank">{{generalTab.licenseBox.manageLicense}}</a> |
| 109 | </span> |
| 110 | <span> |
| 111 | <span class="test-connection" @click="testConnection()" v-if="testConnectionStatus === null"> |
| 112 | {{generalTab.licenseBox.test}} |
| 113 | <span v-html="testConnectionIcon()" :class="testConnectionStatus"> |
| 114 | </span> |
| 115 | </span> |
| 116 | <span v-html="testConnectionIcon()" class="test-connection" :class="testConnectionStatus" v-if="testConnectionStatus !== null"> |
| 117 | </span> |
| 118 | |
| 119 | <span class="ctf-upgrade"> |
| 120 | <a :href="upgradeUrl" target="_blank">{{generalTab.licenseBox.upgrade}}</a> |
| 121 | </span> |
| 122 | </span> |
| 123 | </div> |
| 124 | </div> |
| 125 | <div class="field-right-content"> |
| 126 | <button type="button" class="ctf-btn" v-on:click="licenseActiveAction" :class="{loading: loading}"> |
| 127 | <span v-if="loading && pressedBtnName === 'ctf'" v-html="loaderSVG"></span> |
| 128 | {{generalTab.licenseBox.activate}} |
| 129 | </button> |
| 130 | </div> |
| 131 | </div> |
| 132 | </div> |
| 133 | |
| 134 | <div v-if="licenseType === 'pro' && ( |
| 135 | licenseStatus === 'inactive' || |
| 136 | licenseStatus === 'site_inactive' || |
| 137 | licenseStatus === 'invalid' || |
| 138 | licenseStatus === 'deactivated' || |
| 139 | licenseStatus === 'no_activations_left' || |
| 140 | licenseStatus === 'expired')" |
| 141 | class="ctf-tab-field-inner-wrap ctf-license" |
| 142 | :class="['license-' + licenseStatus, 'license-type-' + licenseType, {'form-error': hasError}]"> |
| 143 | <span class="license-status" v-html="generalTab.licenseBox.inactiveText"></span> |
| 144 | <div class="d-flex"> |
| 145 | <div class="field-left-content"> |
| 146 | <div class="sb-form-field"> |
| 147 | <input type="password" name="license-key" id="license-key" class="ctf-form-field" :placeholder="generalTab.licenseBox.inactiveFieldPlaceholder" v-model="licenseKey"> |
| 148 | <span class="field-icon field-icon-error fa fa-times-circle" v-if="licenseErrorMsg !== null"></span> |
| 149 | </div> |
| 150 | <div class="mb-6" v-if="licenseErrorMsg !== null"> |
| 151 | <span v-html="licenseErrorMsg" class="ctf-error-text"></span> |
| 152 | </div> |
| 153 | <div class="form-info d-flex justify-between"> |
| 154 | <span></span> |
| 155 | <span> |
| 156 | <span class="test-connection" @click="testConnection()" v-if="testConnectionStatus === null"> |
| 157 | {{generalTab.licenseBox.test}} |
| 158 | <span v-html="testConnectionIcon()" :class="testConnectionStatus"> |
| 159 | </span> |
| 160 | </span> |
| 161 | <span v-html="testConnectionIcon()" class="test-connection" :class="testConnectionStatus" v-if="testConnectionStatus !== null"> |
| 162 | </span> |
| 163 | <span class="ctf-upgrade"> |
| 164 | <a :href="upgradeUrl" target="_blank">{{generalTab.licenseBox.upgrade}}</a> |
| 165 | </span> |
| 166 | </span> |
| 167 | </div> |
| 168 | </div> |
| 169 | <div class="field-right-content"> |
| 170 | <button type="button" class="ctf-btn sb-btn-blue" v-on:click="activateLicense"> |
| 171 | <span v-if="loading && pressedBtnName === 'ctf'" v-html="loaderSVG"></span> |
| 172 | {{generalTab.licenseBox.activate}} |
| 173 | </button> |
| 174 | </div> |
| 175 | </div> |
| 176 | </div> |
| 177 | </div> |
| 178 | </div> |
| 179 | |
| 180 | <!--Manage Sources--> |
| 181 | <div class="sb-tab-box sb-manage-acount-box clearfix"> |
| 182 | <div class="tab-label"> |
| 183 | <h3>{{generalTab.manageAccount.title}}</h3> |
| 184 | </div> |
| 185 | <div class="ctf-tab-form-field"> |
| 186 | <div class="sb-form-field"> |
| 187 | <span class="help-text" v-html="generalTab.manageAccount.description"></span> |
| 188 | </div> |
| 189 | <div class="d-flex ctf-manage-account-inputs" v-if="checkAccountDetails()" :data-active="viewsActive['accountDetailsActive'] ? 'true' : 'false'"> |
| 190 | <div class="field-left-content"> |
| 191 | <div class="ctf-manage-account-info"> |
| 192 | <img :src="accountDetails.account_avatar" :alt="accountDetails.account_handle"> |
| 193 | <strong>{{accountDetails.account_handle}}</strong> |
| 194 | <div class="ctf-manage-account-edit-icon" v-html="svgIcons['cog']" @click.prevent.default="activateView('accountDetailsActive')"></div> |
| 195 | <div class="ctf-manage-account-delete-icon" v-html="svgIcons['delete']" @click.prevent.default="openDialogBox('deleteAccount')"></div> |
| 196 | </div> |
| 197 | <div class="ctf-acc-info-item"> |
| 198 | <strong>{{generalTab.manageAccount.aToken}}</strong> |
| 199 | <span>{{accountDetails.access_token}}</span> |
| 200 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.access_token)"></div> |
| 201 | </div> |
| 202 | <div class="ctf-acc-info-item"> |
| 203 | <strong>{{generalTab.manageAccount.aTokenSecret}}</strong> |
| 204 | <span>{{accountDetails.access_token_secret}}</span> |
| 205 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.access_token_secret)"></div> |
| 206 | </div> |
| 207 | </div> |
| 208 | <button type="button" class="ctf-btn sb-btn-lg export-btn" @click.prevent.default="activateView('connectAccountPopup');switchScreen('connectAccountStep','step_1');"> |
| 209 | <span class="icon" v-html="svgIcons['edit']"></span> |
| 210 | {{generalTab.manageAccount.button}} |
| 211 | </button> |
| 212 | </div> |
| 213 | </div> |
| 214 | <div class="ctf-add-account ctf-fs"> |
| 215 | <div class="ctf-add-account-btn ctf-fs" v-if="!checkAppData()" @click.prevent.default="activateView('connectAccountPopup');switchScreen('connectAccountStep','step_2');"> |
| 216 | <div v-html="svgIcons['linkIcon']"></div> |
| 217 | {{generalTab.manageAccount.buttonConnectOwnApp}} |
| 218 | </div> |
| 219 | |
| 220 | <div class="ctf-add-account-info ctf-fs" v-else> |
| 221 | <div class="tab-label"> |
| 222 | <h3>{{generalTab.manageAccount.titleApp}}</h3> |
| 223 | </div> |
| 224 | <div class="ctf-tab-form-field"> |
| 225 | <div class="sb-form-field"></div> |
| 226 | <div class="d-flex ctf-manage-account-inputs-info" :data-active="viewsActive['appDetailsActive'] ? 'true' : 'false'"> |
| 227 | <div class="field-left-content"> |
| 228 | <div class="ctf-manage-account-info"> |
| 229 | <div class="ctf-manage-account-info-icon" v-html="svgIcons['twitter']"></div> |
| 230 | <strong>{{accountDetails.app_name}}</strong> |
| 231 | <div class="ctf-manage-account-edit-icon" v-html="svgIcons['cog']" @click.prevent.default="activateView('appDetailsActive')"></div> |
| 232 | <div class="ctf-manage-account-delete-icon" v-html="svgIcons['delete']" @click.prevent.default="openDialogBox('deleteApp')"></div> |
| 233 | </div> |
| 234 | <div class="ctf-acc-info-item"> |
| 235 | <strong>{{generalTab.manageAccount.cKey}}</strong> |
| 236 | <span>{{accountDetails.consumer_key}}</span> |
| 237 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.consumer_key)"></div> |
| 238 | </div> |
| 239 | <div class="ctf-acc-info-item"> |
| 240 | <strong>{{generalTab.manageAccount.cSecret}}</strong> |
| 241 | <span>{{accountDetails.consumer_secret}}</span> |
| 242 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.consumer_secret)"></div> |
| 243 | </div> |
| 244 | <div class="ctf-acc-info-item"> |
| 245 | <strong>{{generalTab.manageAccount.aToken}}</strong> |
| 246 | <span>{{accountDetails.access_token}}</span> |
| 247 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.access_token)"></div> |
| 248 | </div> |
| 249 | <div class="ctf-acc-info-item"> |
| 250 | <strong>{{generalTab.manageAccount.aTokenSecret}}</strong> |
| 251 | <span>{{accountDetails.access_token_secret}}</span> |
| 252 | <div class="ctf-acc-info-icon" v-html="svgIcons['copy2']" @click.prevent.default="copyToClipBoard(accountDetails.access_token_secret)"></div> |
| 253 | </div> |
| 254 | </div> |
| 255 | <button type="button" class="ctf-btn sb-btn-lg export-btn" @click.prevent.default="activateView('connectAccountPopup');switchScreen('connectAccountStep','step_2');"> |
| 256 | <span class="icon" v-html="svgIcons['edit']"></span> |
| 257 | {{generalTab.manageAccount.button}} |
| 258 | </button> |
| 259 | </div> |
| 260 | </div> |
| 261 | </div> |
| 262 | |
| 263 | </div> |
| 264 | </div> |
| 265 | |
| 266 | <!--Connect APP --> |
| 267 | <div class="sb-tab-box sb-email-box sb-reset-box-style clearfix"> |
| 268 | <div class="tab-label"> |
| 269 | <h3>{{generalTab.connectAccount.emailTitle}}</h3> |
| 270 | </div> |
| 271 | <div class="ctf-tab-form-field"> |
| 272 | <div class="sb-form-field ctf-tab-connect-ac"> |
| 273 | <div class="d-flex"> |
| 274 | <input type="text" class="ctf-form-field" /> |
| 275 | </div> |
| 276 | </div> |
| 277 | </div> |
| 278 | </div> |
| 279 | <div class="sb-tab-box sb-manage-acount-box clearfix"> |
| 280 | <div class="tab-label"> |
| 281 | <h3>{{generalTab.connectAccount.siteKeyTitle}}</h3> |
| 282 | </div> |
| 283 | <div class="ctf-tab-form-field"> |
| 284 | <div class="sb-form-field ctf-tab-connect-ac"> |
| 285 | <p v-if="checkNotEmpty(model.general.siteKey)" v-html="generalTab.connectAccount.siteKeyPreview"></p> |
| 286 | <div class="d-flex mb-15"> |
| 287 | <input type="password" class="ctf-form-field" name="site-key" id="site-key-setting" v-model="model.general.siteKey"/> |
| 288 | <button type="button" class="ctf-btn sb-btn-lg refresh-btn" |
| 289 | @click.prevent.default="connectAccountLink()" |
| 290 | v-html="checkNotEmpty(model.general.siteKey) ? generalTab.connectAccount.siteKeyButton : generalTab.connectAccount.siteKeyConnectButton"> |
| 291 | </button> |
| 292 | </div> |
| 293 | <span class="help-text"> |
| 294 | {{generalTab.connectAccount.siteKeyDescription}} |
| 295 | </span> |
| 296 | </div> |
| 297 | </div> |
| 298 | </div> |
| 299 | |
| 300 | <div class="sb-tab-box sb-preserve-settings-box clearfix"> |
| 301 | <div class="tab-label"> |
| 302 | <h3>{{generalTab.preserveBox.title}}</h3> |
| 303 | </div> |
| 304 | |
| 305 | <div class="ctf-tab-form-field"> |
| 306 | <div class="sb-form-field"> |
| 307 | <label for="preserve-settings" class="ctf-checkbox"> |
| 308 | <input type="checkbox" name="preserve-settings" id="preserve-settings" v-model="model.general.preserveSettings"> |
| 309 | <span class="toggle-track"> |
| 310 | <div class="toggle-indicator"></div> |
| 311 | </span> |
| 312 | </label> |
| 313 | <span class="help-text"> |
| 314 | {{generalTab.preserveBox.description}} |
| 315 | </span> |
| 316 | </div> |
| 317 | </div> |
| 318 | </div> |
| 319 | |
| 320 | <div class="sb-tab-box sb-import-box sb-reset-box-style clearfix"> |
| 321 | <div class="tab-label"> |
| 322 | <h3>{{generalTab.importBox.title}}</h3> |
| 323 | </div> |
| 324 | <div class="ctf-tab-form-field"> |
| 325 | <div class="sb-form-field"> |
| 326 | <div class="d-flex mb-15"> |
| 327 | <button type="button" class="ctf-btn sb-btn-lg import-btn" id="import-btn" @click="importFile" :disabled="uploadStatus !== null"> |
| 328 | <span class="icon" v-html="importBtnIcon()" :class="uploadStatus"></span> |
| 329 | {{generalTab.importBox.button}} |
| 330 | </button> |
| 331 | <div class="input-hidden"> |
| 332 | <input id="import_file" type="file" value="import_file" ref="file" v-on:change="uploadFile"> |
| 333 | </div> |
| 334 | </div> |
| 335 | <span class="help-text"> |
| 336 | {{generalTab.importBox.description}} |
| 337 | </span> |
| 338 | </div> |
| 339 | </div> |
| 340 | </div> |
| 341 | |
| 342 | <div class="sb-tab-box sb-export-box clearfix"> |
| 343 | <div class="tab-label"> |
| 344 | <h3>{{generalTab.exportBox.title}}</h3> |
| 345 | </div> |
| 346 | <div class="ctf-tab-form-field"> |
| 347 | <div class="sb-form-field"> |
| 348 | <div class="d-flex mb-15"> |
| 349 | <select name="" id="ctf-feeds-list" class="ctf-select" v-model="exportFeed" ref="export_feed"> |
| 350 | <option value="none" selected disabled>Select Feed</option> |
| 351 | <option v-for="feed in feeds" :value="feed.id">{{ feed.name }}</option> |
| 352 | </select> |
| 353 | <button type="button" class="ctf-btn sb-btn-lg export-btn" @click="exportFeedSettings" :disabled="exportFeed === 'none'"> |
| 354 | <span class="icon" v-html="exportSVG"></span> |
| 355 | {{generalTab.exportBox.button}} |
| 356 | </button> |
| 357 | </div> |
| 358 | <span class="help-text"> |
| 359 | {{generalTab.exportBox.description}} |
| 360 | </span> |
| 361 | </div> |
| 362 | </div> |
| 363 | </div> |
| 364 | </div> |
| 365 | <?php include_once CTF_BUILDER_DIR . 'templates/sections/popup/connect-account-popup.php'; ?> |
| 366 |