Viewing File: /usr/local/cpanel/base/frontend/jupiter/domains/views/listDomains.phtml
<div class="domain-chooser-overlay" ng-if="showDomainChooser" ng-click="!creatingDomain && closeDomainChooser()">
<div class="domain-chooser"
role="dialog"
aria-modal="true"
ng-attr-aria-label="{{ domainChooserStrings.dialogLabel }}"
ng-click="$event.stopPropagation()"
ng-form="registeredDomainForm">
<button type="button"
class="domain-chooser__close-btn"
ng-click="closeDomainChooser()"
ng-disabled="creatingDomain"
ng-attr-aria-label="{{ domainChooserStrings.closeLabel }}">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
<h2 class="domain-chooser__heading" ng-bind="domainChooserStrings.heading"></h2>
<div class="domain-chooser__cards">
<button type="button"
class="domain-chooser__card"
ng-class="{ 'domain-chooser__card--selected': selectedDomainOption === 'temporary' }"
ng-click="selectDomainOption('temporary')"
data-testid="domainChooserTemporary">
<div class="domain-chooser__card-illustration">
<img src="images/illustration-temporary.svg"
ng-attr-alt="{{ domainChooserStrings.temporaryAlt }}">
</div>
<span class="domain-chooser__card-subtitle" ng-bind="domainChooserStrings.temporarySubtitle"></span>
<span class="domain-chooser__card-heading" ng-bind="domainChooserStrings.temporaryHeading"></span>
</button>
<button type="button"
class="domain-chooser__card"
ng-class="{ 'domain-chooser__card--selected': selectedDomainOption === 'registered' }"
ng-click="selectDomainOption('registered')"
data-testid="domainChooserRegistered">
<div class="domain-chooser__card-illustration">
<img src="images/illustration-registered.svg"
ng-attr-alt="{{ domainChooserStrings.registeredAlt }}">
</div>
<span class="domain-chooser__card-subtitle" ng-bind="domainChooserStrings.registeredSubtitle"></span>
<span class="domain-chooser__card-heading" ng-bind="domainChooserStrings.registeredHeading"></span>
</button>
<button type="button"
class="domain-chooser__card"
ng-class="{ 'domain-chooser__card--selected': selectedDomainOption === 'purchase' }"
ng-click="selectDomainOption('purchase')"
ng-if="domainRecommendationsEnabled"
data-testid="domainChooserPurchase">
<div class="domain-chooser__card-illustration">
<img src="images/illustration-purchase.svg"
ng-attr-alt="{{ domainChooserStrings.purchaseAlt }}">
</div>
<span class="domain-chooser__card-subtitle" ng-bind="domainChooserStrings.purchaseSubtitle"></span>
<span class="domain-chooser__card-heading" ng-bind="domainChooserStrings.purchaseHeading"></span>
</button>
</div>
<div class="domain-chooser__form" ng-if="selectedDomainOption === 'registered'" data-testid="registeredDomainForm">
<div class="domain-chooser__form-group">
<label class="domain-chooser__form-label"
for="registeredDomainInput"
ng-bind="domainChooserStrings.registeredFormLabel">
</label>
<p class="domain-chooser__form-description"
ng-bind="domainChooserStrings.registeredFormDescription">
</p>
<input type="text"
id="registeredDomainInput"
name="domainName"
class="domain-chooser__input"
ng-model="registeredForm.domainName"
ng-model-options="{ debounce: 250, allowInvalid: true }"
ng-change="onUpdateRegisteredDomainName()"
ng-required="selectedDomainOption === 'registered'"
wildcard-fqdn
domain-is-unique
autocapitalize="off"
ng-disabled="creatingDomain"
placeholder="example.com"
data-testid="registeredDomainInput">
<ul validation-container field-name="domainName">
<li validation-item field-name="domainName" validation-name="required">
<span ng-bind="domainChooserStrings.domainRequired"></span>
</li>
</ul>
</div>
<div class="domain-chooser__form-group">
<label class="domain-chooser__checkbox-row">
<input type="checkbox"
class="domain-chooser__checkbox"
ng-model="registeredForm.shareDocRoot"
ng-change="onToggleShareDocRoot()"
ng-disabled="creatingDomain || !canCreateAlias"
data-testid="shareDocRootCheckbox">
<span ng-bind-html="domainChooserStrings.shareDocRootLabel"></span>
</label>
<p class="domain-chooser__form-help"
data-testid="shareDocRootHelp"
ng-bind-html="domainChooserStrings.shareDocRootHelp">
</p>
<div class="domain-chooser__docroot-group" ng-if="!registeredForm.shareDocRoot" data-testid="docRootGroup">
<div class="domain-chooser__docroot-heading-row">
<span class="domain-chooser__docroot-heading"
ng-bind="domainChooserStrings.docRootHeading">
</span>
<span class="domain-chooser__docroot-info-icon"
title="Document Root"
aria-label="Document Root help">ⓘ</span>
</div>
<p class="domain-chooser__form-description"
ng-bind="domainChooserStrings.docRootDescription">
</p>
<div class="domain-chooser__docroot-input-wrapper">
<span class="domain-chooser__docroot-prefix">/public_html/</span>
<input type="text"
name="documentRoot"
class="domain-chooser__docroot-input"
ng-model="registeredForm.documentRootPath"
ng-pattern="documentRootPattern"
ng-disabled="creatingDomain"
autocapitalize="off"
data-testid="docRootInput">
</div>
<ul validation-container field-name="documentRoot">
<li validation-item field-name="documentRoot" validation-name="pattern">
<span ng-bind="domainChooserStrings.docRootPatternError"></span>
</li>
</ul>
</div>
<div class="domain-chooser__subdomain-group"
ng-show="registeredForm.domainType == DOMAIN_TYPE_CONSTANTS.ADDON && !registeredForm.shareDocRoot"
data-testid="subdomainGroup">
<span class="domain-chooser__docroot-heading"
ng-bind="domainChooserStrings.subdomainHeading">
</span>
<p class="domain-chooser__form-description"
ng-bind="domainChooserStrings.subdomainDescription">
</p>
<div class="domain-chooser__subdomain-input-wrapper">
<input type="text"
name="subdomain"
class="domain-chooser__subdomain-input"
ng-model="registeredForm.subdomain"
ng-required="registeredForm.domainType == DOMAIN_TYPE_CONSTANTS.ADDON && !registeredForm.shareDocRoot"
ng-disabled="creatingDomain"
autocapitalize="off"
data-testid="subdomainInput">
<span class="domain-chooser__subdomain-suffix">.{{ registeredForm.rootDomain }}</span>
</div>
<ul validation-container field-name="subdomain">
<li validation-item field-name="subdomain" validation-name="required">
<span ng-bind="domainChooserStrings.subdomainRequired"></span>
</li>
</ul>
</div>
</div>
</div>
<div class="domain-chooser__form domain-chooser__form--purchase"
ng-if="selectedDomainOption === 'purchase'"
data-testid="purchaseDomainForm">
<label class="domain-chooser__form-label"
for="purchaseSearchInput"
ng-bind="domainChooserStrings.purchaseFormLabel">
</label>
<div class="domain-chooser__search-row">
<div class="domain-chooser__search-bar">
<i class="fas fa-search domain-chooser__search-icon" aria-hidden="true"></i>
<input type="text"
id="purchaseSearchInput"
class="form-control domain-chooser__search-input"
ng-model="purchaseForm.searchQuery"
ng-disabled="creatingDomain"
ng-keyup="handlePurchaseSearchKeyup($event)"
autocapitalize="off"
autocomplete="off"
ng-attr-placeholder="{{ domainChooserStrings.purchaseSearchPlaceholder }}"
data-testid="purchaseSearchInput">
</div>
</div>
<button type="button"
class="domain-chooser__search-options-link"
ng-click="togglePurchaseSearchOptions()"
aria-expanded="{{ purchaseForm.showSearchOptions }}"
data-testid="purchaseToggleOptions">
{{ purchaseForm.showSearchOptions
? domainChooserStrings.hideOptions
: domainChooserStrings.showOptions }}
</button>
<div class="domain-chooser__search-options" ng-if="purchaseForm.showSearchOptions">
<tld-priority-input priorities="purchaseForm.tldFilters"
supported-tlds="supportedTlds"
disabled="creatingDomain"
input-id="purchaseTldPriorityInput">
</tld-priority-input>
</div>
</div>
<div class="domain-chooser__actions" ng-if="selectedDomainOption">
<button type="button"
class="domain-chooser__btn-cancel"
ng-click="cancelDomainOption()"
ng-disabled="creatingDomain"
ng-bind="domainChooserStrings.cancelLabel"
data-testid="domainChooserCancel">
</button>
<button type="button"
class="domain-chooser__btn-continue"
ng-click="confirmDomainOption()"
ng-disabled="creatingDomain || (selectedDomainOption === 'registered' && !registeredDomainForm.$valid) || (selectedDomainOption === 'purchase' && !purchaseForm.searchQuery)"
data-testid="domainChooserContinue">
<span ng-if="creatingDomain" class="fas fa-spinner fa-spin"></span>
<span ng-bind="creatingDomain
? domainChooserStrings.creatingLabel
: (selectedDomainOption === 'purchase'
? domainChooserStrings.searchLabel
: domainChooserStrings.continueLabel)"></span>
</button>
</div>
</div>
</div>
<div class="section">
<div class="row" ng-if="hasTemporaryDomainInList">
<div class="col-xs-12">
<cp-alert type="info" id="has-temporary-domain-banner" data-testid="has-temporary-domain-banner">
<span ng-bind="temporaryDomainBannerText"></span>
</cp-alert>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<item-lister
id="domainItemLister"
items="getFilteredDomains()"
configuration-options="tableConfigurationOptions"
header-items="tableHeaderItems">
<domain-lister-view></domain-lister-view>
</item-lister>
</div>
</div>
</div>
Back to Directory