Fix Dialog UI background color

mobile/ios/LessPass.xcodeproj/project.pbxproj

@@ -355,7 +355,7 @@
 				);
 				INFOPLIST_FILE = LessPass/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 9.5.1;
+				MARKETING_VERSION = 9.5.2;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -384,7 +384,7 @@
 				DEVELOPMENT_TEAM = 5Y4MF2AT83;
 				INFOPLIST_FILE = LessPass/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 9.5.1;
+				MARKETING_VERSION = 9.5.2;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lesspass-mobile",
-  "version": "9.5.1",
+  "version": "9.5.2",
   "description": "LessPass mobile application",
   "license": "(MPL-2.0 OR GPL-3.0)",
   "author": "Guillaume Vincent <guillaume@oslab.fr>",

mobile/src/settings/SettingsScreen.js

@@ -9,7 +9,6 @@ import TextInputModal from "./TextInputModal";
 import Switch from "../ui/Switch";
 import KeepMasterPasswordOption from "./KeepMasterPasswordOption";
 import { version } from "../version.json";
-import Styles from "../ui/Styles";
 
 export class SettingsScreen extends Component {
   constructor(props) {
@@ -52,7 +51,7 @@ export class SettingsScreen extends Component {
         <List.Section title="LESSPASS DATABASE">
           <TextInputModal
             label="Default URL"
-            value={baseURL}
+            initialValue={baseURL}
             onOk={(value) => setSettings({ baseURL: value })}
             modalTitle="LessPass Database default URL"
           />
@@ -71,7 +70,7 @@ export class SettingsScreen extends Component {
           <TextInputModal
             isRequired={false}
             label="Login"
-            value={defaultPasswordProfileLogin}
+            initialValue={defaultPasswordProfileLogin}
             onOk={(value) =>
               setSettings({ defaultPasswordProfileLogin: value })
             }
@@ -80,7 +79,7 @@ export class SettingsScreen extends Component {
           <Divider />
           <TextInputModal
             label="Password length"
-            value={defaultGeneratedPasswordLength}
+            initialValue={defaultGeneratedPasswordLength}
             variant="numeric"
             onOk={(value) => {
               setSettings({
@@ -92,7 +91,7 @@ export class SettingsScreen extends Component {
           <Divider />
           <TextInputModal
             label="Counter"
-            value={defaultCounter}
+            initialValue={defaultCounter}
             variant="numeric"
             onOk={(value) => {
               setSettings({

mobile/src/settings/TextInputModal.js

@@ -1,102 +1,92 @@
-import React, { Component } from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import {
   Button,
   Portal,
   Dialog,
-  TextInput,
   List,
   Text,
+  useTheme,
 } from "react-native-paper";
 import Styles from "../ui/Styles";
+import TextInput from "../ui/TextInput";
 
-export default class TextInputModal extends Component {
-  constructor(props) {
-    super(props);
-    const { value, variant, isRequired = true } = props;
-    this.state = {
-      value,
-      isValid: this.checkInputIsValid(value, variant, isRequired),
-      showModal: false,
-    };
-  }
+export default function TextInputModal({
+  modalTitle,
+  modalDescription,
+  initialValue = "",
+  label,
+  onOk,
+  isRequired = true,
+  variant = "text",
+}) {
+  const [value, setValue] = useState(initialValue);
+  const [showModal, setShowModal] = useState(false);
+  const [isValid, setIsValid] = useState(true);
+  const theme = useTheme();
 
-  _hideModal = () => {
-    const { value } = this.props;
-    this.setState({ showModal: false, value });
+  const variants = {
+    text: "default",
+    email: "email-address",
+    numeric: "numeric",
   };
+  const keyboardType = variants[variant];
 
-  getKeyboardType = (variant) => {
-    const variants = {
-      text: "default",
-      email: "email-address",
-      numeric: "numeric",
-    };
-    return variants[variant];
-  };
-
-  checkInputIsValid = (value, variant, isRequired) => {
-    if (isRequired && !value) return false;
-    let isValid = variant === "numeric" ? !isNaN(value) : true;
-    return isValid;
-  };
-
-  onChange = (value, variant, isRequired) => {
-    const isValid = this.checkInputIsValid(value, variant, isRequired);
-    this.setState({ value, isValid });
-  };
+  useEffect(() => {
+    if (isRequired && !value) {
+      setIsValid(false);
+    } else {
+      setIsValid(variant === "numeric" ? !isNaN(value) : true);
+    }
+  }, [value, variant, isRequired]);
 
-  render() {
-    const { value, isValid, showModal } = this.state;
-    const {
-      label,
-      onOk,
-      modalTitle,
-      modalDescription,
-      variant = "text",
-      isRequired,
-    } = this.props;
-    return (
-      <View>
-        <Portal>
-          <Dialog onDismiss={this._hideModal} visible={showModal}>
-            <Dialog.Title>{modalTitle}</Dialog.Title>
-            <Dialog.ScrollArea style={{ maxHeight: 170, paddingHorizontal: 0 }}>
-              <View style={{ padding: 10 }}>
-                <TextInput
-                  style={Styles.input}
-                  value={variant === "numeric" ? value.toString() : value}
-                  keyboardType={this.getKeyboardType(variant)}
-                  secureTextEntry={variant === "password"}
-                  onChangeText={(value) =>
-                    this.onChange(value, variant, isRequired)
-                  }
-                />
-                {modalDescription ? <Text /> : null}
-              </View>
-            </Dialog.ScrollArea>
-            <Dialog.Actions>
-              <Button primary onPress={this._hideModal}>
-                Cancel
-              </Button>
-              <Button
-                primary
-                disabled={!isValid}
-                onPress={() =>
-                  this.setState({ showModal: false }, () => onOk(value))
-                }
-              >
-                Ok
-              </Button>
-            </Dialog.Actions>
-          </Dialog>
-        </Portal>
-        <List.Item
-          title={label}
-          description={value}
-          onPress={() => this.setState({ showModal: true })}
-        />
-      </View>
-    );
-  }
+  return (
+    <>
+      <Portal>
+        <Dialog
+          onDismiss={() => setShowModal(false)}
+          visible={showModal}
+          style={{ backgroundColor: theme.colors.background }}
+        >
+          <Dialog.Title>{modalTitle}</Dialog.Title>
+          <Dialog.ScrollArea style={{ maxHeight: 170, paddingHorizontal: 0 }}>
+            <View style={{ padding: 10 }}>
+              <TextInput
+                style={Styles.input}
+                value={variant === "numeric" ? value.toString() : value}
+                keyboardType={keyboardType}
+                secureTextEntry={variant === "password"}
+                onChangeText={setValue}
+              />
+              {modalDescription ? <Text>{modalDescription}</Text> : null}
+            </View>
+          </Dialog.ScrollArea>
+          <Dialog.Actions>
+            <Button onPress={() => setShowModal(false)} mode="outlined">
+              Cancel
+            </Button>
+            <Button
+              disabled={!isValid}
+              onPress={() => {
+                setShowModal(false);
+                onOk(value);
+              }}
+              mode="contained"
+              style={{ marginLeft: 20 }}
+            >
+              Save
+            </Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+      <List.Item
+        title={label}
+        description={initialValue}
+        onPress={() => {
+          setShowModal(true);
+          setValue("");
+        }}
+      />
+    </>
+  );
 }

mobile/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.5.1"
+  "version": "9.5.2"
 }