Frontend improvements 5

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',
@@ -61,8 +62,14 @@
   });
 
   const downloadFile = () => {
-    if (file.encrypted) isDownloadWindowVisible = true;
-    else getFile();
+    if (file.encrypted) {
+      isDownloadWindowVisible = true;
+      window.scrollTo(0, 0);
+
+      return;
+    }
+
+    getFile();
   };
 
   const getFile = async () => {
@@ -201,6 +208,7 @@
   const openShare = () => {
     if (file.shared) {
       visible = true;
+      window.scrollTo(0, 0);
     }
   };
 
@@ -212,6 +220,12 @@
     minute: 'numeric'
   });
 
+  let currentUsername: string | null = null;
+
+  onMount(() => {
+    currentUsername = localStorage.getItem('username');
+  });
+
   $: ({ classes, getStyles } = useStyles());
 </script>
 
@@ -288,10 +302,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>
@@ -306,17 +349,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} />
-        </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>
@@ -332,9 +364,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>

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">

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}

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>

frontend/src/routes/download/+page.svelte

@@ -159,13 +159,24 @@
     {/if}
 
     {#if fileMetadata?.encrypted}
-      <TextInput placeholder="Password..." type="password" bind:value={downloadFilePassword} />
+      <TextInput
+        placeholder="Password..."
+        type="password"
+        bind:value={downloadFilePassword}
+        required
+      />
+      <br />
     {/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;"
@@ -182,7 +193,7 @@
         <Text>
           The file must be one of the following types to be previewed: {SUPPORTED_FILE_TYPES.join(
             ', '
-          )}
+          )}.
         </Text>
       </div>
     {/if}

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}

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>

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