continue generating flow, add backend connection on main tabs

src/screens/Profile/ChangePassword.js

@@ -1,5 +1,5 @@
 import { View, Text, Pressable, Platform } from "react-native";
-import React from "react";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import { gutters, Palette } from "../../styles";
@@ -8,8 +8,42 @@ import { BlurView } from "expo-blur";
 import EditInput from "./components/EditInput";
 import GradientButton from "../../components/GradientButton";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import { useGlobal } from "reactn";
+import firebase from "../../config/firebase";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 
 const ChangePassword = () => {
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [, setTooltip] = useGlobal("_tooltip");
+
+  const onSave = async () => {
+    const oldVal = (oldPassword || "").trim();
+    const newVal = (newPassword || "").trim();
+    if (!oldVal || !newVal) return;
+    try {
+      setLoading(true);
+      const user = firebase.auth().currentUser;
+      if (!user?.email) return;
+
+      const credential = firebase.auth.EmailAuthProvider.credential(
+        user.email,
+        oldVal,
+      );
+      await user.reauthenticateWithCredential(credential);
+      await user.updatePassword(newVal);
+      setTooltip({ type: "success", text: "Mot de passe mis à jour" });
+      navigate(Routes.Settings);
+    } catch (e) {
+      console.log("ChangePassword error", e?.message);
+      const msg = e?.message || "Mise à jour impossible";
+      setTooltip({ type: "error", text: msg });
+    } finally {
+      setLoading(false);
+    }
+  };
   return (
     <Page
       headerType="NAVIGATE"
@@ -38,9 +72,18 @@ const ChangePassword = () => {
           }
         >
           <EditInput
-            placeholder="Mot de passe"
-            label="Mot de passe"
+            placeholder="Mot de passe actuel"
+            label="Mot de passe actuel"
             type="password"
+            value={oldPassword}
+            setValue={setOldPassword}
+          />
+          <EditInput
+            placeholder="Nouveau mot de passe"
+            label="Nouveau mot de passe"
+            type="password"
+            value={newPassword}
+            setValue={setNewPassword}
           />
           <Pressable>
             <Text
@@ -56,11 +99,13 @@ const ChangePassword = () => {
         </BlurView>
       </View>
       <GradientButton
-        title="Enregistrer les modifications"
+        title={loading ? "Chargement..." : "Enregistrer les modifications"}
         containerStyle={{
           width: "80%",
           alignSelf: "center",
         }}
+        onPress={onSave}
+        disabled={loading || !oldPassword?.trim() || !newPassword?.trim()}
       />
     </Page>
   );