Merge pull request #26 from beatles1/feature-save-password

Allow remembering password
matteo-convertino · Jan 26, 2024 · 9347650 · 9347650
2 parents 954bcaf + 01c8c9d
commit 9347650
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 12 deletions.
diff --git a/js/otpmanager-main.js b/js/otpmanager-main.js
diff --git a/js/otpmanager-main.js.LICENSE.txt b/js/otpmanager-main.js.LICENSE.txt
diff --git a/js/otpmanager-main.js.map b/js/otpmanager-main.js.map
diff --git a/src/js/navbar/LargeDevice.js b/src/js/navbar/LargeDevice.js
@@ -19,7 +19,8 @@ import {
   IconList,
   IconMoonStars,
   IconSettings,
-  IconSun
+  IconSun,
+  IconLockOff,
 } from "@tabler/icons-react";
 import { UserSettingContext } from "./../utils/UserSettingProvider";
 import { navbarStyles } from "./Styles";
@@ -35,6 +36,9 @@ export function NavbarLargeDevice({
   const { classes, cx } = navbarStyles();
   const ChevronIcon = !showSettings ? IconChevronRight : IconChevronLeft;
   const [userSetting, setUserSetting] = useContext(UserSettingContext);
+  const [passwordSaved, setPasswordSaved] = useState(
+    Boolean(localStorage.getItem("otpmanager_cached_password"))
+  );
 
   return (
     <>
@@ -134,6 +138,33 @@ export function NavbarLargeDevice({
                   (userSetting.darkMode ? "light mode" : "dark mode")}
               </Text>
             </Flex>
+
+            <Flex className={classes.innerLink} align="center">
+              <ActionIcon
+                variant="outline"
+                color="red"
+                onClick={(e) => {
+                  localStorage.removeItem("otpmanager_cached_password");
+                  setPasswordSaved(false);
+                }}
+                disabled={!passwordSaved}
+                sx={{
+                  width: "20px",
+                  height: "20px",
+                  minWidth: "20px",
+                  minHeight: "20px",
+                }}
+                title="Remove saved password"
+              >
+                <IconLockOff style={{ width: 16 }} />
+              </ActionIcon>
+              <Text
+                sx={{ fontSize: "14px", color: "#C1C2C5", marginLeft: "12px" }}
+              >
+                Remove saved password
+              </Text>
+            </Flex>
+
             <div
               href="#"
               className={classes.link}

diff --git a/src/js/navbar/SmallDevice.js b/src/js/navbar/SmallDevice.js
@@ -20,7 +20,8 @@ import {
   IconList,
   IconMoonStars,
   IconSettings,
-  IconSun
+  IconSun,
+  IconLockOff,
 } from "@tabler/icons-react";
 import { UserSettingContext } from "./../utils/UserSettingProvider";
 import { navbarStyles } from "./Styles";
@@ -38,6 +39,9 @@ export function NavbarSmallDevice({
   const { classes, cx } = navbarStyles();
   const ChevronIcon = !showSettings ? IconChevronRight : IconChevronLeft;
   const [userSetting, setUserSetting] = useContext(UserSettingContext);
+  const [passwordSaved, setPasswordSaved] = useState(
+    Boolean(localStorage.getItem("otpmanager_cached_password"))
+  );
 
   return (
     <>
@@ -158,6 +162,37 @@ export function NavbarSmallDevice({
                     (userSetting.darkMode ? "light mode" : "dark mode")}
                 </Text>
               </Flex>
+
+              <Flex className={classes.innerLink} align="center">
+                <ActionIcon
+                  variant="outline"
+                  color="red"
+                  onClick={(e) => {
+                    localStorage.removeItem("otpmanager_cached_password");
+                    setPasswordSaved(false);
+                  }}
+                  disabled={!passwordSaved}
+                  sx={{
+                    width: "20px",
+                    height: "20px",
+                    minWidth: "20px",
+                    minHeight: "20px",
+                  }}
+                  title="Remove saved password"
+                >
+                  <IconLockOff style={{ width: 16 }} />
+                </ActionIcon>
+                <Text
+                  sx={{
+                    fontSize: "14px",
+                    color: "#C1C2C5",
+                    marginLeft: "12px",
+                  }}
+                >
+                  Remove saved password
+                </Text>
+              </Flex>
+
               <div
                 href="#"
                 className={classes.link}

diff --git a/src/js/utils/Password.js b/src/js/utils/Password.js
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 
 import {
   AppShell,
@@ -9,12 +9,9 @@ import {
   Flex,
   Loader,
   Stack,
-  Text
+  Text,
 } from "@mantine/core";
-import {
-  showNotification,
-  updateNotification
-} from "@mantine/notifications";
+import { showNotification, updateNotification } from "@mantine/notifications";
 import axios from "@nextcloud/axios";
 import { generateUrl } from "@nextcloud/router";
 import { IconCheck, IconX } from "@tabler/icons-react";
@@ -64,6 +61,9 @@ export const Password = ({ exists, setAuth }) => {
             password: CryptoES.SHA256(values.password).toString(),
           })
         );
+        if (values.savePassword) {
+          localStorage.setItem("otpmanager_cached_password", values.password);
+        }
       })
       .catch((error) => {
         if (error.response) {
@@ -99,6 +99,14 @@ export const Password = ({ exists, setAuth }) => {
       });
   }
 
+  useEffect(() => {
+    if (exists && localStorage.getItem("otpmanager_cached_password")) {
+      updatePassword({
+        password: localStorage.getItem("otpmanager_cached_password"),
+      });
+    }
+  }, [exists]);
+
   return (
     <AppShell padding="0" fixed={false} layout="alt">
       <Flex

diff --git a/src/js/utils/PasswordForm.js b/src/js/utils/PasswordForm.js
@@ -7,7 +7,8 @@ import {
   PasswordInput,
   Popover,
   Progress,
-  Text
+  Text,
+  Checkbox,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { IconCheck, IconX } from "@tabler/icons-react";
@@ -59,6 +60,7 @@ export default function PasswordForm({ exists, onSubmit, isChanging }) {
       oldPassword: "",
       password: "",
       confirmPassword: "",
+      savePassword: false,
     },
 
     validate: {
@@ -140,6 +142,13 @@ export default function PasswordForm({ exists, onSubmit, isChanging }) {
               {...form.getInputProps("confirmPassword")}
             />
           )}
+          {!isChanging && exists && (
+            <Checkbox
+              label="Remember password"
+              mt="md"
+              {...form.getInputProps("savePassword")}
+            />
+          )}
         </Flex>
       </form>
     </Box>