From 48e1f443ea3babfa7ec3f5a2ea0fdd3f4f5297e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Fri, 16 Jun 2023 13:11:02 +0200
Subject: [PATCH] fix(password) use the numeric input mode when only digits are
 required

Fixes: https://github.com/jitsi/brave-tracker/issues/101
---
 .../features/base/ui/components/web/Input.tsx |  3 +++
 .../security-dialog/web/PasswordForm.tsx      | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx
index 712398b2e9..03b48fe641 100644
--- a/react/features/base/ui/components/web/Input.tsx
+++ b/react/features/base/ui/components/web/Input.tsx
@@ -21,6 +21,7 @@ interface IProps extends IInputProps {
     maxValue?: number;
     minRows?: number;
     minValue?: number;
+    mode?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | ' email' | 'url';
     name?: string;
     onBlur?: (e: any) => void;
     onFocus?: (event: React.FocusEvent) => void;
@@ -162,6 +163,7 @@ const Input = React.forwardRef<any, IProps>(({
     maxRows,
     minValue,
     minRows,
+    mode,
     name,
     onBlur,
     onChange,
@@ -223,6 +225,7 @@ const Input = React.forwardRef<any, IProps>(({
                         data-testid = { testId }
                         disabled = { disabled }
                         { ...(id ? { id } : {}) }
+                        { ...(mode ? { inputmode: mode } : {}) }
                         { ...(type === 'number' ? { max: maxValue } : {}) }
                         maxLength = { maxLength }
                         { ...(type === 'number' ? { min: minValue } : {}) }
diff --git a/react/features/security/components/security-dialog/web/PasswordForm.tsx b/react/features/security/components/security-dialog/web/PasswordForm.tsx
index 8ee97ae0c1..5fb2eb36c4 100644
--- a/react/features/security/components/security-dialog/web/PasswordForm.tsx
+++ b/react/features/security/components/security-dialog/web/PasswordForm.tsx
@@ -140,22 +140,29 @@ class PasswordForm extends Component<IProps, IState> {
      * @returns {ReactElement}
      */
     _renderPasswordField() {
-        if (this.props.editEnabled) {
-            let placeHolderText = this.props.t('dialog.password');
+        const {
+            editEnabled,
+            passwordNumberOfDigits,
+            t
+        } = this.props;
 
-            if (this.props.passwordNumberOfDigits) {
+        if (editEnabled) {
+            let placeHolderText = t('dialog.password');
+
+            if (passwordNumberOfDigits) {
                 placeHolderText = this.props.t('passwordDigitsOnly', {
-                    number: this.props.passwordNumberOfDigits });
+                    number: passwordNumberOfDigits });
             }
 
             return (
                 <div
                     className = 'info-password-form'>
                     <Input
-                        accessibilityLabel = { this.props.t('info.addPassword') }
+                        accessibilityLabel = { t('info.addPassword') }
                         autoFocus = { true }
                         id = 'info-password-input'
-                        maxLength = { this.props.passwordNumberOfDigits }
+                        maxLength = { passwordNumberOfDigits }
+                        mode = { passwordNumberOfDigits ? 'numeric' : undefined }
                         onChange = { this._onEnteredPasswordChange }
                         onKeyPress = { this._onKeyPress }
                         placeholder = { placeHolderText }