anastasis-webui: fix telephone input

4 files changed, 34 insertions, 27 deletions

diff --git a/packages/anastasis-webui/src/components/fields/NumberInput.tsx b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
index 2afb242b8..e1489eafa 100644
--- a/packages/anastasis-webui/src/components/fields/NumberInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
@@ -10,7 +10,7 @@ export interface TextInputProps {
   bind: [string, (x: string) => void];
 }
 
-export function NumberInput(props: TextInputProps): VNode {
+export function PhoneNumberInput(props: TextInputProps): VNode {
   const inputRef = useRef<HTMLInputElement>(null);
   useLayoutEffect(() => {
     if (props.grabFocus) {
@@ -18,26 +18,33 @@ export function NumberInput(props: TextInputProps): VNode {
     }
   }, [props.grabFocus]);
   const value = props.bind[0];
-  const [dirty, setDirty] = useState(false)
-  const showError = dirty && props.error
-  return (<div class="field">
-    <label class="label">
-      {props.label}
-      {props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
-        <i class="mdi mdi-information" />
-      </span>}
-    </label>
-    <div class="control has-icons-right">
-      <input
-        value={value}
-        type="number"
-        placeholder={props.placeholder}
-        class={showError ? 'input is-danger' : 'input'}
-        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
-        ref={inputRef}
-        style={{ display: "block" }} />
+  const [dirty, setDirty] = useState(false);
+  const showError = dirty && props.error;
+  return (
+    <div class="field">
+      <label class="label">
+        {props.label}
+        {props.tooltip && (
+          <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
+            <i class="mdi mdi-information" />
+          </span>
+        )}
+      </label>
+      <div class="control has-icons-right">
+        <input
+          value={value}
+          type="tel"
+          placeholder={props.placeholder}
+          class={showError ? "input is-danger" : "input"}
+          onInput={(e) => {
+            setDirty(true);
+            props.bind[1]((e.target as HTMLInputElement).value);
+          }}
+          ref={inputRef}
+          style={{ display: "block" }}
+        />
+      </div>
+      {showError && <p class="help is-danger">{props.error}</p>}
     </div>
-    {showError && <p class="help is-danger">{props.error}</p>}
-  </div>
   );
 }
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index 86a2f08ee..557718458 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -3,7 +3,7 @@ import { isAfter, parse } from "date-fns";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { DateInput } from "../../components/fields/DateInput";
-import { NumberInput } from "../../components/fields/NumberInput";
+import { PhoneNumberInput } from "../../components/fields/NumberInput";
 import { TextInput } from "../../components/fields/TextInput";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame, withProcessLabel } from "./index";
@@ -95,7 +95,7 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
           bind={[props.value, props.setValue]}
         />}
       {props.spec.type === 'number' &&
-        <NumberInput
+        <PhoneNumberInput
           grabFocus={props.isFirst}
           label={props.spec.label}
           error={props.errorMessage}
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index b1ec2856a..398393619 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -1,7 +1,7 @@
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../components/AsyncButton";
-import { NumberInput } from "../../components/fields/NumberInput";
+import { PhoneNumberInput } from "../../components/fields/NumberInput";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AddingProviderScreen } from "./AddingProviderScreen";
 import { AnastasisClientFrame } from "./index";
@@ -152,7 +152,7 @@ function SelectOtherVersionProviderScreen({ providers, provider, version, onConf
               </div>
             </div>
             <div class="container">
-              <NumberInput
+              <PhoneNumberInput
                 label="Version"
                 placeholder="version number to recover"
                 grabFocus
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
index cd8782b0c..9a0459d78 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
@@ -5,7 +5,7 @@ import {
 import { Fragment, h, VNode } from "preact";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { AuthMethodSetupProps } from ".";
-import { NumberInput } from "../../../components/fields/NumberInput";
+import { PhoneNumberInput } from "../../../components/fields/NumberInput";
 import { AnastasisClientFrame } from "../index";
 
 export function AuthMethodSmsSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode {
@@ -33,7 +33,7 @@ export function AuthMethodSmsSetup({ addAuthMethod, cancel, configured }: AuthMe
           receive via SMS.
         </p>
         <div class="container">
-          <NumberInput
+          <PhoneNumberInput
             label="Mobile number"
             placeholder="Your mobile number"
             grabFocus