File Manager

Editing File: /usr/local/cpanel/whostmgr/docroot/templates/api_tokens/views/edit.ptt

<div id="loadingView" class="alert alert-info ng-hide" ng-show="edit.loading">
    <i id="loadingSpinner" class="fas fa-spinner fa-spin" aria-hidden="true"></i>
    [% locale.maketext('Loading …') %]
</div>
<div id="notAllowedWarning" class="alert alert-danger ng-hide" ng-show="!edit.loading && edit.loadingError">
    <span class="glyphicon glyphicon-remove-sign"></span>
    <div class="alert-message">
        <p ng-bind-html="edit.loadingErrorMessage"></p>
        <a href="javascript:void(0)" ng-click="edit.goHome()">[% locale.maketext('Go Back') %]</a>
    </div>
</div>
<div id="viewContainer" ng-hide="edit.loading || edit.loadingError">
<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-8">
        <h2 ng-hide="edit.editingToken">[% locale.maketext("Generate [asis,API] Token") %]</h2>
        <h2 class="ng-hide" ng-show="edit.editingToken">[% locale.maketext('Edit [asis,API] Token: [_1]', '{{ edit.newToken.originalName }}') %]</h2>
    </div>
</div>
<div class="row item-added-notice animated ng-hide" ng-show="edit.tokenAdded" id="tokenAdded_container">
    <div class="col-xs-12">
        <div class="callout callout-success top-item-added">
            <p>[% locale.maketext('You successfully created the [asis,API] token “[_1]”.', '{{ edit.newToken.name }}') %]</p>
            <p>[% locale.maketext('Copy the following token to a safe place:') %]
            <code ng-bind="edit.newToken.token"></code>
            </p>
            <p>
                <span ng-if="edit.newToken.tokenExpires" ng-bind="edit.newTokenExpiresMessage(edit.newToken)"></span>
                <span ng-if="edit.newToken.tokenExpires" >[% locale.maketext("When this [asis,API] token expires, the system will [output,strong,not] delete it. You [output,strong,must] delete this [asis,API] token.") %]</span>
            </p>
            <p>[% locale.maketext('For more information about how to use this token to make [asis,API] calls, read our [output,url,_1,Developer Documentation].', 'https://go.cpanel.net/APITokensinWHM') %]
            </p>
            <button id="confirm_added_token"
                type="button"
                class="btn btn-primary"
                ng-click="edit.goHome()">[% locale.maketext('Yes, I saved my token') %]</button>
        </div>
    </div>
</div>
<div class="row" ng-hide="edit.tokenAdded" id="token_form_container">
    <div class="col-xs-12">
        <form id="token_form" name="token_form" novalidate>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <label id="token_name_label" for="token_name">
                            [% locale.maketext('Name') %]
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="token_name"
                            name="token_name"
                            type="text"
                            class="form-control"
                            auto-focus
                            required
                            ng-pattern="/^[A-Za-z0-9-_]{1,50}$/"
                            ng-model="edit.newToken.name">
                    </div>
                    <div id="token_name_errors"
                        class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <ul validation-container field-name="token_name">
                            <li validation-item field-name="token_name" validation-name="required">
                                [% locale.maketext("You must complete this field.") %]
                            </li>
                            <li validation-item field-name="token_name" validation-name="pattern">
                                [% locale.maketext("You cannot create an [asis,API] token with a name that is longer than 50 characters, and the name may only contain the following characters: [join, ,_1]", [ 'a-z', 'A-Z', '0-9', '_', '-']) %]
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

<div class="form-group" ng-if="edit.editingToken && edit.newToken.expiresAt">
                <div class="row">
                    <div class="col-xs-12">
                        <label id="lblEmail" for="lblExpiresAt">
                            <span ng-if="!edit.newToken.expired && !edit.newToken.expiresSoon">
                                [% locale.maketext('Expires') %]
                            </span>
                            <span ng-if="edit.newToken.expired" class="text-danger">
                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                                [% locale.maketext('This [asis,API] token has expired.') %]
                            </span>
                            <span ng-if="edit.newToken.expiresSoon" class="text-warning">
                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                                [% locale.maketext('This [asis,API] token will expire soon.') %]
                            </span>
                        </label>
                    </div>
                    <div class="col-xs-12">
                        <span id="lblExpiresAt" ng-bind="edit.newToken.expiresAtFriendly"></span>
                    </div>
                </div>
            </div>

<div class="form-group">
                <div class="row">
                    <div class="col-xs-12">
                        <toggle-label-info
                            for="tokenExpires"
                            label-text="[% locale.maketext("Should the [asis,API] Token Expire?") %]"
                            label-id="lbl_tokenExpires"
                            info-icon-id="icon_tokenExpiresInfo"
                            info-block-id="infoBlk_tokenExpires"
                            show-info-block="{{showAllHelp}}">
                                [% locale.maketext("Specify whether the [asis,API] token will expire on a specific date.") %]
                        </toggle-label-info>
                    </div>
                </div>
                <div>
                    <div class="radio">
                        <label for="tokenExpires_noExpiry">
                            <input type="radio" name="tokenExpires" id="tokenExpires_noExpiry" ng-value="false" checked ng-model="edit.newToken.tokenExpires">
                            <span>[% locale.maketext('The [asis,API] Token will not expire.') %]</span>
                        </label>
                    </div>
                    <div class="radio">
                        <label for="tokenExpires_expiry">
                            <input type="radio" name="tokenExpires" id="tokenExpires_expiry" ng-value="true" checked ng-model="edit.newToken.tokenExpires" ng-change="edit.resetDate()">
                            <span>[% locale.maketext('Specify an expiration date.') %]</span>
                        </label>
                    </div>
                </div>
            </div>

<div ng-if="edit.newToken.tokenExpires" class="form-group" ng-class="{'has-error': token_form.expiresAt.$dirty && token_form.expiresAt.$invalid}">
                <div class="row">
                    <div class="col-xs-12">
                        <toggle-label-info
                            for="expiresAt"
                            label-text="[% locale.maketext("[asis,API] Token Expiration Date") %]"
                            label-id="lbl_expiresAt"
                            info-icon-id="icon_expiresAtInfo"
                            info-block-id="infoBlk_expiresAt"
                            show-info-block="{{showAllHelp}}">
                                [% locale.maketext("The expiration date of the [asis,API] token.") %]
                                [% locale.maketext("Enter a future date on which you want the [asis,API] token to expire.") %]
                        </toggle-label-info>
                    </div>
                </div>
                <div>
                    <div style="display:flex;align-items:center">
                        <div>
                            <date-picker
                                id="expiresDate"
                                ng-model="edit.newToken.expiresAt"
                                options="edit.datePickerOptions"
                                ng-change="edit.dateValidator(token_form.expiresAt)"
                                name="expiresAt"
                                required
                                 >
                            </date-picker>
                        </div>
                        <div id="token_expires_errors">
                            <ul validation-container field-name="expiresAt" id="expiresAtErrorPanel">
                                <li validation-item field-name="expiresAt" validation-name="required">
                                    [% locale.maketext('You must complete this field.') %]
                                </li>
                                <li validation-item field-name="expiresAt" name="expiresAt">
                                    [% locale.maketext('The expiration date must be set in the future.') %]
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>

<div class="form-group" ng-class="{'has-error': token_form.whitelistIps.$dirty && token_form.whitelistIps.$invalid}">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <toggle-label-info
                            for="whitelistIps"
                            label-text="[% locale.maketext("Whitelisted [asis,IPs]") %]"
                            label-id="lbl_whitelistIps"
                            info-icon-id="icon_whitelistIpsInfo"
                            info-block-id="infoBlk_whitelistIps"
                            show-info-block="{{showAllHelp}}"
                            on-toggle="edit.onToggleHelp(show)">
                                [% locale.maketext("The list of [asis,IP] addresses or [asis,IP] address prefixes allowed to use this token. You can separate these items with commas, new lines, or any whitespace character. Leave this blank to allow any caller IP to use the token.") %]
                        </toggle-label-info>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <textarea id="whitelistIps"
                                  name="whitelistIps"
                                  class="form-control"
                                  ipv4-or-cidr4-list
                                  ng-model-options="{ updateOn: 'default blur paste', debounce: { default: 250, blur: 0, paste: 0 } }"
                                  ng-model="edit.newToken.whitelistIps"
                                  rows="{{ edit.mimimumIpRows }}" ></textarea>
                        <span class="help-block" ng-if="edit.showExtraHelp">
                            <div class="ip-cidr-examples-title">
                                <strong>[% locale.maketext("Examples:") %]</strong>
                            </div>
                            <table class="table table-condensed ip-cidr-examples">
                                <tr>
                                    <td>[% locale.maketext("[asis,IPv4] Address") %] </td>
                                    <td>1.1.1.1</td>
                                </tr>
                                <tr>
                                    <td>[% locale.maketext("[asis,IPv4] Address Prefix") %]</td>
                                    <td>1.1.1.2/31</td>
                                </tr>
                                <tr>
                                    <td>[% locale.maketext("[asis,IPv6] Address") %]</td>
                                    <td>12AB:0:0:CD30:123:4567:89AB:CDEF</td>
                                </tr>
                                <tr>
                                    <td>[% locale.maketext("[asis,IPv6] Address Prefix") %]</td>
                                    <td>12AB:0:0:CD30::/60</td>
                                </tr>
                            </table>
                        </span>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <div id="token_expires_errors">
                            <ul validation-container field-name="whitelistIps" id="whitelistIpsErrorPanel" manual>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="ipv4OrCidr4">
                                    There are one or more problems with the IP addresses selected.
                                </validation-item>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="ipv6"
                                    no-icon prefix-class="bullet">
                                </validation-item>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="ipv4"
                                    no-icon prefix-class="bullet">
                                </validation-item>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="cidr"
                                    no-icon prefix-class="bullet">
                                </validation-item>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="cidr-details"
                                    no-icon prefix-class="bullet">
                                </validation-item>
                                <validation-item
                                    field-name="whitelistIps"
                                    validation-name="size-exceeded"
                                    no-icon prefix-class="bullet">
                                </validation-item>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

<div class="form-group">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <label>[% locale.maketext('Privileges') %]</label>
                    </div>
                </div>
                <div class="row" ng-show="!edit.hasPrivs">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <div class="alert alert-info">
                            [% locale.maketext('No privileges available.') %]
                        </div>
                    </div>
                </div>

<div class="row ng-hide" ng-show="edit.hasPrivs">
                    <div id="atLeastOneACLError" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <ul class="validation-container ng-hide" ng-show="!edit.hasSelectedPrivs()">
                            <li class="validation validation-error">
                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                <span class="validation-message">[% locale.maketext('You must specify at least one [asis,ACL] for this token.') %]</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <button id="save_button"
                    type="submit"
                    cp-action="edit.saveToken(token_form)"
                    ng-disabled="edit.disableSave(token_form)">
                    [% locale.maketext("Save") %]
                </button>
                <button id="cancel_generate_button"
                    type="button"
                    class="btn btn-link"
                    ng-click="edit.goHome()">
                    [% locale.maketext("Cancel") %]
                </button>
            </div>
        </form>
    </div>
</div>
</div>

Back to Directory File Manager