"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/*
Very bad experimental first account name configuration page.
This is extremely preliminary and just for experimentation.
*/
const react_1 = require("react");
const antd_1 = require("antd");
const loading_1 = __importDefault(require("components/share/loading"));
const database_1 = __importDefault(require("lib/hooks/database"));
const save_button_1 = __importDefault(require("components/misc/save-button"));
const A_1 = __importDefault(require("components/misc/A"));
const register_1 = __importDefault(require("../register"));
const icon_1 = require("@cocalc/frontend/components/icon");
const firstNameDesc = `Your name is used for interacting with
other users in chat, your cursor when editing, etc. The first
letter of your first name is used for your avatar if you do not
upload an image.`;
const lastNameDesc = `Your full name is used to label your cursor
when you edit collaboratively with other people, and to identify
you when you are @mentioned.   CoCalc does NOT have
a policy that you must user your real name, and you can change your
name at any time.`;
const unlistedDesc = `By default both your name and exact email address are
used when people search to add users as collaborators to projects.  There is
no way to do a search for partial email addresses, and your email address
is never revealed to other users.   If you choose to be unlisted, then you can
only be added as a collaborator to a project by an exact email
address match.`;
(0, register_1.default)({
    path: "account/name",
    title: "Your Name",
    icon: "user-times",
    desc: "Configure your first name, last name, username and whether or not your account is unlisted.",
    search: `{firstNameDesc} {lastNameDesc} Your username provides a nice URL for content you share publicly. unlisted {unlistedDesc}"`,
    Component: ConfigureName,
});
function ConfigureName() {
    const get = (0, database_1.default)({
        accounts: {
            first_name: null,
            last_name: null,
            name: null,
            unlisted: null,
        },
    });
    const [original, setOriginal] = (0, react_1.useState)(undefined);
    const [edited, setEdited] = (0, react_1.useState)(undefined);
    (0, react_1.useEffect)(() => {
        if (!get.loading && original === undefined && get.value.accounts != null) {
            setOriginal(get.value.accounts);
            setEdited(get.value.accounts);
        }
    }, [get.loading]);
    function onChange(field, value = "value") {
        return (e) => setEdited({ ...edited, [field]: e.target[value] });
    }
    if (original == null || edited == null) {
        return (0, jsx_runtime_1.jsx)(loading_1.default, {});
    }
    return ((0, jsx_runtime_1.jsxs)("div", { children: [get.error && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { style: { marginTop: "20px" }, message: "Error loading data", description: get.error, type: "error", showIcon: true })), " ", get.loading ? ((0, jsx_runtime_1.jsx)(loading_1.default, {})) : ((0, jsx_runtime_1.jsx)("form", { children: (0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", style: { width: "100%", maxWidth: "500px" }, children: [(0, jsx_runtime_1.jsx)(save_button_1.default, { edited: edited, original: original, setOriginal: setOriginal, table: "accounts" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "First Name" }), " ", firstNameDesc, (0, jsx_runtime_1.jsx)(antd_1.Input, { addonBefore: "First name", defaultValue: get.value.accounts.first_name, onChange: onChange("first_name") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "Last Name" }), " ", lastNameDesc, (0, jsx_runtime_1.jsx)(antd_1.Input, { addonBefore: "Last name", defaultValue: get.value.accounts.last_name, onChange: onChange("last_name") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "Username" }), (0, jsx_runtime_1.jsxs)("div", { children: ["Your username provides a", " ", edited.name ? ((0, jsx_runtime_1.jsx)(A_1.default, { external: true, href: `/${edited.name}`, children: "nice URL" })) : ("nice URL"), " ", "for content you share publicly.", original.name && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", "(Changing your name could break links that you have shared.)"] }))] }), (0, jsx_runtime_1.jsx)(antd_1.Input, { addonBefore: "Name", defaultValue: get.value.accounts.name, onChange: onChange("name") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "user-secret" }), " Unlisted"] }), (0, jsx_runtime_1.jsx)("div", { children: unlistedDesc }), (0, jsx_runtime_1.jsx)(antd_1.Checkbox, { defaultChecked: get.value.accounts.unlisted, onChange: onChange("unlisted", "checked"), children: "Unlisted" })] }) }))] }));
}
//# sourceMappingURL=name.js.map