gloomberb 0.10.2 → 0.10.4

package/src/components/onboarding/account-step/chooser-panel.tsx

@@ -0,0 +1,74 @@
+import { useMemo } from "react";
+import { Box, Text, TextAttributes } from "../../../ui";
+import { colors } from "../../../theme/colors";
+import { t } from "../../../i18n";
+import { useAppLanguage } from "../../../i18n/react";
+import { ListView, type ListViewItem } from "../../ui";
+
+export function AccountChooserPanel({
+  choiceIdx,
+  onChoiceSelect,
+  onChoiceActivate,
+  height,
+}: {
+  choiceIdx: number;
+  onChoiceSelect: (index: number) => void;
+  onChoiceActivate: (index: number) => void;
+  height: number;
+}) {
+  const language = useAppLanguage();
+  const bullets = [
+    t("Try Pro free for 7 days — real-time quotes & news"),
+    t("Sync portfolios, watchlists & layouts"),
+    t("Chat + AI command bar"),
+  ];
+  const choices = useMemo<ListViewItem[]>(() => [
+    { id: "signup", label: t("Create free account"), description: t("Email and password — that's it") },
+    { id: "login", label: t("Log In"), description: t("Already have a Gloom Cloud account") },
+    { id: "skip", label: t("Skip for now"), description: t("Continue without an account") },
+  ], [language]);
+
+  // Bullets are the first rows to go so the choices and footer survive a short terminal.
+  const showBullets = height >= 15;
+  const showHint = height >= 12;
+
+  return (
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+          {t("Create your free Gloom Cloud account")}
+        </Text>
+      </Box>
+      <Box height={1} />
+
+      {showBullets && (
+        <>
+          {bullets.map((bullet) => (
+            <Box key={bullet} height={1} flexDirection="row">
+              <Text fg={colors.positive}>{"· "}</Text>
+              <Text fg={colors.textDim}>{bullet}</Text>
+            </Box>
+          ))}
+          <Box height={1} />
+        </>
+      )}
+
+      <ListView
+        items={choices}
+        selectedIndex={choiceIdx}
+        onSelect={onChoiceSelect}
+        onActivate={(_item, index) => onChoiceActivate(index)}
+        showSelectedDescription
+      />
+
+      {showHint && (
+        <>
+          <Box height={1} />
+          <Box height={1}>
+            <Text fg={colors.textMuted}>{t("Use ↑↓ to choose")}</Text>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+}

package/src/components/onboarding/account-step/form-panel.tsx

@@ -0,0 +1,157 @@
+import type { RefObject } from "react";
+import { Box, Text, TextAttributes, type InputRenderable } from "../../../ui";
+import { colors } from "../../../theme/colors";
+import { t } from "../../../i18n";
+import { TextField } from "../../ui";
+import type { AccountMode, AccountSubmitError } from "./model";
+
+function FieldRow({
+  label,
+  active,
+  value,
+  masked,
+  placeholder,
+  editing,
+  inputRef,
+  onChange,
+}: {
+  label: string;
+  active: boolean;
+  value: string;
+  masked: boolean;
+  placeholder: string;
+  editing: boolean;
+  inputRef: RefObject<InputRenderable | null>;
+  onChange: (value: string) => void;
+}) {
+  if (!active) {
+    return (
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.positive}>{"✓ "}</Text>
+        <Text fg={colors.text}>{`${label}: ${masked ? "*".repeat(value.length) : value}`}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Box height={1}>
+        <Text fg={colors.text} attributes={TextAttributes.BOLD}>{label}</Text>
+      </Box>
+      <Box height={1}>
+        {editing ? (
+          <TextField
+            inputRef={inputRef}
+            value={value}
+            type={masked ? "password" : "text"}
+            placeholder={placeholder}
+            focused
+            backgroundColor={colors.panel}
+            textColor={colors.text}
+            placeholderColor={colors.textDim}
+            onChange={onChange}
+            onSubmit={() => {}}
+          />
+        ) : (
+          <Text fg={value ? colors.text : colors.textMuted}>
+            {value ? (masked ? "*".repeat(value.length) : value) : t("Press enter to type...")}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export function AccountFormPanel({
+  mode,
+  email,
+  password,
+  fieldIdx,
+  editing,
+  inputRef,
+  submitting,
+  submitError,
+  validationError,
+  onEmailChange,
+  onPasswordChange,
+}: {
+  mode: AccountMode;
+  email: string;
+  password: string;
+  fieldIdx: number;
+  editing: boolean;
+  inputRef: RefObject<InputRenderable | null>;
+  submitting: boolean;
+  submitError: AccountSubmitError | null;
+  validationError: string | null;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+}) {
+  const onEmail = fieldIdx <= 0;
+
+  return (
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+          {mode === "signup" ? t("Create your free account") : t("Log in to Gloom Cloud")}
+        </Text>
+      </Box>
+      <Box height={1} />
+
+      <FieldRow
+        label={t("Email")}
+        active={onEmail}
+        value={email}
+        masked={false}
+        placeholder={"email@example.com"}
+        editing={editing && !submitting}
+        inputRef={inputRef}
+        onChange={onEmailChange}
+      />
+
+      {!onEmail && (
+        <>
+          <Box height={1} />
+          <FieldRow
+            label={t("Password")}
+            active
+            value={password}
+            masked
+            placeholder={mode === "signup" ? t("Min 8 characters") : t("Your password")}
+            editing={editing && !submitting}
+            inputRef={inputRef}
+            onChange={onPasswordChange}
+          />
+        </>
+      )}
+
+      <Box height={1} />
+      {/* Two rows so a long server error wraps instead of being clipped. */}
+      <Box height={2}>
+        {submitting ? (
+          <Text fg={colors.text}>
+            {mode === "signup" ? t("Creating your account...") : t("Signing you in...")}
+          </Text>
+        ) : validationError || submitError ? (
+          <Text fg={colors.negative}>{validationError ?? submitError?.message ?? ""}</Text>
+        ) : (
+          <Text fg={colors.textDim}>
+            {mode === "signup"
+              ? t("We email a link to verify your address.")
+              : t("Signs this terminal in to your account.")}
+          </Text>
+        )}
+      </Box>
+      <Box height={1}>
+        {!submitting && submitError?.kind === "switch-to-login" && (
+          <Text fg={colors.textDim}>{t("Press enter to log in with this email.")}</Text>
+        )}
+      </Box>
+
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.textMuted}>{t("esc to go back — this step is optional")}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/onboarding/account-step/index.tsx

@@ -0,0 +1,58 @@
+import type { RefObject } from "react";
+import type { InputRenderable } from "../../../ui";
+import { AccountChooserPanel } from "./chooser-panel";
+import { AccountFormPanel } from "./form-panel";
+import { AccountSignedInPanel } from "./signed-in-panel";
+import type { AccountOutcome, AccountSub, AccountSubmitError } from "./model";
+
+export interface AccountStepProps {
+  sub: AccountSub;
+  choiceIdx: number;
+  onChoiceSelect: (index: number) => void;
+  onChoiceActivate: (index: number) => void;
+  email: string;
+  password: string;
+  fieldIdx: number;
+  editing: boolean;
+  inputRef: RefObject<InputRenderable | null>;
+  submitting: boolean;
+  submitError: AccountSubmitError | null;
+  validationError: string | null;
+  outcome: AccountOutcome | null;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  height: number;
+}
+
+export function AccountStep(props: AccountStepProps) {
+  if (props.sub === "signed-in") {
+    return <AccountSignedInPanel outcome={props.outcome} />;
+  }
+
+  if (props.sub === "signup" || props.sub === "login") {
+    return (
+      <AccountFormPanel
+        mode={props.sub}
+        email={props.email}
+        password={props.password}
+        fieldIdx={props.fieldIdx}
+        editing={props.editing}
+        inputRef={props.inputRef}
+        submitting={props.submitting}
+        submitError={props.submitError}
+        validationError={props.validationError}
+        onEmailChange={props.onEmailChange}
+        onPasswordChange={props.onPasswordChange}
+      />
+    );
+  }
+
+  return (
+    <AccountChooserPanel
+      choiceIdx={props.choiceIdx}
+      onChoiceSelect={props.onChoiceSelect}
+      onChoiceActivate={props.onChoiceActivate}
+      height={props.height}
+    />
+  );
+}

package/src/components/onboarding/account-step/model.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import {
+  advanceAccountField,
+  classifyAccountError,
+  deriveUsernameFromEmail,
+  isUsernameConflictError,
+} from "./model";
+
+describe("deriveUsernameFromEmail", () => {
+  test("builds a server-legal username from the email local part", () => {
+    expect(deriveUsernameFromEmail("Vincent.Loewert@gmail.com")).toBe("vincent_loewert");
+    expect(deriveUsernameFromEmail("9lives@example.com")).toBe("u9lives");
+    expect(deriveUsernameFromEmail("a@example.com")).toBe("a00");
+    expect(deriveUsernameFromEmail("--weird--name--@example.com")).toBe("weird_name");
+  });
+
+  test("stays within the 30 character limit, with and without a retry suffix", () => {
+    const long = `${"abcdefghij".repeat(4)}@example.com`;
+    expect(deriveUsernameFromEmail(long)).toHaveLength(30);
+
+    const retried = deriveUsernameFromEmail(long, 1);
+    expect(retried.length).toBeLessThanOrEqual(30);
+    expect(retried).not.toBe(deriveUsernameFromEmail(long));
+  });
+});
+
+describe("isUsernameConflictError", () => {
+  test("only matches username collisions, so a duplicate email never re-posts a sign-up", () => {
+    expect(isUsernameConflictError(new Error("Username is already taken"))).toBe(true);
+    expect(isUsernameConflictError(new Error("User already exists USER_ALREADY_EXISTS"))).toBe(false);
+    expect(isUsernameConflictError(new Error("fetch failed"))).toBe(false);
+  });
+});
+
+describe("classifyAccountError", () => {
+  test("routes a duplicate email to the login form instead of a pointless retry", () => {
+    const result = classifyAccountError(new Error("User already exists USER_ALREADY_EXISTS"), "signup");
+    expect(result.kind).toBe("switch-to-login");
+  });
+
+  test("keeps every other failure retryable and surfaces the server message", () => {
+    expect(classifyAccountError(new Error("fetch failed"), "signup")).toEqual({
+      message: "fetch failed",
+      kind: "retry",
+    });
+    expect(classifyAccountError(new Error("Invalid email or password"), "login").kind).toBe("retry");
+    expect(classifyAccountError({}, "login").message).toBe("Could not sign you in.");
+  });
+});
+
+describe("advanceAccountField", () => {
+  test("blocks the network call until both fields validate", () => {
+    expect(advanceAccountField({ mode: "signup", email: "nope", password: "", fieldIdx: 0 }).action)
+      .toBe("invalid");
+    expect(advanceAccountField({ mode: "signup", email: "a@b.co", password: "", fieldIdx: 0 }))
+      .toEqual({ action: "next-field", fieldIdx: 1 });
+    expect(advanceAccountField({ mode: "signup", email: "a@b.co", password: "short", fieldIdx: 1 }).action)
+      .toBe("invalid");
+    expect(advanceAccountField({ mode: "signup", email: "a@b.co", password: "longenough", fieldIdx: 1 }).action)
+      .toBe("submit");
+  });
+
+  test("does not impose the sign-up length rule on existing passwords", () => {
+    expect(advanceAccountField({ mode: "login", email: "a@b.co", password: "short", fieldIdx: 1 }).action)
+      .toBe("submit");
+  });
+});

package/src/components/onboarding/account-step/model.ts

@@ -0,0 +1,126 @@
+/**
+ * Logic for the onboarding account step, kept out of the React hook so the
+ * transitions that gate a network call (validation, retry classification,
+ * username derivation) can be exercised without rendering the wizard.
+ */
+import { t } from "../../../i18n";
+
+export type AccountSub = "choose" | "signup" | "login" | "signed-in";
+
+export type AccountMode = "signup" | "login";
+
+export type AccountChoiceId = AccountMode | "skip";
+
+/** Order matches the chooser list, so the selected index maps straight onto an id. */
+export const ACCOUNT_CHOICE_IDS: AccountChoiceId[] = ["signup", "login", "skip"];
+
+export interface AccountOutcome {
+  mode: AccountMode;
+  email: string;
+}
+
+export type AccountErrorKind = "retry" | "switch-to-login";
+
+export interface AccountSubmitError {
+  message: string;
+  kind: AccountErrorKind;
+}
+
+/** Server rule; keep in sync with the cloud sign-up endpoint. */
+export const MIN_ACCOUNT_PASSWORD_LENGTH = 8;
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@.]+(\.[^\s@.]+)+$/;
+const USERNAME_MIN_LENGTH = 3;
+const USERNAME_MAX_LENGTH = 30;
+
+export function validateAccountEmail(email: string): string | null {
+  const trimmed = email.trim();
+  if (!trimmed) return t("Enter your email address.");
+  if (!EMAIL_PATTERN.test(trimmed)) return t("That email address doesn't look right.");
+  return null;
+}
+
+export function validateAccountPassword(password: string, mode: AccountMode): string | null {
+  if (!password) return t("Enter your password.");
+  if (mode === "signup" && password.length < MIN_ACCOUNT_PASSWORD_LENGTH) {
+    return t("Use at least 8 characters.");
+  }
+  return null;
+}
+
+/**
+ * Sign-up needs a username the caller never typed. Derive a stable one from the
+ * email local part; `attempt > 0` appends a suffix so a taken username can be
+ * retried without bouncing the user back into the form.
+ */
+export function deriveUsernameFromEmail(email: string, attempt = 0): string {
+  const localPart = email.trim().toLowerCase().split("@")[0] ?? "";
+  let base = localPart.replace(/[^a-z0-9_]+/g, "_").replace(/_{2,}/g, "_").replace(/^_+|_+$/g, "");
+  if (!/^[a-z]/.test(base)) {
+    base = `u${base}`;
+  }
+  const suffix = attempt > 0 ? String(attempt * 1000 + Math.floor(Math.random() * 1000)) : "";
+  base = base.slice(0, USERNAME_MAX_LENGTH - suffix.length);
+  const username = `${base}${suffix}`;
+  return username.length >= USERNAME_MIN_LENGTH
+    ? username
+    : username.padEnd(USERNAME_MIN_LENGTH, "0");
+}
+
+function errorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim()) return error.message.trim();
+  if (typeof error === "string" && error.trim()) return error.trim();
+  return "";
+}
+
+/** A taken username is our own derivation's fault, so it is worth one silent retry. */
+export function isUsernameConflictError(error: unknown): boolean {
+  const message = errorMessage(error);
+  return /username/i.test(message) && /(taken|exists|use|unavailable|duplicate)/i.test(message);
+}
+
+/**
+ * Turns an auth failure into an inline message plus what enter should do next.
+ * A duplicate email is the one case where retrying the same request is useless,
+ * so it routes the user into the login form instead.
+ */
+export function classifyAccountError(error: unknown, mode: AccountMode): AccountSubmitError {
+  const message = errorMessage(error);
+
+  if (mode === "signup" && /already/i.test(message) && /(user|email|account)/i.test(message)) {
+    return { message: t("That email already has an account."), kind: "switch-to-login" };
+  }
+  if (mode === "login" && /(invalid|incorrect|wrong)/i.test(message)) {
+    return { message: t("Email or password is incorrect."), kind: "retry" };
+  }
+
+  return {
+    message: message || (mode === "signup" ? t("Could not create your account.") : t("Could not sign you in.")),
+    kind: "retry",
+  };
+}
+
+export interface AccountFormState {
+  mode: AccountMode;
+  email: string;
+  password: string;
+  fieldIdx: number;
+}
+
+export type AccountFieldAdvance =
+  | { action: "invalid"; message: string }
+  | { action: "next-field"; fieldIdx: number }
+  | { action: "submit" };
+
+/**
+ * Decides what pressing enter inside the form does. Validation runs before the
+ * field advances, so an invalid value can never reach the network call.
+ */
+export function advanceAccountField({ mode, email, password, fieldIdx }: AccountFormState): AccountFieldAdvance {
+  if (fieldIdx <= 0) {
+    const message = validateAccountEmail(email);
+    return message ? { action: "invalid", message } : { action: "next-field", fieldIdx: 1 };
+  }
+  const message = validateAccountPassword(password, mode);
+  return message ? { action: "invalid", message } : { action: "submit" };
+}

package/src/components/onboarding/account-step/signed-in-panel.tsx

@@ -0,0 +1,31 @@
+import { Box, Text, TextAttributes } from "../../../ui";
+import { colors } from "../../../theme/colors";
+import { t, tf } from "../../../i18n";
+import type { AccountOutcome } from "./model";
+
+export function AccountSignedInPanel({ outcome }: { outcome: AccountOutcome | null }) {
+  const email = outcome?.email ?? "";
+
+  return (
+    <Box flexDirection="column" paddingX={2}>
+      <Box height={1}>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{t("Gloom Cloud account")}</Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"✓ "}</Text>
+        <Text fg={colors.text}>
+          {email ? tf("Signed in as {email}", { email }) : t("Signed in to Gloom Cloud")}
+        </Text>
+      </Box>
+      <Box height={1} />
+      <Box height={1}>
+        <Text fg={colors.textDim}>
+          {outcome?.mode === "signup"
+            ? t("We sent a verification link to your inbox.")
+            : t("Portfolios, watchlists and layouts sync to this account.")}
+        </Text>
+      </Box>
+    </Box>
+  );
+}