querysub 0.153.0 → 0.154.0

package/src/user-implementation/SecurityPage.tsx

@@ -0,0 +1,212 @@
+import preact from "preact"; import { qreact } from "../4-dom/qreact";
+import { css } from "../4-dom/css";
+import { TabbedUI } from "../library-components/TabbedUI";
+import { isCurrentUserSuperUser, user_data, user_functions } from "./userData";
+import { sort, timeInDay } from "socket-function/src/misc";
+import { Button } from "../library-components/Button";
+import { viewingUserURL } from "./UserPage";
+import { atomic } from "../2-proxy/PathValueProxyWatcher";
+import { Anchor } from "../library-components/ATag";
+import { InputLabel } from "../library-components/InputLabel";
+import { createURLSync } from "../library-components/URLParam";
+import { redButton } from "../library-components/colors";
+
+export class SecurityPage extends qreact.Component {
+    render() {
+        return <div class={css.pad(10)}>
+            <TabbedUI
+                tabs={[
+                    { value: "config", title: "Config", contents: <ConfigTab /> },
+                    { value: "activityLog", title: "Activity Log", contents: <ActivityLogTab /> },
+                    { value: "users", title: "Users", contents: <UsersTab /> },
+                    { value: "blockedIPs", title: "Blocked IPs", contents: <BlockedIPsTab /> },
+                ]}
+            />
+            <style>
+                {`
+                        table > * > * {
+                            padding: 2px 4px;
+                        }
+                    `}
+            </style>
+        </div>;
+    }
+}
+
+const pageURL = createURLSync("page", "");
+
+class ConfigTab extends qreact.Component {
+    render() {
+        let signupsOpen = atomic(user_data().secure.signupsOpen);
+        return (
+            <>
+                <div class={css.fontSize(18)}>
+                    Signups are {signupsOpen
+                        ? <span class={css.hslcolor(110, 65, 45)}>open</span>
+                        : <span class={css.hslcolor(0, 0, 0)}>closed</span>
+                    }
+                </div>
+                <InputLabel
+                    label={"Postmark API Key"}
+                    edit
+                    editClass={css.ellipsis.maxWidth("100px")}
+                    value={user_data().secure.postmarkAPIKey}
+                    onChangeValue={value => user_functions.setPostmarkAPIKey({ apiKey: value })}
+                />
+                {isCurrentUserSuperUser() && <Button onClick={() => user_functions.test()}>
+                    test
+                </Button>}
+            </>
+        );
+    }
+}
+const filterStartTimeURL = createURLSync("starttime", 0);
+const filterEndTimeURL = createURLSync("endtime", 0);
+class ActivityLogTab extends qreact.Component {
+    render() {
+        let startTime = filterStartTimeURL.value || (Date.now() - timeInDay);
+        let endTime = filterEndTimeURL.value || (Date.now() + timeInDay);
+        let activityEntries = Object.entries(user_data().secure.activityByChunk);
+        activityEntries = activityEntries.filter(([timeStr]) => {
+            let time = +timeStr;
+            return startTime <= time && time <= endTime;
+        });
+        let activities = activityEntries.flatMap(([_, activities]) => Object.values(activities));
+        sort(activities, x => -x.time);
+        return (
+            <div class={css.vbox(10)}>
+                <div class={css.hbox(10)}>
+                    <InputLabel
+                        label="Start Time"
+                        value={new Date(startTime).toISOString().slice(0, 10)}
+                        onChange={e => filterStartTimeURL.value = new Date(e.currentTarget.value).getTime()}
+                    />
+                    <InputLabel
+                        label="End Time"
+                        value={new Date(endTime).toISOString().slice(0, 10)}
+                        onChange={e => filterEndTimeURL.value = new Date(e.currentTarget.value).getTime()}
+                    />
+                </div>
+                <div class={css.vbox(10)}>
+                    <table>
+                        <tr>
+                            <th>Time</th>
+                            <th>Type</th>
+                            <th>Machine</th>
+                            <th>User</th>
+                            <th>IP</th>
+                            <th>Actions</th>
+                            <th>Fields</th>
+                        </tr>
+                        {activities.map(activity => (
+                            <tr>
+                                <td>{new Date(activity.time).toISOString()}</td>
+                                <td>{activity.type}</td>
+                                <td>{activity.machineId}</td>
+                                <td>{activity.userId}</td>
+                                <td>{activity.ip}</td>
+                                <td>
+                                    <div class={css.hbox(10)}>
+                                        {!(activity.ip in user_data().secure.blockedIPs) && <Button
+                                            class={css.hsl(0, 75, 50).bord(1, "hsl(0, 75%, 75%)")}
+                                            onClick={() => user_functions.specialBlockIP({ ip: activity.ip })}
+                                        >
+                                            Block IP
+                                        </Button>}
+                                        {(activity.ip in user_data().secure.blockedIPs) && <Button
+                                            class={css.hsl(0, 75, 50).bord(1, "hsl(0, 75%, 75%)")}
+                                            onClick={() => user_functions.specialUnblockIP({ ip: activity.ip })}
+                                        >
+                                            Unblock IP
+                                        </Button>}
+                                        <Button onClick={() => {
+                                            let fields = JSON.parse(activity.fieldsJSON);
+                                            let userId = fields.userId;
+                                            if (!userId) throw new Error("No userId in fields");
+                                            pageURL.value = "user";
+                                            viewingUserURL.value = userId;
+                                        }}>
+                                            Go To User
+                                        </Button>
+                                    </div>
+                                </td>
+                                <td>{activity.fieldsJSON}</td>
+                            </tr>
+                        ))}
+                    </table>
+                </div>
+            </div>
+        );
+    }
+}
+class UsersTab extends qreact.Component {
+    render() {
+        let users = Object.entries(user_data().users);
+        sort(users, x => -(x[1].lastSignInTime || 0));
+        return (
+            <div class={css.vbox(10)}>
+                <table>
+                    <tr>
+                        <th>User Id</th>
+                        <th>Display Name</th>
+                        <th>Email</th>
+                        <th>User Type</th>
+                        <th>Create Time</th>
+                        <th>Last Sign In</th>
+                    </tr>
+                    {users.map(([userId, user]) => (
+                        <tr>
+                            <td>
+                                <Anchor values={[{ param: pageURL, value: "user" }, { param: viewingUserURL, value: userId }]}>
+                                    {userId}
+                                </Anchor>
+                            </td>
+                            <td>{user.settings.displayName}</td>
+                            <td>{user.email || <span class={redButton}>Banned</span>}</td>
+                            <td>{user.userType}</td>
+                            <td>{new Date(user.createTime).toLocaleString()}</td>
+                            <td>{user.lastSignInTime && new Date(user.lastSignInTime).toLocaleString()}</td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        );
+    }
+}
+class BlockedIPsTab extends qreact.Component {
+    render() {
+        let blockedIPs = Object.entries(user_data().secure.blockedIPs);
+        sort(blockedIPs, x => -x[1].addedTime);
+        return (
+            <div class={css.vbox(10)}>
+                <InputLabel
+                    label="Block IP"
+                    onChangeValue={ip => user_functions.specialBlockIP({ ip })}
+                />
+                <table>
+                    <tr>
+                        <th>IP</th>
+                        <th>Added Time</th>
+                        <th>Added By</th>
+                        <th>Actions</th>
+                    </tr>
+                    {blockedIPs.map(([ip, blocked]) => (
+                        <tr>
+                            <td>{ip}</td>
+                            <td>{new Date(blocked.addedTime).toLocaleString()}</td>
+                            <td>{blocked.addedByUserId}</td>
+                            <td>
+                                <Button
+                                    class={css.hsl(0, 75, 50).bord(1, "hsl(0, 75%, 75%)")}
+                                    onClick={() => user_functions.specialUnblockIP({ ip })}
+                                >
+                                    Unblock IP
+                                </Button>
+                            </td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        );
+    }
+}

package/src/user-implementation/UserPage.tsx

@@ -0,0 +1,320 @@
+import preact from "preact"; import { qreact } from "../4-dom/qreact";
+import { LOCAL_STORAGE_COMMIT_DELAY_KEY, UserType, getUserObj, getUserObjAssert, isCurrentUserSuperUser, user, userAssert, user_data, user_functions } from "./userData";
+import { css } from "../4-dom/css";
+import { getOwnMachineId } from "../-a-auth/certs";
+import { ellipsis } from "../misc";
+import { sort } from "socket-function/src/misc";
+import { Button } from "../library-components/Button";
+import { atomic } from "../2-proxy/PathValueProxyWatcher";
+import { generateLoginEmail } from "./loginEmail";
+import { list } from "socket-function/src/misc";
+import { Querysub } from "../4-querysub/Querysub";
+import { isDefined } from "../misc";
+import { cacheJSONArgsEqual } from "socket-function/src/caching";
+import { Anchor } from "../library-components/ATag";
+import { InputLabel, InputLabelURL } from "../library-components/InputLabel";
+import { createURLSync } from "../library-components/URLParam";
+import { greenButton, redButton, yellowButton } from "../library-components/colors";
+import { ButtonSelector } from "../library-components/ButtonSelector";
+import { DropdownSelector } from "../library-components/DropdownSelector";
+import { renderToString } from "../library-components/renderToString";
+
+// TODO: Support registering arbitrary configuration
+//  - For variables (value, type, description)
+//  - With arbitrary UI
+// import { imageQualitySTORAGE, skipDevicePixelRatioSTORAGE } from "../framework-beta/Image2";
+/*
+<ButtonSelector
+    title="Image Quality"
+    value={imageQualitySTORAGE.value}
+    onChange={v => imageQualitySTORAGE.value = v}
+    options={[
+        isCurrentUserSuperUser() ? { value: 100, title: "Raw (May lag the server)" } : undefined,
+        { value: 99, title: "Max Quality" },
+        { value: 90, title: "Normal" },
+        { value: 50, title: "Degraded" },
+        { value: 10, title: "Potato" },
+    ].filter(isDefined)}
+/>
+
+{window.devicePixelRatio !== 1 && <InputLabelURL
+    label="Use Lower Resolution Images"
+    checkbox
+    url={skipDevicePixelRatioSTORAGE}
+/>}
+*/
+
+
+export const viewingUserURL = createURLSync("viewinguser", "");
+export class UserPage extends qreact.Component {
+    state = {
+        inviteUser: "",
+    };
+    render() {
+        let realUserId = user();
+        let userId = viewingUserURL.value || realUserId;
+        let isViewingOther = userId !== realUserId;
+
+        let userObj = user_data().users[userId];
+        let isSuper = isCurrentUserSuperUser();
+
+        const ownMachineId = getOwnMachineId();
+
+        return (
+            <div class={css.pad(16, 20).fillWidth.overflow("auto")}>
+                <style>
+                    {`
+                        table > * > * {
+                            padding: 2px 4px;
+                        }
+                    `}
+                </style>
+                <div class={css.vbox(20)}>
+                    <div class={css.fontSize(28)}>User Configuration {isViewingOther && <span>({userId})</span>}</div>
+                    {userObj.userId !== userId && <div class={css.fontSize(16)}>(Used does not exist)</div>}
+                    <div class={css.vbox(4)}>
+                        <div><b>Email</b> {userObj.email}</div>
+                        {isViewingOther && atomic(userObj.email) &&
+                            <Button class={redButton} onClick={() => user_functions.banUser({ userId })}>
+                                Ban User
+                            </Button>
+                        }
+                        {isViewingOther && !atomic(userObj.email) &&
+                            <Button class={greenButton} onClick={() => user_functions.unbanUser({ userId })}>
+                                Unban User
+                            </Button>
+                        }
+                        <InputLabel
+                            label="Display Name"
+                            value={userObj.settings.displayName}
+                            onChange={e => user_functions.updateSettings({ displayName: e.currentTarget.value })}
+                        />
+                        {isSuper &&
+                            <DropdownSelector<UserType>
+                                value={userObj.userType}
+                                options={[
+                                    { value: "user", label: "User" },
+                                    { value: "moderator", label: "Moderator" },
+                                    { value: "admin", label: "Admin" },
+                                    { value: "superuser", label: "Superuser" },
+                                ]}
+                                onChange={v => user_functions.specialSetUserType({ userId, userType: v })}
+                            />
+                        }
+                        <div>Account created on {new Date(userObj.createTime).toLocaleString()}</div>
+                        <div>Last signed in {new Date(userObj.lastSignInTime || 0).toLocaleString()}</div>
+                        <InputLabel
+                            label="Commit delay time (ms)"
+                            number
+                            value={Querysub.DELAY_COMMIT_DELAY}
+                            onChange={e => {
+                                Querysub.DELAY_COMMIT_DELAY = Number(e.currentTarget.value);
+                                localStorage.setItem(LOCAL_STORAGE_COMMIT_DELAY_KEY, Querysub.DELAY_COMMIT_DELAY.toString());
+                                Querysub.onCommitFinished(() => {
+                                    this.forceUpdate();
+                                });
+                            }}
+                        />
+                    </div>
+                    {!isViewingOther && <Button class={yellowButton} onClick={() => {
+                        user_functions.logoutSpecific({ machineId: Object.keys(userObj.machineIds), ips: Object.keys(userObj.allowedIPs) });
+                    }}>Logout All Devices (Requires immediately logging back in)</Button>}
+                    {isViewingOther && <Button class={yellowButton} onClick={() => {
+                        user_functions.specialResetLogins({ userId });
+                    }}>Logout All Devices</Button>}
+                    <div>
+                        <div class={css.fontSize(20)}>Authenticated Machines</div>
+                        <table>
+                            <tr>
+                                <th>Machine ID</th>
+                                <th>Time</th>
+                                <th>IP</th>
+                                <th>Actions</th>
+                            </tr>
+                            {sort(Object.entries(userObj.machineIds), x => -x[1].time).map(([machineId, machineData]) => {
+                                return (
+                                    <tr>
+                                        <td>{machineId} {machineId === ownMachineId && <span class={css.hslcolor(120, 75, 75)}>(current machine)</span>}</td>
+                                        <td>{new Date(machineData.time).toLocaleString()}</td>
+                                        <td>{machineData.ip}</td>
+                                        <td>
+                                            {!isViewingOther && <Button class={yellowButton} onClick={() => user_functions.logoutSpecific({ machineId: [machineId], ips: [] })}>
+                                                Remove
+                                            </Button>}
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </table>
+                    </div>
+                    <div>
+                        <div class={css.fontSize(20)}>Allowed IPs</div>
+                        <table>
+                            <tr>
+                                <th>IP</th>
+                                <th>Time</th>
+                                <th>Machine ID</th>
+                                <th>Actions</th>
+                            </tr>
+                            {sort(Object.entries(userObj.allowedIPs), x => -x[1].time).map(([ip, ipData]) => {
+                                return (
+                                    <tr>
+                                        <td>{ip}</td>
+                                        <td>{new Date(ipData.time).toLocaleString()}</td>
+                                        <td>{ipData.machineId}</td>
+                                        <td>
+                                            <div class={css.hbox(6)}>
+                                                {!isViewingOther && <Button class={yellowButton} onClick={() => user_functions.logoutSpecific({ machineId: [], ips: [ip] })}>
+                                                    Remove
+                                                </Button>}
+                                                {isViewingOther &&
+                                                    <>
+                                                        {!(ip in user_data().secure.blockedIPs) && <Button
+                                                            class={yellowButton}
+                                                            onClick={() => user_functions.specialBlockIP({ ip })}
+                                                        >
+                                                            Block IP
+                                                        </Button>}
+                                                        {(ip in user_data().secure.blockedIPs) && <Button
+                                                            class={yellowButton}
+                                                            onClick={() => user_functions.specialUnblockIP({ ip })}
+                                                        >
+                                                            Unblock IP
+                                                        </Button>}
+                                                    </>
+                                                }
+                                            </div>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </table>
+                    </div>
+                    <div>
+                        <div class={css.fontSize(20)}>Outstanding Login Emails</div>
+                        <table>
+                            <tr>
+                                {isSuper && <th>Login Token</th>}
+                                <th>Create Time</th>
+                                <th>Timeout Time</th>
+                                <th>IP</th>
+                                <th>Machine ID</th>
+                                <th>Redirect URL</th>
+                                <th>Actions</th>
+                            </tr>
+                            {sort(Object.entries(userObj.loginTokens), x => -x[1].createTime).map(([loginToken, loginTokenData]) => {
+                                return (
+                                    <tr>
+                                        {isSuper && <td>{ellipsis(loginToken, 40)}</td>}
+                                        <td>{new Date(loginTokenData.createTime).toLocaleString()}</td>
+                                        <td>{new Date(loginTokenData.timeoutTime).toLocaleString()}</td>
+                                        <td>{loginTokenData.ip}</td>
+                                        <td>{loginTokenData.machineId}</td>
+                                        <td>{loginTokenData.redirectURL}</td>
+                                        <td>
+                                            {!isViewingOther && <Button class={yellowButton} onClick={() => user_functions.removeLoginToken({ loginToken: loginToken })}>
+                                                Remove
+                                            </Button>}
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </table>
+                    </div>
+                    <div>
+                        <div class={css.fontSize(20)}>Added Users</div>
+                        {!isViewingOther && <div class={css.hbox(10).padv(6)}>
+                            <InputLabel
+                                label="User Email"
+                                value={this.state.inviteUser}
+                                onChangeValue={value => {
+                                    console.log({ value });
+                                    this.state.inviteUser = value;
+                                }}
+                            />
+                            <Button onClick={() => {
+                                user_functions.inviteUser({ email: this.state.inviteUser });
+                            }}>Add User</Button>
+                        </div>}
+                        {isSuper &&
+                            <div class={css.hbox(10).padv(6)}>
+                                <InputLabel
+                                    label="Adds Remaining"
+                                    number
+                                    value={userObj.invitesRemaining}
+                                    onChange={e => {
+                                        user_functions.specialSetInviteCount({ userId, count: Number(e.currentTarget.value) });
+                                    }}
+                                />
+                            </div>
+                        }
+                        <table>
+                            <tr>
+                                <th>User ID</th>
+                                <th>Time</th>
+                            </tr>
+                            {sort(Object.entries(userObj.invitedUsers), x => -x[1].time).map(([userId, inviteData]) => {
+                                return (
+                                    <tr>
+                                        <td>
+                                            <Anchor values={[{ param: viewingUserURL, value: userId }]}>
+                                                {userId}
+                                            </Anchor>
+                                        </td>
+                                        <td>{inviteData.time}</td>
+                                    </tr>
+                                );
+                            })}
+                        </table>
+                    </div>
+                    <div>
+                        <div class={css.fontSize(20)}>Latest Page Load By Machine/IP</div>
+                        <table>
+                            <tr>
+                                <th>Source</th>
+                                <th>Time</th>
+                                <th>Machine ID</th>
+                                <th>IP</th>
+                            </tr>
+                            {sort(Object.entries(userObj.lastPageLoadsIPs), x => -x[1].time).map(([ipOrMachineId, ipData]) => {
+                                return (
+                                    <tr>
+                                        {ipOrMachineId}
+                                        <td>{new Date(ipData.time).toLocaleString()}</td>
+                                        <td>{ipData.machineId}</td>
+                                        <td>{ipData.ip}</td>
+                                    </tr>
+                                );
+                            })}
+                        </table>
+                    </div>
+                    {isCurrentUserSuperUser() &&
+                        <div>
+                            <h2>Example Login Email</h2>
+                            <div key="email" ref2={e => {
+                                e.innerHTML = renderToString(generateLoginEmail({
+                                    userId,
+                                    loginToken: "loginToken",
+                                    ip: "127.0.0.1",
+                                    machineId: getOwnMachineId(),
+                                    redirectURL: location.href,
+                                    noHTMLWrapper: true,
+                                    timeoutTime: Date.now() + 1000 * 60 * 60,
+                                }).contents);
+                            }} />
+                            {/* {generateLoginEmail({
+                                userId,
+                                loginToken: "loginToken",
+                                ip: "127.0.0.1",
+                                machineId: getOwnMachineId(),
+                                redirectURL: location.href,
+                                noHTMLWrapper: true,
+                                timeoutTime: Date.now() + 1000 * 60 * 60,
+                            }).contents} */}
+                        </div>
+                    }
+                </div>
+            </div>
+        );
+    }
+}

package/src/user-implementation/addSuperUser.ts

@@ -0,0 +1,21 @@
+import { Querysub } from "../4-querysub/Querysub";
+import { scriptCreateUser } from "./userData";
+import { pathValueCommitter } from "../0-path-value-core/PathValueCommitter";
+
+async function main() {
+    const howToCall = ` Call with yarn addsuperuser <email>`;
+    const args = process.argv.slice(2).filter(x => !x.startsWith("--"));
+    const userId = args[0];
+    console.log(process.argv);
+    if (!userId) throw new Error("No userId provided." + howToCall);
+    if (!userId.includes("@")) throw new Error(`Invalid email ${userId}.` + howToCall);
+
+    await Querysub.hostService("addSuperUser");
+
+    await Querysub.commitSynced(() => {
+        scriptCreateUser({ userId });
+    });
+
+    await pathValueCommitter.waitForValuesToCommit();
+}
+main().catch(e => console.log(e)).finally(() => process.exit());

package/src/user-implementation/canSeeSource.ts

@@ -0,0 +1,41 @@
+import { MachineSourceCheck, Querysub } from "../4-querysub/Querysub";
+import { user_data, type LOCAL_STORAGE_USER_ID_KEY, satisifiedUserType, type LOCAL_STORAGE_USER_TYPE_KEY } from "./userData";
+
+// TODO: Move this to use the management user instead?
+//  - The management user fits better, and should work for more cases.
+export function createSourceCheck(): MachineSourceCheck<{ userId: string | null }> {
+    return {
+        async shouldMachineIdSeeSource(config) {
+            const userId = config.extra.userId;
+            if (!userId) {
+                return false;
+            }
+            return await Querysub.syncedCommit(() => {
+                let userObj = user_data().users[userId];
+                // NOTE: We only check machineId, not IP. This is a less secure check than our login check,
+                //      but it is fine, as this only hides the sourcemaps, which don't really contain anything surprising.
+                if (!(config.machineId in userObj.machineIds)) {
+                    return false;
+                }
+                let allowed = satisifiedUserType(userObj.userType, "admin");
+                return allowed;
+            });
+        },
+        getExtraDataClientsideInline() {
+            if (new URL(location.href).searchParams.has("dropto")) {
+                return "nosource";
+            }
+            const keyType: typeof LOCAL_STORAGE_USER_TYPE_KEY = "userType";
+            let lastType = localStorage.getItem(keyType);
+            // HACK: We hardcode admin and superuser here. If we add new types that need to see source,
+            //  we will need to add them here.
+            if (lastType !== "admin" && lastType !== "superuser") {
+                return "nosource";
+            }
+
+            const key: typeof LOCAL_STORAGE_USER_ID_KEY = "userId";
+            let userId = localStorage.getItem(key);
+            return { userId, };
+        },
+    };
+}