mobile: convert sheets with input to screens or simple modals

2026-02-24 04:00:59 +01:00 · 2025-06-25 13:45:01 +05:00
parent d456132dd6
commit 10b495cdbe
10 changed files with 70 additions and 87 deletions
--- a/apps/mobile/app/components/auth/change-password.js
+++ b/apps/mobile/app/components/auth/change-password.js
@@ -17,26 +17,20 @@ 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 { strings } from "@notesnook/intl";
 import React, { useRef, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastManager
-} from "../../services/event-manager";
+import BackupService from "../../services/backup";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet, eOpenRecoveryKeyDialog } from "../../utils/events";
-import DialogHeader from "../dialog/dialog-header";
+import { eOpenRecoveryKeyDialog } from "../../utils/events";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Dialog } from "../dialog";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import { Notice } from "../ui/notice";
-import Seperator from "../ui/seperator";
-import { Dialog } from "../dialog";
-import BackupService from "../../services/backup";
-import { sleep } from "../../utils/time";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";

 export const ChangePassword = () => {
  const passwordInputRef = useRef();
@@ -85,8 +79,7 @@ export const ChangePassword = () => {
        context: "global"
      });
      setLoading(false);
-      eSendEvent(eCloseSheet);
-      await sleep(300);
+      Navigation.goBack();
      eSendEvent(eOpenRecoveryKeyDialog);
    } catch (e) {
      setLoading(false);
@@ -108,9 +101,6 @@ export const ChangePassword = () => {
      }}
    >
      <Dialog context="change-password-dialog" />
-      <DialogHeader title={strings.changePassword()} />
-      <Seperator />
-
      <Input
        fwdRef={oldPasswordInputRef}
        onChangeText={(value) => {
@@ -160,9 +150,3 @@ export const ChangePassword = () => {
    </View>
  );
 };
-
-ChangePassword.present = () => {
-  presentSheet({
-    component: <ChangePassword />
-  });
-};
--- a/apps/mobile/app/components/auth/login.js
+++ b/apps/mobile/app/components/auth/login.js
@@ -39,6 +39,7 @@ import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
 import { DefaultAppStyles } from "../../utils/styles";
+import { Dialog } from "../dialog";

 const LoginSteps = {
  emailAuth: 1,
@@ -89,7 +90,7 @@ export const Login = ({ changeMode }) => {
  return (
    <>
      <ForgotPassword />
-      <SheetProvider context="two_factor_verify" />
+      <Dialog context="two_factor_verify" />
      <View
        style={{
          borderRadius: DDS.isTab ? 5 : 0,
--- a/apps/mobile/app/components/auth/two-factor.js
+++ b/apps/mobile/app/components/auth/two-factor.js
@@ -24,12 +24,8 @@ import { View } from "react-native";
 import { ScrollView } from "react-native-actions-sheet";
 import { db } from "../../common/database/index";
 import useTimer from "../../hooks/use-timer";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastManager
-} from "../../services/event-manager";
-import { eCloseSheet } from "../../utils/events";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { eCloseSimpleDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -38,6 +34,7 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { DefaultAppStyles } from "../../utils/styles";
+import { presentDialog } from "../dialog/functions";

 const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
  const { colors } = useThemeColors();
@@ -46,7 +43,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
    method: mfaInfo?.primaryMethod,
    isPrimary: true
  });
-  const { seconds, start } = useTimer(currentMethod.method);
+  const { seconds, start, reset } = useTimer(currentMethod.method);
  const [loading, setLoading] = useState(false);
  const inputRef = useRef();
  const [sending, setSending] = useState(false);
@@ -62,7 +59,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
      },
      (result) => {
        if (result) {
-          eSendEvent(eCloseSheet, "two_factor_verify");
+          eSendEvent(eCloseSimpleDialog, "two_factor_verify");
        }
        setLoading(false);
      }
@@ -133,6 +130,12 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
    <ScrollView
      keyboardShouldPersistTaps="handled"
      keyboardDismissMode="interactive"
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: colors.primary.background,
+        paddingTop: 60
+      }}
    >
      <View
        style={{
@@ -236,7 +239,10 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
            <Button
              title={strings.cancel()}
              type="secondaryAccented"
-              onPress={onCancel}
+              onPress={() => {
+                reset();
+                onCancel();
+              }}
              width={250}
            />

@@ -297,7 +303,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
 };

 TwoFactorVerification.present = (onMfaLogin, data, onCancel, context) => {
-  presentSheet({
+  presentDialog({
    component: () => (
      <TwoFactorVerification
        onMfaLogin={onMfaLogin}
@@ -306,7 +312,9 @@ TwoFactorVerification.present = (onMfaLogin, data, onCancel, context) => {
      />
    ),
    context: context || "two_factor_verify",
-    disableClosing: true
+    disableClosing: true,
+    transparent: false,
+    statusBarTranslucent: true
  });
 };

--- a/apps/mobile/app/components/auth/use-login.js
+++ b/apps/mobile/app/components/auth/use-login.js
@@ -24,7 +24,7 @@ import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
-import { eCloseSheet } from "../../utils/events";
+import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
 import { strings } from "@notesnook/intl";

@@ -92,7 +92,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
                } catch (e) {
                  callback && callback(false);
                  if (e.message === "invalid_grant") {
-                    eSendEvent(eCloseSheet, "two_factor_verify");
+                    eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                    setLoading(false);
                    setStep(LoginSteps.emailAuth);
                  }
@@ -100,7 +100,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
              },
              mfaInfo,
              () => {
-                eSendEvent(eCloseSheet, "two_factor_verify");
+                eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                setLoading(false);
                setStep(LoginSteps.emailAuth);
              }
--- a/apps/mobile/app/components/dialog/functions.ts
+++ b/apps/mobile/app/components/dialog/functions.ts
@@ -27,6 +27,9 @@ export type DialogInfo = {
  paragraph?: string;
  positiveText: string;
  negativeText: string;
+  background?: string;
+  transparent?: boolean;
+  statusBarTranslucent?: boolean;
  positivePress?: (...args: any[]) => Promise<any>;
  onClose?: () => void;
  positiveType?:
--- a/apps/mobile/app/components/dialog/index.tsx
+++ b/apps/mobile/app/components/dialog/index.tsx
@@ -130,9 +130,17 @@ export const Dialog = ({ context = "global" }: { context?: string }) => {

  return visible && dialogInfo ? (
    <BaseDialog
-      statusBarTranslucent={false}
+      statusBarTranslucent={
+        dialogInfo.statusBarTranslucent === undefined
+          ? false
+          : dialogInfo.statusBarTranslucent
+      }
      bounce={!dialogInfo.input}
      closeOnTouch={!dialogInfo.disableBackdropClosing}
+      background={dialogInfo.background}
+      transparent={
+        dialogInfo.transparent === undefined ? true : dialogInfo.transparent
+      }
      onShow={async () => {
        if (dialogInfo.input) {
          inputRef.current?.setNativeProps({
--- a/apps/mobile/app/hooks/use-timer.ts
+++ b/apps/mobile/app/hooks/use-timer.ts
@@ -52,7 +52,14 @@ const useTimer = (initialId?: string) => {
    };
  }, [seconds, id]);

-  return { seconds, setId, start };
+  const reset = () => {
+    if (id) {
+      timers[id] = 0;
+      setSeconds(0);
+    }
+  };
+
+  return { seconds, setId, start, reset };
 };

 export default useTimer;
--- a/apps/mobile/app/components/sheets/change-email/index.tsx
+++ b/apps/mobile/app/components/sheets/change-email/index.tsx
@@ -16,35 +16,22 @@ 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, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import { ActionSheetRef } from "react-native-actions-sheet";
 import { db } from "../../../common/database";
-import {
-  eSendEvent,
-  presentSheet,
-  PresentSheetOptions,
-  ToastManager
-} from "../../../services/event-manager";
-import DialogHeader from "../../dialog/dialog-header";
-import { Button } from "../../ui/button";
-import Input from "../../ui/input";
+import { eSendEvent, ToastManager } from "../../../services/event-manager";
 import { eUserLoggedIn } from "../../../utils/events";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
-
-type ChangeEmailProps = {
-  actionSheetRef: RefObject<ActionSheetRef>;
-  close?: () => void;
-  update?: (options: PresentSheetOptions) => void;
-};
+import Input from "../../../components/ui/input";
+import { Button } from "../../../components/ui/button";

 enum EmailChangeSteps {
  verify,
  changeEmail
 }

-export const ChangeEmail = ({ close }: ChangeEmailProps) => {
+export const ChangeEmail = () => {
  const [step, setStep] = useState(EmailChangeSteps.verify);
  const emailChangeData = useRef<{
    email?: string;
@@ -103,10 +90,6 @@ export const ChangeEmail = ({ close }: ChangeEmailProps) => {

  return (
    <View style={{ paddingHorizontal: DefaultAppStyles.GAP }}>
-      <DialogHeader
-        title={strings.changeEmail()}
-        paragraph={strings.changeEmailDesc()}
-      />
      <View
        style={{
          marginTop: DefaultAppStyles.GAP_VERTICAL
@@ -156,23 +139,12 @@ export const ChangeEmail = ({ close }: ChangeEmailProps) => {
            : strings.changeEmail()
        }
        type="accent"
-        width={250}
+        style={{
+          width: "100%"
+        }}
        loading={loading}
        onPress={onSubmit}
-        style={{
-          borderRadius: 100,
-          height: 45,
-          marginTop: 2
-        }}
      />
    </View>
  );
 };
-
-ChangeEmail.present = () => {
-  presentSheet({
-    component: (ref, close, update) => (
-      <ChangeEmail actionSheetRef={ref} close={close} update={update} />
-    )
-  });
-};
--- a/apps/mobile/app/screens/settings/components.tsx
+++ b/apps/mobile/app/screens/settings/components.tsx
@@ -43,6 +43,8 @@ import ThemeSelector from "./theme-selector";
 import { TitleFormat } from "./title-format";
 import { View } from "react-native";
 import { DefaultAppStyles } from "../../utils/styles";
+import { ChangePassword } from "../../components/auth/change-password";
+import { ChangeEmail } from "./change-email";

 export const components: { [name: string]: ReactElement } = {
  colorpicker: <AccentColorPicker />,
@@ -69,5 +71,7 @@ export const components: { [name: string]: ReactElement } = {
      <AttachmentGroupProgress groupId="offline-mode" />
    </View>
  ),
-  "sidebar-tab-selector": <SidebarTabPicker />
+  "sidebar-tab-selector": <SidebarTabPicker />,
+  "change-password": <ChangePassword />,
+  "change-email": <ChangeEmail />
 };
--- a/apps/mobile/app/screens/settings/settings-data.tsx
+++ b/apps/mobile/app/screens/settings/settings-data.tsx
@@ -32,11 +32,9 @@ import { enabled } from "react-native-privacy-snapshot";
 import ScreenGuardModule from "react-native-screenguard";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
-import { ChangePassword } from "../../components/auth/change-password";
 import { presentDialog } from "../../components/dialog/functions";
 import { AppLockPassword } from "../../components/dialogs/applock-password";
 import { endProgress, startProgress } from "../../components/dialogs/progress";
-import { ChangeEmail } from "../../components/sheets/change-email";
 import ExportNotesSheet from "../../components/sheets/export-notes";
 import { Issue } from "../../components/sheets/github/issue";
 import { Progress } from "../../components/sheets/progress";
@@ -243,17 +241,15 @@ export const settingsGroups: SettingSection[] = [
          {
            id: "change-password",
            name: strings.changePassword(),
-            modifer: async () => {
-              ChangePassword.present();
-            },
-            description: strings.changePasswordDesc()
+            type: "screen",
+            description: strings.changePasswordDesc(),
+            component: "change-password"
          },
          {
            id: "change-email",
            name: strings.changeEmail(),
-            modifer: async () => {
-              ChangeEmail.present();
-            },
+            type: "screen",
+            component: "change-email",
            description: strings.changeEmailDesc()
          },
          {