feat: Added checking state to password input

Author: kevinwang5658

src/ui/components/default-component.tsx

@@ -84,8 +84,9 @@ export function DefaultComponent(props: {
     {
       renderStatus === RenderStatus.SUDO_PROMPT && (
         <SudoPasswordInput
-          key={renderData as number}
-          hasError={(renderData as number) > 0}
+          key={(renderData as { attemptCount: number }).attemptCount}
+          hasError={(renderData as { attemptCount: number }).attemptCount > 0}
+          cancellable={(renderData as { cancellable: boolean }).cancellable}
           onSubmit={(password) => emitter.emit(RenderEvent.SUDO_PROMPT_RESULT, password)}
           onCancel={() => emitter.emit(RenderEvent.SUDO_PASSWORD_CANCEL)}
         />

src/ui/components/widgets/SudoPasswordInput.tsx

@@ -5,10 +5,11 @@ import Spinner from '../progress/spinner.js';
 
 export function SudoPasswordInput(props: {
   hasError: boolean;
+  cancellable: boolean;
   onSubmit: (password: string) => void;
   onCancel: () => void;
 }) {
-  const { hasError, onSubmit, onCancel } = props;
+  const { hasError, cancellable, onSubmit, onCancel } = props;
   const [value, setValue] = useState('');
   const [isChecking, setIsChecking] = useState(false);
 
@@ -17,7 +18,7 @@ export function SudoPasswordInput(props: {
   useInput((input, key) => {
     if (isChecking) return;
 
-    if (key.escape) {
+    if (key.escape && cancellable) {
       onCancel();
       return;
     }
@@ -61,7 +62,7 @@ export function SudoPasswordInput(props: {
         </Box>
       )}
       {hasError && <Text color="red">Incorrect password, try again</Text>}
-      {!isChecking && <Text dimColor>Enter to confirm · Esc to cancel</Text>}
+      {!isChecking && <Text dimColor>Enter to confirm{cancellable ? ' · Esc to cancel' : ''}</Text>}
     </Box>
   );
 }

src/ui/reporters/default-reporter.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Plan } from '../../entities/plan.js';
 import { ResourceConfig } from '../../entities/resource-config.js';
 import { ResourceInfo } from '../../entities/resource-info.js';
-import { Event, ProcessName, SubProcessName, ctx } from '../../events/context.js';
+import { ctx, Event, ProcessName, SubProcessName } from '../../events/context.js';
 import { FileModificationResult } from '../../generators/index.js';
 import { ImportResult } from '../../orchestrators/import.js';
 import { sleep } from '../../utils/index.js';
@@ -332,7 +332,7 @@ export class DefaultReporter implements Reporter {
 
     while (attemptCount < 3) {
       const result = (await Promise.all([
-        this.updateRenderState(RenderStatus.SUDO_PROMPT, attemptCount),
+        this.updateRenderState(RenderStatus.SUDO_PROMPT, { attemptCount, cancellable: true }),
         Promise.race([
           this.awaitEvent<string>(RenderEvent.SUDO_PROMPT_RESULT),
           this.awaitEvent<'cancel'>(RenderEvent.SUDO_PASSWORD_CANCEL).then(() => Symbol.for('cancel')),
@@ -372,9 +372,12 @@ export class DefaultReporter implements Reporter {
   private async getUserPassword(): Promise<string> {
     let attemptCount = 0;
 
+    this.updateRenderState(RenderStatus.NOTHING);
+    await sleep(50);
+
     while (attemptCount < 3) {
       const passwordAttempt = await this.updateStateAndAwaitEvent<string>(
-        () => this.updateRenderState(RenderStatus.SUDO_PROMPT, attemptCount),
+        () => this.updateRenderState(RenderStatus.SUDO_PROMPT, { attemptCount, cancellable: false }),
         RenderEvent.SUDO_PROMPT_RESULT,
       );