feat: Added toggle for adding sudo password during apply

Author: kevinwang5658

src/common/base-command.ts

@@ -52,12 +52,12 @@ export abstract class BaseCommand extends Command {
         this.reporter.notifySudoPasswordPreSupplied();
       }
 
-      this.reporter.onSudoPasswordSubmitted(async (password: string) => {
+      this.reporter.onSudoPasswordSubmitted((password: string) => {
         const isValid = SudoUtils.validate(password);
         if (isValid) {
           cachedSudoPassword = password;
         }
-        (this.reporter as DefaultReporter).notifySudoPasswordResult(isValid);
+        return isValid;
       });
     }
 

src/ui/components/progress/progress-display.tsx

@@ -1,4 +1,3 @@
-import { PasswordInput } from '@inkjs/ui';
 import { Box, Text, useInput } from 'ink';
 import { useAtom } from 'jotai';
 import { EventEmitter } from 'node:events';
@@ -29,43 +28,16 @@ export function ProgressDisplay(props: { emitter: EventEmitter }) {
   const { emitter } = props;
   const [progress] = useAtom(store.progressState);
   const [isVerbose, setIsVerbose] = useState(false);
-  const [isEnteringPassword, setIsEnteringPassword] = useState(false);
-  const [passwordError, setPasswordError] = useState(false);
-  const [passwordAttempts, setPasswordAttempts] = useState(0);
   const [passwordSaved, setPasswordSaved] = useState(false);
-  const [passwordInputKey, setPasswordInputKey] = useState(0);
 
   const isApplyOrDestroy = progress?.name === ProcessName.APPLY || progress?.name === ProcessName.DESTROY;
 
   useLayoutEffect(() => {
-    const onResult = ({ success }: { success: boolean }) => {
-      if (success) {
-        setPasswordSaved(true);
-        setIsEnteringPassword(false);
-        setPasswordError(false);
-        setPasswordAttempts(0);
-      } else {
-        setPasswordAttempts((prev) => {
-          const next = prev + 1;
-          if (next >= 3) {
-            setIsEnteringPassword(false);
-            setPasswordError(false);
-            return 0;
-          }
-          setPasswordError(true);
-          setPasswordInputKey((k) => k + 1);
-          return next;
-        });
-      }
-    };
-
     const onPreSupplied = () => setPasswordSaved(true);
 
-    emitter.on(RenderEvent.SUDO_PASSWORD_RESULT, onResult);
     emitter.on(RenderEvent.SUDO_PASSWORD_PRE_SUPPLIED, onPreSupplied);
 
     return () => {
-      emitter.off(RenderEvent.SUDO_PASSWORD_RESULT, onResult);
       emitter.off(RenderEvent.SUDO_PASSWORD_PRE_SUPPLIED, onPreSupplied);
     };
   }, []);
@@ -77,10 +49,7 @@ export function ProgressDisplay(props: { emitter: EventEmitter }) {
       emitter.emit(RenderEvent.TOGGLE_VERBOSITY);
     }
     if (input === 'p' && !passwordSaved) {
-      setIsEnteringPassword((prev) => !prev);
-      setPasswordError(false);
-      setPasswordAttempts(0);
-      setPasswordInputKey((k) => k + 1);
+      emitter.emit(RenderEvent.SUDO_PASSWORD_TOGGLE);
     }
   });
 
@@ -96,33 +65,15 @@ export function ProgressDisplay(props: { emitter: EventEmitter }) {
         ? <Spinner label={label} type="dots" />
         : <Text><Text color='greenBright'>✔</Text> {label}</Text>
     }
-
-    {!isEnteringPassword && (
-      <Box flexDirection="column" marginLeft={2}>
-        <SubProgressDisplay subProgresses={subProgresses}/>
-      </Box>
-    )}
-
-    {isEnteringPassword && (
-      <Box flexDirection="column" marginTop={1}>
-        <Text color={passwordError ? 'red' : 'cyan'}>{'─'.repeat(40)}</Text>
-        <Box>
-          <Text> Password: </Text>
-          <PasswordInput key={passwordInputKey} onSubmit={(pw) => emitter.emit(RenderEvent.SUDO_PASSWORD_SUBMITTED, pw)} />
-        </Box>
-        {passwordError && (
-          <Text color="red">{` Incorrect password, try again (${passwordAttempts}/3)`}</Text>
-        )}
-        <Text color={passwordError ? 'red' : 'cyan'}>{'─'.repeat(40)}</Text>
-      </Box>
-    )}
-
+    <Box flexDirection="column" marginLeft={2}>
+      <SubProgressDisplay subProgresses={subProgresses}/>
+    </Box>
     {isApplyOrDestroy && (
-      <Box flexDirection="column">
+      <Box flexDirection="row" gap={2}>
         <Text dimColor>{isVerbose ? '[v] Hide verbose logs' : '[v] Show verbose logs'}</Text>
         {passwordSaved
           ? <Text color="green">✓ sudo password</Text>
-          : <Text dimColor>{isEnteringPassword ? '[p] Cancel' : '[p] Enter sudo password'}</Text>
+          : <Text dimColor>[p] Enter sudo password</Text>
         }
       </Box>
     )}

src/ui/reporters/default-reporter.tsx

@@ -47,7 +47,7 @@ export class DefaultReporter implements Reporter {
   private renderEmitter = new EventEmitter();
   private progressState: ProgressState | null = null
   private verbosityToggleCallback: (() => void) | null = null;
-  private sudoPasswordSubmittedCallback: ((password: string) => void) | null = null;
+  private sudoPasswordSubmittedCallback: ((password: string) => boolean) | null = null;
   silent = false;
 
   constructor() {
@@ -63,23 +63,19 @@ export class DefaultReporter implements Reporter {
       this.verbosityToggleCallback?.();
     });
 
-    this.renderEmitter.on(RenderEvent.SUDO_PASSWORD_SUBMITTED, (password: string) => {
-      this.sudoPasswordSubmittedCallback?.(password);
+    this.renderEmitter.on(RenderEvent.SUDO_PASSWORD_TOGGLE, () => {
+      this.handleInlineSudoPassword();
     });
   }
 
   onVerbosityToggle(callback: () => void): void {
     this.verbosityToggleCallback = callback;
   }
 
-  onSudoPasswordSubmitted(callback: (password: string) => void): void {
+  onSudoPasswordSubmitted(callback: (password: string) => boolean): void {
     this.sudoPasswordSubmittedCallback = callback;
   }
 
-  notifySudoPasswordResult(success: boolean): void {
-    this.renderEmitter.emit(RenderEvent.SUDO_PASSWORD_RESULT, { success });
-  }
-
   notifySudoPasswordPreSupplied(): void {
     setImmediate(() => this.renderEmitter.emit(RenderEvent.SUDO_PASSWORD_PRE_SUPPLIED));
   }
@@ -327,6 +323,41 @@ export class DefaultReporter implements Reporter {
     store.set(store.progressState, structuredClone(this.progressState));
   }
 
+  private async handleInlineSudoPassword(): Promise<void> {
+    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 isValid = this.sudoPasswordSubmittedCallback?.(passwordAttempt) ?? false;
+      if (isValid) {
+        await sleep(50);
+        this.updateRenderState(RenderStatus.NOTHING, null);
+        await sleep(50);
+        await this.displayProgress();
+        this.renderEmitter.emit(RenderEvent.SUDO_PASSWORD_PRE_SUPPLIED);
+        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
+    await sleep(50);
+    this.updateRenderState(RenderStatus.NOTHING, null);
+    await sleep(50);
+    await this.displayProgress();
+  }
+
   private async getUserPassword(): Promise<string> {
     let attemptCount = 0;
 

src/ui/reporters/reporter.ts

@@ -24,8 +24,7 @@ export enum RenderEvent {
   SUDO_PROMPT_RESULT = 'promptSudoResult',
   STATE_TRANSITION = 'stateTransition',
   TOGGLE_VERBOSITY = 'toggleVerbosity',
-  SUDO_PASSWORD_SUBMITTED = 'sudoPasswordSubmitted',
-  SUDO_PASSWORD_RESULT = 'sudoPasswordResult',
+  SUDO_PASSWORD_TOGGLE = 'sudoPasswordToggle',
   SUDO_PASSWORD_PRE_SUPPLIED = 'sudoPasswordPreSupplied',
 }