zulip/static/js/common.js

import $ from "jquery";
import tippy from "tippy.js";

import {$t} from "./i18n";

export const status_classes = "alert-error alert-success alert-info alert-warning";

// TODO: Move this to the portico codebase.
export function autofocus(selector) {
    $(() => {
        $(selector).trigger("focus");
    });
}

// Return a boolean indicating whether the password is acceptable.
// Also updates a Bootstrap progress bar control (a jQuery object)
// if provided.
//
// Assumes that zxcvbn.js has been loaded.
//
// This is in common.js because we want to use it from the signup page
// and also from the in-app password change interface.
export function password_quality(password, bar, password_field) {
    // We load zxcvbn.js asynchronously, so the variable might not be set.
    if (typeof zxcvbn === "undefined") {
        return undefined;
    }

    const min_length = password_field.data("minLength");
    const min_guesses = password_field.data("minGuesses");

    const result = zxcvbn(password);
    const acceptable = password.length >= min_length && result.guesses >= min_guesses;

    if (bar !== undefined) {
        const t = result.crack_times_seconds.offline_slow_hashing_1e4_per_second;
        let bar_progress = Math.min(1, Math.log(1 + t) / 22);

        // Even if zxcvbn loves your short password, the bar should be
        // filled at most 1/3 of the way, because we won't accept it.
        if (!acceptable) {
            bar_progress = Math.min(bar_progress, 0.33);
        }

        // The bar bottoms out at 10% so there's always something
        // for the user to see.
        bar.width(90 * bar_progress + 10 + "%")
            .removeClass("bar-success bar-danger")
            .addClass(acceptable ? "bar-success" : "bar-danger");
    }

    return acceptable;
}

export function password_warning(password, password_field) {
    if (typeof zxcvbn === "undefined") {
        return undefined;
    }

    const min_length = password_field.data("minLength");

    if (password.length < min_length) {
        return $t(
            {defaultMessage: "Password should be at least {length} characters long"},
            {length: min_length},
        );
    }
    return zxcvbn(password).feedback.warning || $t({defaultMessage: "Password is too weak"});
}

export function phrase_match(query, phrase) {
    // match "tes" to "test" and "stream test" but not "hostess"
    let i;
    query = query.toLowerCase();

    phrase = phrase.toLowerCase();
    if (phrase.startsWith(query)) {
        return true;
    }

    const parts = phrase.split(" ");
    for (i = 0; i < parts.length; i += 1) {
        if (parts[i].startsWith(query)) {
            return true;
        }
    }
    return false;
}

export function copy_data_attribute_value(elem, key) {
    // function to copy the value of data-key
    // attribute of the element to clipboard
    const temp = $(document.createElement("input"));
    $("body").append(temp);
    temp.val(elem.data(key)).trigger("select");
    document.execCommand("copy");
    temp.remove();
    elem.fadeOut(250);
    elem.fadeIn(1000);
}

export function has_mac_keyboard() {
    return /mac/i.test(navigator.platform);
}

export function adjust_mac_shortcuts(key_elem_class, require_cmd_style) {
    if (!has_mac_keyboard()) {
        return;
    }

    const keys_map = new Map([
        ["Backspace", "Delete"],
        ["Enter", "Return"],
        ["Home", "Fn + ←"],
        ["End", "Fn + →"],
        ["PgUp", "Fn + ↑"],
        ["PgDn", "Fn + ↓"],
        ["Ctrl", "⌘"],
    ]);

    $(key_elem_class).each(function () {
        let key_text = $(this).text();
        const keys = key_text.match(/[^\s+]+/g) || [];

        if (key_text.includes("Ctrl") && require_cmd_style) {
            $(this).addClass("mac-cmd-key");
        }

        for (const key of keys) {
            if (keys_map.get(key)) {
                key_text = key_text.replace(key, keys_map.get(key));
            }
        }

        $(this).text(key_text);
    });
}

// See https://zulip.readthedocs.io/en/latest/development/authentication.html#password-form-implementation
// for design details on this feature.
function set_password_toggle_label(password_selector, label, tippy_tooltips) {
    $(password_selector).attr("aria-label", label);
    if (tippy_tooltips) {
        if (!$(password_selector)[0]._tippy) {
            tippy(password_selector);
        }
        $(password_selector)[0]._tippy.setContent(label);
    } else {
        $(password_selector).attr("title", label);
    }
}

function toggle_password_visibility(password_field_id, password_selector, tippy_tooltips) {
    let label;
    const password_field = $(password_field_id);

    if (password_field.attr("type") === "password") {
        password_field.attr("type", "text");
        $(password_selector).removeClass("fa-eye-slash").addClass("fa-eye");
        label = $t({defaultMessage: "Hide password"});
    } else {
        password_field.attr("type", "password");
        $(password_selector).removeClass("fa-eye").addClass("fa-eye-slash");
        label = $t({defaultMessage: "Show password"});
    }
    set_password_toggle_label(password_selector, label, tippy_tooltips);
}

export function reset_password_toggle_icons(password_field, password_selector) {
    $(password_field).attr("type", "password");
    $(password_selector).removeClass("fa-eye").addClass("fa-eye-slash");
    const label = $t({defaultMessage: "Show password"});
    set_password_toggle_label(password_selector, label, true);
}

export function setup_password_visibility_toggle(password_field_id, password_selector, opts = {}) {
    opts = {tippy_tooltips: false, ...opts};
    const label = $t({defaultMessage: "Show password"});
    set_password_toggle_label(password_selector, label, opts.tippy_tooltips);
    $(password_selector).on("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        toggle_password_visibility(password_field_id, password_selector, opts.tippy_tooltips);
    });
}