feat: improve the ux for the secret page

HemmeligOrg · Aug 23, 2022 · 9ed0f23 · 9ed0f23
1 parent fadeccc
commit 9ed0f23
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 15 deletions.
diff --git a/src/client/routes/home/index.js b/src/client/routes/home/index.js
@@ -18,7 +18,6 @@ import {
     Divider,
     FileButton,
 } from '@mantine/core';
-
 import { useMediaQuery } from '@mantine/hooks';
 import {
     IconSquarePlus,
@@ -274,7 +273,7 @@ const Home = () => {
                         onChange={onPreventBurnChange}
                         readOnly={inputReadOnly}
                         color="hemmelig"
-                        label="Burn the secret only after the expired date"
+                        label="Burn the secret only after the time expires"
                     />
 
                     <TextInput

diff --git a/src/client/routes/secret/index.js b/src/client/routes/secret/index.js
@@ -29,8 +29,8 @@ const Secret = () => {
     const [isPasswordRequired, setIsPasswordRequired] = useState(false);
     const [file, setFile] = useState(null);
     const [isDownloaded, setIsDownloaded] = useState(false);
-    const [isBase64Content, setIsBase64Content] = useState(false);
     const [error, setError] = useState(null);
+    const [hasConvertedBase64ToPlain, setHasConvertedBase64ToPlain] = useState(false);
 
     const fetchSecret = async (event) => {
         event.preventDefault();
@@ -78,12 +78,6 @@ const Secret = () => {
         }
     };
 
-    useEffect(() => {
-        if (secret && validator.isBase64(secret)) {
-            setIsBase64Content(true);
-        }
-    }, [secret]);
-
     useEffect(() => {
         (async () => {
             const response = await secretExists(secretId, password);
@@ -124,7 +118,7 @@ const Secret = () => {
 
     const convertBase64ToPlain = () => {
         setSecret(atob(secret));
-        setIsBase64Content(false);
+        setHasConvertedBase64ToPlain(true);
     };
 
     return (
@@ -172,12 +166,12 @@ const Secret = () => {
                             leftIcon={<IconEye size={14} />}
                             onClick={fetchSecret}
                         >
-                            View secret
+                            View the secret
                         </Button>
                     )}
                 </Group>
 
-                <Group>
+                <Group position="right">
                     {isSecretOpen && (
                         <Button
                             styles={() => ({
@@ -218,20 +212,21 @@ const Secret = () => {
                         </Button>
                     )}
 
-                    {isBase64Content && (
+                    {isSecretOpen && (
                         <Button
                             styles={() => ({
                                 root: {
-                                    backgroundColor: 'var(--color-contrast)',
+                                    backgroundColor: '#FF9769',
 
                                     '&:hover': {
-                                        backgroundColor: 'var(--color-contrast)',
+                                        backgroundColor: '#FF9769',
                                         filter: 'brightness(115%)',
                                     },
                                 },
                             })}
                             leftIcon={<IconPerspective size={14} />}
                             onClick={convertBase64ToPlain}
+                            disabled={hasConvertedBase64ToPlain}
                         >
                             Convert base64 to plain text
                         </Button>