mobile: fix pro user walk through makes app get stuck

Improve error handling when signing up on mobile

apps/mobile/app/components/auth/forgot-password.tsx

@@ -27,7 +27,7 @@ import { useThemeColors } from "@notesnook/theme";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
+import FormInput, { createFormRef, validators } from "../ui/input/form-input";
 import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
@@ -36,21 +36,22 @@ import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const email = useRef<string>(userEmail);
+  const formRef = useRef(
+    createFormRef({
+      email: userEmail || ""
+    })
+  );
   const emailInputRef = useRef<TextInput>(null);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
 
   const sendRecoveryEmail = async () => {
-    if (!email.current || error) {
-      ToastManager.show({
-        heading: strings.emailRequired(),
-        type: "error",
-        context: "local"
-      });
+    if (formRef.current.validateField("email")) {
       return;
     }
+
+    const values = formRef.current.getValues();
+
     setLoading(true);
     try {
       const lastRecoveryEmailTime = SettingsService.get().lastRecoveryEmailTime;
@@ -60,7 +61,7 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
       ) {
         throw new Error(strings.pleaseWaitBeforeSendEmail());
       }
-      await db.user.recoverAccount(email.current.toLowerCase());
+      await db.user.recoverAccount(values.email.toLowerCase());
       SettingsService.set({
         lastRecoveryEmailTime: Date.now()
       });
@@ -75,12 +76,7 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
       setSent(true);
     } catch (e) {
       setLoading(false);
-      ToastManager.show({
-        heading: strings.recoveryEmailFailed(),
-        message: (e as Error).message,
-        type: "error",
-        context: "local"
-      });
+      formRef.current.setError("email", (e as Error).message);
     }
   };
 
@@ -126,22 +122,25 @@ export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
           <DialogHeader title={strings.accountRecovery()} />
           <Seperator />
 
-          <Input
+          <FormInput
+            name="email"
+            formRef={formRef}
             fwdRef={emailInputRef}
-            onChangeText={(value) => {
-              email.current = value;
-            }}
-            defaultValue={email.current}
-            onErrorCheck={(e) => setError(e)}
+            loading={loading}
             returnKeyLabel={strings.next()}
             returnKeyType="next"
             autoComplete="email"
-            validationType="email"
+            keyboardType="email-address"
             autoCorrect={false}
             autoCapitalize="none"
-            errorMessage={strings.emailInvalid()}
             placeholder={strings.email()}
-            onSubmit={() => {}}
+            validators={[
+              validators.required(strings.emailRequired()),
+              validators.email(strings.enterAValidEmailAddress())
+            ]}
+            onSubmitEditing={() => {
+              sendRecoveryEmail();
+            }}
           />
 
           <Button

apps/mobile/app/components/auth/login.tsx

@@ -37,8 +37,9 @@ import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
+import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
-import Input from "../ui/input";
+import FormInput, { validators } from "../ui/input/form-input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
@@ -63,14 +64,13 @@ export const Login = ({
   const {
     step,
     setStep,
-    password,
-    email,
     emailInputRef,
     passwordInputRef,
     loading,
     setLoading,
-    setError,
-    login
+    login,
+    error,
+    formRef
   } = useLogin(async () => {
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
@@ -93,6 +93,11 @@ export const Login = ({
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
+
+  const onContinue = () => {
+    login();
+  };
+
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -198,27 +203,27 @@ export const Login = ({
               gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Input
+            <FormInput
+              name="email"
+              formRef={formRef}
               fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
               testID="input.email"
-              onErrorCheck={(e) => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
               autoComplete="email"
-              validationType="email"
+              keyboardType="email-address"
               marginBottom={0}
               autoCorrect={false}
               autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
               placeholder={strings.email()}
-              defaultValue={email.current}
               editable={step === LoginSteps.emailAuth && !loading}
-              onSubmit={() => {
+              validators={[
+                validators.required(strings.emailRequired()),
+                validators.email(strings.enterAValidEmailAddress())
+              ]}
+              onSubmitEditing={() => {
                 if (step === LoginSteps.emailAuth) {
-                  login();
+                  onContinue();
                 } else {
                   passwordInputRef.current?.focus();
                 }
@@ -227,11 +232,10 @@ export const Login = ({
 
             {step === LoginSteps.passwordAuth && (
               <>
-                <Input
+                <FormInput
+                  name="password"
+                  formRef={formRef}
                   fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
                   testID="input.password"
                   returnKeyLabel={strings.done()}
                   returnKeyType="done"
@@ -242,9 +246,9 @@ export const Login = ({
                   placeholder={strings.password()}
                   marginBottom={0}
                   editable={!loading}
-                  defaultValue={password.current}
-                  onSubmit={() => {
-                    login();
+                  validators={[validators.required(strings.passwordRequired())]}
+                  onSubmitEditing={() => {
+                    onContinue();
                   }}
                 />
                 <Button
@@ -255,9 +259,13 @@ export const Login = ({
                     paddingHorizontal: 0
                   }}
                   onPress={() => {
-                    if (loading || !email.current) return;
+                    if (loading) return;
                     presentSheet({
-                      component: <ForgotPassword userEmail={email.current} />
+                      component: (
+                        <ForgotPassword
+                          userEmail={formRef.current.getValue("email")}
+                        />
+                      )
                     });
                   }}
                   textStyle={{
@@ -273,8 +281,7 @@ export const Login = ({
               <Button
                 loading={loading}
                 onPress={() => {
-                  if (loading) return;
-                  login();
+                  onContinue();
                 }}
                 style={{
                   width: "100%"
@@ -328,6 +335,25 @@ export const Login = ({
                   </Paragraph>
                 </TouchableOpacity>
               ) : null}
+
+              {error ? (
+                <Paragraph
+                  numberOfLines={4}
+                  onPress={() => {}}
+                  color={colors.error.accent}
+                  style={{
+                    textAlign: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL
+                  }}
+                >
+                  <AppIcon
+                    color={colors.error.accent}
+                    name="alert-circle-outline"
+                    size={AppFontSize.sm - 1}
+                  />{" "}
+                  {error.message}
+                </Paragraph>
+              ) : null}
             </View>
           </View>
         </View>

apps/mobile/app/components/auth/session-expired.tsx

@@ -43,29 +43,26 @@ import SheetProvider from "../sheet-provider";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
-import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
 import { getObfuscatedEmail } from "../../utils/functions";
 import { DefaultAppStyles } from "../../utils/styles";
+import FormInput, { validators } from "../ui/input/form-input";
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
-  const { step, password, email, passwordInputRef, loading, login } = useLogin(
-    () => {
-      eSendEvent(eUserLoggedIn, true);
-      setVisible(false);
-      setFocused(false);
-      useUserStore.setState({
-        disableAppLockRequests: false
-      });
-    },
-    true
-  );
+  const { step, passwordInputRef, loading, login, formRef } = useLogin(() => {
+    eSendEvent(eUserLoggedIn, true);
+    setVisible(false);
+    setFocused(false);
+    useUserStore.setState({
+      disableAppLockRequests: false
+    });
+  }, true);
 
   const logout = async () => {
     try {
@@ -104,7 +101,7 @@ export const SessionExpired = () => {
         if (!complete) {
           const user = await db.user.getUser();
           if (!user) return;
-          email.current = user.email;
+          formRef.current.setValue("email", user.email);
           setVisible(true);
           setFocused(false);
           return;
@@ -117,14 +114,14 @@ export const SessionExpired = () => {
     } catch (e) {
       const user = await db.user.getUser();
       if (!user) return;
-      email.current = user.email;
+      formRef.current.setValue("email", user.email);
       setFocused(false);
       setVisible(true);
       useUserStore.setState({
         disableAppLockRequests: true
       });
     }
-  }, [email]);
+  }, [formRef]);
 
   useEffect(() => {
     const sub = eSubscribeEvent(eLoginSessionExpired, open);
@@ -155,6 +152,7 @@ export const SessionExpired = () => {
         enableSheetKeyboardHandler={true}
         visible={true}
       >
+        <Dialog context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
@@ -192,17 +190,17 @@ export const SessionExpired = () => {
               }}
             >
               {strings.sessionExpiredDesc(
-                getObfuscatedEmail(email.current as string)
+                getObfuscatedEmail(formRef.current.getValue("email") as string)
               )}
             </Paragraph>
           </View>
 
           {step === LoginSteps.passwordAuth ? (
-            <Input
+            <FormInput
               fwdRef={passwordInputRef}
-              onChangeText={(value) => {
-                password.current = value;
-              }}
+              formRef={formRef}
+              name="password"
+              validators={[validators.required(strings.passwordRequired())]}
               returnKeyLabel={strings.done()}
               returnKeyType="next"
               secureTextEntry
@@ -210,7 +208,7 @@ export const SessionExpired = () => {
               autoCapitalize="none"
               autoCorrect={false}
               placeholder={strings.password()}
-              onSubmit={() => {
+              onSubmitEditing={() => {
                 login();
               }}
             />

apps/mobile/app/components/auth/signup.tsx

@@ -30,7 +30,6 @@ import {
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
-import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
@@ -39,13 +38,14 @@ import { AppFontSize } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import { Loading } from "../loading";
 import { Button } from "../ui/button";
-import Input from "../ui/input";
+import FormInput, { createFormRef, validators } from "../ui/input/form-input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AuthHeader } from "./header";
 import { SignupContext } from "./signup-context";
 import { RouteParams } from "../../stores/use-navigation-store";
 import SettingsService from "../../services/settings";
+import AppIcon from "../ui/AppIcon";
 
 const SignupSteps = {
   signup: 0,
@@ -62,13 +62,17 @@ export const Signup = ({
 }) => {
   const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
   const { colors } = useThemeColors();
-  const email = useRef<string>(undefined);
+  const formRef = useRef(
+    createFormRef({
+      email: "",
+      password: "",
+      confirmPassword: ""
+    })
+  );
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
-  const password = useRef<string>(undefined);
   const confirmPasswordInputRef = useRef<TextInput>(null);
-  const confirmPassword = useRef<string>(undefined);
-  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>();
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
@@ -76,29 +80,17 @@ export const Signup = ({
   const isTablet = width > 600;
   const route = useRoute<RouteProp<RouteParams, "Auth">>();
 
-  const validateInfo = () => {
-    if (!password.current || !email.current || !confirmPassword.current) {
-      ToastManager.show({
-        heading: strings.allFieldsRequired(),
-        message: strings.allFieldsRequiredDesc(),
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
-
   const signup = async () => {
-    if (!validateInfo() || error) return;
+    setErrorMessage(undefined);
+    if (!formRef.current.validate()) return;
     if (loading) return;
 
+    const values = formRef.current.getValues();
+
     setLoading(true);
     try {
       setCurrentStep(SignupSteps.createAccount);
-      await db.user.signup(email.current!.toLowerCase(), password.current!);
+      await db.user.signup(values.email.toLowerCase(), values.password);
       const user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
@@ -115,12 +107,14 @@ export const Signup = ({
     } catch (e) {
       setCurrentStep(SignupSteps.signup);
       setLoading(false);
-      ToastManager.show({
-        heading: strings.signupFailed(),
-        message: (e as Error).message,
-        type: "error",
-        context: "local"
-      });
+      if (
+        (e as Error).message === "Unable to create an account on this email."
+      ) {
+        formRef.current.setError("email", (e as Error).message);
+      } else {
+        setErrorMessage((e as Error).message);
+      }
+
       return false;
     }
   };
@@ -215,37 +209,35 @@ export const Signup = ({
                   alignSelf: "center"
                 }}
               >
-                <Input
+                <FormInput
+                  name="email"
+                  formRef={formRef}
                   fwdRef={emailInputRef}
-                  onChangeText={(value) => {
-                    email.current = value;
-                  }}
-                  defaultValue={email.current}
+                  loading={loading}
                   testID="input.email"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   autoComplete="email"
-                  validationType="email"
+                  keyboardType="email-address"
                   autoCorrect={false}
                   autoCapitalize="none"
-                  errorMessage={strings.emailInvalid()}
                   placeholder={strings.email()}
                   blurOnSubmit={false}
-                  onSubmit={() => {
-                    if (!email.current) return;
+                  validators={[
+                    validators.required(strings.emailRequired()),
+                    validators.email(strings.enterAValidEmailAddress())
+                  ]}
+                  onSubmitEditing={() => {
                     passwordInputRef.current?.focus();
                   }}
                 />
 
-                <Input
+                <FormInput
+                  name="password"
+                  formRef={formRef}
                   fwdRef={passwordInputRef}
-                  onChangeText={(value) => {
-                    password.current = value;
-                  }}
-                  defaultValue={password.current}
+                  loading={loading}
                   testID="input.password"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   secureTextEntry
@@ -254,20 +246,18 @@ export const Signup = ({
                   blurOnSubmit={false}
                   autoCorrect={false}
                   placeholder={strings.password()}
-                  onSubmit={() => {
-                    if (!password.current) return;
+                  validators={[validators.required(strings.passwordRequired())]}
+                  onSubmitEditing={() => {
                     confirmPasswordInputRef.current?.focus();
                   }}
                 />
 
-                <Input
+                <FormInput
+                  name="confirmPassword"
+                  formRef={formRef}
                   fwdRef={confirmPasswordInputRef}
-                  onChangeText={(value) => {
-                    confirmPassword.current = value;
-                  }}
-                  defaultValue={confirmPassword.current}
+                  loading={loading}
                   testID="input.confirmPassword"
-                  onErrorCheck={(e) => setError(e)}
                   returnKeyLabel="Signup"
                   returnKeyType="done"
                   secureTextEntry
@@ -275,17 +265,22 @@ export const Signup = ({
                   autoCapitalize="none"
                   autoCorrect={false}
                   blurOnSubmit={false}
-                  validationType="confirmPassword"
-                  customValidator={() => password.current || ""}
                   placeholder={strings.confirmPassword()}
                   marginBottom={12}
-                  onSubmit={() => {
+                  validators={[
+                    validators.required(strings.confirmPasswordRequired()),
+                    validators.matchField(
+                      "password",
+                      strings.passwordNotMatched()
+                    )
+                  ]}
+                  onSubmitEditing={() => {
                     signup();
                   }}
                 />
 
                 <Button
-                  title={!loading ? "Continue" : null}
+                  title={!loading ? strings.continue() : null}
                   type="accent"
                   loading={loading}
                   onPress={() => {
@@ -319,6 +314,25 @@ export const Signup = ({
                     </Paragraph>
                   </Paragraph>
                 </TouchableOpacity>
+
+                {errorMessage ? (
+                  <Paragraph
+                    numberOfLines={4}
+                    onPress={() => {}}
+                    color={colors.error.accent}
+                    style={{
+                      textAlign: "center",
+                      marginTop: DefaultAppStyles.GAP_VERTICAL
+                    }}
+                  >
+                    <AppIcon
+                      color={colors.error.accent}
+                      name="alert-circle-outline"
+                      size={AppFontSize.sm - 1}
+                    />{" "}
+                    {errorMessage}
+                  </Paragraph>
+                ) : null}
               </View>
 
               <View

apps/mobile/app/components/auth/use-login.ts

@@ -28,6 +28,7 @@ import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
+import { createFormRef } from "../ui/input/form-input";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -39,45 +40,33 @@ export const useLogin = (
   onFinishLogin?: () => void,
   sessionExpired = false
 ) => {
-  const [error, setError] = useState(false);
+  const [error, setError] = useState<Error>();
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
-  const email = useRef<string>(undefined);
-  const password = useRef<string>(undefined);
   const emailInputRef = useRef<TextInput>(null);
   const passwordInputRef = useRef<TextInput>(null);
-
-  const validateInfo = () => {
-    if (
-      (!password.current && step === LoginSteps.passwordAuth) ||
-      (!email.current && step === LoginSteps.emailAuth)
-    ) {
-      ToastManager.show({
-        heading: strings.allFieldsRequired(),
-        message: strings.allFieldsRequiredDesc(),
-        type: "error",
-        context: "local"
-      });
-
-      return false;
-    }
-
-    return true;
-  };
+  const formRef = useRef(
+    createFormRef({
+      email: "",
+      password: ""
+    })
+  );
 
   const login = async () => {
-    if (!validateInfo() || error) return;
     try {
       if (loading) return;
+      setError(undefined);
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
-          if (!email.current) {
+          if (formRef.current.validateField("email")) {
             setLoading(false);
             return;
           }
-          const mfaInfo = await db.user.authenticateEmail(email.current);
+          const mfaInfo = await db.user.authenticateEmail(
+            formRef.current.getValue("email")
+          );
 
           if (mfaInfo) {
             TwoFactorVerification.present(
@@ -122,13 +111,14 @@ export const useLogin = (
           break;
         }
         case LoginSteps.passwordAuth: {
-          if (!email.current || !password.current) {
+          if (!formRef.current.validate()) {
             setLoading(false);
             return;
           }
+          const values = formRef.current.getValues();
           await db.user.authenticatePassword(
-            email.current,
-            password.current,
+            values.email,
+            values.password,
             undefined,
             sessionExpired
           );
@@ -145,12 +135,11 @@ export const useLogin = (
   const finishWithError = async (e: Error) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
-    ToastManager.show({
-      heading: strings.loginFailed(),
-      message: e.message,
-      type: "error",
-      context: "local"
-    });
+    if (e.message === "Password is incorrect.") {
+      formRef.current.setError("password", e.message);
+    } else {
+      setError(e);
+    }
   };
 
   const finishLogin = async () => {
@@ -177,13 +166,12 @@ export const useLogin = (
     login,
     step,
     setStep,
-    email,
-    password,
     passwordInputRef,
     emailInputRef,
     loading,
     setLoading,
     error,
-    setError
+    setError,
+    formRef
   };
 };

apps/mobile/app/components/dialog/functions.ts

@@ -17,10 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { KeyboardTypeOptions } from "react-native";
+import { KeyboardTypeOptions, TextInput } from "react-native";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { ButtonProps } from "../ui/button";
+import { FieldValidator, FormRef } from "../ui/input/form-input";
+import { RefObject } from "react";
 
 export type DialogInfo = {
   title?: string;
@@ -43,6 +45,18 @@ export type DialogInfo = {
     | "errorShade";
   icon?: string;
   paragraphColor: string;
+  form?: {
+    formRef: FormRef;
+    items: {
+      name: string;
+      placeholder: string;
+      label?: string;
+      validators: FieldValidator[];
+      defaultValue?: string;
+      ref: RefObject<TextInput | null>;
+    }[];
+    onFormSubmit?: (form: FormRef) => Promise<boolean>;
+  };
   input: boolean;
   inputPlaceholder: string;
   defaultValue: string;

apps/mobile/app/components/dialog/index.tsx

@@ -18,7 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { useThemeColors } from "@notesnook/theme";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  RefObject
+} from "react";
 import { TextInput, View, ViewStyle } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
@@ -34,6 +40,7 @@ import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
+import { FormInput, type FormRef } from "../ui/input/form-input";
 import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
@@ -53,9 +60,34 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   });
   const inputRef = useRef<TextInput>(null);
   const [dialogInfo, setDialogInfo] = useState<DialogInfo>();
+  const formRef = useRef(dialogInfo?.form?.formRef);
+  formRef.current = dialogInfo?.form?.formRef;
 
   const onPressPositive = async () => {
-    if (dialogInfo?.positivePress) {
+    // Handle form submission if form is available
+    if (dialogInfo?.form && formRef.current) {
+      inputRef.current?.blur();
+      setLoading(true);
+      try {
+        const isValid = await formRef.current.validate();
+        if (!isValid) {
+          setLoading(false);
+          return;
+        }
+
+        if (dialogInfo.form.onFormSubmit) {
+          const result = await dialogInfo.form.onFormSubmit(formRef.current);
+          if (result === false) {
+            setLoading(false);
+            return;
+          }
+        }
+      } catch (e) {
+        /** Empty */
+      }
+      setLoading(false);
+    } else if (dialogInfo?.positivePress) {
+      // Handle old input-based submission
       inputRef.current?.blur();
       setLoading(true);
       let result = false;
@@ -76,6 +108,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
     setChecked(false);
     values.current.inputValue = undefined;
+    formRef.current = undefined;
     setVisible(false);
   };
 
@@ -85,6 +118,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
       if (data.context !== context) return;
       setDialogInfo(data);
       setChecked(data.check?.defaultValue);
+      formRef.current = data?.form?.formRef;
       values.current.inputValue = data.defaultValue;
       setVisible(true);
     },
@@ -94,6 +128,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
   const hide = React.useCallback(() => {
     setChecked(false);
     values.current.inputValue = undefined;
+    formRef.current = undefined;
     setVisible(false);
     setDialogInfo(undefined);
     dialogInfo?.onClose?.();
@@ -134,19 +169,30 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           ? false
           : dialogInfo.statusBarTranslucent
       }
-      bounce={!dialogInfo.input}
+      bounce={!dialogInfo.input && !dialogInfo.form}
       closeOnTouch={!dialogInfo.disableBackdropClosing}
       background={dialogInfo.background}
       transparent={
         dialogInfo.transparent === undefined ? true : dialogInfo.transparent
       }
       onShow={async () => {
-        if (dialogInfo.input) {
+        if (dialogInfo.input && !dialogInfo.form) {
           inputRef.current?.setNativeProps({
             text: dialogInfo.defaultValue
           });
           await sleep(300);
           inputRef.current?.focus();
+        } else if (dialogInfo.form) {
+          const items = dialogInfo.form?.items;
+          const firstItem = items[0];
+          for (const item of items) {
+            if (item.defaultValue) {
+              item.ref.current?.setNativeProps({
+                text: dialogInfo.defaultValue
+              });
+            }
+          }
+          firstItem?.ref?.current?.focus();
         }
       }}
       visible={true}
@@ -170,7 +216,36 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
           />
           <Seperator half />
 
-          {dialogInfo.input ? (
+          {dialogInfo.form ? (
+            <View
+              style={{
+                paddingHorizontal: DefaultAppStyles.GAP,
+                gap: DefaultAppStyles.GAP / 2
+              }}
+            >
+              {dialogInfo.form.items.map((item, index) => (
+                <FormInput
+                  key={item.name}
+                  fwdRef={item.ref}
+                  name={item.name}
+                  autoFocus={index === 0}
+                  placeholder={item.placeholder}
+                  formRef={formRef as RefObject<FormRef>}
+                  validators={item.validators}
+                  defaultValue={item.defaultValue}
+                  secureTextEntry={dialogInfo.secureTextEntry}
+                  onSubmitEditing={() => {
+                    const nextItem = dialogInfo?.form?.items?.[index + 1];
+                    if (nextItem) {
+                      nextItem?.ref.current?.focus();
+                    } else {
+                      onPressPositive();
+                    }
+                  }}
+                />
+              ))}
+            </View>
+          ) : dialogInfo.input ? (
             <View
               style={{
                 paddingHorizontal: DefaultAppStyles.GAP
@@ -184,7 +259,7 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
                 }}
                 testID="input-value"
                 secureTextEntry={dialogInfo.secureTextEntry}
-                //defaultValue={dialogInfo.defaultValue}
+                defaultValue={dialogInfo.defaultValue}
                 onSubmit={() => {
                   onPressPositive();
                 }}
@@ -237,7 +312,10 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {
 
           <DialogButtons
             onPressNegative={onNegativePress}
-            onPressPositive={dialogInfo.positivePress && onPressPositive}
+            onPressPositive={
+              (dialogInfo.positivePress || dialogInfo.form?.onFormSubmit) &&
+              onPressPositive
+            }
             loading={loading}
             positiveTitle={dialogInfo.positiveText}
             negativeTitle={dialogInfo.negativeText}

apps/mobile/app/components/list-items/headers/section-header.tsx

@@ -69,8 +69,6 @@ export const SectionHeader = React.memo<
       dataType as "note" | "notebook" | "searchResult"
     );
 
-    console.log(item);
-
     return (
       <View
         style={{

apps/mobile/app/components/list/list-item.wrapper.tsx

@@ -323,7 +323,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
 }
 
 function getDate(item: Notebook | Note, groupType?: GroupingKey): number {
-  console.log(groupType);
   return (
     getSortValue(
       groupType

apps/mobile/app/components/ui/input/form-input.tsx

@@ -0,0 +1,408 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React, { RefObject, useEffect, useMemo, useState } from "react";
+import {
+  ColorValue,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+  ViewStyle
+} from "react-native";
+import isEmail from "validator/lib/isEmail";
+import isURL from "validator/lib/isURL";
+import { useThemeColors } from "@notesnook/theme";
+import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { IconButton } from "../icon-button";
+import Paragraph from "../typography/paragraph";
+import AppIcon from "../AppIcon";
+
+export type FormValues = Record<string, string>;
+export type FormErrors = Partial<Record<string, string>>;
+export type FieldValidator = (
+  value: string,
+  values: FormValues
+) => string | undefined;
+export type ValidationSchema = Partial<Record<string, FieldValidator[]>>;
+
+export interface FormRef {
+  values: FormValues;
+  errors: FormErrors;
+  setValue: (name: string, value: string) => void;
+  getValue: (name: string) => string;
+  getValues: () => FormValues;
+  setError: (name: string, error?: string) => void;
+  getError: (name: string) => string | undefined;
+  clearErrors: () => void;
+  registerField: (name: string, validators?: FieldValidator[]) => void;
+  unregisterField: (name: string) => void;
+  validateField: (name: string) => string | undefined;
+  validate: () => boolean;
+  subscribe: (listener: () => void) => () => void;
+}
+
+export function createFormRef(initialValues: FormValues = {}): FormRef {
+  const listeners = new Set<() => void>();
+  const values: FormValues = { ...initialValues };
+  const errors: FormErrors = {};
+  const schema: ValidationSchema = {};
+
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
+
+  return {
+    values,
+    errors,
+    setValue(name, value) {
+      values[name] = value;
+      if (errors[name]) {
+        delete errors[name];
+        notify();
+      }
+    },
+    getValue(name) {
+      return values[name] ?? "";
+    },
+    getValues() {
+      return { ...values };
+    },
+    setError(name, error) {
+      if (!error) {
+        delete errors[name];
+      } else {
+        errors[name] = error;
+      }
+      notify();
+    },
+    getError(name) {
+      return errors[name];
+    },
+    clearErrors() {
+      Object.keys(errors).forEach((key) => delete errors[key]);
+      notify();
+    },
+    registerField(name, validators = []) {
+      schema[name] = validators;
+      if (values[name] === undefined) values[name] = "";
+    },
+    unregisterField(name) {
+      delete schema[name];
+      delete errors[name];
+      notify();
+    },
+    validateField(name) {
+      const fieldValidators = schema[name] || [];
+      const value = values[name] ?? "";
+      for (const validator of fieldValidators) {
+        const error = validator(value, values);
+        if (error) {
+          errors[name] = error;
+          notify();
+          return error;
+        }
+      }
+      delete errors[name];
+      notify();
+      return undefined;
+    },
+    validate() {
+      const nextErrors = validateForm(values, schema);
+      Object.keys(errors).forEach((key) => delete errors[key]);
+      Object.keys(nextErrors).forEach((key) => {
+        errors[key] = nextErrors[key];
+      });
+      notify();
+      return !hasFormErrors(nextErrors);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+export function validateForm(
+  values: FormValues,
+  schema: ValidationSchema
+): FormErrors {
+  const errors: FormErrors = {};
+
+  Object.keys(schema).forEach((field) => {
+    const fieldValidators = schema[field] || [];
+    const value = values[field] ?? "";
+    for (const validator of fieldValidators) {
+      const error = validator(value, values);
+      if (error) {
+        errors[field] = error;
+        break;
+      }
+    }
+  });
+
+  return errors;
+}
+
+export function hasFormErrors(errors: FormErrors) {
+  return Object.keys(errors).length > 0;
+}
+
+export const validators = {
+  required:
+    (message = "This field is required") =>
+    (value: string) =>
+      value?.trim() ? undefined : message,
+
+  email:
+    (message = "Please enter a valid email") =>
+    (value: string) =>
+      !value?.trim() || isEmail(value.trim()) ? undefined : message,
+
+  minLength: (length: number, message?: string) => (value: string) =>
+    !value || value.length >= length
+      ? undefined
+      : message || `Must be at least ${length} characters`,
+
+  url:
+    (message = "Please enter a valid URL") =>
+    (value: string) =>
+      !value?.trim() || isURL(value.trim(), { allow_underscores: true })
+        ? undefined
+        : message,
+
+  matchField:
+    (fieldName: string, message = "Values do not match") =>
+    (value: string, values: FormValues) =>
+      value === values[fieldName] ? undefined : message
+};
+
+interface FormInputProps extends TextInputProps {
+  name: string;
+  formRef: RefObject<FormRef>;
+  validators?: FieldValidator[];
+  fwdRef?: RefObject<TextInput | null>;
+  loading?: boolean;
+  error?: string;
+  customColor?: ColorValue;
+  marginBottom?: number;
+  marginRight?: number;
+  button?: {
+    icon: string;
+    color: ColorValue;
+    onPress: () => void;
+    testID?: string;
+    size?: number;
+  };
+  buttons?: React.ReactNode;
+  buttonLeft?: React.ReactNode;
+  height?: number;
+  fontSize?: number;
+  inputStyle?: TextInputProps["style"];
+  containerStyle?: ViewStyle;
+  wrapperStyle?: ViewStyle;
+}
+
+export function FormInput({
+  name,
+  formRef,
+  validators: fieldValidators = [],
+  fwdRef,
+  loading,
+  error,
+  secureTextEntry,
+  customColor,
+  marginBottom = 10,
+  marginRight,
+  button,
+  buttonLeft,
+  buttons,
+  height = 45,
+  fontSize = AppFontSize.sm,
+  inputStyle = {},
+  containerStyle = {},
+  wrapperStyle = {},
+  onFocus,
+  onBlur,
+  onPress,
+  onChangeText,
+  ...restProps
+}: FormInputProps) {
+  const { colors, isDark } = useThemeColors();
+  const [focused, setFocused] = useState(false);
+  const [secureEntry, setSecureEntry] = useState(true);
+  const [, setVersion] = useState(0);
+
+  useEffect(() => {
+    const form = formRef.current;
+    form.registerField(name, fieldValidators);
+    const unsubscribe = form.subscribe(() => {
+      setVersion((v) => v + 1);
+    });
+
+    return () => {
+      unsubscribe();
+      form.unregisterField(name);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [formRef, name]);
+
+  const value = formRef.current.getValue(name);
+  const fieldError = error || formRef.current.getError(name);
+
+  const borderColor = useMemo(() => {
+    if (fieldError) return colors.error.accent;
+    if (focused) return customColor || colors.selected.border;
+    return colors.primary.border;
+  }, [colors, customColor, fieldError, focused]);
+
+  const style: ViewStyle = {
+    borderWidth: 1,
+    borderRadius: defaultBorderRadius,
+    borderColor,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: DefaultAppStyles.GAP,
+    ...containerStyle
+  };
+
+  const textStyle: TextInputProps["style"] = {
+    paddingHorizontal: 0,
+    fontSize,
+    color:
+      onPress && loading ? colors.primary.accent : colors.primary.paragraph,
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingBottom: DefaultAppStyles.GAP_VERTICAL,
+    paddingTop: DefaultAppStyles.GAP_VERTICAL,
+    fontFamily: "Inter-Regular",
+    ...(inputStyle as ViewStyle)
+  };
+
+  const handleChangeText = (nextValue: string) => {
+    formRef.current.setValue(name, nextValue);
+    onChangeText?.(nextValue);
+  };
+
+  return (
+    <View
+      importantForAccessibility="yes"
+      style={{
+        marginBottom,
+        marginRight,
+        ...wrapperStyle
+      }}
+    >
+      <TouchableOpacity
+        disabled={!loading}
+        onPress={onPress}
+        activeOpacity={1}
+        style={style}
+      >
+        {buttonLeft}
+
+        <TextInput
+          {...restProps}
+          defaultValue={value}
+          ref={fwdRef}
+          editable={!loading && restProps.editable !== false}
+          onChangeText={handleChangeText}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+          keyboardAppearance={isDark ? "dark" : "light"}
+          style={textStyle}
+          secureTextEntry={secureTextEntry && secureEntry}
+          placeholderTextColor={colors.primary.placeholder}
+        />
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "center",
+            height: 35 > height ? height : 35,
+            alignItems: "center"
+          }}
+        >
+          {secureTextEntry && (
+            <IconButton
+              name="eye"
+              size={20}
+              top={10}
+              bottom={10}
+              onPress={() => {
+                fwdRef?.current?.blur();
+                setSecureEntry(!secureEntry);
+              }}
+              style={{
+                width: 25,
+                marginLeft: 5
+              }}
+              color={
+                secureEntry ? colors.secondary.icon : colors.primary.accent
+              }
+            />
+          )}
+
+          {buttons}
+
+          {button && (
+            <IconButton
+              testID={button.testID}
+              name={button.icon}
+              size={button.size || AppFontSize.xl}
+              top={10}
+              bottom={10}
+              onPress={button.onPress}
+              color={button.color}
+              style={{
+                marginRight: -8
+              }}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+
+      {fieldError ? (
+        <Paragraph
+          size={AppFontSize.xs}
+          style={{ marginTop: 5, color: colors.error.icon }}
+        >
+          <AppIcon
+            color={colors.error.accent}
+            name="alert-circle-outline"
+            size={AppFontSize.sm - 1}
+          />{" "}
+          {fieldError}
+        </Paragraph>
+      ) : null}
+    </View>
+  );
+}
+
+export default FormInput;

apps/mobile/app/components/ui/input/index.tsx

@@ -121,8 +121,8 @@ const Input = ({
   const color = error
     ? colors.error.border
     : focus
-    ? customColor || colors.selected.border
-    : colors.primary.border;
+      ? customColor || colors.selected.border
+      : colors.primary.border;
 
   const validate = async (value: string) => {
     if (!validationType) return;

apps/mobile/app/hooks/use-app-events.tsx

@@ -95,6 +95,7 @@ import { BETA } from "../utils/constants";
 import {
   eAfterSync,
   eCloseSheet,
+  eCloseSimpleDialog,
   eEditorReset,
   eLoginSessionExpired,
   eOnLoadNote,
@@ -286,7 +287,10 @@ const onUserSubscriptionStatusChanged = async (
         subscription: subscription
       }
     });
-    Walkthrough.present("prouser", false, true);
+    eSendEvent(eCloseSimpleDialog);
+    setTimeout(() => {
+      Walkthrough.present("prouser", false, true);
+    }, 500);
   }
   await PremiumService.setPremiumStatus();
   useMessageStore.getState().setAnnouncement();

apps/mobile/app/screens/settings/settings-data.tsx

@@ -31,9 +31,10 @@ import dayjs from "dayjs";
 import React from "react";
 import { Appearance, Linking, Platform } from "react-native";
 import { getVersion } from "react-native-device-info";
+import { TextInput } from "react-native-gesture-handler";
 import * as RNIap from "react-native-iap";
-import ScreenGuardModule from "react-native-screenguard";
 import { DatabaseLogger, db } from "../../common/database";
+import { MMKV } from "../../common/database/mmkv";
 import filesystem from "../../common/filesystem";
 import { presentDialog } from "../../components/dialog/functions";
 import { AppLockPassword } from "../../components/dialogs/applock-password";
@@ -42,43 +43,45 @@ import ExportNotesSheet from "../../components/sheets/export-notes";
 import { Issue } from "../../components/sheets/github/issue";
 import { Progress } from "../../components/sheets/progress";
 import { Update } from "../../components/sheets/update";
+import {
+  createFormRef,
+  validators
+} from "../../components/ui/input/form-input";
 import { VaultStatusType, useVaultStatus } from "../../hooks/use-vault-status";
 import { BackgroundSync } from "../../services/background-sync";
 import BackupService from "../../services/backup";
 import BiometricService from "../../services/biometrics";
 import {
   ToastManager,
+  VaultRequestType,
   eSendEvent,
   eSubscribeEvent,
   openVault,
-  presentSheet,
-  VaultRequestType
+  presentSheet
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Notifications from "../../services/notifications";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
+import { clearAllStores } from "../../stores";
+import { refreshAllStores } from "../../stores/create-db-collection-store";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
+import { EDITOR_LINE_HEIGHT } from "../../utils/constants";
 import {
   eAfterSync,
   eCloseSheet,
   eOpenRecoveryKeyDialog
 } from "../../utils/events";
-import { NotesnookModule } from "../../utils/notesnook-module";
 import { sleep } from "../../utils/time";
+import { resetTabStore } from "../editor/tiptap/use-tab-store";
 import { MFARecoveryCodes, MFASheet } from "./2fa";
 import { useDragState } from "./editor/state";
 import { verifyUser, verifyUserWithApplock } from "./functions";
 import { logoutUser } from "./logout";
 import { SettingSection } from "./types";
 import { getTimeLeft } from "./user-section";
-import { EDITOR_LINE_HEIGHT } from "../../utils/constants";
-import { MMKV } from "../../common/database/mmkv";
-import { resetTabStore } from "../editor/tiptap/use-tab-store";
-import { clearAllStores } from "../../stores";
-import { refreshAllStores } from "../../stores/create-db-collection-store";
 
 export const settingsGroups: SettingSection[] = [
   {
@@ -234,18 +237,29 @@ export const settingsGroups: SettingSection[] = [
           presentDialog({
             title: strings.redeemGiftCode(),
             paragraph: strings.redeemGiftCodeDesc(),
-            input: true,
-            inputPlaceholder: strings.code(),
-            positiveText: strings.redeem(),
-            positivePress: async (value) => {
-              db.subscriptions.redeemCode(value).catch((e) => {
-                ToastManager.show({
-                  heading: "Error redeeming code",
-                  message: (e as Error).message,
-                  type: "error"
-                });
-              });
-            }
+            form: {
+              formRef: createFormRef({
+                code: ""
+              }),
+              items: [
+                {
+                  name: "code",
+                  placeholder: strings.code(),
+                  ref: React.createRef<TextInput | null>(),
+                  validators: [validators.required(strings.giftCodeRequired())]
+                }
+              ],
+              onFormSubmit: async (form) => {
+                try {
+                  await db.subscriptions.redeemCode(form.getValue("code"));
+                  return true;
+                } catch (e) {
+                  form.setError("code", (e as Error).message);
+                  return false;
+                }
+              }
+            },
+            positiveText: strings.redeem()
           });
         }
       },

apps/mobile/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.3.20",
+  "version": "3.3.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/mobile",
-      "version": "3.3.20",
+      "version": "3.3.22",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {

packages/intl/locale/en.po

@@ -1770,6 +1770,10 @@ msgstr "Confirm new password"
 msgid "Confirm password"
 msgstr "Confirm password"
 
+#: src/strings.ts:2661
+msgid "Confirm password required"
+msgstr "Confirm password required"
+
 #: src/strings.ts:1487
 msgid "Confirm pin"
 msgstr "Confirm pin"
@@ -3097,6 +3101,10 @@ msgstr "Getting information"
 msgid "Getting recovery codes"
 msgstr "Getting recovery codes"
 
+#: src/strings.ts:2663
+msgid "Gift code required"
+msgstr "Gift code required"
+
 #: src/strings.ts:2172
 msgid "GNU GENERAL PUBLIC LICENSE Version 3"
 msgstr "GNU GENERAL PUBLIC LICENSE Version 3"
@@ -4540,6 +4548,10 @@ msgstr "Password not entered"
 msgid "Password protection"
 msgstr "Password protection"
 
+#: src/strings.ts:2660
+msgid "Password required"
+msgstr "Password required"
+
 #: src/strings.ts:809
 msgid "Password updated"
 msgstr "Password updated"
@@ -4647,6 +4659,7 @@ msgid "Please enable automatic backups to avoid losing important data."
 msgstr "Please enable automatic backups to avoid losing important data."
 
 #: src/strings.ts:1512
+#: src/strings.ts:2662
 msgid "Please enter a valid email address"
 msgstr "Please enter a valid email address"
 
@@ -7662,8 +7675,8 @@ msgid "Your support request has been forwarded"
 msgstr "Your support request has been forwarded"
 
 #: src/strings.ts:2062
-msgid "Your support request has been forwarded to our support team. We will get back to you via email at {email}. If this email is not reachable or incorrect, please send us an email directly at support@notesnook.com."
-msgstr "Your support request has been forwarded to our support team. We will get back to you via email at {email}. If this email is not reachable or incorrect, please send us an email directly at support@notesnook.com."
+msgid "Your support request has been forwarded to our support team. We will get back to you via email as soon as possible. If you don't receive an email from us within 24-48 hours, please send us an email directly at support@notesnook.com."
+msgstr "Your support request has been forwarded to our support team. We will get back to you via email as soon as possible. If you don't receive an email from us within 24-48 hours, please send us an email directly at support@notesnook.com."
 
 #: src/strings.ts:956
 msgid "Your tags"

packages/intl/locale/pseudo-LOCALE.po

@@ -1759,6 +1759,10 @@ msgstr ""
 msgid "Confirm password"
 msgstr ""
 
+#: src/strings.ts:2661
+msgid "Confirm password required"
+msgstr ""
+
 #: src/strings.ts:1487
 msgid "Confirm pin"
 msgstr ""
@@ -3079,6 +3083,10 @@ msgstr ""
 msgid "Getting recovery codes"
 msgstr ""
 
+#: src/strings.ts:2663
+msgid "Gift code required"
+msgstr ""
+
 #: src/strings.ts:2172
 msgid "GNU GENERAL PUBLIC LICENSE Version 3"
 msgstr ""
@@ -4514,6 +4522,10 @@ msgstr ""
 msgid "Password protection"
 msgstr ""
 
+#: src/strings.ts:2660
+msgid "Password required"
+msgstr ""
+
 #: src/strings.ts:809
 msgid "Password updated"
 msgstr ""
@@ -4621,6 +4633,7 @@ msgid "Please enable automatic backups to avoid losing important data."
 msgstr ""
 
 #: src/strings.ts:1512
+#: src/strings.ts:2662
 msgid "Please enter a valid email address"
 msgstr ""
 
@@ -7604,7 +7617,7 @@ msgid "Your support request has been forwarded"
 msgstr ""
 
 #: src/strings.ts:2062
-msgid "Your support request has been forwarded to our support team. We will get back to you via email at {email}. If this email is not reachable or incorrect, please send us an email directly at support@notesnook.com."
+msgid "Your support request has been forwarded to our support team. We will get back to you via email as soon as possible. If you don't receive an email from us within 24-48 hours, please send us an email directly at support@notesnook.com."
 msgstr ""
 
 #: src/strings.ts:956

packages/intl/src/strings.ts

@@ -2656,5 +2656,9 @@ Use this if changes from other devices are not appearing on this device. This wi
     t`Invalid recovery key. Make sure to input your account recovery key, not a 2FA recovery code.`,
   featureNotAvailable: () => t`This feature is not available on this plan.`,
   valueMustBeBetween: (min: number, max: number) =>
-    t`Value must be between ${min} and ${max}`
+    t`Value must be between ${min} and ${max}`,
+  passwordRequired: () => t`Password required`,
+  confirmPasswordRequired: () => t`Confirm password required`,
+  enterAValidEmailAddress: () => t`Please enter a valid email address`,
+  giftCodeRequired: () => t`Gift code required`
 };