mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
Maurice
b3113e66b9
The claim screen takes the password (TREK's policy, checked before anything is bought) and sends it with the purchase; the control plane answers with a one-time welcome code, which the app hands to setServer. iOS and Android open the instance's welcome page with it once after the first page, which signs the buyer in. Without the code (a restore, an older control plane) the app opens the instance as before.
1163 lines
42 KiB
TypeScript
1163 lines
42 KiB
TypeScript
import { App } from '@capacitor/app';
|
|
import { Capacitor, CapacitorHttp } from '@capacitor/core';
|
|
import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics';
|
|
import { SplashScreen } from '@capacitor/splash-screen';
|
|
import { StatusBar, Style } from '@capacitor/status-bar';
|
|
import logoUrl from '../public/icons/icon-white.svg';
|
|
import logoBlack from '../public/logo-dark.svg'; // #000 wordmark, for light backgrounds
|
|
import logoWhite from '../public/logo-light.svg'; // #fff wordmark, for dark backgrounds
|
|
import { AUTH_GATE_NAMES, canSignInInApp, type AuthGate } from '../src/native/authGate';
|
|
import { opensSoon, refundedBeforeOpening } from '../src/native/cloudOrders';
|
|
import { fakeIapClient, getIapClient, productIdFor, type Purchase } from '../src/native/iap';
|
|
import {
|
|
AUTH_PROXY_DOCS_URL,
|
|
CLOUD_TERMS_URL,
|
|
CLOUD_URL,
|
|
PRIVACY_URL,
|
|
SERVER_DOCS_URL,
|
|
STORE_TERMS_URL,
|
|
} from '../src/native/links';
|
|
import { probeDemo, probeServer, type ProbeFailure, type ProbeGet } from '../src/native/serverAddress';
|
|
import { passwordProblem } from '../../shared/src/auth/password-policy';
|
|
import { TrekShell } from '../src/native/trekShell';
|
|
import { directionOf, pickLocale, translator } from './i18n';
|
|
import './shell.css';
|
|
|
|
/**
|
|
* The only page the app ships itself. It welcomes someone on first start, asks
|
|
* for the TREK server they open in their browser, offers TREK Cloud to someone
|
|
* without one, and stands in when a remembered server cannot be reached.
|
|
* Everything past it is the UI that server delivers.
|
|
*/
|
|
|
|
const locale = pickLocale(navigator.languages?.length ? navigator.languages : [navigator.language]);
|
|
/** Google Play sells on Android, the App Store everywhere else: the store's own words in the legal texts. */
|
|
const onPlay = Capacitor.getPlatform() === 'android';
|
|
const t = translator(locale);
|
|
document.documentElement.lang = locale;
|
|
document.documentElement.dir = directionOf(locale);
|
|
|
|
const root = document.getElementById('shell')!;
|
|
const PROBE_TIMEOUT_MS = 8000;
|
|
|
|
const iap = getIapClient();
|
|
/**
|
|
* Whether this build can take a payment in-app, asked once at start. Without it
|
|
* the plan picker shows the plans but offers no way to buy: the store rules
|
|
* allow no link or button that sends a buyer to the website instead.
|
|
*/
|
|
const iapReady: Promise<boolean> = iap.isAvailable().catch(() => false);
|
|
|
|
/** The subdomain suffix a cloud instance sits on, from the cloud address: `liketrek.com` → `.liketrek.com`. */
|
|
function cloudSuffix(): string {
|
|
try {
|
|
return `.${new URL(CLOUD_URL).host}`;
|
|
} catch {
|
|
return '.liketrek.com';
|
|
}
|
|
}
|
|
|
|
// Native HTTP rather than fetch: the probe goes to a server of the user's
|
|
// choosing, which has no reason to answer this page's origin with CORS.
|
|
const get: ProbeGet = async (url) => {
|
|
const response = await CapacitorHttp.get({ url, connectTimeout: PROBE_TIMEOUT_MS, readTimeout: PROBE_TIMEOUT_MS });
|
|
return { status: response.status, data: response.data, url: response.url, headers: response.headers };
|
|
};
|
|
|
|
function failureMessage(reason: ProbeFailure): string {
|
|
switch (reason) {
|
|
case 'invalid':
|
|
return t('native.connect.errorInvalid');
|
|
case 'unreachable':
|
|
return t('native.connect.errorUnreachable');
|
|
case 'notTrek':
|
|
return t('native.connect.errorNotTrek');
|
|
case 'authGate':
|
|
return t('native.gate.titleUnknown');
|
|
case 'tooOld':
|
|
return t('native.connect.errorTooOld');
|
|
}
|
|
}
|
|
|
|
// ── Tiny DOM + haptics helpers ──────────────────────────────────────────────
|
|
function el<K extends keyof HTMLElementTagNameMap>(
|
|
tag: K,
|
|
props: Partial<HTMLElementTagNameMap[K]> & { dataset?: Record<string, string> } = {},
|
|
...children: (Node | string)[]
|
|
): HTMLElementTagNameMap[K] {
|
|
const { dataset, ...rest } = props;
|
|
const node = document.createElement(tag);
|
|
Object.assign(node, rest);
|
|
if (dataset) for (const [k, v] of Object.entries(dataset)) node.dataset[k] = v;
|
|
node.append(...children.filter((c) => c !== null && c !== undefined));
|
|
return node;
|
|
}
|
|
|
|
function icon(path: string, size = 22, className?: string): SVGSVGElement {
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.setAttribute('viewBox', '0 0 24 24');
|
|
svg.setAttribute('width', String(size));
|
|
svg.setAttribute('height', String(size));
|
|
svg.setAttribute('fill', 'none');
|
|
svg.setAttribute('stroke', 'currentColor');
|
|
svg.setAttribute('stroke-width', '2');
|
|
svg.setAttribute('stroke-linecap', 'round');
|
|
svg.setAttribute('stroke-linejoin', 'round');
|
|
if (className) svg.setAttribute('class', className);
|
|
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
p.setAttribute('d', path);
|
|
svg.appendChild(p);
|
|
return svg;
|
|
}
|
|
const I = {
|
|
chevron: 'M9 18l6-6-6-6',
|
|
cloud: 'M17.5 19a4.5 4.5 0 0 0 .5-9 6 6 0 0 0-11.6-1.6A4 4 0 0 0 6 19z',
|
|
globe: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20',
|
|
bolt: 'M13 2 4 14h7l-1 8 9-12h-7z',
|
|
shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10',
|
|
check: 'M20 6 9 17l-5-5',
|
|
};
|
|
|
|
async function tap(style: ImpactStyle = ImpactStyle.Light): Promise<void> {
|
|
try {
|
|
await Haptics.impact({ style });
|
|
} catch {
|
|
/* web / unavailable */
|
|
}
|
|
}
|
|
async function notify(type: NotificationType): Promise<void> {
|
|
try {
|
|
await Haptics.notification({ type });
|
|
} catch {
|
|
/* web / unavailable */
|
|
}
|
|
}
|
|
|
|
// ── Screen transitions ──────────────────────────────────────────────────────
|
|
let current: HTMLElement | null = null;
|
|
|
|
function show(screen: HTMLElement, opts: { back?: boolean } = {}): void {
|
|
screen.classList.add('screen', 'screen-enter');
|
|
if (opts.back) screen.classList.add('screen-back');
|
|
const previous = current;
|
|
if (previous) {
|
|
// The leaving screen is lifted out of the flow where it stands, so it fades
|
|
// from its own place rather than jumping to the top of a centred layout.
|
|
previous.style.top = `${previous.offsetTop}px`;
|
|
previous.style.left = `${previous.offsetLeft}px`;
|
|
previous.style.width = `${previous.offsetWidth}px`;
|
|
previous.classList.remove('screen-enter');
|
|
previous.classList.add('screen-leave');
|
|
if (opts.back) previous.classList.add('screen-back');
|
|
previous.addEventListener('animationend', () => previous.remove(), { once: true });
|
|
setTimeout(() => previous.remove(), 400);
|
|
}
|
|
root.append(screen);
|
|
current = screen;
|
|
}
|
|
|
|
function externalLink(text: string, href: string): HTMLAnchorElement {
|
|
return el('a', { href, target: '_blank', rel: 'noopener noreferrer' }, text);
|
|
}
|
|
function footLinks(...extra: Node[]): HTMLElement {
|
|
return el('div', { className: 'foot-links' }, ...extra, externalLink(t('native.privacy'), PRIVACY_URL));
|
|
}
|
|
/**
|
|
* A screen's two halves: what it is (brand, title, explanation) and what to do
|
|
* on it (the choices, the form). Stacked in one column they read as before; on
|
|
* a phone or a foldable on its side the screen is too short for one column, so
|
|
* the halves stand side by side there (shell.css, `.col`).
|
|
*/
|
|
function columns(about: Node[], act: Node[]): HTMLElement[] {
|
|
return [el('div', { className: 'col col-about' }, ...about), el('div', { className: 'col col-act' }, ...act)];
|
|
}
|
|
function topbar(onBack: () => void): HTMLElement {
|
|
const back = el('button', { type: 'button', className: 'back' }, icon('M15 18l-6-6 6-6', 18), t('native.back'));
|
|
back.addEventListener('click', () => {
|
|
void tap();
|
|
onBack();
|
|
});
|
|
return el('div', { className: 'topbar' }, back);
|
|
}
|
|
|
|
// ── Welcome ─────────────────────────────────────────────────────────────────
|
|
function showWelcome(opts: { back?: boolean } = {}): void {
|
|
// The full TREK wordmark, in the variant that reads on the current scheme.
|
|
const hero = el(
|
|
'span',
|
|
{ className: 'hero-logo' },
|
|
el('img', { src: logoWhite, alt: 'TREK', className: 'on-dark' }),
|
|
el('img', { src: logoBlack, alt: '', className: 'on-light' })
|
|
);
|
|
|
|
const connect = el(
|
|
'button',
|
|
{ type: 'button', className: 'btn btn-ghost' },
|
|
el(
|
|
'span',
|
|
{ className: 'btn-row' },
|
|
el('b', {}, t('native.welcome.connect')),
|
|
el('small', {}, t('native.welcome.connectSub'))
|
|
),
|
|
icon(I.chevron, 20, 'chev')
|
|
);
|
|
connect.addEventListener('click', () => {
|
|
void tap();
|
|
showConnect();
|
|
});
|
|
|
|
const cloud = el(
|
|
'button',
|
|
{ type: 'button', className: 'btn' },
|
|
el(
|
|
'span',
|
|
{ className: 'btn-row' },
|
|
el('b', {}, t('native.welcome.getCloud')),
|
|
el('small', {}, t('native.welcome.getCloudSub'))
|
|
),
|
|
icon(I.chevron, 20, 'chev')
|
|
);
|
|
cloud.addEventListener('click', () => {
|
|
void tap();
|
|
showCloud();
|
|
});
|
|
|
|
const demo = el('button', { type: 'button', className: 'demo-link' }, t('native.connect.tryDemo'));
|
|
demo.addEventListener('click', () => runDemo(demo));
|
|
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
hero,
|
|
el('h1', { className: 'title brand-title' }, t('native.welcome.headline')),
|
|
el('p', { className: 'sub' }, t('native.welcome.sub')),
|
|
],
|
|
[cloud, connect, demo, footLinks(externalLink(t('native.connect.whatIsServer'), SERVER_DOCS_URL))]
|
|
)
|
|
),
|
|
opts
|
|
);
|
|
}
|
|
|
|
// ── Connect (address) ───────────────────────────────────────────────────────
|
|
function showConnect(prefill = '', opts: { back?: boolean } = {}): void {
|
|
const input = el('input', {
|
|
type: 'url',
|
|
placeholder: t('native.connect.placeholder'),
|
|
value: prefill,
|
|
autocapitalize: 'off',
|
|
spellcheck: false,
|
|
});
|
|
input.setAttribute('inputmode', 'url');
|
|
input.setAttribute('autocomplete', 'url');
|
|
// An address reads left to right in every language, Arabic too.
|
|
input.dir = 'ltr';
|
|
// The on-screen keyboard's return key submits the address; it reads "Go", not a newline.
|
|
input.setAttribute('enterkeyhint', 'go');
|
|
input.setAttribute('aria-label', t('native.connect.title'));
|
|
const field = el('div', { className: 'field' }, input);
|
|
|
|
const label = el('span', {}, t('native.connect.submit'));
|
|
const submit = el('button', { type: 'submit', className: 'btn' }, label);
|
|
const error = el('p', { className: 'error', role: 'alert' });
|
|
const gatePanel = el('div', { className: 'gate', role: 'alert', hidden: true });
|
|
const form = el('form', { className: 'form', noValidate: true }, field, submit, error, gatePanel);
|
|
|
|
const fail = (reason: ProbeFailure, gate?: AuthGate, server?: string): void => {
|
|
void notify(NotificationType.Error);
|
|
field.classList.add('bad');
|
|
setTimeout(() => field.classList.remove('bad'), 350);
|
|
if (reason === 'authGate' && gate && server) {
|
|
error.textContent = '';
|
|
fillGatePanel(gatePanel, gate, server);
|
|
} else {
|
|
error.textContent = failureMessage(reason);
|
|
}
|
|
input.disabled = false;
|
|
submit.disabled = false;
|
|
label.textContent = t('native.connect.submit');
|
|
submit.replaceChildren(label);
|
|
input.focus();
|
|
};
|
|
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
void tap(ImpactStyle.Medium);
|
|
error.textContent = '';
|
|
gatePanel.hidden = true;
|
|
gatePanel.replaceChildren();
|
|
input.disabled = true;
|
|
submit.disabled = true;
|
|
submit.replaceChildren(el('span', { className: 'spinner' }), t('native.connect.checking'));
|
|
const result = await probeServer(input.value, get);
|
|
if (result.ok) {
|
|
await connected(result.url);
|
|
return;
|
|
}
|
|
fail(result.reason, result.gate, result.url);
|
|
});
|
|
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
topbar(() => showWelcome({ back: true })),
|
|
el('h1', { className: 'title-sm' }, t('native.connect.title')),
|
|
el('p', { className: 'sub' }, t('native.connect.hint')),
|
|
],
|
|
[form, footLinks(externalLink(t('native.connect.whatIsServer'), SERVER_DOCS_URL))]
|
|
)
|
|
),
|
|
opts
|
|
);
|
|
requestAnimationFrame(() => input.focus());
|
|
}
|
|
|
|
/**
|
|
* A sign-in page of the user's own stands in front of the server (authGate.ts):
|
|
* say which one, offer to sign in to it inside the app, which keeps its session
|
|
* as a browser would, and how to let the app through instead.
|
|
*/
|
|
function fillGatePanel(panel: HTMLElement, gate: AuthGate, server: string): void {
|
|
const name = gate.kind === 'unknown' || gate.kind === 'basic' ? null : AUTH_GATE_NAMES[gate.kind];
|
|
const title =
|
|
gate.kind === 'basic'
|
|
? t('native.gate.titleBasic')
|
|
: name
|
|
? t('native.gate.title', { name })
|
|
: t('native.gate.titleUnknown');
|
|
const children: Node[] = [el('p', { className: 'gate-title' }, title)];
|
|
if (canSignInInApp(gate)) {
|
|
const signIn = el(
|
|
'button',
|
|
{ type: 'button', className: 'btn' },
|
|
name ? t('native.gate.signIn', { name }) : t('native.gate.signInGeneric')
|
|
);
|
|
signIn.addEventListener('click', () => {
|
|
void tap(ImpactStyle.Medium);
|
|
void connected(server, gate.loginHost ? [gate.loginHost] : []);
|
|
});
|
|
children.push(
|
|
el('p', { className: 'gate-text' }, t('native.gate.hint')),
|
|
signIn,
|
|
el('p', { className: 'gate-note' }, t('native.gate.googleNote'))
|
|
);
|
|
} else {
|
|
children.push(el('p', { className: 'gate-text' }, t('native.gate.basicHint')));
|
|
}
|
|
children.push(externalLink(t('native.gate.help'), AUTH_PROXY_DOCS_URL));
|
|
panel.replaceChildren(...children);
|
|
panel.hidden = false;
|
|
}
|
|
|
|
// ── Get TREK Cloud ──────────────────────────────────────────────────────────
|
|
function feature(path: string, text: string): HTMLElement {
|
|
return el(
|
|
'div',
|
|
{ className: 'feature' },
|
|
el('span', { className: 'ic' }, icon(path, 18)),
|
|
el('span', { className: 'tx' }, text)
|
|
);
|
|
}
|
|
|
|
function showCloud(opts: { back?: boolean } = {}): void {
|
|
// The label centred, the chevron at the far edge: it points on, not at the word.
|
|
const cta = el(
|
|
'button',
|
|
{ type: 'button', className: 'btn btn-go' },
|
|
el('span', { className: 'btn-label' }, t('native.cloud.cta')),
|
|
icon(I.chevron, 20, 'chev')
|
|
);
|
|
cta.addEventListener('click', () => {
|
|
void tap();
|
|
showPlans();
|
|
});
|
|
|
|
const have = el('button', { type: 'button', className: 'linkbtn' }, t('native.cloud.haveServer'));
|
|
have.addEventListener('click', () => {
|
|
void tap();
|
|
showConnect();
|
|
});
|
|
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
topbar(() => showWelcome({ back: true })),
|
|
// The lockup is a logo: "trek" then "cloud" in every language, never mirrored.
|
|
el(
|
|
'div',
|
|
{ className: 'cloud-wordmark', role: 'img', ariaLabel: t('native.cloud.title'), dir: 'ltr' },
|
|
el('img', { src: logoWhite, alt: '', className: 'on-dark' }),
|
|
el('img', { src: logoBlack, alt: '', className: 'on-light' }),
|
|
el('span', { className: 'cloud-tag' }, 'cloud')
|
|
),
|
|
el('p', { className: 'sub' }, t('native.cloud.sub')),
|
|
],
|
|
[
|
|
el(
|
|
'div',
|
|
{ className: 'features' },
|
|
feature(I.globe, t('native.cloud.f1')),
|
|
feature(I.bolt, t('native.cloud.f2')),
|
|
feature(I.shield, t('native.cloud.f3'))
|
|
),
|
|
cta,
|
|
have,
|
|
footLinks(),
|
|
]
|
|
)
|
|
),
|
|
opts
|
|
);
|
|
}
|
|
|
|
// ── Choose a plan (TREK Cloud) ──────────────────────────────────────────────
|
|
interface CloudPlan {
|
|
id: string;
|
|
name: string;
|
|
/** Absent while orders are closed: the cloud names its plans but no price leaves it then. */
|
|
monthlyCents?: number;
|
|
yearlyCents?: number;
|
|
aiDocuments: number;
|
|
storageGb: number;
|
|
}
|
|
|
|
function money(cents: number): string {
|
|
return new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' }).format(cents / 100);
|
|
}
|
|
|
|
// A sample catalogue for the dev preview only: the cloud site is behind a gate
|
|
// during development, so its /api/plans is unreachable from a local build. Never
|
|
// used in a real build (see the import.meta.env.DEV guard below).
|
|
const SAMPLE_PLANS: CloudPlan[] = [
|
|
{ id: 'start', name: 'Start', monthlyCents: 599, yearlyCents: 5990, aiDocuments: 0, storageGb: 10 },
|
|
{ id: 'plus', name: 'Plus', monthlyCents: 999, yearlyCents: 9990, aiDocuments: 100, storageGb: 50 },
|
|
{ id: 'pro', name: 'Pro', monthlyCents: 1599, yearlyCents: 15990, aiDocuments: 500, storageGb: 200 },
|
|
{ id: 'studio', name: 'Studio', monthlyCents: 2399, yearlyCents: 23990, aiDocuments: 2000, storageGb: 1000 },
|
|
];
|
|
|
|
interface CloudPlans {
|
|
plans: CloudPlan[];
|
|
/** Orders are closed: only a test build may buy, and the store charges it nothing. */
|
|
closed: boolean;
|
|
}
|
|
|
|
async function fetchPlans(): Promise<CloudPlans | null> {
|
|
try {
|
|
const res = await get(`${CLOUD_URL}/api/plans`);
|
|
const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
const body = (data ?? {}) as { plans?: CloudPlan[]; ordering?: string };
|
|
if (Array.isArray(body.plans) && body.plans.length)
|
|
return { plans: body.plans, closed: body.ordering === 'closed' };
|
|
} catch {
|
|
// Fall through to the preview fallback.
|
|
}
|
|
if (import.meta.env?.DEV) return { plans: SAMPLE_PLANS, closed: false };
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* What the plan picker can sell. With the store, a plan is offered at the price
|
|
* string the App Store gives for its product, in the buyer's currency, and only
|
|
* when the store knows that product. The fake (development, preview) sells
|
|
* every plan at the plan list's price. Without either, nothing is for sale.
|
|
*/
|
|
interface Offer {
|
|
canBuy: boolean;
|
|
storePrices: Map<string, string> | null;
|
|
/** Orders are closed and this is no test build: the plans show, nothing is for sale yet. */
|
|
opensSoon: boolean;
|
|
}
|
|
|
|
function offerFor(offer: Offer, plan: CloudPlan, interval: 'month' | 'year'): { label: string; buyable: boolean } {
|
|
const cents = interval === 'year' ? plan.yearlyCents : plan.monthlyCents;
|
|
const ours = typeof cents === 'number' ? money(cents) : '';
|
|
const storePrice = offer.storePrices?.get(productIdFor(plan.id, interval));
|
|
if (offer.storePrices) return { label: storePrice ?? ours, buyable: offer.canBuy && !!storePrice };
|
|
return { label: ours, buyable: offer.canBuy && ours !== '' };
|
|
}
|
|
|
|
async function loadOffer(list: CloudPlans): Promise<Offer> {
|
|
const available = await iapReady;
|
|
// Closed: a real purchase is refused at the cloud, so only a test build may buy on iOS;
|
|
// Android keeps the button for the licence testers (see cloudOrders.ts).
|
|
const sandbox = list.closed && !onPlay ? await iap.isSandbox().catch(() => false) : false;
|
|
const soon = opensSoon({ available, closed: list.closed, sandbox, onPlay });
|
|
const canBuy = available && !soon;
|
|
if (!canBuy || iap === fakeIapClient) return { canBuy, storePrices: null, opensSoon: soon };
|
|
const ids = list.plans.flatMap((p) => [productIdFor(p.id, 'month'), productIdFor(p.id, 'year')]);
|
|
return { canBuy, storePrices: await iap.prices(ids), opensSoon: soon };
|
|
}
|
|
|
|
function planCard(plan: CloudPlan, interval: 'month' | 'year', offer: Offer): HTMLElement {
|
|
const { label, buyable } = offerFor(offer, plan, interval);
|
|
const per = interval === 'year' ? t('native.plans.perYear') : t('native.plans.perMonth');
|
|
const feat = (text: string) => el('span', {}, icon(I.check, 16), text);
|
|
// An absent feature (e.g. a plan with no AI documents): a muted dash, not a
|
|
// green tick, so "none" never reads as a perk.
|
|
const featOff = (text: string) => el('span', { className: 'off' }, icon('M5 12h14', 16), text);
|
|
let sub: HTMLElement | null = null;
|
|
if (buyable) {
|
|
sub = el('button', { type: 'button', className: 'btn' }, t('native.plans.subscribe'));
|
|
sub.addEventListener('click', () => {
|
|
void tap(ImpactStyle.Medium);
|
|
showClaim(plan, interval, `${label} ${per}`);
|
|
});
|
|
}
|
|
return el(
|
|
'div',
|
|
{ className: 'plan' },
|
|
el(
|
|
'div',
|
|
{ className: 'plan-top' },
|
|
el('span', { className: 'plan-name' }, plan.name),
|
|
// No price yet (orders not open): the plan shows without one rather than with an empty one.
|
|
// The price is figures and a currency sign: one left-to-right run, so Arabic
|
|
// keeps "5,99 €" whole, with the period standing apart beside it.
|
|
...(label ? [el('span', { className: 'plan-price' }, el('bdi', { dir: 'ltr' }, label), el('small', {}, per))] : [])
|
|
),
|
|
el(
|
|
'div',
|
|
{ className: 'plan-feats' },
|
|
feat(t('native.plans.unlimited')),
|
|
feat(t('native.plans.storage', { n: String(plan.storageGb) })),
|
|
plan.aiDocuments > 0
|
|
? feat(t('native.plans.aiDocs', { n: String(plan.aiDocuments) }))
|
|
: featOff(t('native.plans.noAi'))
|
|
),
|
|
...(sub ? [sub] : [])
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Below the plans. With a store: how the subscription renews, the terms and the
|
|
* privacy policy, and a way to restore a subscription this Apple ID already
|
|
* holds (a reinstall, a new phone). Without one: only that buying in the app is
|
|
* not available, and no pointer elsewhere.
|
|
*/
|
|
/** The restore button of the plans on screen, which redeems a payment that cleared later. */
|
|
let resumeRestore: (() => void) | null = null;
|
|
let watchingTransactions = false;
|
|
|
|
function planFooter(offer: Offer, plans: CloudPlan[]): Node[] {
|
|
if (offer.opensSoon) return [el('p', { className: 'note' }, t('native.plans.closed'))];
|
|
if (!offer.canBuy) return [el('p', { className: 'note' }, t('native.plans.soon'))];
|
|
|
|
const status = el('p', { className: 'hint', role: 'status' });
|
|
const restore = el('button', { type: 'button', className: 'btn btn-ghost' }, t('native.plans.restore'));
|
|
restore.addEventListener('click', async () => {
|
|
void tap();
|
|
restore.disabled = true;
|
|
status.className = 'hint';
|
|
status.textContent = t('native.plans.restoring');
|
|
const purchase = await iap.restore();
|
|
if (!purchase) {
|
|
restore.disabled = false;
|
|
status.textContent = t(onPlay ? 'native.plans.restoreNoneAndroid' : 'native.plans.restoreNone');
|
|
return;
|
|
}
|
|
// A restore finds the instance the purchase was first redeemed for; address and email are not asked again.
|
|
const redeemed = await redeemPurchase('', '', purchase);
|
|
if (redeemed.ok && redeemed.instanceUrl) {
|
|
await iap.finish(purchase);
|
|
showProvisioning(redeemed.instanceUrl);
|
|
return;
|
|
}
|
|
// Paid but never set up (Ask to Buy approved later, the app closed mid-purchase):
|
|
// the claim screen takes the purchase as it is, so nothing is bought twice.
|
|
const unclaimed = redeemed.code === 'email-invalid' || (redeemed.code ?? '').startsWith('slug-');
|
|
const match = /^cloud\.([a-z0-9-]+)\.(monthly|yearly)$/.exec(purchase.productId);
|
|
const plan = match ? plans.find((p) => p.id === match[1]) : undefined;
|
|
if (unclaimed && match && plan) {
|
|
const interval = match[2] === 'yearly' ? 'year' : 'month';
|
|
const { label } = offerFor(offer, plan, interval);
|
|
const per = interval === 'year' ? t('native.plans.perYear') : t('native.plans.perMonth');
|
|
showClaim(plan, interval, `${label} ${per}`, { bought: purchase });
|
|
return;
|
|
}
|
|
void notify(NotificationType.Error);
|
|
restore.disabled = false;
|
|
status.className = 'hint bad';
|
|
// Bought before the opening: refused, unacknowledged, and refunded by Google Play.
|
|
status.textContent = refundedBeforeOpening(redeemed.code, onPlay)
|
|
? t('native.claim.closedRefund')
|
|
: t('native.plans.restoreFailed');
|
|
});
|
|
|
|
// A payment that was pending (cash, some carrier billing) and has cleared since:
|
|
// redeemed right away, as the restore would, before Google Play refunds it.
|
|
resumeRestore = () => {
|
|
if (!restore.disabled && restore.isConnected) restore.click();
|
|
};
|
|
if (!watchingTransactions) {
|
|
watchingTransactions = true;
|
|
iap.onTransaction(() => resumeRestore?.());
|
|
}
|
|
void iap.unfinished().then((purchase) => {
|
|
if (purchase) resumeRestore?.();
|
|
});
|
|
|
|
return [
|
|
restore,
|
|
status,
|
|
el('p', { className: 'note' }, t(onPlay ? 'native.plans.legalAndroid' : 'native.plans.legal')),
|
|
el(
|
|
'div',
|
|
{ className: 'foot-links' },
|
|
externalLink(t('native.plans.ourTerms'), CLOUD_TERMS_URL),
|
|
...(onPlay ? [] : [externalLink(t('native.plans.terms'), STORE_TERMS_URL)]),
|
|
externalLink(t('native.privacy'), PRIVACY_URL)
|
|
),
|
|
];
|
|
}
|
|
|
|
function showPlans(opts: { back?: boolean } = {}): void {
|
|
let interval: 'month' | 'year' = 'month';
|
|
let plans: CloudPlan[] | null = null;
|
|
let offer: Offer = { canBuy: false, storePrices: null, opensSoon: false };
|
|
|
|
const content = el('div', { className: 'loading' }, el('span', { className: 'spinner' }));
|
|
const footer = el('div', { className: 'plans-foot' });
|
|
|
|
const monthBtn = el('button', { type: 'button' }, t('native.plans.monthly'));
|
|
const yearBtn = el('button', { type: 'button' }, t('native.plans.yearly'));
|
|
const seg = el('div', { className: 'segmented' }, monthBtn, yearBtn);
|
|
|
|
const paintSeg = () => {
|
|
monthBtn.setAttribute('aria-pressed', String(interval === 'month'));
|
|
yearBtn.setAttribute('aria-pressed', String(interval === 'year'));
|
|
};
|
|
const renderList = () => {
|
|
const list = plans;
|
|
if (!list) return;
|
|
content.className = 'plans';
|
|
content.replaceChildren(...list.map((p) => planCard(p, interval, offer)));
|
|
};
|
|
const choose = (next: 'month' | 'year') => {
|
|
if (interval === next) return;
|
|
void tap();
|
|
interval = next;
|
|
paintSeg();
|
|
renderList();
|
|
};
|
|
monthBtn.addEventListener('click', () => choose('month'));
|
|
yearBtn.addEventListener('click', () => choose('year'));
|
|
paintSeg();
|
|
|
|
const load = async () => {
|
|
const list = await fetchPlans();
|
|
if (list) {
|
|
offer = await loadOffer(list);
|
|
plans = list.plans;
|
|
renderList();
|
|
footer.replaceChildren(...planFooter(offer, list.plans));
|
|
return;
|
|
}
|
|
content.className = '';
|
|
const retry = el('button', { type: 'button', className: 'btn btn-ghost' }, t('native.plans.retry'));
|
|
retry.addEventListener('click', () => {
|
|
void tap();
|
|
content.className = 'loading';
|
|
content.replaceChildren(el('span', { className: 'spinner' }));
|
|
void load();
|
|
});
|
|
content.replaceChildren(el('p', { className: 'error' }, t('native.plans.loadError')), retry);
|
|
};
|
|
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
topbar(() => showCloud({ back: true })),
|
|
el('h1', { className: 'title-sm' }, t('native.plans.title')),
|
|
el('p', { className: 'sub' }, t('native.plans.sub')),
|
|
seg,
|
|
],
|
|
[content, footer]
|
|
)
|
|
),
|
|
opts
|
|
);
|
|
void load();
|
|
}
|
|
|
|
// ── Claim a TREK Cloud instance (choose address, buy, provision) ────────────
|
|
type SlugStatus = 'available' | 'taken' | 'invalid' | 'reserved' | 'error';
|
|
|
|
async function slugStatus(slug: string): Promise<SlugStatus> {
|
|
try {
|
|
const res = await get(`${CLOUD_URL}/api/slug/check?slug=${encodeURIComponent(slug)}`);
|
|
const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
const status = (data as { status?: string })?.status;
|
|
if (status === 'available' || status === 'taken' || status === 'invalid' || status === 'reserved') return status;
|
|
return 'error';
|
|
} catch {
|
|
return 'error';
|
|
}
|
|
}
|
|
|
|
interface RedeemResult {
|
|
ok: boolean;
|
|
/** Set when ok: the address the app loads. */
|
|
instanceUrl?: string;
|
|
/** Set when ok and a password was chosen: the one-time code that signs the buyer in once the instance answers. */
|
|
welcome?: string;
|
|
/** Set when not ok: a stable refusal code. */
|
|
code?: string;
|
|
}
|
|
async function redeemPurchase(slug: string, email: string, purchase: Purchase, password = ''): Promise<RedeemResult> {
|
|
try {
|
|
const res = await CapacitorHttp.post({
|
|
url: `${CLOUD_URL}/api/iap/redeem`,
|
|
headers: { 'content-type': 'application/json' },
|
|
connectTimeout: PROBE_TIMEOUT_MS,
|
|
readTimeout: PROBE_TIMEOUT_MS,
|
|
// The language of the contract confirmation mail.
|
|
data: {
|
|
platform: purchase.platform,
|
|
productId: purchase.productId,
|
|
receipt: purchase.receipt,
|
|
slug,
|
|
email,
|
|
// Hashed by the control plane on arrival and set on the new instance; empty for a restore.
|
|
...(password ? { password } : {}),
|
|
locale,
|
|
},
|
|
});
|
|
const data = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|
const body = (data ?? {}) as { instanceUrl?: string; code?: string; welcome?: string };
|
|
if ((res.status === 200 || res.status === 201) && typeof body.instanceUrl === 'string') {
|
|
const welcome = typeof body.welcome === 'string' && /^[A-Za-z0-9_-]{43}$/.test(body.welcome) ? body.welcome : undefined;
|
|
return { ok: true, instanceUrl: body.instanceUrl, ...(welcome ? { welcome } : {}) };
|
|
}
|
|
return { ok: false, code: body.code ?? 'redeem-failed' };
|
|
} catch {
|
|
return { ok: false, code: 'redeem-failed' };
|
|
}
|
|
}
|
|
|
|
function showClaim(
|
|
plan: CloudPlan,
|
|
interval: 'month' | 'year',
|
|
price: string,
|
|
opts: { back?: boolean; bought?: Purchase } = {}
|
|
): void {
|
|
/** A purchase that went through but whose redeem did not: a retry redeems it again instead of buying twice. */
|
|
let bought: Purchase | null = opts.bought ?? null;
|
|
|
|
const slugInput = el('input', {
|
|
type: 'text',
|
|
className: 'slug-input',
|
|
autocapitalize: 'off',
|
|
spellcheck: false,
|
|
value: '',
|
|
placeholder: t('native.claim.addressLabel'),
|
|
});
|
|
slugInput.setAttribute('inputmode', 'url');
|
|
slugInput.setAttribute('autocomplete', 'off');
|
|
slugInput.setAttribute('maxlength', '40');
|
|
slugInput.setAttribute('aria-label', t('native.claim.addressLabel'));
|
|
// "name.liketrek.com" is one address, left to right in every language.
|
|
const slugField = el(
|
|
'div',
|
|
{ className: 'field slug-field', dir: 'ltr' },
|
|
slugInput,
|
|
el('span', { className: 'slug-suffix' }, cloudSuffix())
|
|
);
|
|
const slugNote = el('p', { className: 'hint' });
|
|
|
|
const emailInput = el('input', {
|
|
type: 'email',
|
|
value: '',
|
|
autocapitalize: 'off',
|
|
spellcheck: false,
|
|
placeholder: t('native.claim.emailLabel'),
|
|
});
|
|
emailInput.setAttribute('inputmode', 'email');
|
|
emailInput.setAttribute('autocomplete', 'email');
|
|
emailInput.setAttribute('enterkeyhint', 'next');
|
|
emailInput.setAttribute('aria-label', t('native.claim.emailLabel'));
|
|
emailInput.dir = 'ltr';
|
|
emailInput.classList.add('ltr-value');
|
|
const emailField = el('div', { className: 'field' }, emailInput);
|
|
|
|
// The password for the new TREK, chosen here so the buyer lands signed in (no password by mail).
|
|
const passwordInput = el('input', {
|
|
type: 'password',
|
|
value: '',
|
|
autocapitalize: 'off',
|
|
spellcheck: false,
|
|
placeholder: t('native.claim.passwordLabel'),
|
|
});
|
|
passwordInput.setAttribute('autocomplete', 'new-password');
|
|
passwordInput.setAttribute('enterkeyhint', 'go');
|
|
passwordInput.setAttribute('maxlength', '128');
|
|
passwordInput.setAttribute('aria-label', t('native.claim.passwordLabel'));
|
|
passwordInput.dir = 'ltr';
|
|
passwordInput.classList.add('ltr-value');
|
|
const passwordField = el('div', { className: 'field' }, passwordInput);
|
|
const passwordHint = el('p', { className: 'hint' }, t('native.claim.passwordHint'));
|
|
|
|
const submit = el('button', { type: 'submit', className: 'btn' }, t('native.claim.subscribe', { price }));
|
|
const error = el('p', { className: 'error', role: 'alert' });
|
|
const form = el(
|
|
'form',
|
|
{ className: 'form', noValidate: true },
|
|
slugField,
|
|
slugNote,
|
|
emailField,
|
|
el('p', { className: 'hint' }, t('native.claim.emailHint')),
|
|
passwordField,
|
|
passwordHint,
|
|
// Our terms govern the instance (terms § 5a): named before the purchase, not only in the confirmation mail.
|
|
el(
|
|
'p',
|
|
{ className: 'note' },
|
|
t('native.claim.agree'),
|
|
' ',
|
|
externalLink(t('native.plans.ourTerms'), CLOUD_TERMS_URL)
|
|
),
|
|
submit,
|
|
error
|
|
);
|
|
|
|
let status: SlugStatus | null = null;
|
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
const noteFor: Partial<Record<SlugStatus, string>> = {
|
|
available: t('native.claim.free'),
|
|
taken: t('native.claim.taken'),
|
|
invalid: t('native.claim.invalid'),
|
|
reserved: t('native.claim.reserved'),
|
|
};
|
|
slugInput.addEventListener('input', () => {
|
|
clearTimeout(timer);
|
|
status = null;
|
|
slugNote.textContent = '';
|
|
slugNote.className = 'hint';
|
|
slugField.classList.remove('bad');
|
|
const value = slugInput.value.trim().toLowerCase();
|
|
if (value.length < 3) return;
|
|
timer = setTimeout(async () => {
|
|
const result = await slugStatus(value);
|
|
if (slugInput.value.trim().toLowerCase() !== value) return;
|
|
status = result;
|
|
slugNote.textContent = noteFor[result] ?? '';
|
|
slugNote.className = `hint ${result === 'available' ? 'ok' : result === 'error' ? '' : 'bad'}`;
|
|
}, 350);
|
|
});
|
|
|
|
const shake = (field: HTMLElement): void => {
|
|
void notify(NotificationType.Error);
|
|
field.classList.add('bad');
|
|
setTimeout(() => field.classList.remove('bad'), 350);
|
|
};
|
|
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
error.textContent = '';
|
|
const slug = slugInput.value.trim().toLowerCase();
|
|
const email = emailInput.value.trim();
|
|
if (slug.length < 3 || status === 'taken' || status === 'invalid' || status === 'reserved') {
|
|
shake(slugField);
|
|
slugInput.focus();
|
|
return;
|
|
}
|
|
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
shake(emailField);
|
|
emailInput.focus();
|
|
return;
|
|
}
|
|
// Before anything is bought: a password TREK would refuse must not cost a purchase first.
|
|
const password = passwordInput.value;
|
|
if (passwordProblem(password) || password.length > 128) {
|
|
shake(passwordField);
|
|
passwordHint.className = 'hint bad';
|
|
passwordInput.focus();
|
|
return;
|
|
}
|
|
passwordHint.className = 'hint';
|
|
|
|
void tap(ImpactStyle.Medium);
|
|
const lock = (on: boolean) => {
|
|
slugInput.disabled = on;
|
|
emailInput.disabled = on;
|
|
passwordInput.disabled = on;
|
|
submit.disabled = on;
|
|
};
|
|
lock(true);
|
|
submit.replaceChildren(el('span', { className: 'spinner' }), t('native.connect.checking'));
|
|
const restore = () => {
|
|
lock(false);
|
|
submit.replaceChildren(t('native.claim.subscribe', { price }));
|
|
};
|
|
|
|
if (!bought) {
|
|
const outcome = await iap.purchase(productIdFor(plan.id, interval));
|
|
if (outcome.kind === 'cancelled') {
|
|
restore();
|
|
error.textContent = t('native.claim.cancelled');
|
|
return;
|
|
}
|
|
if (outcome.kind === 'pending') {
|
|
restore();
|
|
error.textContent = t('native.claim.pending');
|
|
return;
|
|
}
|
|
if (outcome.kind === 'failed') {
|
|
void notify(NotificationType.Error);
|
|
restore();
|
|
error.textContent = t('native.claim.failed');
|
|
return;
|
|
}
|
|
bought = outcome.purchase;
|
|
}
|
|
|
|
const redeemed = await redeemPurchase(slug, email, bought, password);
|
|
if (redeemed.ok && redeemed.instanceUrl) {
|
|
await iap.finish(bought);
|
|
showProvisioning(redeemed.instanceUrl, redeemed.welcome);
|
|
return;
|
|
}
|
|
void notify(NotificationType.Error);
|
|
restore();
|
|
if (redeemed.code === 'slug-taken') {
|
|
shake(slugField);
|
|
slugNote.textContent = t('native.claim.taken');
|
|
slugNote.className = 'hint bad';
|
|
} else if (redeemed.code === 'password-weak') {
|
|
// A common password the list on the server knows: the purchase waits, unredeemed, for a better one.
|
|
shake(passwordField);
|
|
passwordHint.className = 'hint bad';
|
|
} else {
|
|
error.textContent = refundedBeforeOpening(redeemed.code, onPlay)
|
|
? t('native.claim.closedRefund')
|
|
: t('native.claim.redeemFailed');
|
|
}
|
|
});
|
|
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
topbar(() => showPlans({ back: true })),
|
|
el('h1', { className: 'title-sm' }, t('native.claim.title')),
|
|
el('p', { className: 'sub' }, t('native.claim.sub')),
|
|
],
|
|
[form]
|
|
)
|
|
),
|
|
opts
|
|
);
|
|
requestAnimationFrame(() => slugInput.focus());
|
|
}
|
|
|
|
/** The build runs on the server; the app waits on the new address and loads it the moment it answers. */
|
|
function showProvisioning(instanceUrl: string, welcome?: string): void {
|
|
const host = (() => {
|
|
try {
|
|
return new URL(instanceUrl).host;
|
|
} catch {
|
|
return instanceUrl;
|
|
}
|
|
})();
|
|
|
|
const spinner = el('div', { className: 'provision-mark' }, el('span', { className: 'spinner' }));
|
|
show(
|
|
el(
|
|
'div',
|
|
{ className: 'screen-center' },
|
|
spinner,
|
|
el('h1', { className: 'title-sm' }, t('native.provisioning.title')),
|
|
el('p', { className: 'sub' }, t('native.provisioning.sub', { host }))
|
|
)
|
|
);
|
|
|
|
const deadline = Date.now() + 180_000;
|
|
const poll = async (): Promise<void> => {
|
|
const result = await probeServer(instanceUrl, get);
|
|
if (result.ok) {
|
|
await connected(result.url, [], welcome);
|
|
return;
|
|
}
|
|
if (Date.now() > deadline) {
|
|
showProvisioningSlow(instanceUrl, welcome);
|
|
return;
|
|
}
|
|
setTimeout(() => void poll(), 4000);
|
|
};
|
|
setTimeout(() => void poll(), 3000);
|
|
}
|
|
|
|
function showProvisioningSlow(instanceUrl: string, welcome?: string): void {
|
|
void notify(NotificationType.Warning);
|
|
const retry = el('button', { type: 'button', className: 'btn' }, t('native.provisioning.retry'));
|
|
retry.addEventListener('click', () => {
|
|
void tap();
|
|
showProvisioning(instanceUrl, welcome);
|
|
});
|
|
show(
|
|
el(
|
|
'div',
|
|
{ className: 'screen-center' },
|
|
el('h1', { className: 'title-sm' }, t('native.provisioning.failedTitle')),
|
|
el('p', { className: 'sub' }, t('native.provisioning.failedSub')),
|
|
retry
|
|
)
|
|
);
|
|
}
|
|
|
|
// ── Shared actions ──────────────────────────────────────────────────────────
|
|
async function runDemo(button: HTMLButtonElement, error?: HTMLElement): Promise<void> {
|
|
void tap();
|
|
if (error) error.textContent = '';
|
|
button.disabled = true;
|
|
const result = await probeDemo(get);
|
|
if (result.ok) {
|
|
await connected(result.url);
|
|
return;
|
|
}
|
|
button.disabled = false;
|
|
if (error) {
|
|
error.textContent = failureMessage(result.reason);
|
|
} else {
|
|
void notify(NotificationType.Error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The tick, then the server takes over. A beat so the success registers. With a
|
|
* welcome code (a purchase with a chosen password) the app opens the instance's
|
|
* welcome page once, which signs the buyer in; an app build without that option
|
|
* opens the sign-in page instead, where the chosen password works.
|
|
*/
|
|
async function connected(url: string, signInHosts: string[] = [], welcome?: string): Promise<void> {
|
|
void notify(NotificationType.Success);
|
|
const host = (() => {
|
|
try {
|
|
return new URL(url).host;
|
|
} catch {
|
|
return url;
|
|
}
|
|
})();
|
|
const tick = el('div', { className: 'tick' });
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.setAttribute('viewBox', '0 0 24 24');
|
|
svg.setAttribute('fill', 'none');
|
|
svg.setAttribute('stroke', 'currentColor');
|
|
svg.setAttribute('stroke-width', '2.5');
|
|
svg.setAttribute('stroke-linecap', 'round');
|
|
svg.setAttribute('stroke-linejoin', 'round');
|
|
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
p.setAttribute('d', I.check);
|
|
svg.appendChild(p);
|
|
tick.appendChild(svg);
|
|
show(
|
|
el('div', { className: 'success' }, tick, el('h1', { className: 'title-sm' }, t('native.connecting', { host })))
|
|
);
|
|
await new Promise((r) => setTimeout(r, 700));
|
|
await TrekShell.setServer({
|
|
url,
|
|
...(signInHosts.length ? { signInHosts } : {}),
|
|
...(welcome ? { welcome } : {}),
|
|
});
|
|
}
|
|
|
|
function showUnreachable(server: string): void {
|
|
const retry = el('button', { type: 'button', className: 'btn' }, t('native.offline.retry'));
|
|
retry.addEventListener('click', () => {
|
|
void tap();
|
|
retry.disabled = true;
|
|
void TrekShell.reload();
|
|
});
|
|
const change = el('button', { type: 'button', className: 'linkbtn' }, t('native.changeServer'));
|
|
change.addEventListener('click', () => {
|
|
void tap();
|
|
void TrekShell.resetServer();
|
|
});
|
|
show(
|
|
el(
|
|
'div',
|
|
{},
|
|
...columns(
|
|
[
|
|
el('img', { src: logoUrl, alt: '', className: 'shell-logo' }),
|
|
el('h1', { className: 'title-sm' }, t('native.offline.title')),
|
|
el('p', { className: 'sub' }, t('native.offline.hint', { server: new URL(server).host })),
|
|
],
|
|
[retry, change, footLinks()]
|
|
)
|
|
)
|
|
);
|
|
}
|
|
|
|
// ── Start ───────────────────────────────────────────────────────────────────
|
|
/**
|
|
* The address screen is always on the near-black surface, so the status bar must
|
|
* draw its clock and icons in light. The server's UI sets its own style once it
|
|
* loads (native/nativeApp.ts); this is only for the screen the app ships. Fails
|
|
* quietly where there is no status bar (web, the simulator without the plugin).
|
|
*/
|
|
async function paintStatusBar(): Promise<void> {
|
|
try {
|
|
await StatusBar.setStyle({ style: Style.Dark });
|
|
} catch {
|
|
/* web / unavailable: no native status bar to style */
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Android's back gesture steps back through the first screens as their own
|
|
* back button does, and only leaves the app from a screen that has none.
|
|
*/
|
|
function followBackGesture(): void {
|
|
try {
|
|
void App.addListener('backButton', () => {
|
|
const back = current?.querySelector<HTMLButtonElement>('.topbar .back');
|
|
if (back) back.click();
|
|
else void App.minimizeApp();
|
|
});
|
|
} catch {
|
|
/* web / unavailable: no system back gesture */
|
|
}
|
|
}
|
|
|
|
async function start(): Promise<void> {
|
|
void paintStatusBar();
|
|
followBackGesture();
|
|
let url: string | null;
|
|
try {
|
|
({ url } = await TrekShell.getServer());
|
|
} catch {
|
|
// No native shell under us (a web preview, or a simulator without the
|
|
// plugin): there is no remembered server, so start at the welcome screen
|
|
// rather than leaving a blank page.
|
|
showWelcome();
|
|
await SplashScreen.hide().catch(() => {});
|
|
return;
|
|
}
|
|
if (!url) {
|
|
showWelcome();
|
|
} else {
|
|
// Only reached when loading the server failed. On iOS the stored copy of
|
|
// its start page brings the offline-capable UI up anyway.
|
|
const { opened } = await TrekShell.openOfflineCopy();
|
|
if (opened) return;
|
|
showUnreachable(url);
|
|
}
|
|
await SplashScreen.hide();
|
|
}
|
|
|
|
void start();
|