Allow user to submit on Enter

src/components/CreatePinModal/CreatePinModal.tsx

@@ -63,6 +63,13 @@ const CreatePinModal: Component<{
     return rePin() === pin();
   };
 
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.code === 'Enter' && isValidPin() && isValidRePin()) {
+      onSetPin();
+    }
+  };
+
+
 
   return (
     <Modal open={props.open}>
@@ -81,6 +88,7 @@ const CreatePinModal: Component<{
             type="password"
             ref={pinInput}
             value={pin()}
+            onKeyUp={onKeyUp}
             onChange={(val: string) => setPin(val)}
             validationState={isValidPin() ? 'valid' : 'invalid'}
             errorMessage={intl.formatMessage(tPin.invalidPin)}
@@ -88,6 +96,7 @@ const CreatePinModal: Component<{
           <TextInput
             type="password"
             value={rePin()}
+            onKeyUp={onKeyUp}
             onChange={(val: string) => setRePin(val)}
             label={intl.formatMessage(tPin.reEnter)}
             validationState={rePin().length === 0 || isValidRePin() ? 'valid' : 'invalid'}

src/components/EnterPinModal/EnterPinModal.tsx

@@ -84,6 +84,11 @@ const EnterPinModal: Component<{
     return pin().length > 3;
   }
 
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.code === 'Enter' && isValidPin()) {
+      onConfirm();
+    }
+  };
 
   return (
     <Modal open={props.open} opaqueBackdrop={true}>
@@ -99,6 +104,7 @@ const EnterPinModal: Component<{
             type="password"
             ref={pinInput}
             value={pin()}
+            onKeyUp={onKeyUp}
             onChange={(val: string) => setPin(val)}
             label={intl.formatMessage(tPin.enter)}
             validationState={pin().length === 0 || isValidPin() ? 'valid' : 'invalid'}

src/components/LoginModal/LoginModal.tsx

@@ -73,6 +73,12 @@ const LoginModal: Component<{
     }
   });
 
+  const onKeyUp = (e: KeyboardEvent) => {
+    if (e.code === 'Enter' && isValidNsec()) {
+      onLogin();
+    }
+  };
+
   return (
     <Switch>
       <Match when={step() === 'login'}>
@@ -92,6 +98,7 @@ const LoginModal: Component<{
                 ref={loginInput}
                 type="password"
                 value={enteredKey()}
+                onKeyUp={onKeyUp}
                 onChange={setEnteredKey}
                 validationState={enteredKey().length === 0 || isValidNsec() ? 'valid' : 'invalid'}
                 errorMessage={intl.formatMessage(tLogin.invalidNsec)}

src/components/TextInput/TextInput.tsx

@@ -9,6 +9,7 @@ const TextInput: Component<{
   errorMessage?: string,
   value?: string,
   onChange?: (value: string) => void,
+  onKeyUp?: (e: KeyboardEvent) => void,
   children?: JSXElement,
   readonly?: boolean,
   ref?: HTMLInputElement,
@@ -40,6 +41,7 @@ const TextInput: Component<{
             type={props.type || 'search'}
             name={props.name || 'searchTerm'}
             autocomplete={props.autocomplete || "off"}
+            onKeyUp={props.onKeyUp}
           />
 
           <div class={styles.inputAfter}>

src/pages/CreateAccount.tsx

@@ -571,7 +571,7 @@ const CreateAccount: Component = () => {  const intl = useIntl();
         <div class={currentStep() === 'follow' ? '' : 'invisible'}>
           <div class={styles.recomendedFollowsCaption}>
             <div class={styles.caption}>
-              Prominent Nostriches
+              {intl.formatMessage(tAccount.prominentNostriches)}
             </div>
             <div class={styles.action}>
 
@@ -579,12 +579,12 @@ const CreateAccount: Component = () => {  const intl = useIntl();
                 when={isFollowingAllProminent()}
                 fallback={
                   <ButtonSecondary onClick={onFollowProminent}>
-                    <span>Follow All</span>
+                    <span>{intl.formatMessage(tAccount.followAll)}</span>
                   </ButtonSecondary>
                 }
               >
                 <ButtonTertiary onClick={onUnfollowProminent}>
-                  Unfollow all
+                  {intl.formatMessage(tAccount.unfollowAll)}
                 </ButtonTertiary>
               </Show>
             </div>
@@ -609,12 +609,12 @@ const CreateAccount: Component = () => {  const intl = useIntl();
                       when={followed.includes(user.pubkey)}
                       fallback={
                         <ButtonSecondary onClick={() => onFollow(user.pubkey)}>
-                          Follow
+                          {intl.formatMessage(tAccount.follow)}
                         </ButtonSecondary>
                       }
                     >
                       <ButtonTertiary onClick={() => onUnfollow(user.pubkey)}>
-                        Unfollow
+                        {intl.formatMessage(tAccount.unfollow)}
                       </ButtonTertiary>
                     </Show>
                   </div>

src/translations.ts

@@ -4,6 +4,11 @@ import { ScopeDescriptor } from "./types/primal";
 
 
 export const account = {
+  prominentNostriches: {
+    id: 'actions.prominentNostriches',
+    defaultMessage: 'Prominent Nostriches',
+    description: 'Prominent Nostriches label',
+  },
   follow: {
     id: 'actions.follow',
     defaultMessage: 'follow',
@@ -14,6 +19,16 @@ export const account = {
     defaultMessage: 'unfollow',
     description: 'Unfollow button label',
   },
+  followAll: {
+    id: 'actions.followAll',
+    defaultMessage: 'follow all',
+    description: 'Follow all button label',
+  },
+  unfollowAll: {
+    id: 'actions.unfollowAll',
+    defaultMessage: 'unfollow all',
+    description: 'Unfollow all button label',
+  },
   needToLogin: {
     id: 'account.needToLogin',
     defaultMessage: 'You need to be signed in to perform this action',