login/registration updated

diff --git a/backend/server/routers/users.py b/backend/server/routers/users.py
index 6f214b693b35f883cc8118714cc0411c90b04516..07be90df532558e4092e2a8858aa318bff0563b4 100644 (file)
--- a/backend/server/routers/users.py
+++ b/backend/server/routers/users.py
@@ -1,3 +1,4 @@
+import asyncio
 import datetime
 import json
 import secrets
@@ -20,17 +21,18 @@ class Login(BaseModel):
 
 @router.post("/users/login")
 async def login(login: Login, respose: Response):
+
     # check if user exists
     content:dict = fileHandling.getUsers()
     if len(content) == 0 or "users" not in content.keys() or len(content["users"]) == 0 or not any(user["username"] == login.username for user in content["users"]):
         logger.error(f"Login failed. User '{login.username}' not found")
-        raise HTTPException(status_code=404, detail="User not found")
+        raise HTTPException(status_code=404, detail="User/Password combination not found")
     
     # get user data
     user = next(user for user in content["users"] if user["username"] == login.username)
     if not security.verify_password(login.password, user["password"]):
         logger.error(f"Login failed. Password for user '{login.username}' is incorrect")
-        raise HTTPException(status_code=400, detail="Password is incorrect")
+        raise HTTPException(status_code=404, detail="User/Password combination not found")
     
     # get intermediate key
     derived_key = base64.b64encode(security.derive_key_from_password(login.password, user["salt"])).decode()
@@ -61,7 +63,6 @@ async def register(register: Register):
 
     # check if username already exists
     if len(content) > 0:
-        content: dict = json.loads(content)
         if ("users" not in content.keys()):
             logger.error("users.json is not in the correct format. Key 'users' is missing.")
             raise HTTPException(status_code=500, detail="users.json is not in the correct format")

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index ed6dd230e8de3b2d11d54191aa2b20d8bc495ff6..0a3f460bcaa6eef5ffc1ac1e9524e88e5b040d98 100644 (file)
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -5,21 +5,37 @@
        import { dev } from '$app/environment';
        import { goto } from '$app/navigation';
 
-       let show_warning_empty_fields = $state(false);
-       let show_warning_passwords_do_not_match = $state(false);
+       let show_login_failed = $state(false);
+       let show_login_warning_empty_fields = $state(false);
+       let is_logging_in = $state(false);
 
+       let show_registration_warning_empty_fields = $state(false);
+       let show_warning_passwords_do_not_match = $state(false);
        let show_registration_success = $state(false);
        let show_registration_failed = $state(false);
        let show_registration_failed_with_message = $state(false);
        let registration_failed_message = $state('');
+       let is_registering = $state(false);
 
        let API_URL = dev ? 'http://localhost:8000' : window.location.pathname.replace(/\/+$/, '');
 
        function handleLogin(event) {
                event.preventDefault();
+
+               show_login_failed = false;
+               show_login_warning_empty_fields = false;
+
                const username = document.getElementById('loginUsername').value;
                const password = document.getElementById('loginPassword').value;
 
+               if (username === '' || password === '') {
+                       show_login_warning_empty_fields = true;
+                       console.error('Please fill out all fields');
+                       return;
+               }
+
+               is_logging_in = true;
+
                axios
                        .post(API_URL + '/users/login', { username, password })
                        .then((response) => {
@@ -27,15 +43,17 @@
                                goto('/');
                        })
                        .catch((error) => {
-                               console.error(error);
+                               if (error.response.status === 404) {
+                                       show_login_failed = true;
+                               }
+                       })
+                       .finally(() => {
+                               is_logging_in = false;
                        });
-
-               console.log('Login attempt:', { username, password });
-               // Add your login logic here
        }
 
        function handleRegister(event) {
-               show_warning_empty_fields = false;
+               show_registration_warning_empty_fields = false;
                show_warning_passwords_do_not_match = false;
                show_registration_success = false;
                show_registration_failed = false;
@@ -47,7 +65,7 @@
                const password2 = document.getElementById('registerPassword2').value;
 
                if (username === '' || password === '') {
-                       show_warning_empty_fields = true;
+                       show_registration_warning_empty_fields = true;
                        console.error('Please fill out all fields');
                        return;
                }
@@ -58,6 +76,8 @@
                        return;
                }
 
+               is_registering = true;
+
                axios
                        .post(API_URL + '/users/register', { username, password })
                        .then((response) => {
@@ -73,6 +93,9 @@
                                console.error(error.response.data.detail);
                                registration_failed_message = error.response.data.detail;
                                show_registration_failed_with_message = true;
+                       })
+                       .finally(() => {
+                               is_registering = false;
                        });
        }
 </script>
@@ -124,8 +147,26 @@
                                                                />
                                                                <label for="loginPassword">Password</label>
                                                        </div>
+                                                       {#if show_login_failed}
+                                                               <div class="alert alert-danger" role="alert">
+                                                                       Login fehlgeschlagen!<br />
+                                                                       Bitte Eingabedaten überprüfen.
+                                                               </div>
+                                                       {/if}
+                                                       {#if show_login_warning_empty_fields}
+                                                               <div class="alert alert-danger" role="alert">
+                                                                       Eingabefelder dürfen nicht leer sein!
+                                                               </div>
+                                                       {/if}
                                                        <div class="d-flex justify-content-center">
-                                                               <button type="submit" class="btn btn-primary">Login</button>
+                                                               <button type="submit" class="btn btn-primary" disabled={is_logging_in}>
+                                                                       {#if is_logging_in}
+                                                                               <div class="spinner-border spinner-border-sm" role="status">
+                                                                                       <span class="visually-hidden">Loading...</span>
+                                                                               </div>
+                                                                       {/if}
+                                                                       Login
+                                                               </button>
                                                        </div>
                                                </form>
                                        </div>
@@ -190,7 +231,7 @@
                                                                        Registrierung erfolgreich - bitte einloggen!
                                                                </div>
                                                        {/if}
-                                                       {#if show_warning_empty_fields}
+                                                       {#if show_registration_warning_empty_fields}
                                                                <div class="alert alert-danger" role="alert">
                                                                        Eingabefelder dürfen nicht leer sein!
                                                                </div>
@@ -199,7 +240,14 @@
                                                                <div class="alert alert-danger" role="alert">Passwörter stimmen nicht überein!</div>
                                                        {/if}
                                                        <div class="d-flex justify-content-center">
-                                                               <button type="submit" class="btn btn-primary">Registrieren</button>
+                                                               <button type="submit" class="btn btn-primary" disabled={is_registering}>
+                                                                       {#if is_registering}
+                                                                               <div class="spinner-border spinner-border-sm" role="status">
+                                                                                       <span class="visually-hidden">Loading...</span>
+                                                                               </div>
+                                                                       {/if}
+                                                                       Registrieren
+                                                               </button>
                                                        </div>
                                                </form>
                                        </div>