Update UI and error handling

Signed-off-by: Delemangi <milev.stefan@gmail.com>
Delemangi · Jun 13, 2024 · 430fc7f · 430fc7f
1 parent fb82652
commit 430fc7f
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 53 deletions.
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
@@ -108,7 +108,7 @@
       {/if}
 
       {#if accessToken}
-        <Flex align="center">
+        <Flex align="center" gap="lg">
           <Button variant="light">
             <a class={classes.leftOptions} href="/" on:click={handleLogout}>
               <Title order={3}>Logout</Title>

diff --git a/frontend/src/lib/components/user/FileRow.svelte b/frontend/src/lib/components/user/FileRow.svelte
@@ -90,8 +90,25 @@
         document.body.removeChild(a);
 
         URL.revokeObjectURL(url);
+
+        isDownloadWindowVisible = false;
+      }
+    } catch (error) {
+      if (!isAxiosError(error)) {
+        alert('An unknown error occurred.');
+        return;
       }
-    } catch {
+
+      if (error.response?.status === 404) {
+        alert('That file does not exist.');
+        return;
+      }
+
+      if (error.response?.status === 403) {
+        alert('Invalid password.');
+        return;
+      }
+
       alert('An error occurred while downloading the file.');
     }
   };
@@ -303,11 +320,18 @@
     <Box class={getStyles()}>
       <Flex direction="column" align="space-evenly" gap="l" justify="center">
         <Title order={3}>Download File</Title>
-        <TextInput type="text" name="filepassword" bind:value={downloadFilePassword} />
-        <Button variant="filled" on:click={getFile} disabled={!downloadFilePassword?.length}>
-          Submit
-        </Button>
-        <Button variant="light" on:click={() => (isDownloadWindowVisible = false)}>Close</Button>
+        <TextInput
+          type="password"
+          name="filepassword"
+          bind:value={downloadFilePassword}
+          placeholder="Password..."
+        />
+        <Flex gap="lg" justify="space-between">
+          <Button variant="filled" on:click={getFile} disabled={!downloadFilePassword?.length}>
+            Submit
+          </Button>
+          <Button variant="light" on:click={() => (isDownloadWindowVisible = false)}>Close</Button>
+        </Flex>
       </Flex>
     </Box>
   </Overlay>

diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
@@ -69,8 +69,6 @@
 {/if}
 
 {#if code2FAInput}
-  <h1>2FA authentication enabled</h1>
-  <p>Please open your authentication app and enter the code.</p>
   <div
     style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding: 10px; border-radius: 5px"
   >
@@ -81,4 +79,8 @@
     </div>
     <br />
   </div>
+  <br />
+  <Text align="center" size="lg">2FA Authentication</Text>
+  <br />
+  <Text align="center">Please enter the code currently displayed in your authenticator app.</Text>
 {/if}
diff --git a/frontend/src/routes/user/2fa/+page.svelte b/frontend/src/routes/user/2fa/+page.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { Button, TextInput } from '@svelteuidev/core';
-  import { get2faToken, remove2faToken } from '../../../server/auth';
-  import { onMount } from 'svelte';
-  import QR from '@svelte-put/qr/img/QR.svelte';
   import { page } from '$app/stores';
+  import QR from '@svelte-put/qr/img/QR.svelte';
+  import { Button, Flex, Text, TextInput } from '@svelteuidev/core';
+  import { onMount } from 'svelte';
+  import { get2faToken, remove2faToken } from '../../../server/auth';
 
   let code: string | null = null;
   let username: string = '';
   let password: string = '';
   let option: string | null = 'enable';
 
-  async function fetchCode() {
+  const fetchCode = async () => {
     try {
       let accessToken = localStorage.getItem('accessToken');
 
@@ -29,15 +29,15 @@
     } catch (error) {
       console.error('Failed to update 2FA token:', error);
     }
-  }
+  };
+
   onMount(async () => {
     option = $page.url.searchParams.get('option');
   });
 </script>
 
 {#if code == null}
   <div class="container">
-    <h1>Please log in again to update the 2FA token</h1>
     <TextInput label="Username" bind:value={username} />
     <TextInput label="Password" bind:value={password} type="password" />
     <br />
@@ -46,20 +46,38 @@
     </div>
     <br />
   </div>
+  <br />
+  <Text size="md" align="center">Please log in again to update the 2FA token.</Text>
 {/if}
 
 {#if code != null}
-  <h1>2FA token {code}</h1>
+  <Text align="center">Here is the QR code for your new authenticator:</Text>
+  <br />
+
+  <Flex justify="center">
+    <QR
+      data="otpauth://totp/synthra:{username}?secret={code}&issuer=synthra"
+      anchorOuterFill="blue"
+      moduleFill="green"
+      anchorInnerFill="blue"
+      backgroundFill="lightblue"
+      width="168"
+      height="168"
+    />
+  </Flex>
+
+  <br />
+  <Text align="center">Or, if you'd rather have the token:</Text>
+  <br />
+  <Text size="lg" align="center">{code}</Text>
+
+  <br />
 
-  <QR
-    data="otpauth://totp/synthra:{username}?secret={code}&issuer=synthra"
-    anchorOuterFill="blue"
-    moduleFill="green"
-    anchorInnerFill="blue"
-    backgroundFill="lightblue"
-    width="168"
-    height="168"
-  />
+  <Flex justify="center">
+    <Button>
+      <a href="/user/account">Back</a>
+    </Button>
+  </Flex>
 {/if}
 
 <style>

diff --git a/frontend/src/routes/user/account/+page.svelte b/frontend/src/routes/user/account/+page.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-  import { Anchor, Text } from '@svelteuidev/core';
-  import { onMount } from 'svelte';
-  import { LockClosed, LockOpen2 } from 'radix-icons-svelte';
   import type { UserMetadata } from '$lib/types/UserMetadata';
+  import { Anchor, Flex, Text } from '@svelteuidev/core';
+  import { LockClosed, LockOpen2 } from 'radix-icons-svelte';
+  import { onMount } from 'svelte';
   import { getUserMetadata } from '../../../server/auth';
 
-  let username: string | null = '';
+  let username: string | null = null;
   let user: UserMetadata | null = null;
 
   onMount(async () => {
     let accessToken = localStorage.getItem('accessToken');
+    username = localStorage.getItem('username');
 
     if (!accessToken) {
       window.location.href = '/auth/login';
@@ -27,20 +28,29 @@
   });
 </script>
 
-<Text>Hi, {username}</Text>
-
-{#if user?.is_2fa_enabled}
-  <Anchor href="/user/2fa/?option=enable">
-    <LockClosed />
-    <p>Enable 2FA</p>
-  </Anchor>
-{:else}
-  <Anchor href="/user/2fa?option=disable">
-    <LockOpen2 />
-    <p>Disable 2FA</p>
-  </Anchor>
-  <Anchor href="/user/2fa?option=enable">
-    <LockClosed />
-    <p>Update 2FA</p>
-  </Anchor>
-{/if}
+<Text size="lg" align="center">Hi, {username}!</Text>
+<br />
+
+<Flex justify="center" align="center" direction="column" gap="lg">
+  {#if user?.is_2fa_enabled}
+    <Anchor href="/user/2fa/?option=enable">
+      <Flex justify="center" gap="md">
+        <LockClosed />
+        <Text>Enable 2FA</Text>
+      </Flex>
+    </Anchor>
+  {:else}
+    <Anchor href="/user/2fa?option=disable">
+      <Flex justify="center" gap="md">
+        <LockOpen2 />
+        <Text>Disable 2FA</Text>
+      </Flex>
+    </Anchor>
+    <Anchor href="/user/2fa?option=enable">
+      <Flex justify="center" gap="md">
+        <LockClosed />
+        <Text>Update 2FA</Text>
+      </Flex>
+    </Anchor>
+  {/if}
+</Flex>
diff --git a/frontend/src/routes/user/home/+page.svelte b/frontend/src/routes/user/home/+page.svelte
@@ -9,6 +9,7 @@
     Flex,
     Overlay,
     Text,
+    TextInput,
     Title,
     createStyles,
     type DefaultTheme
@@ -104,6 +105,12 @@
       alert('An error occurred while fetching the files.');
     }
   });
+
+  let fileName: string | null = null;
+
+  const handleFileChange = () => {
+    fileName = filesToUpload?.[0].name ?? null;
+  };
 </script>
 
 <div
@@ -119,7 +126,6 @@
 </div>
 
 <TitleFileRow />
-
 {#each userFiles as file}
   <FileRow {file} />
 {/each}
@@ -130,19 +136,44 @@
       <Flex direction="column" align="space-evenly" gap="md" justify="center">
         <Title order={3}>Upload File</Title>
 
-        <input type="file" name="filename" bind:files={filesToUpload} />
+        <div class="file-upload-wrapper">
+          <Flex direction="column" justify="center" gap="md">
+            <label for="file-upload" class="custom-file-upload">
+              <Text align="center">Choose File</Text>
+            </label>
+            <input
+              id="file-upload"
+              type="file"
+              name="filename"
+              bind:files={filesToUpload}
+              on:change={handleFileChange}
+            />
+          </Flex>
+
+          <Text align="center">
+            {#if filesToUpload}
+              {fileName}
+            {:else}
+              No file selected
+            {/if}
+          </Text>
+        </div>
 
         <Flex justify="center" align="center" gap="md">
           <Checkbox bind:checked={privateFile}></Checkbox>
           <Text>Private?</Text>
         </Flex>
         <Flex justify="center" align="center" gap="md">
           <Checkbox bind:checked={passwordLock} on:change={() => (filePassword = '')}></Checkbox>
-          <Text>Lock with password?</Text>
+          <Text>Encrypt?</Text>
         </Flex>
-        {#if passwordLock}
-          <input type="text" name="filepassword" bind:value={filePassword} required />
-        {/if}
+        <TextInput
+          bind:value={filePassword}
+          required={passwordLock}
+          disabled={!passwordLock}
+          placeholder="Password..."
+          type="password"
+        />
         <Flex justify="space-around" align="center">
           <Button
             variant="filled"
@@ -158,3 +189,36 @@
     </Box>
   </Overlay>
 {/if}
+
+<style>
+  .file-upload-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .custom-file-upload {
+    display: inline-block;
+    padding: 8px 12px;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  #file-upload {
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .custom-file-upload:hover {
+    background-color: #0056b3;
+  }
+</style>