mobile: enable password change and forgot password

Author: ammarahm-ed

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

@@ -73,7 +73,15 @@ export const ChangePassword = () => {
         throw new Error(strings.backupFailed() + `: ${result.error}`);
       }
 
-      await db.user.changePassword(oldPassword.current, password.current);
+      const passwordChanged = await db.user.changePassword(
+        oldPassword.current,
+        password.current
+      );
+
+      if (!passwordChanged) {
+        throw new Error("Could not change user account password.");
+      }
+
       ToastManager.show({
         heading: strings.passwordChangedSuccessfully(),
         type: "success",

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

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef, useState } from "react";
 import { TextInput, View } from "react-native";
-import ActionSheet from "react-native-actions-sheet";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
@@ -35,9 +34,9 @@ import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
 
-export const ForgotPassword = () => {
+export const ForgotPassword = ({ userEmail }: { userEmail: string }) => {
   const { colors } = useThemeColors("sheet");
-  const email = useRef<string>(undefined);
+  const email = useRef<string>(userEmail);
   const emailInputRef = useRef<TextInput>(null);
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -87,94 +86,76 @@ export const ForgotPassword = () => {
 
   return (
     <>
-      <ActionSheet
-        onBeforeShow={(data) => (email.current = data)}
-        onClose={() => {
-          setSent(false);
-          setLoading(false);
-        }}
-        onOpen={() => {
-          emailInputRef.current?.setNativeProps({
-            text: email.current
-          });
-        }}
-        indicatorStyle={{
-          width: 100
-        }}
-        gestureEnabled
-        id="forgotpassword_sheet"
-      >
-        {sent ? (
-          <View
+      {sent ? (
+        <View
+          style={{
+            padding: DefaultAppStyles.GAP,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingBottom: 50
+          }}
+        >
+          <IconButton
             style={{
-              padding: DefaultAppStyles.GAP,
-              justifyContent: "center",
-              alignItems: "center",
-              paddingBottom: 50
+              width: null,
+              height: null
             }}
-          >
-            <IconButton
-              style={{
-                width: null,
-                height: null
-              }}
-              color={colors.primary.accent}
-              name="email"
-              size={50}
-            />
-            <Heading>{strings.recoveryEmailSent()}</Heading>
-            <Paragraph
-              style={{
-                textAlign: "center"
-              }}
-            >
-              {strings.recoveryEmailSentDesc()}
-            </Paragraph>
-          </View>
-        ) : (
-          <View
+            color={colors.primary.accent}
+            name="email"
+            size={50}
+          />
+          <Heading>{strings.recoveryEmailSent()}</Heading>
+          <Paragraph
             style={{
-              borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.primary.background,
-              zIndex: 10,
-              width: "100%",
-              padding: DefaultAppStyles.GAP
+              textAlign: "center"
             }}
           >
-            <DialogHeader title={strings.accountRecovery()} />
-            <Seperator />
+            {strings.recoveryEmailSentDesc()}
+          </Paragraph>
+        </View>
+      ) : (
+        <View
+          style={{
+            borderRadius: DDS.isTab ? 5 : 0,
+            backgroundColor: colors.primary.background,
+            zIndex: 10,
+            width: "100%",
+            padding: DefaultAppStyles.GAP
+          }}
+        >
+          <DialogHeader title={strings.accountRecovery()} />
+          <Seperator />
 
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={(value) => {
-                email.current = value;
-              }}
-              defaultValue={email.current}
-              onErrorCheck={(e) => setError(e)}
-              returnKeyLabel={strings.next()}
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage={strings.emailInvalid()}
-              placeholder={strings.email()}
-              onSubmit={() => {}}
-            />
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={(value) => {
+              email.current = value;
+            }}
+            defaultValue={email.current}
+            onErrorCheck={(e) => setError(e)}
+            returnKeyLabel={strings.next()}
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage={strings.emailInvalid()}
+            placeholder={strings.email()}
+            onSubmit={() => {}}
+          />
 
-            <Button
-              style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                width: "100%"
-              }}
-              loading={loading}
-              onPress={sendRecoveryEmail}
-              type="accent"
-              title={loading ? null : strings.next()}
-            />
-          </View>
-        )}
-      </ActionSheet>
+          <Button
+            style={{
+              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            loading={loading}
+            onPress={sendRecoveryEmail}
+            type="accent"
+            title={loading ? null : strings.next()}
+          />
+        </View>
+      )}
     </>
   );
 };

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

@@ -25,7 +25,11 @@ import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
@@ -110,7 +114,6 @@ export const Login = ({
   return (
     <>
       <AuthHeader />
-      <ForgotPassword />
       <Dialog context="two_factor_verify" />
       <KeyboardAwareScrollView
         style={{
@@ -257,13 +260,10 @@ export const Login = ({
                     paddingHorizontal: 0
                   }}
                   onPress={() => {
-                    ToastManager.show({
-                      type: "info",
-                      message:
-                        "Password changing has been disabled temporarily to address some issues faced by users. It will be enabled again once the issues have resolved."
+                    if (loading || !email.current) return;
+                    presentSheet({
+                      component: <ForgotPassword userEmail={email.current} />
                     });
-                    // if (loading || !email.current) return;
-                    // SheetManager.show("forgotpassword_sheet");
                   }}
                   textStyle={{
                     textDecorationLine: "underline"

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

@@ -97,7 +97,7 @@ export const SessionExpired = () => {
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
 
-      const key = await db.user.getEncryptionKey();
+      const key = await db.user.getDataEncryptionKeys();
       if (!key) throw new Error("No encryption key found.");
 
       Sync.run("global", false, "full", async (complete) => {

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

@@ -182,6 +182,7 @@ const PayWall = (props: NavigationProps<"PayWall">) => {
         >
           <IconButton
             name="close"
+            color={colors.primary.icon}
             onPress={() => {
               Navigation.replace("FluidPanelsView", {});
             }}

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -169,7 +169,7 @@ class RecoveryKeySheet extends React.Component {
   };
 
   onOpen = async () => {
-    let k = await db.user.getEncryptionKey();
+    let k = await db.user.getMasterKey();
     this.user = await db.user.getUser();
     if (k) {
       this.setState({

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

@@ -331,17 +331,10 @@ export const settingsGroups: SettingSection[] = [
           {
             id: "change-password",
             name: strings.changePassword(),
-            // type: "screen",
+            type: "screen",
             description: strings.changePasswordDesc(),
-            // component: "change-password",
-            icon: "form-textbox-password",
-            modifer: () => {
-              ToastManager.show({
-                type: "info",
-                message:
-                  "Password changing has been disabled temporarily to address some issues faced by users. It will be enabled again once the issues have resolved."
-              });
-            }
+            component: "change-password",
+            icon: "form-textbox-password"
           },
           {
             id: "change-email",