File Manager

Editing File: /usr/local/cpanel/base/frontend/jupiter/api_tokens/views/create.ptt

<div>
    <form id="createTokenForm" name="createTokenForm">
        <div class="panel panel-default" ng-class="{'panel-success': generatedToken}">
            <div class="panel-heading">
                <div class="widget-title pull-left flip" ng-bind="pageTitle"></div>
                <div class="pull-right flip">
                    <button type="button"
                        class="btn btn-default btn-xs"
                        id="lnkshowHideHelp"
                        ng-click="toggleHelp()">
                        [% locale.maketext("Show/Hide Help") %]
                        <i class="far fa-question-circle form-info-sign"></i>
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
            [%# form creation %]
            <div class="panel-body" ng-if="!generatedToken">
                <div>
                    <section>
                        <div class="form-group" ng-class="{'has-error':createTokenForm.tokenName.$dirty && createTokenForm.tokenName.$invalid}">
                            <div class="row">
                                <div class="col-xs-12">
                                    <toggle-label-info
                                        for="tokenName"
                                        label-text="[% locale.maketext("[asis,API] Token Name") %]"
                                        label-id="lbl_tokenName"
                                        info-icon-id="icon_tokenNameInfo"
                                        info-block-id="infoBlk_tokenName"
                                        show-info-block="{{showAllHelp}}">
                                            [% locale.maketext("The name of the token that you are creating.") %]
                                            [% locale.maketext("Enter a descriptive name. You will use this name when you update the token via [asis,API].") %]
                                    </toggle-label-info>
                                </div>
                            </div>
                            <div>
                                <input
                                    placeholder="[% locale.maketext("Enter the [asis,API] token name.") %]"
                                    token-name-is-unique
                                    type="text" ng-required="true" class="form-control" pattern="^[A-Za-z0-9_-]+$" maxlength="50"
                                    size="50" autocomplete="off" id="tokenName" name="tokenName" ng-model="working.name" />
                                <span class="help-block">[% locale.maketext("[asis,API] token names can be alpha-numeric and can contain dashes and underscores.") %]</span>
                            </div>
                            <div>
                                <ul validation-container field-name="tokenName" role="alert" id="tokenNameErrorPanel">
                                    <li validation-item field-name="tokenName" validation-name="required" id="val_tokenName_required">
                                        [% locale.maketext('You [output,strong,must] enter a name.') %]
                                    </li>
                                    <li validation-item field-name="tokenName" validation-name="maxlength" id="val_tokenName_maxLength">
                                        [% locale.maketext("Your token name cannot contain more than [numf,_1] [numerate,_1,character,characters].", 50) %]
                                    </li>
                                    <li validation-item field-name="tokenName" validation-name="pattern" id="val_tokenName_invalidChars">
                                        [% 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 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="working.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="working.tokenExpires" ng-change="resetDate()">
                                        <span>[% locale.maketext('Specify an expiration date.') %]</span>
                                    </label>
                                </div>
                            </div>
                        </div>

<div ng-if="working.tokenExpires" class="form-group" ng-class="{'has-error':createTokenForm.expiresAt.$dirty && createTokenForm.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="working.expiresAt"
                                            options="datePickerOptions"
                                            ng-change="dateValidator(createTokenForm.expiresAt)"
                                            name="expiresAt"
                                            required
                                        >
                                        </date-picker>
                                    </div>
                                    <div id="createToken_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-if="canCreateLimited" ng-class="{'has-error':createTokenForm.unrestrictedToggle.$dirty && createTokenForm.unrestrictedToggle.$invalid}">
                            <div class="row">
                                <div class="col-xs-12">
                                    <toggle-label-info
                                        for="unrestrictedToggle"
                                        label-text="[% locale.maketext("Features") %]"
                                        label-id="lbl_unrestrictedToggle"
                                        info-icon-id="icon_unrestrictedToggleInfo"
                                        info-block-id="infoBlk_unrestrictedToggle"
                                        show-info-block="{{showAllHelp}}">
                                            [% locale.maketext("Specify which features to assign to the the [asis,API] token.") %]
                                    </toggle-label-info>
                                </div>
                            </div>
                            <div>
                                <toggle-switch
                                    id="unrestrictedToggle"
                                    ng-model="working.unrestricted"
                                    no-spinner="true"
                                    enabled-label="[% locale.maketext("Unrestricted") %]"
                                    disabled-label="[% locale.maketext("Limited") %]"
                                    on-toggle="working.unrestricted = !working.unrestricted;" />
                                <span class="help-block" ng-if="!working.unrestricted">[% locale.maketext("Click here to set the [asis,API] token to unrestricted.") %]</span>
                                <span class="help-block" ng-if="working.unrestricted">[% locale.maketext("Click here to set the [asis,API] token to limited.") %]</span>
                            </div>
                        </div>
                        <div callout callout-heading="[% locale.maketext('Danger:') %]" callout-type="danger" role="alert" ng-show="working.unrestricted">
                            [% locale.maketext("The [asis,API] token can access every API that you can access.") %]
                        </div>
                        <div class="form-group" ng-if="canCreateLimited && !working.unrestricted">
                            <div class="row">
                                <div class="col-xs-12">
                                    <toggle-label-info
                                        for="selectedFeatures"
                                        label-text="[% locale.maketext("Selected Features") %]"
                                        label-id="lbl_selectedFeatures"
                                        info-icon-id="icon_selectedFeatures"
                                        info-block-id="infoBlk_selectedFeatures"
                                        show-info-block="{{showAllHelp}}">
                                            [% locale.maketext("Create an unrestricted [asis,API] token, or specify which features to include.") %]
                                    </toggle-label-info>
                                </div>
                            </div>
                            <div cp-loading-panel ng-show="!features">[% locale.maketext('Loading …') %]</div>
                            <div class="feature-chooser[% CPANEL.ua_is_mobile ? ' is-mobile' : '' %]" ng-if="features">
                                <div class="form-group">
                                    <search
                                        id="searchFeatures"
                                        ng-model="featureFilterValue"
                                        autocomplete="off">
                                    </search>
                                    <div>
                                        <table class="table table-condensed header-table">
                                            <thead>
                                                <tr>
                                                    <th class="check-column">
                                                        <input type="checkbox"
                                                            name="checkAllInList"
                                                            id="checkAllInList"
                                                            aria-label="[% locale.maketext('Toggle Select All') %]"
                                                            ng-model="checkAll.all"
                                                            ng-change="toggleSelectAllFeatures()"
                                                            indeterminate-state
                                                            check-state="getFeaturesIndeterminateState()">
                                                    </th>
                                                    <th class="name-column">
                                                        [% locale.maketext("All") %]
                                                    </th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                    <div class="features-list">
                                        <table class="table table-condensed">
                                            <tbody>
                                                <tr ng-repeat="feature in features | filter:featureFilterValue">
                                                    <td class="check-column">
                                                        <input type="checkbox" ng-model="working.features[feature.id]" ng-change="updateSelectedFeatures()"/>
                                                    </td>
                                                    <td>
                                                        <span ng-bind="feature.label"></span>
                                                        <span class="label label-info" ng-repeat="badge in feature.badges" ng-bind="badge"></span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="panel-body" ng-if="generatedToken">
                <p ng-if="working.unrestricted">[% locale.maketext('You successfully created an [output,strong,unrestricted] [asis,API] token “[_1]”.', '{{ working.name }}') %]</p>
                <p ng-if="!working.unrestricted">[% locale.maketext('You successfully created a [output,strong,limited-access] [asis,API] token “[_1]”.', '{{ working.name }}') %]</p>
                <p>
                    [% locale.maketext('Copy the following token to a safe place:') %]
                </p>
                <copy-field label="[% locale.maketext('[asis,API] Token') %]" text="generatedToken"></copy-field>
                <div callout callout-type="warning" callout-heading="[% locale.maketext('Warning') %]">
                    <p>
                        <span ng-if="working.tokenExpires" ng-bind="newTokenExpiresMessage(working)"></span>
                        <span ng-if="working.tokenExpires" >[% locale.maketext("When this [asis,API] token expires, the system will [output,strong,not] delete it. You [output,strong,must] manually delete this [asis,API] token.") %]</span>
                    </p>
                    <p>[% locale.maketext('This is your only opportunity to copy this token!') %]</p>
                </div>
                <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/developerdocs') %]
            </p>
            </div>
            [%# post creation messaging %]
            <div class="panel-footer" class="text-right">
                <div ng-if="!generatedToken">
                    <button id="btnCreateAPIToken"
                        type="submit"
                        spinner-id="spinnerCreateAPIToken"
                        ng-disabled="(working.tokenExpires && datePickerOptions.minDate > working.expiresAt) || createTokenForm.$invalid"
                        cp-action="create(working)"
                        title="[% locale.maketext('Click here to create your new [asis,API] token.') %]">
                        <i class="fas fa-plus" aria-hidden="true"></i>
                        [% locale.maketext("Create") %]
                    </button>
                    <button id="btnCancelAPIToken"
                        type="button"
                        ng-if="apiTokens.length"
                        class="btn btn-link pull-right flip"
                        ng-click="backToListView()"
                        title="[% locale.maketext('Go back to the list of [asis,API] tokens.') %]">
                        <i class="fas" ng-class="{ 'fa-arrow-left': !RTL, 'fa-arrow-right': isRTL }" aria-hidden="true"></i>
                        [% locale.maketext('Go Back') %]
                    </button>
                </div>
                <div ng-if="generatedToken">
                    <div class="checkbox copy-token-checkbox">
                        <label>
                            <input type="checkbox" name="stay" id="stay" ng-model="ui.stayAfterCopy" ng-change="stayAfterCopyChanged()">
                            [% locale.maketext("Create another token after I click [output,em,_1].", locale.maketext('Yes, I saved my token')) %]
                        </label>
                    </div>
                    <hr class="separator"/>
                    <button id="confirmCopiedToken"
                        type="button"
                        ng-if="generatedToken"
                        class="btn btn-primary"
                        ng-click="tokenCopied(createTokenForm)">[% locale.maketext('Yes, I saved my token') %]</button>
                </div>

</div>
        </div>
    </form>
</div>

Back to Directory File Manager