Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/twofactorauth/views/setupView.ptt

<div ng-show="setup.loading">
    <div class="alert alert-info">
        <span class="fas fa-sync fa-spin"></span>
        [% locale.maketext("Loading …") %]
    </div>
</div>
<div ng-show="!setup.loading && setup.settingUp">
    <p class="description">
    [% locale.maketext("To use two-factor authentication, you will need a [output,url,_1,supported phone app,_2].", "https://go.cpanel.net/2fa", { id => "2fa_external_link", target => "_blank" }) %]
    </p>

    <div class="alert alert-warning" ng-show="setup.isReconfigure">
        <span class="glyphicon glyphicon-exclamation-sign"></span>
        <div class="alert-message">
            [% locale.maketext('[output,strong,Warning:] This will overwrite your current [output,acronym,2FA,Two-Factor Authentication] configuration; any existing configurations will no longer produce valid security codes.') %]
        </div>
    </div>

    <form class="layout-medium ng-pristine ng-valid"
        id="setup_form"
        name="setup_form"
        autocomplete="off"
        novalidate>
    <div class="row section">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6">
            <h3 class="step-title">[% locale.maketext("Step [numf,_1]", 1) %]</h3>
            <p>
            [% locale.maketext("Scan the following [asis,QR code] with a two-factor authentication app on your phone.") %]
            </p>

            <div class="image-container center-block"
                id="qr_code_container"
                create-qr-code
                qr-code-data="setup.setup_data.otpauth_str"
                ></div>

            <div class="alert alert-info">
                <span class="glyphicon glyphicon-info-sign"></span>
                <div class="alert-message">
                    <p>
                    <strong>[% locale.maketext("Don’t have a [asis,QR code] reader?") %]</strong>
                    </p>
                    <p>[% locale.maketext("Enter the following information to manually configure two-factor authentication in your app:") %]</p>
                    <p><strong>[% locale.maketext('Account') %]</strong></p>
                    <pre><code id="2fa_account">{{ setup.setup_data.user }}</code></pre>
                    <p><strong>[% locale.maketext('Key') %]</strong></p>
                    <pre><code id="2fa_secret_text_code">{{ setup.setup_data.secret }}</code></pre>
                </div>
            </div>
        </div>
    </div>

    <div class="row section">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-6">
            <h3 class="step-title">[% locale.maketext("Step [numf,_1]", 2) %]</h3>
            <p class="description">
            [% locale.maketext("Enter the security code generated by your two-factor authentication app.") %]
            </p>

            <div class="form-group">
                <label for="2fa_security_token">
                    [% locale.maketext("Security Code") %]
                </label>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <input type="text"
                            id="security_token"
                            name="security_token"
                            class="form-control"
                            ng-model="setup.security_token"
                            placeholder="[% locale.maketext('six-digit code') %]"
                            maxlength="10"
                            required
                            >
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <ul validation-container field-name="security_token">
                            <validation-item
                                field-name="security_token"
                                validation-name="required">
                                [% locale.maketext("This field is required.") %]</validation-item>
                            <validation-item
                                field-name="security_token"
                                validation-name="maxlength">
                               [% locale.maketext('This field cannot exceed 10 characters.') %]</validation-item>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group action-group">
        <button type="submit"
            id="enable_2fa_btn"
            name="enable_2fa_btn"
            ng-disabled="setup.disableSave(setup_form)"
            cp-action="setup.save(setup_form)"
            button-class="btn-primary"
            >[% locale.maketext("Configure Two-Factor Authentication") %]</button>
        <button type="submit"
            id="cancel_setup"
            name="cancel_setup"
            class="btn btn-link"
            ng-click="setup.goToMain()"
            ng-disabled="setup.isSaving"
            >[% locale.maketext("Cancel") %]</button>
    </div>
    </form>
</div>
<div ng-show="!setup.loading && !setup.settingUp">
    <div class="section">
        <div class="row">
            <div class="col-xs-12">
                <div class="status">
                    <span class="status__label">[% locale.maketext('Status:') %]</span>
                    <div class="status__enabled text-success" ng-show="setup.isEnabled">
                        <span class="glyphicon glyphicon-ok-sign status__icon"></span>
                        <span class="status__text">[% locale.maketext('Configured[comment,the status of the account-level 2FA]') %]</span>
                    </div>
                    <div class="status__disabled text-danger" ng-show="!setup.isEnabled">
                        <span class="glyphicon glyphicon-remove-sign status__icon"></span>
                        <span class="status__text">[% locale.maketext('Not Configured[comment, status of the account-level 2FA]') %]</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="status-actions" ng-show="setup.isEnabled">
                    <button type="button"
                        id="reconfigure2fa"
                        name="reconfigure2fa"
                        class="btn btn-default"
                        ng-click="setup.goToSetup()"
                        >[% locale.maketext('Reconfigure Two-Factor Authentication') %]</button>
                    <button type="button"
                        id="remove2fa"
                        name="remove2fa"
                        cp-action="setup.prompt()"
                        button-class="btn-danger"
                        >[% locale.maketext('Remove Two-Factor Authentication') %]</button>
                </div>
                <div class="status-actions" ng-show="!setup.isEnabled">
                    <button type="button"
                        id="reconfigure2fa"
                        name="reconfigure2fa"
                        class="btn btn-primary"
                        ng-click="setup.goToSetup()"
                        >[% locale.maketext('Set Up Two-Factor Authentication') %]</button>
                </div>
            </div>
        </div>
    </div>
</div>