feat: Added checking state to password input

Author: kevinwang5658

src/ui/components/widgets/SudoPasswordInput.tsx

@@ -1,23 +1,29 @@
 import { Box, Text, useInput } from 'ink';
 import React, { useState } from 'react';
 
+import Spinner from '../progress/spinner.js';
+
 export function SudoPasswordInput(props: {
   hasError: boolean;
   onSubmit: (password: string) => void;
   onCancel: () => void;
 }) {
   const { hasError, onSubmit, onCancel } = props;
   const [value, setValue] = useState('');
+  const [isChecking, setIsChecking] = useState(false);
 
   const borderColor = hasError ? 'red' : 'cyan';
 
   useInput((input, key) => {
+    if (isChecking) return;
+
     if (key.escape) {
       onCancel();
       return;
     }
 
     if (key.return) {
+      setIsChecking(true);
       onSubmit(value);
       setValue('');
       return;
@@ -45,13 +51,17 @@ export function SudoPasswordInput(props: {
       borderColor={borderColor}
       marginTop={1}
     >
-      <Box gap={1}>
-        <Text bold color={borderColor}>Sudo Password:</Text>
-        <Text>{value.replace(/./g, '*')}</Text>
-        <Text inverse> </Text>
-      </Box>
+      {isChecking ? (
+        <Spinner label="Checking password..." />
+      ) : (
+        <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>
+      {!isChecking && <Text dimColor>Enter to confirm · Esc to cancel</Text>}
     </Box>
   );
-}
+}

src/ui/reporters/default-reporter.tsx

@@ -326,21 +326,30 @@ export class DefaultReporter implements Reporter {
   private async handleInlineSudoPassword(): Promise<void> {
     let attemptCount = 0;
 
+    await sleep(50);
+    this.updateRenderState(RenderStatus.NOTHING);
+    await sleep(50);
+
     while (attemptCount < 3) {
-      const result = await (await Promise.all([
+      const result = (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),
+          this.awaitEvent<'cancel'>(RenderEvent.SUDO_PASSWORD_CANCEL).then(() => Symbol.for('cancel')),
         ]),
-      ])).at(1) as string | 'cancel';
+      ])).at(1) as string | Symbol;
 
-      if (result === 'cancel') {
+      if (result === Symbol.for('cancel')) {
+        ctx.log('Sudo password cancelled');
         break;
+      } else {
+        ctx.log('Sudo password attempt');
       }
 
       const isValid = this.sudoPasswordSubmittedCallback?.(result) ?? false;
       if (isValid) {
+        ctx.log('Sudo password successful!');
+
         await sleep(50);
         this.updateRenderState(RenderStatus.NOTHING, null);
         await sleep(50);
@@ -349,6 +358,7 @@ export class DefaultReporter implements Reporter {
         return;
       }
 
+      ctx.log('Sudo password failed');
       attemptCount++;
     }