login and register full

Delemangi · Mar 4, 2024 · 516da7c · 516da7c
1 parent 743c2a5
commit 516da7c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 17 deletions.
diff --git a/backend/app/main.py b/backend/app/main.py
@@ -3,6 +3,7 @@
 from pathlib import Path
 
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 
 from app.database import initialize_database
 import uvicorn
@@ -42,6 +43,15 @@ async def lifespan(_: FastAPI) -> AsyncGenerator[None, None]:
 
 def make_app() -> FastAPI:
     app = FastAPI(lifespan=lifespan)
+
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["*"],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
     app.include_router(auth_router, prefix="/auth")
     app.include_router(file_router, prefix="/files")
 

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,7 +1,4 @@
 <!doctype html>
-<script>
-	import { SvelteUIProvider } from '@svelteuidev/core';
-</script>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { TextInput, Button } from '@svelteuidev/core';
+  import { Header } from '$lib';
+
+  let email = '';
+  let password = '';
+  let accessToken = '';
+
+  async function handleSubmit() {
+    try {
+      const formData = new FormData();
+      formData.append('username', email);
+      formData.append('password', password);
+
+      const response = await fetch('http://localhost:8002/auth/login/', {
+        method: 'POST',
+        body: formData
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        accessToken = data.access_token;
+        // Save the token to localStorage or sessionStorage
+        localStorage.setItem('accessToken', accessToken);
+        window.location.href = '/';
+      } else {
+        alert('Login failed. Please check your credentials.');
+      }
+    } catch (error) {
+      console.error('Error logging in:', error);
+      alert('An error occurred while logging in. Please try again later.');
+    }
+  }
+</script>
+
+<Header/>
+
+<div style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding:10px; border-radius:5px">
+  <TextInput label='Email' bind:value={email} />
+  <TextInput type='password' label='Password' bind:value={password} />
+  <br/>
+  <Button on:click={handleSubmit}>Login</Button>
+</div>
diff --git a/frontend/src/routes/auth/register/+page.svelte b/frontend/src/routes/auth/register/+page.svelte
@@ -4,40 +4,46 @@
 
   let email = '';
   let password = '';
+  let confirmPassword = '';
 
   async function handleSubmit() {
     try {
-      // Make API call to log in the user
-      const formData = new URLSearchParams();
-      formData.append('username', email);
-      formData.append('password', password);
 
-      const response = await fetch('http://localhost:8002/auth/register', {
+      if (password !== confirmPassword) {
+        alert('Passwords do not match. Please confirm your password.');
+        return;
+      }
+
+      const body = {
+        username: email,
+        password: password
+      }
+      const response = await fetch('http://localhost:8002/auth/register/', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded'
+          'Content-Type': 'application/json'
         },
-        body: formData
+        body: JSON.stringify(body)
       });
 
       if (response.ok) {
-        // Redirect if login successful
-        window.location.href = '/';
+        window.location.href = '/auth/login';
       } else {
-        // Show alert if login failed
-        alert('Login failed. Please check your credentials.');
+        alert('Register failed. Please check your credentials.');
       }
     } catch (error) {
-      console.error('Error logging in:', error);
-      alert('An error occurred while logging in. Please try again later.');
+      console.error('Error registering:', error);
+      alert('An error occurred while registering. Please try again later.');
     }
   }
 </script>
 
 <Header/>
+
 <div style="width: 300px; margin: auto; top: 50%; transform: translate(0, 30vh); border: 1px solid gray; padding:10px; border-radius:5px">
   <TextInput label='Email' bind:value={email} />
   <TextInput type='password' label='Password' bind:value={password} />
+  <TextInput type='password' label='Confirm Password' bind:value={confirmPassword} />
   <br/>
-  <Button on:click={handleSubmit}>Login</Button>
+  <Button on:click={handleSubmit}>Register</Button>
 </div>