Delemangi · amatanasovska · Mar 16, 2024 · Mar 16, 2024 · Mar 16, 2024 · Mar 16, 2024
diff --git a/backend/app/file_transfer/router.py b/backend/app/file_transfer/router.py
@@ -22,7 +22,7 @@ async def create_upload_file(
     file: UploadFile,
 ) -> dict:
     await upload_file_unencrypted(session, file, current_user)
-    return {"filename": file.filename}
+    return {"filename": file.filename, "username": current_user.username}
 
 
 @router.get("/", response_model=list[MetadataFileResponse])

diff --git a/backend/app/file_transfer/schemas.py b/backend/app/file_transfer/schemas.py
@@ -1,3 +1,5 @@
+from datetime import datetime
+import uuid
 from pydantic import BaseModel
 
 
@@ -7,10 +9,13 @@ class FileUploaded(BaseModel):
 
 
 class MetadataFileResponse(BaseModel):
+    id: uuid.UUID
     name: str
     path: str
     size: int
     encrypted: bool
+    timestamp: datetime
+    expiration: datetime
 
     class Config:
         from_attributes = True
diff --git a/backend/app/file_transfer/service.py b/backend/app/file_transfer/service.py
@@ -60,10 +60,13 @@ async def get_all_files_user(
 
         return [
             MetadataFileResponse(
+                id=file.id,
                 name=str(file.name),
                 path=str(file.path),
                 size=int(file.size),  # type: ignore
                 encrypted=bool(file.encrypted),
+                timestamp=file.timestamp,
+                expiration=file.expiration,
             )
             for file in files.scalars()
         ]

diff --git a/backend/app/main.py b/backend/app/main.py
@@ -48,7 +48,6 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
 
 def make_app() -> FastAPI:
     app = FastAPI(lifespan=lifespan)
-
     app.add_middleware(
         CORSMiddleware,
         allow_origins=["*"],

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -9,6 +9,8 @@ services:
       - .env
     volumes:
       - ./pg_data:/var/lib/postgresql/data
+    ports:
+      - "5433:5432"
 
   backend:
     build:

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,11 +26,13 @@
     "svelte-check": "^3.6.0",
     "tslib": "^2.4.1",
     "typescript": "^5.3.3",
-    "vite": "^5.1.5"
+    "vite": "^5.1.6"
   },
   "type": "module",
   "dependencies": {
     "@svelteuidev/composables": "^0.15.4",
-    "@svelteuidev/core": "^0.15.4"
+    "@svelteuidev/core": "^0.15.4",
+    "axios": "^1.6.8",
+    "radix-icons-svelte": "^1.2.1"
   }
 }
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Synthra</title>
+    <link rel="stylesheet" href="%sveltekit.assets%/global.css" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%

diff --git a/frontend/src/axios/axios-request.ts b/frontend/src/axios/axios-request.ts
@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+export async function getFilesForSpecifiedUser(accessToken: string | null): Promise<File[]> {
+  return await axios
+    .get('http://localhost:8002/files', {
+      headers: {
+        authorization: `Bearer ${accessToken}`
+      }
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
+export async function sendFileForSpecifiedUser(accessToken: string | null, file: File): void {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  await axios
+    .post('http://localhost:8002/files', formData, {
+      headers: {
+        authorization: `Bearer ${accessToken}`
+      }
+    })
+    .then((response) => {
+      console.log(response);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte
@@ -1,18 +1,57 @@
 <!-- Header.svelte -->
+<script>
+  import { createStyles, Switch, Header, Flex, Title } from '@svelteuidev/core';
+  export let toggleTheme = () => {};
+  export let currentTheme = 'light';
 
-<header>
-  <h1>Synthra</h1>
-</header>
+  const useStyles = createStyles((theme) => {
+    return {
+      root: {
+        height: 80
+      },
+      flex: {
+        [`${theme.dark} &`]: {
+          bc: theme.fn.themeColor('dark', 5),
+          color: 'white'
+        },
+        backgroundColor: theme.fn.themeColor('gray', 1),
+        paddingLeft: 20,
+        paddingRight: 20
+      },
+      leftOptions: {
+        padding: 30
+      },
+      logo: {
+        fontSize: 30,
+        [`${theme.dark} &`]: {
+          backgroundImage: 'linear-gradient(to right, pink, lightblue)'
+        },
+        backgroundImage: 'linear-gradient(to right, red, cyan)',
+        backgroundClip: 'text',
+        color: 'transparent'
+      }
+    };
+  });
 
-<style>
-  header {
-    text-align: start;
-    margin: 5;
-    border-bottom: 1px solid gray;
-    padding: 10px;
-  }
+  $: ({ classes, getStyles } = useStyles());
+</script>
 
-  h1 {
-    margin: 0;
-  }
-</style>
+<Header class={getStyles()} slot="header" height="50">
+  <Flex class={classes.flex} justify="space-between" align="center" style="height: 100%;">
+    <a class={classes.leftOptions} href="/">
+      <div class={classes.logo}>Synthra</div>
+    </a>
+    <Flex justify="space-between">
+      <a class={classes.leftOptions} href="/auth/login">
+        <Title order={3}>Log In</Title>
+      </a>
+
+      <Switch
+        color="gray"
+        on:change={toggleTheme}
+        label={currentTheme == 'dark' ? 'Dark' : 'Light'}
+        checked={currentTheme == 'dark'}
+      />
+    </Flex>
+  </Flex>
+</Header>
diff --git a/frontend/src/lib/components/homepage/Card.svelte b/frontend/src/lib/components/homepage/Card.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Card, Group, Text, Badge, type BadgeVariant } from '@svelteuidev/core';
+
+  export let badgeTitle: string = '';
+  export let badgeColor: string = '';
+  export let badgeVariant: BadgeVariant = 'light';
+  export let title: string = '';
+  export let description: string = '';
+  export let classes: any = [];
+  export let groupCardClasses: any = [];
+</script>
+
+<Card shadow="sm" padding="lg" class={classes}>
+  <Group position="apart" class={groupCardClasses}>
+    <Text weight={500}>{title}</Text>
+    <Badge color={badgeColor} variant={badgeVariant}>
+      {badgeTitle}
+    </Badge>
+  </Group>
+
+  <Text size="sm">
+    {description}
+  </Text>
+</Card>