Viewing File: /usr/local/cpanel/base/frontend/jupiter/gpg/index.html.tt


[% SET CPANEL.CPVAR.dprefix = "../" %]

[%
    # Fetch the required strength
    SET required_strength_resp = execute("PasswdStrength", "get_required_strength", { "app" => "gpg" } );
    IF required_strength_resp.status;
        SET required_strength = required_strength_resp.data.strength;
    END;
%]

[% js_code = PROCESS js_block %]
[% WRAPPER '_assets/master.html.tt'
    app_key = 'encryption'
    page_js = js_code
    page_scripts = [
        'libraries/handlebars/handlebars.js',
        'libraries/moment/optimized/moment.min.js',
    ]
%]
[% PROCESS '_assets/_ajaxapp_header.html.tt' -%]

<div class="body-content">
    <p id="descEncryption" class="description">
        [% locale.maketext("GnuPG is a publicly available encryption scheme that uses the “public key” approach. With GnuPG, messages are encrypted using a “public key” however, they can only be decrypted by a “private key”, which is retained by the intended recipient of the message.") %]
    </p>

    <div class="section">
        <h2 id="hdrCreateNewKey">[% locale.maketext("Create a New Key") %]</h2>


        <form name="addkeyform" action="javascript:void(0)" id="addkeyform" method="post" onsubmit="save(this)">
            <div class="form-group">
                <label id="lblYourName" for="name">
                    [% locale.maketext("Your Name") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="name" type="text" class="form-control" name="name"  />
                    </div>
                    <div id="name_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblYourEmail" for="email">
                    [% locale.maketext("Your Email") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="email" type="text" class="form-control" name="email" />
                    </div>
                    <div id="email_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblComment" for="comment">
                    [% locale.maketext("Comment or Nickname:") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="comment" type="text" class="form-control" name="comment"  />
                    </div>
                    <div id="comment_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblKeyPassword" for="password">
                    [% locale.maketext("Key Password") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="password" type="password" name="password"  class="form-control" />
                    </div>
                    <div id="password_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblPasswordAgain" for="password2">
                    [% locale.maketext("Confirm Password:") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input id="password2" type="password" name="password2"  class="form-control" />
                    </div>
                    <div id="password2_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblStrength">
                    [% locale.maketext("Strength[comment,strength of a password]") %]
                    <span id="why_strong_passwords_link" class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                </label>
                [% INCLUDE _assets/why_strong_passwords.html.tt %]
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <div id="password_strength" class="password_strength"></div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input type="button" id="create_strong_password" class="btn btn-default" value="[% locale.maketext("Password Generator") %]" tabindex="-1" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblExpireDate" for="expire">
                    [% locale.maketext("Expiration Date:") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <div class="radio form-inline">
                            <label>
                                <input id="select_expire" type="radio" name="choose_expire" checked>
                            </label>
                            <span>
                                <input id="expire_num" name="expire_num"
                                    type="text"
                                    class="form-control"
                                    size="11"
                                    maxlength="4"
                                    value="1" />
                                <select id="expire_unit" name="expire_unit" class="form-control">
                                    <option id="day_unit" value="d">[% locale.maketext('Days') %]</option>
                                    <option id="week_unit" value="w">[% locale.maketext('Weeks') %]</option>
                                    <option id="month_unit" value="m">[% locale.maketext('Months') %]</option>
                                    <option id="year_unit" selected value="y">[% locale.maketext('Years') %]</option>
                                </select>
                            </span>
                        </div>
                        <div class="radio">
                            <label>
                                <input id="select_no_expire" type="radio" name="choose_expire">
                                [% locale.maketext('Do not expire') %]
                            </label>
                        </div>
                    </div>
                    <div id="expire_num_error" class="col-xs-12 col-sm-6 col-md-6 col-lg-6"></div>
                </div>
            </div>
            <div class="form-group">
                <label id="lblKeySize" for="keysize">
                    [% locale.maketext("Key Size:") %]
                </label>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <select id="keysize" name="keysize"  class="form-control">
                            <option value="2048">2048</option>
                            <option value="3072">3072</option>
                            <option value="4096">4096</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input id="submit" type="submit"  class="btn btn-primary" value="[% locale.maketext("Generate Key") %]" />
            </div>
            <div id="create_key_status_bar"></div>
        </form>
    </div>

    <div class="section">
        <h2 id="hdrImportKey" >[% locale.maketext("Import Key") %]</h2>
        <a id="btnImportKey" class="btn btn-primary" href="importkey.html" style="text-decoration:none;" >
            [% locale.maketext("Import Public [asis,GPG] Key") %]
        </a>
    </div>

    [%
        SET public_keys_call = execute("GPG", "list_public_keys", {});
        SET public_keys = [];
        IF public_keys_call.status;
            SET public_keys = public_keys_call.data;
        END;
    %]

    [% IF public_keys.size() %]
    <div class="section">
        <h2 id="hdrPublicKeys">[% locale.maketext("Public Keys") %]</h2>
        <table id="tblListGpgKeys" class="table table-striped responsive-table">
        <thead>
            <tr>
                <th>[% locale.maketext("Key [asis,ID]") %]</th>
                <th>[% locale.maketext("Public Keys") %]</th>
                <th>[% locale.maketext("Key Size") %]</th>
                <th>[% locale.maketext("Created") %]</th>
                <th>[% locale.maketext("Expires") %]</th>
                <th>[% locale.maketext("Actions") %]</th>
            </tr>
        </thead>
        <tbody>
            [% FOREACH hashref IN public_keys; %]
            <tr>
                <td data-title="[% locale.maketext("Key [asis,ID]") %]">[% hashref.id.html() %]</td>
                <td data-title="[% locale.maketext("Public Keys") %]">[% hashref.user_id.html() %]</td>
                <td data-title="[% locale.maketext("Key Size") %]">[% hashref.bits.html() %]</td>
                <td data-title="[% locale.maketext("Created") %]">[% locale.datetime(hashref.created, 'datetime_format_medium') %]</td>
                <td data-title="[% locale.maketext("Expires") %]">[% (hashref.expires) ? locale.datetime(hashref.expires, 'datetime_format_medium') : '' %]</td>
                <td data-title="[% locale.maketext("Actions") %]">
                    <a class="btn btn-link" href="delkey.html?key=[% hashref.id.html() %]">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        [% locale.maketext("Delete GnuPG Key") %]
                    </a>
                    <a class="btn btn-link" href="editkey.html?key=[% hashref.id.html() %]">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        [% locale.maketext("View") %]
                    </a>
                </td>
            </tr>
            [% END; %]
        </tbody>
        </table>
    </div>
    [% END %]

    [%
        SET secret_keys_call = execute("GPG", "list_secret_keys", {});
        SET secret_keys = [];
        IF secret_keys_call.status;
            SET secret_keys = secret_keys_call.data;
        END;
    %]

    [% IF secret_keys.size() %]
    <div class="section">
        <h2 id="hdrPrivateKeys">[% locale.maketext("Private Keys") %]</h2>
        <table id="tblCretGpgKeys" class="table table-striped responsive-table">

        <thead>
            <tr>
                <th>[% locale.maketext("Key [asis,ID]") %]</th>
                <th>[% locale.maketext("Private Keys") %]</th>
                <th>[% locale.maketext("Key Size") %]</th>
                <th>[% locale.maketext("Created") %]</th>
                <th>[% locale.maketext("Expires") %]</th>
                <th>[% locale.maketext("Actions") %]</th>
            </tr>
        </thead>
        <tbody>
            [% FOREACH hashref IN secret_keys %]
            <tr>
                <td data-title="[% locale.maketext("Key [asis,ID]") %]">[% hashref.id.html() %]</td>
                <td data-title="[% locale.maketext("Private Keys") %]">[% hashref.user_id.html() %]</td>
                <td data-title="[% locale.maketext("Key Size") %]">[% hashref.bits.html() %]</td>
                <td data-title="[% locale.maketext("Created") %]">[% locale.datetime(hashref.created, 'datetime_format_medium') %]</td>
                <td data-title="[% locale.maketext("Expires") %]">[% (hashref.expires) ? locale.datetime(hashref.expires, 'datetime_format_medium') : '' %]</td>
                <td data-title="[% locale.maketext("Actions") %]">
                    <a class="btn btn-link" href="delkey.html?key=[% hashref.id.html() %]">
                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        [% locale.maketext("Delete GnuPG Key") %]
                    </a>
                    <a class="btn btn-link" href="editpkey.html?key=[% hashref.id.html() %]">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        [% locale.maketext("View") %]
                    </a>
                </td>
            </tr>
            [% END %]
        </tbody>
        </table>
    </div>
    [% END %]


<script type="text/plain" id="loading_status_message">
    <div class="alert alert-info">
        <span class="glyphicon glyphicon-refresh loading-indicator" aria-hidden="true"></span>
        [% locale.maketext("Key is being generated. This may take a few minutes.") %]
    </div>
</script>

<script type="text/x-handlebars-template" id="success_status_message">
    <div class="alert alert-success">
        <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
        <div class="alert-message">
        [% locale.maketext("The Key has been successfully created.") %]
        </div>
    </div>
</script>

<script type="text/x-handlebars-template" id="error_status_message">
    <div class="alert alert-danger">
        <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
        <div class="alert-message">
            [% locale.maketext("There was a problem creating the GnuPG Key.") %]
            <p>
                {{ error_msg }}
            </p>
        </div>
    </div>
</script>

[% PROCESS '_assets/_ajaxapp_footer.html.tt' -%]
</div><!-- end body-content -->

[% END %]

[% BLOCK js_block %]
<script type="text/javascript">

    var REQUIRED_PASSWORD_STRENGTH = parseInt('[% required_strength %]') || 0;

    var name_validator = new CPANEL.validate.validator("[% locale.maketext("Name") %]");
    var email_validator = new CPANEL.validate.validator("[% locale.maketext("Email") %]");
    var comment_validator = new CPANEL.validate.validator("[% locale.maketext("Comment") %]");
    var expire_validator = new CPANEL.validate.validator("[% locale.maketext("Expiration Date") %]");

    var Handlebars = window.Handlebars;

    var statusBar = DOM.get('create_key_status_bar'),
        loadingMessageTemplate = Handlebars.compile(DOM.get('loading_status_message').textContent),
        successMessageTemplate = Handlebars.compile(DOM.get('success_status_message').textContent),
        errorMessageTemplate = Handlebars.compile(DOM.get('error_status_message').textContent);

    var expire_num = document.getElementById("expire_num");
    var expire_unit = document.getElementById("expire_unit");
    var expire_selected = document.getElementById("select_expire");
    var no_expire_selected = document.getElementById("select_no_expire");

    // ensure selecting other parts of the expire widget, will enable the radio button and run validation
    expire_num.addEventListener('focus', function() {
        var expire_selected = document.getElementById("select_expire");
        expire_selected.checked = true;
        expire_validator.verify();
    });
    expire_unit.addEventListener('focus', function() {
        var expire_selected = document.getElementById("select_expire");
        expire_selected.checked = true;
        expire_validator.verify();
    });

    // ensure we run the validator when selecting the radio inputs
    // would use "input" here but IE does not support triggering the input event when
    // switching radio inputs
    expire_selected.addEventListener('click', function(e) {
        if (e.target.checked) {
            expire_validator.verify();
        }
    });
    no_expire_selected.addEventListener('click', function(e) {
        if (e.target.checked) {
            expire_validator.verify();
        }
    });

    // Use moment.js to do the date math and give us an unix epoch date
    var convert_expire_to_epoch = function() {
        var expire_num = document.getElementById("expire_num");
        var expire_unit = document.getElementById("expire_unit");
        var expire_num_value = expire_num.value;
        var expire_unit_value = expire_unit.value;

        // momentjs uses M for months, so we need to handle that use case
        if (expire_unit_value === "m") {
            expire_unit_value = "M";
        }

        var moment_date = moment().add(expire_num_value, expire_unit_value);
        return moment_date.unix();
    };

    function save(form) {

        var apiArgs = {
            name: form.name.value,
            comment: form.comment.value,
            email: form.email.value,
            keysize: form.keysize.value,
            passphrase: form.password.value,
        };

        var noExpireEl = document.getElementById("select_no_expire");
        if (noExpireEl && noExpireEl.checked) {
            apiArgs.no_expire = 1;
        } else {
            apiArgs.expire = convert_expire_to_epoch();
        }

        CPANEL.api( {
            version: "3",
            module: "GPG",
            func:   "generate_key",
            data: apiArgs,
            callback: {
                failure: function(o) {
                    if (o.cpanel_error && o.cpanel_error.length > 0) {
                        statusBar.innerHTML = errorMessageTemplate({ error_msg: o.cpanel_error });
                    } else {
                        statusBar.innerHTML = errorMessageTemplate({ error_msg: "[% locale.maketext('The request timed out.') %]" });
                    }
                    DOM.get("submit").disabled = false;
                },
                success: function(o) {
                    statusBar.innerHTML = successMessageTemplate();
                    DOM.get("submit").disabled = false;
                }
            }
        } );

        // disable the submit button to prevent multiple requests being fired
        DOM.get("submit").disabled = true;
        statusBar.innerHTML = loadingMessageTemplate();
    }

    var init_page = function() {

        name_validator.add("name", "min_length(%input%, 5)", "[% locale.maketext("Name must be at least 5 characters.") %]");
        name_validator.attach();

        email_validator.add("email", "email", "[% locale.maketext("You must enter a valid email address.") %]");
        email_validator.attach();

        comment_validator.add("comment", function() { return document.getElementById('comment').value.length > 0; }, "[% locale.maketext("The comment field cannot be empty.") %]");
        comment_validator.attach();

        expire_validator.add("expire_num", "greater_than(%input%, 0)", "[% locale.maketext("You must enter an integer greater than zero.") %]", function() {
            return YAHOO.util.Dom.get("select_expire").checked;
        });
        expire_validator.attach();

        var password_validators = CPANEL.password.setup("password", "password2", "password_strength", REQUIRED_PASSWORD_STRENGTH, "create_strong_password", "why_strong_passwords_link", "why_strong_passwords_text");

        password_validators.push(name_validator, email_validator, comment_validator, expire_validator);
        CPANEL.validate.attach_to_form("submit", password_validators);

        YAHOO.util.Dom.get("name").focus();
    };
    YAHOO.util.Event.onDOMReady(init_page);

    </script>
[% END %]
Back to Directory File Manager