Viewing File: /usr/local/cpanel/share/libraries/cjt2/src/directives/passwordField.phtml

<span class="ng-cloak" ng-cloak>
    <span class="input-group" ng-class="{ 'settings-panel-visible': showSettings }">
        <!-- hack to make sure browsers dont auto fill the password field -->
        <!-- title is required for WAI, but screen readers will not see the element so not translating -->
        <input type="password" aria-hidden="true" title="hidden password field" id="hiddenPasswordField" autocomplete="off" style="display:none">
        <input id="{{name}}"
               type="{{show ? 'text' : 'password'}}"
               name="{{name}}"
               data-testid="{{testId}}-input"
               class="form-control field"
               ng-class="{ 'obscured-field': !show, 'unobscured-field': show}"
               placeholder="{{placeholder}}"
               autocomplete="new-password"
               ng-model="password"
               title="{{placeholder}}"
               ng-trim="false"
               check-password-strength
               minimum-password-strength="{{minimumStrength}}"
               ng-model-options="{debounce: 150}"
               ng-minlength="{{minimumLength}}"
               ng-maxlength="{{maximumLength}}">
        <span class="input-group-btn ng-hide" ng-show="showGenerator || showToggleView">
            <button id="{{name + '_btnToggleView'}}"
            data-testid="{{testId}}-toggle-visibility-button"
                    class="btn btn-default ng-hide"
                    ng-click="toggle()"
                    ng-show="showGenerator || showToggleView"
                    type="button"
                    ng-attr-tabindex="{{toggleViewButtonTabIndex}}"
                    title={{toggleViewButtonTitle}}>
                <i class="fas fa-lg fa-fw" ng-class="{ 'fa-eye': show, 'fa-eye-slash': !show }"></i>
            </button>
            <button id="{{name + '_btnGenerate'}}"
                    class="btn btn-default ng-hide"
                    data-testid="{{testId}}-generate-button"
                    ng-click="generate()"
                    ng-show="showGenerator"
                    type="button"
                    ng-attr-tabindex="{{generateButtonTabIndex}}"
                    title="{{generateButtonTitle}}">
                <span class="hidden-xs">{{generateButtonText}}</span>
                <i class="fas fa-fw fa-key fa-lg fa-rotate-90 hidden-sm hidden-md hidden-lg" ></i>
            </button>
            <button id="{{name + '_btnSettings'}}"
                    class="btn btn-default ng-hide"
                    data-testid="{{testId}}-toggle-settings-button"
                    title="{{generateSettingsTitle}}"
                    ng-click="toggleSettings()"
                    type="button"
                    ng-attr-tabindex="{{generateSettingsTabIndex}}"
                    ng-show="showGenerator">
                <span class="fas fa-fw fa-caret-down" ng-show="!showSettings"></span>
                <span class="fas fa-fw fa-caret-up" ng-show="showSettings"></span>
            </button>
        </span>
    </span>
    <div id="{{name + '_pnlSettings'}}" class="panel panel-default ng-hide" ng-show="showSettings">
        <div class="panel-body">
            <p>{{caption}}</p>
            <div class="row">
                <span class="col-xs-6 col-sm-3">
                    <span class="form-group form-group-length">
                        <label for="{{name + '_txtLength'}}">
                            {{generateSettingsLengthLabel}}
                        </label>
                        <input id="{{name + '_txtLength'}}"
                                   ng-model="passwordLength"
                                   type="number"
                                   limit-range
                                   range-minimum="{{generateMinimumLength}}"
                                   range-maximum="{{generateMaximumLength}}"
                                   range-default="{{defaultLength}}"
                                   class="form-control length-field"
                                   min="{{generateMinimumLength}}"
                                   max="{{generateMaximumLength}}">
                    </span>
                </span>
                <span class="col-xs-1 col-xs-offset-4 col-sm-offset-8">
                    <i ng-click="toggleSettings()" class="fas fa-fw fa-times fa-lg pull-right flip" title="Close" id="{{name + '_btnClose'}}"></i>
                </span>
            </div>
            <div class="row">
                <span class="col-xs-12 col-sm-6">
                    <span class="row">
                        <span class="col-xs-12">
                          <h4>{{generateSettingsAlphaTitle}}</h4>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoAlphaBoth'}}">
                                    <input id="{{name + '_rdoAlphaBoth'}}" data-testid="{{testId}}-settings-both-letters-radio" type="radio" ng-model="alpha" value="both" name="alpha">
                                    {{generateSettingsAlphaBothLabel}}
                                </label>
                            </span>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoAlphaLower'}}">
                                    <input id="{{name + '_rdoAlphaLower'}}" data-testid="{{testId}}-settings-lc-letters-radio" type="radio" ng-model="alpha" value="lower" name="alpha">
                                    {{generateSettingsAlphaLowerLabel}}
                                </label>
                            </span>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoAlphaUpper'}}">
                                    <input id="{{name + '_rdoAlphaUpper'}}" data-testid="{{testId}}-settings-uc-letters-radio" type="radio" ng-model="alpha" value="upper" name="alpha">
                                    {{generateSettingsAlphaUpperLabel}}
                                </label>
                            </span>
                        </span>
                    </span>
                </span>
                <span class="col-xs-12 col-sm-6">
                    <span class="row">
                        <span class="col-xs-12">
                        <h4>{{generateSettingsOtherTitle}}</h4>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoNonAlphaBoth'}}">
                                    <input id="{{name + '_rdoNonAlphaBoth'}}" type="radio" data-testid="{{testId}}-settings-both-symbols-radio" ng-model="nonalpha" value="both" name="nonalpha">
                                    {{generateSettingsBothNumersAndSymbolsLabel}}
                                </label>
                            </span>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoNonAlphaNumbers'}}">
                                    <input id="{{name + '_rdoNonAlphaNumbers'}}" data-testid="{{testId}}-settings-numbers-radio" type="radio" ng-model="nonalpha" value="numbers" name="nonalpha">
                                    {{generateSettingsNumbersLabel}}
                                </label>
                            </span>
                        </span>
                        <span class="col-xs-12">
                            <span class="radio">
                                <label for="{{name + '_rdoNonAlphaSymbols'}}">
                                    <input id="{{name + '_rdoNonAlphaSymbols'}}" data-testid="{{testId}}-settings-symbols-radio" type="radio" ng-model="nonalpha" value="symbols" name="nonalpha">
                                    {{generateSettingsSymbolsLabel}}
                                </label>
                            </span>
                        </span>
                  </span>
                </span>
            </div>
        </div>
    </div>
    <display-password-strength id="{{name + '_strength_meter'}}" field-id="{{name}}" class="ng-hide" ng-show="showMeter"></display-password-strength>
    <input id="{{name + '_strength'}}" role="presentation" title="" type="hidden" update-password-strength field-id="{{name}}" ng-model="passwordStrength">
    <div class="ng-hide current-strength-text" ng-show="currentStrengthText">
        {{ currentStrengthText }}
    </div>
</span>