Client: Confirm: ChangePhone: add input phone, setMobilePhone method

packages/client/src/pages/Confirm/sub-components/changePhone.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-
+import { useNavigate, useLocation } from "react-router-dom";
 import { withTranslation } from "react-i18next";
 import Text from "@docspace/components/text";
-import TextInput from "@docspace/components/text-input";
+import InputPhone from "@docspace/components/input-phone";
 import Button from "@docspace/components/button";
 import { inject, observer } from "mobx-react";
 import { StyledPage, StyledBody, StyledContent } from "./StyledConfirm";
@@ -11,41 +11,44 @@ import FormWrapper from "@docspace/components/form-wrapper";
 import DocspaceLogo from "../../../DocspaceLogo";
 
 const ChangePhoneForm = (props) => {
-  const { t, greetingTitle } = props;
-  const [currentNumber, setCurrentNumber] = useState("+00000000000");
+  const { t, setMobilePhone } = props;
+  const [currentNumber, setCurrentNumber] = useState("");
+  const [phone, setPhone] = useState("");
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const onChange = (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, "");
+    console.log(value);
+    setPhone(value);
+  };
+
+  const onSubmit = async () => {
+    const res = await setMobilePhone(phone);
+    console.log(res);
+  };
 
   return (
     <StyledPage>
       <StyledContent>
         <StyledBody>
           <DocspaceLogo className="docspace-logo" />
-          <Text fontSize="23px" fontWeight="700" className="title">
-            {greetingTitle}
-          </Text>
 
           <FormWrapper>
             <div className="subtitle">
               <Text fontSize="16px" fontWeight="600" className="phone-title">
                 {t("EnterPhone")}
               </Text>
-              <Text>
-                {t("CurrentNumber")}: {currentNumber}
-              </Text>
+              {currentNumber && (
+                <Text>
+                  {t("CurrentNumber")}: {currentNumber}
+                </Text>
+              )}
               <Text>{t("PhoneSubtitle")}</Text>
             </div>
 
-            <TextInput
-              className="phone-input"
-              id="phone"
-              name="phone"
-              type="phone"
-              size="large"
-              scale={true}
-              isAutoFocussed={true}
-              tabIndex={1}
-              hasError={false}
-              guide={false}
-            />
+            <InputPhone className="phone-input" scaled onChange={onChange} />
 
             <Button
               primary
@@ -54,6 +57,7 @@ const ChangePhoneForm = (props) => {
               label={t("GetCode")}
               tabIndex={2}
               isDisabled={false}
+              onClick={onSubmit}
             />
           </FormWrapper>
         </StyledBody>
@@ -62,6 +66,10 @@ const ChangePhoneForm = (props) => {
   );
 };
 
-export default inject(({ auth }) => ({
-  greetingTitle: auth.settingsStore.greetingSettings,
-}))(withTranslation("Confirm")(withLoader(observer(ChangePhoneForm))));
+export default inject(({ auth }) => {
+  const { tfaStore } = auth;
+  const { setMobilePhone } = tfaStore;
+  return {
+    setMobilePhone,
+  };
+})(withTranslation("Confirm")(withLoader(observer(ChangePhoneForm))));