feat: Changed to custom component

Author: kevinwang5658

src/ui/components/default-component.tsx

@@ -1,12 +1,11 @@
 import { Form, FormProps } from '@codifycli/ink-form';
-import { PasswordInput, TextInput } from '@inkjs/ui';
+import { TextInput } from '@inkjs/ui';
 import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
 import SelectInput from 'ink-select-input';
 import { useAtom } from 'jotai';
-import { selectAtom } from 'jotai/utils';
 import { EventEmitter } from 'node:events';
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 import { Plan } from '../../entities/plan.js';
 import { FileModificationResult } from '../../generators/index.js';
@@ -21,12 +20,12 @@ import { MultiSelect } from './multi-select/MultiSelect.js';
 import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay } from './progress/progress-display.js';
 import { PromptPressKeyToContinue } from './widgets/PromptPressKeyToContinue.js';
+import { SudoPasswordInput } from './widgets/SudoPasswordInput.js';
 
 export function DefaultComponent(props: {
   emitter: EventEmitter
 }) {
   const { emitter } = props
-  const [disableSudoPrompt, setDisableSudoPrompt] = useState(false);
   const [{ status: renderStatus, data: renderData }] = useAtom(store.renderState);
 
   // Use layoutEffect runs before the first render, whereas useEffect runs after
@@ -37,15 +36,8 @@ export function DefaultComponent(props: {
 
     emitter.on(RenderEvent.LOG, logListener);
 
-    const disableSudoPrompt = (isDisabled: boolean) => {
-      setDisableSudoPrompt(isDisabled);
-    }
-
-    emitter.on(RenderEvent.DISABLE_SUDO_PROMPT, disableSudoPrompt)
-
     return () => {
       emitter.off(RenderEvent.LOG, logListener);
-      emitter.off(RenderEvent.DISABLE_SUDO_PROMPT, disableSudoPrompt);
     }
   }, []);
 
@@ -91,13 +83,12 @@ export function DefaultComponent(props: {
     }
     {
       renderStatus === RenderStatus.SUDO_PROMPT && (
-        <Box flexDirection="column">
-          <Text>Password:</Text>
-          {/* Use sudoAttemptCount as a hack to reset password input between attempts */}
-          <PasswordInput isDisabled={disableSudoPrompt} key={renderData as number} onSubmit={(password) => {
-            emitter.emit(RenderEvent.SUDO_PROMPT_RESULT, password);
-          }}/>
-        </Box>
+        <SudoPasswordInput
+          key={renderData as number}
+          hasError={(renderData as number) > 0}
+          onSubmit={(password) => emitter.emit(RenderEvent.SUDO_PROMPT_RESULT, password)}
+          onCancel={() => emitter.emit(RenderEvent.SUDO_PASSWORD_CANCEL)}
+        />
       )
     }
     {

src/ui/components/widgets/SudoPasswordInput.tsx

@@ -0,0 +1,57 @@
+import { Box, Text, useInput } from 'ink';
+import React, { useState } from 'react';
+
+export function SudoPasswordInput(props: {
+  hasError: boolean;
+  onSubmit: (password: string) => void;
+  onCancel: () => void;
+}) {
+  const { hasError, onSubmit, onCancel } = props;
+  const [value, setValue] = useState('');
+
+  const borderColor = hasError ? 'red' : 'cyan';
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    if (key.return) {
+      onSubmit(value);
+      setValue('');
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setValue((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    // Ignore non-printable characters
+    if (input && !key.ctrl && !key.meta) {
+      setValue((prev) => prev + input);
+    }
+  });
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderTop={true}
+      borderBottom={true}
+      borderLeft={false}
+      borderRight={false}
+      borderColor={borderColor}
+      marginTop={1}
+    >
+      <Box gap={1}>
+        <Text bold color={borderColor}>Sudo Password:</Text>
+        <Text>{value.replace(/./g, '*')}</Text>
+        <Text inverse> </Text>
+      </Box>
+      {hasError && <Text color="red">Incorrect password, try again</Text>}
+      <Text dimColor>Enter to confirm · Esc to cancel</Text>
+    </Box>
+  );
+}

src/ui/reporters/default-reporter.tsx

@@ -327,14 +327,19 @@ export class DefaultReporter implements Reporter {
     let attemptCount = 0;
 
     while (attemptCount < 3) {
-      this.renderEmitter.emit(RenderEvent.DISABLE_SUDO_PROMPT, false);
-      const passwordAttempt = await this.updateStateAndAwaitEvent<string>(
-        () => this.updateRenderState(RenderStatus.SUDO_PROMPT, attemptCount),
-        RenderEvent.SUDO_PROMPT_RESULT,
-      );
-      this.renderEmitter.emit(RenderEvent.DISABLE_SUDO_PROMPT, true);
+      const result = await (await Promise.all([
+        this.updateRenderState(RenderStatus.SUDO_PROMPT, attemptCount),
+        Promise.race([
+          this.awaitEvent<string>(RenderEvent.SUDO_PROMPT_RESULT),
+          this.awaitEvent<'cancel'>(RenderEvent.SUDO_PASSWORD_CANCEL),
+        ]),
+      ])).at(1) as string | 'cancel';
+
+      if (result === 'cancel') {
+        break;
+      }
 
-      const isValid = this.sudoPasswordSubmittedCallback?.(passwordAttempt) ?? false;
+      const isValid = this.sudoPasswordSubmittedCallback?.(result) ?? false;
       if (isValid) {
         await sleep(50);
         this.updateRenderState(RenderStatus.NOTHING, null);
@@ -344,14 +349,10 @@ export class DefaultReporter implements Reporter {
         return;
       }
 
-      if (attemptCount + 1 < 3) {
-        ctx.log(chalk.red(`Sorry, try again. (${attemptCount + 1}/3)`));
-      }
-
       attemptCount++;
     }
 
-    // All attempts exhausted — restore progress display without marking saved
+    // Cancelled or all attempts exhausted — restore progress display
     await sleep(50);
     this.updateRenderState(RenderStatus.NOTHING, null);
     await sleep(50);
@@ -362,12 +363,10 @@ export class DefaultReporter implements Reporter {
     let attemptCount = 0;
 
     while (attemptCount < 3) {
-      this.renderEmitter.emit(RenderEvent.DISABLE_SUDO_PROMPT, false);
       const passwordAttempt = await this.updateStateAndAwaitEvent<string>(
         () => this.updateRenderState(RenderStatus.SUDO_PROMPT, attemptCount),
         RenderEvent.SUDO_PROMPT_RESULT,
       );
-      this.renderEmitter.emit(RenderEvent.DISABLE_SUDO_PROMPT, true);
 
       // Validates that the password works
       if (SudoUtils.validate(passwordAttempt)) {

src/ui/reporters/reporter.ts

@@ -25,6 +25,7 @@ export enum RenderEvent {
   STATE_TRANSITION = 'stateTransition',
   TOGGLE_VERBOSITY = 'toggleVerbosity',
   SUDO_PASSWORD_TOGGLE = 'sudoPasswordToggle',
+  SUDO_PASSWORD_CANCEL = 'sudoPasswordCancel',
   SUDO_PASSWORD_PRE_SUPPLIED = 'sudoPasswordPreSupplied',
 }