From 089750ea3181f3c60a6a4ba701fb616311d42316 Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 13:48:15 +0200
Subject: [PATCH 1/6] Refactor

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 .../src/lib/components/user/FileRow.svelte    | 15 ++++++---
 frontend/src/routes/+page.svelte              |  2 +-
 frontend/src/routes/auth/login/+page.svelte   | 28 +++++++++++++----
 .../src/routes/auth/register/+page.svelte     | 31 ++++++++++++++++---
 frontend/src/routes/download/+page.svelte     | 14 +++++++--
 frontend/src/routes/user/2fa/+page.svelte     | 14 ++++++---
 frontend/src/routes/user/home/+page.svelte    |  7 +++--
 .../src/routes/user/webhooks/+page.svelte     |  6 ++--
 8 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/frontend/src/lib/components/user/FileRow.svelte b/frontend/src/lib/components/user/FileRow.svelte
index 36bbc38..b52f896 100644
--- a/frontend/src/lib/components/user/FileRow.svelte
+++ b/frontend/src/lib/components/user/FileRow.svelte
@@ -61,8 +61,14 @@
   });
 
   const downloadFile = () => {
-    if (file.encrypted) isDownloadWindowVisible = true;
-    else getFile();
+    if (file.encrypted) {
+      isDownloadWindowVisible = true;
+      window.scrollTo(0, 0);
+
+      return;
+    }
+
+    getFile();
   };
 
   const getFile = async () => {
@@ -308,7 +314,7 @@
         {/if}
         <br />
         <Flex justify="space-around" align="center">
-          <TextInput label="Username" bind:value={usernameShare} />
+          <TextInput label="Username" bind:value={usernameShare} placeholder="Username..." />
         </Flex>
         <Flex justify="space-around" align="center">
           <Button variant="filled" on:click={shareFile}>Share</Button>
@@ -332,9 +338,10 @@
           name="filepassword"
           bind:value={downloadFilePassword}
           placeholder="Password..."
+          required
         />
         <Flex gap="lg" justify="space-between">
-          <Button variant="filled" on:click={getFile} disabled={!downloadFilePassword?.length}>
+          <Button variant="filled" on:click={getFile} disabled={!downloadFilePassword.length}>
             Submit
           </Button>
           <Button variant="light" on:click={() => (isDownloadWindowVisible = false)}>Close</Button>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 85b7e9f..916a49e 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { HOME_SCREEN_ITEMS } from '$lib';
   import Card from '$lib/components/homepage/Card.svelte';
-  import { Button, Flex, Grid, createStyles } from '@svelteuidev/core';
+  import { Anchor, Button, Flex, Grid, createStyles } from '@svelteuidev/core';
   import { onMount } from 'svelte';
 
   const useStyles = createStyles(() => {
diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
index 421fca6..102313e 100644
--- a/frontend/src/routes/auth/login/+page.svelte
+++ b/frontend/src/routes/auth/login/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Button, Text, TextInput } from '@svelteuidev/core';
+  import { Anchor, Button, Text, TextInput } from '@svelteuidev/core';
   import { isAxiosError } from 'axios';
-  import { login } from '../../../server/auth';
   import { onMount } from 'svelte';
+  import { login } from '../../../server/auth';
 
   let username: string = '';
   let password: string = '';
@@ -55,15 +55,25 @@
   <div
     style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding: 10px; border-radius: 5px"
   >
-    <TextInput label="Username" bind:value={username} />
-    <TextInput label="Password" bind:value={password} type="password" />
+    <TextInput label="Username" bind:value={username} required placeholder="Username..." />
+    <TextInput
+      label="Password"
+      bind:value={password}
+      type="password"
+      required
+      placeholder="Password..."
+    />
+
     <br />
+
     <div style="display: flex; justify-content: center;">
       <Button on:click={handleSubmit} disabled={!username.length || !password.length}>Login</Button>
     </div>
+
     <br />
+
     <Text align="center">
-      No account? <a href="/auth/register">Register!</a>
+      No account? <Anchor href="/auth/register">Register!</Anchor>
     </Text>
   </div>
 {/if}
@@ -72,15 +82,21 @@
   <div
     style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding: 10px; border-radius: 5px"
   >
-    <TextInput label="Code" bind:value={code2FA} />
+    <TextInput label="Code" bind:value={code2FA} required placeholder="Code..." />
+
     <br />
+
     <div style="display: flex; justify-content: center;">
       <Button on:click={handleSubmit} disabled={!code2FA?.length}>Submit</Button>
     </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/auth/register/+page.svelte b/frontend/src/routes/auth/register/+page.svelte
index 2140f71..5a19fb6 100644
--- a/frontend/src/routes/auth/register/+page.svelte
+++ b/frontend/src/routes/auth/register/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button, Text, TextInput } from '@svelteuidev/core';
+  import { Anchor, Button, Text, TextInput } from '@svelteuidev/core';
   import { isAxiosError } from 'axios';
   import { onMount } from 'svelte';
   import { register } from '../../../server/auth';
@@ -46,10 +46,29 @@
 <div
   style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding: 10px; border-radius: 5px"
 >
-  <TextInput label="Username (between 5 and 24 characters)" bind:value={username} />
-  <TextInput label="Password (between 5 and 24 characters)" bind:value={password} type="password" />
-  <TextInput label="Repeat Password" bind:value={repeatPassword} type="password" />
+  <TextInput
+    label="Username (between 5 and 24 characters)"
+    bind:value={username}
+    required
+    placeholder="Username..."
+  />
+  <TextInput
+    label="Password (between 5 and 24 characters)"
+    bind:value={password}
+    type="password"
+    required
+    placeholder="Password..."
+  />
+  <TextInput
+    label="Repeat Password"
+    bind:value={repeatPassword}
+    type="password"
+    required
+    placeholder="Password..."
+  />
+
   <br />
+
   <div style="display: flex; justify-content: center;">
     <Button
       on:click={handleSubmit}
@@ -58,8 +77,10 @@
       Register
     </Button>
   </div>
+
   <br />
+
   <Text align="center">
-    Already have an account? <a href="/auth/login">Login!</a>
+    Already have an account? <Anchor href="/auth/login">Login!</Anchor>
   </Text>
 </div>
diff --git a/frontend/src/routes/download/+page.svelte b/frontend/src/routes/download/+page.svelte
index 7265323..278e98c 100644
--- a/frontend/src/routes/download/+page.svelte
+++ b/frontend/src/routes/download/+page.svelte
@@ -159,13 +159,23 @@
     {/if}
 
     {#if fileMetadata?.encrypted}
-      <TextInput placeholder="Password..." type="password" bind:value={downloadFilePassword} />
+      <TextInput
+        placeholder="Password..."
+        type="password"
+        bind:value={downloadFilePassword}
+        required
+      />
     {/if}
+
     <Button
       on:click={downloadFile}
-      disabled={fileMetadata?.encrypted && !downloadFilePassword?.length}>Download</Button
+      disabled={fileMetadata?.encrypted && !downloadFilePassword?.length}
     >
+      Download
+    </Button>
+
     <br />
+
     {#if fileUrl && isPreviewable}
       <div
         style="display: flex; justify-content: center; align-items: center; height: 80vh; width: 80vw; border: 2px solid #ccc;"
diff --git a/frontend/src/routes/user/2fa/+page.svelte b/frontend/src/routes/user/2fa/+page.svelte
index 18603c2..1a3a25c 100644
--- a/frontend/src/routes/user/2fa/+page.svelte
+++ b/frontend/src/routes/user/2fa/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import QR from '@svelte-put/qr/img/QR.svelte';
-  import { Button, Flex, Text, TextInput } from '@svelteuidev/core';
+  import { Anchor, Button, Flex, Text, TextInput } from '@svelteuidev/core';
   import { isAxiosError } from 'axios';
   import { onMount } from 'svelte';
   import { get2FAToken, remove2FAToken } from '../../../server/auth';
@@ -50,10 +50,16 @@
 
 {#if code == null}
   <div class="container">
-    <TextInput label="Password" bind:value={password} type="password" />
+    <TextInput
+      label="Password"
+      bind:value={password}
+      type="password"
+      required
+      placeholder="Password..."
+    />
     <br />
     <div class="button-container">
-      <Button on:click={fetchCode} disabled={!password.length}>Login</Button>
+      <Button on:click={fetchCode} disabled={!password.length}>Verify</Button>
     </div>
     <br />
   </div>
@@ -86,7 +92,7 @@
 
   <Flex justify="center">
     <Button>
-      <a href="/user/account">Back</a>
+      <Anchor href="/user/account">Back</Anchor>
     </Button>
   </Flex>
 {/if}
diff --git a/frontend/src/routes/user/home/+page.svelte b/frontend/src/routes/user/home/+page.svelte
index 5497d53..75c6892 100644
--- a/frontend/src/routes/user/home/+page.svelte
+++ b/frontend/src/routes/user/home/+page.svelte
@@ -135,7 +135,7 @@
 {/each}
 
 {#if visible}
-  <Overlay opacity={0.9} color="#000" zIndex={5} center class={classes.flexOverlay}>
+  <Overlay opacity={1} color="#000" zIndex={5} center class={classes.flexOverlay}>
     <Box class={getStyles()}>
       <Flex direction="column" align="space-evenly" gap="md" justify="center">
         <Title order={3}>Upload File</Title>
@@ -153,7 +153,7 @@
               on:change={handleFileChange}
             />
           </Flex>
-
+          <br />
           <Text align="center">
             {#if filesToUpload}
               {fileName}
@@ -177,13 +177,14 @@
           disabled={!passwordLock}
           placeholder="Password..."
           type="password"
+          label="Password (at least 5 characters)"
         />
         <Flex justify="space-around" align="center">
           <Button
             variant="filled"
             on:click={sendData}
             disabled={!filesToUpload?.length ||
-              (filesToUpload?.length && passwordLock && !filePassword?.length)}
+              (filesToUpload?.length && passwordLock && filePassword.length < 5)}
           >
             Submit
           </Button>
diff --git a/frontend/src/routes/user/webhooks/+page.svelte b/frontend/src/routes/user/webhooks/+page.svelte
index df07a16..c1c03df 100644
--- a/frontend/src/routes/user/webhooks/+page.svelte
+++ b/frontend/src/routes/user/webhooks/+page.svelte
@@ -108,13 +108,13 @@
 {/each}
 
 {#if visible}
-  <Overlay opacity={0.9} color="#000" zIndex={5} center class={classes.flexOverlay}>
+  <Overlay opacity={1} color="#000" zIndex={5} center class={classes.flexOverlay}>
     <Box class={getStyles()}>
       <Flex direction="column" align="space-evenly" gap="md" justify="center">
         <Title order={3}>Add Webhook</Title>
 
-        <TextInput label="Name" bind:value={name} />
-        <TextInput label="URL" bind:value={url} />
+        <TextInput label="Name" bind:value={name} required placeholder="Name..." />
+        <TextInput label="URL" bind:value={url} required placeholder="URL..." />
 
         <Flex justify="space-around" align="center">
           <Button

From 8bf2b50ca806db9b39d40e85e7b0fbe8f8b7a29b Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 13:52:14 +0200
Subject: [PATCH 2/6] Optimize imports

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 frontend/src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 916a49e..85b7e9f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { HOME_SCREEN_ITEMS } from '$lib';
   import Card from '$lib/components/homepage/Card.svelte';
-  import { Anchor, Button, Flex, Grid, createStyles } from '@svelteuidev/core';
+  import { Button, Flex, Grid, createStyles } from '@svelteuidev/core';
   import { onMount } from 'svelte';
 
   const useStyles = createStyles(() => {

From 9c425d0925ffa0e7c625933299ebdc82305cd8f4 Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 14:06:47 +0200
Subject: [PATCH 3/6] Improve file sharing box

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 .../src/lib/components/user/FileRow.svelte    | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/user/FileRow.svelte b/frontend/src/lib/components/user/FileRow.svelte
index b52f896..9dd2acf 100644
--- a/frontend/src/lib/components/user/FileRow.svelte
+++ b/frontend/src/lib/components/user/FileRow.svelte
@@ -22,6 +22,7 @@
   } from '../../../server/files';
   import { getWebhooksForSpecifiedUser, sendWebhook } from '../../../server/webhooks';
   import { FileMetadata } from '../../types/FileMetadata';
+  import { onMount } from 'svelte';
 
   export let file = new FileMetadata(
     'test',
@@ -218,6 +219,12 @@
     minute: 'numeric'
   });
 
+  let currentUsername: string | null = null;
+
+  onMount(() => {
+    currentUsername = localStorage.getItem('username');
+  });
+
   $: ({ classes, getStyles } = useStyles());
 </script>
 
@@ -294,10 +301,39 @@
     <Box class={getStyles()}>
       <Flex direction="column" align="space-evenly" gap="md" justify="center">
         <Title order={3}>Share File</Title>
+
+        <Flex justify="space-around" align="center" direction="column" gap="md">
+          <TextInput
+            label="Username"
+            bind:value={usernameShare}
+            placeholder="Username..."
+            required
+          />
+
+          {#if currentUsername === usernameShare}
+            <Text color="red">You cannot share files with yourself.</Text>
+          {/if}
+
+          <Flex direction="row" justify="space-between" gap="lg">
+            <Button
+              variant="filled"
+              on:click={shareFile}
+              disabled={!usernameShare.length || currentUsername === usernameShare}
+            >
+              Share
+            </Button>
+
+            <Button variant="light" on:click={() => (visible = false)}>Close</Button>
+          </Flex>
+        </Flex>
+
+        <br />
+
+        <Title order={3}>Shared With</Title>
         {#if file.shared_people.length > 0}
           {#each file.shared_people as share}
-            <Box class={getStyles()}>
-              <Flex align="center" justify="space-evenly" style="height: 100%;">
+            <Box>
+              <Flex align="center" justify="space-evenly" style="height: 50%;">
                 <Text size="sm" css={{ flex: 1, textAlign: 'center' }}>
                   {share.username}
                 </Text>
@@ -312,17 +348,6 @@
         {:else}
           <Text>This file is not yet shared with anyone.</Text>
         {/if}
-        <br />
-        <Flex justify="space-around" align="center">
-          <TextInput label="Username" bind:value={usernameShare} placeholder="Username..." />
-        </Flex>
-        <Flex justify="space-around" align="center">
-          <Button variant="filled" on:click={shareFile}>Share</Button>
-        </Flex>
-        <br />
-        <Flex justify="space-around" align="center">
-          <Button variant="light" on:click={() => (visible = false)}>Close</Button>
-        </Flex>
       </Flex>
     </Box>
   </Overlay>

From 2021858b29c3acb581ce69c7f948be340ead6628 Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 14:14:13 +0200
Subject: [PATCH 4/6] Truncate text

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 frontend/src/lib/components/user/WebhookRow.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/user/WebhookRow.svelte b/frontend/src/lib/components/user/WebhookRow.svelte
index 35cbc82..7dba60c 100644
--- a/frontend/src/lib/components/user/WebhookRow.svelte
+++ b/frontend/src/lib/components/user/WebhookRow.svelte
@@ -59,10 +59,10 @@
 <Box class={getStyles()}>
   <Flex align="center" justify="space-evenly" style="height: 100%;">
     <Text size="sm" css={{ flex: 1, textAlign: 'center' }}>
-      {webhook.platform}
+      {webhook.platform.length > 50 ? `${webhook.platform.slice(0, 50)}...` : webhook.platform}
     </Text>
     <Text size="sm" css={{ flex: 1, textAlign: 'center' }}>
-      {webhook.url}
+      {webhook.url.length > 50 ? `${webhook.url.slice(0, 50)}...` : webhook.url}
     </Text>
     <Flex justify="center" gap="xs" css={{ flex: 1 }}>
       <Tooltip openDelay={10} label="Delete">

From 8a1c14e2b58eba4bdcdf8a56952ac3272ad1cf10 Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 14:14:25 +0200
Subject: [PATCH 5/6] Add padding

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 frontend/src/routes/download/+page.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/download/+page.svelte b/frontend/src/routes/download/+page.svelte
index 278e98c..4d44fb4 100644
--- a/frontend/src/routes/download/+page.svelte
+++ b/frontend/src/routes/download/+page.svelte
@@ -165,6 +165,7 @@
         bind:value={downloadFilePassword}
         required
       />
+      <br />
     {/if}
 
     <Button
@@ -192,7 +193,7 @@
         <Text>
           The file must be one of the following types to be previewed: {SUPPORTED_FILE_TYPES.join(
             ', '
-          )}
+          )}.
         </Text>
       </div>
     {/if}

From a45462abf7c82ff32d8243608c50fc37d85454e8 Mon Sep 17 00:00:00 2001
From: Delemangi <milev.stefan@gmail.com>
Date: Sun, 16 Jun 2024 14:21:13 +0200
Subject: [PATCH 6/6] Scroll to top

Signed-off-by: Delemangi <milev.stefan@gmail.com>
---
 frontend/src/lib/components/user/FileRow.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/lib/components/user/FileRow.svelte b/frontend/src/lib/components/user/FileRow.svelte
index 9dd2acf..d184601 100644
--- a/frontend/src/lib/components/user/FileRow.svelte
+++ b/frontend/src/lib/components/user/FileRow.svelte
@@ -208,6 +208,7 @@
   const openShare = () => {
     if (file.shared) {
       visible = true;
+      window.scrollTo(0, 0);
     }
   };