@mintlify/cli 4.0.1076 → 4.0.1077

package/bin/login.js

@@ -7,10 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { input } from '@inquirer/prompts';
 import { addLog } from '@mintlify/previewing';
-import { Text } from 'ink';
+import chalk from 'chalk';
+import { Box, Text } from 'ink';
+import open from 'open';
 import { calculatePKCECodeChallenge, randomNonce, randomPKCECodeVerifier, randomState, } from 'openid-client';
 import { DASHBOARD_URL, STYTCH_CLIENT_ID, TOKEN_ENDPOINT } from './constants.js';
 import { storeCredentials } from './keyring.js';
@@ -25,8 +27,21 @@ export function login() {
         const authorizeUrl = new URL('/api/cli/oauth/authorize', DASHBOARD_URL);
         authorizeUrl.searchParams.set('state', state);
         authorizeUrl.searchParams.set('code_challenge', codeChallenge);
-        addLog(_jsxs(Text, { children: ["Opening browser to log in to Mintlify... ", authorizeUrl.toString()] }));
-        const code = yield input({ message: 'Paste the code from your browser:' });
+        const url = authorizeUrl.toString();
+        addLog(_jsxs(Box, { flexDirection: "column", gap: 1, paddingY: 1, children: [_jsxs(Text, { bold: true, children: [_jsx(Text, { color: "green", children: "\u25C6 " }), "A browser window will open for Mintlify authentication"] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 3, gap: 1, children: [_jsx(Text, { dimColor: true, children: "If your browser doesn't open automatically, copy this URL:" }), _jsx(Text, { color: "cyan", children: url })] })] }));
+        open(url).catch(() => { });
+        addLog(_jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500 Paste the authorization code from your browser" }), _jsx(Text, { dimColor: true, children: "\u2502" })] }));
+        // Let ink finish rendering before inquirer takes over stdout
+        yield new Promise((resolve) => setTimeout(resolve, 50));
+        const code = yield input({
+            message: '█',
+            theme: {
+                prefix: chalk.dim(' │'),
+                style: {
+                    answer: (text) => chalk.cyan(text),
+                },
+            },
+        });
         const res = yield fetch(TOKEN_ENDPOINT, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -40,11 +55,11 @@ export function login() {
         });
         const body = yield res.json().catch(() => ({}));
         if (!res.ok) {
-            addLog(_jsxs(Text, { color: "red", children: ["Login failed: ", (_b = (_a = body.error_message) !== null && _a !== void 0 ? _a : body.error) !== null && _b !== void 0 ? _b : 'unknown error'] }));
+            addLog(_jsxs(Text, { color: "red", children: ["\u2716 Login failed: ", (_b = (_a = body.error_message) !== null && _a !== void 0 ? _a : body.error) !== null && _b !== void 0 ? _b : 'unknown error'] }));
             return;
         }
         const token = body;
         yield storeCredentials(token.access_token, token.refresh_token);
-        addLog(_jsx(Text, { color: "green", children: "Logged in successfully." }));
+        addLog(_jsx(Text, { color: "green", children: "\u2714 Logged in successfully." }));
     });
 }