Add error message to login, Fix Internal Error 500

Yeah i touched the rest api and fixed the internal favicon error :P
Cleaned up the pages and linked the error messages

backend/rest_api.py

@@ -18,7 +18,12 @@ def handle_first_launched():
     folder_path = path.join(folder_path, "Unnamed_Password_Manager")
     if not path.exists(folder_path):
         mkdir(folder_path)
+             
 
+@app.route('/favicon.ico')
+def favicon():
+    favicon_path = path.join(app.root_path, '../frontend/static', 'favicon.ico')
+    return send_file(favicon_path, mimetype='image/vnd.microsoft.icon')  
 
 @app.get("/")
 @app.get("/<path:url_path>")

frontend/arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="352,128.4 319.7,96 160,256 160,256 160,256 319.7,416 352,383.6 224.7,256 "/></svg>

frontend/dashboard.html

@@ -12,7 +12,7 @@
 
         </div>
     </div>
-    <script src="index.js"></script>
+    <script src=""></script>
 </body>
 
 <footer><p>© 2023 Password Manager</p></footer>

frontend/download.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="360.098 116.492 319.471 85.615 118.599 238.096 118.599 238.096 118.599 238.096 319.471 390.577 360.098 359.7 199.979 238.096" style="fill: rgb(255, 255, 255);" transform="matrix(1.0000000000000002, 0, 0, 1.0000000000000002, 0, 1.1102230246251565e-16)"/>
+</svg>

frontend/index.css

@@ -9,7 +9,7 @@ body {
   align-items: center;
   justify-content: center;
   background-image: url("bg.jpg");
-  background-size: cover;
+  background-size: 200% auto;
   background-position: center;
   background-repeat: no-repeat;
 }

frontend/index.js

@@ -47,32 +47,18 @@ console.log(formData)
     try {
         const response = await fetch('/login', {
             method: "post",
-            /* headers: {
-                'Content-Type': 'application/json'
-            }*/
             body: formData
         });
         
         if(response.ok) {
             window.location.href = "dashboard.html";
         } else if(!response.ok) {
-            if (response.status === 403) {
+            const errorMessage = await response.text();
-                const error = new Error('Access denied: You do not have permission to access this resource.');
+            document.getElementById("errlabel").innerHTML = errorMessage;
-                    document.getElementById("errlabel").innerHTML = "Invalid Details!";
                 setTimeout(()=> {
                     document.getElementById("errlabel").innerHTML = "";
                 },3000)
-                console.log(response)
+            throw new Error(errorMessage);
-                throw error;
-            }
-        }
-
-        //error
-        const errorData = await response.json();
-        if (response.status === 401) {
-            throw new Error('Invalid username or password')
-        } else {
-            throw new Error(errorData.error)    
         }
         
         // const data = await response.json();
@@ -83,10 +69,7 @@ console.log(formData)
 
 
     } catch (error) {
-        console.log(error);
+        console.error('Error:', error.message);
-        if(error instanceof TypeError && error.message === 'Failed to fetch'){
-            console.log("Failed Server")
-        }
     }
 
 }

frontend/register.css

@@ -1,102 +1,189 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
-  }
+}
-  
-  body {
-    background-color: dimgrey;
-    display: flex;
-    margin-top: 25px;
-    align-items: center;
-    justify-content: center;
-    background-image: url("bg.jpg");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-  
-  .wrapper {
-    display: flex;
-    width: 90vw;
-    height: 90vh;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  
-  .container {
-    display: flex;
-    background-color: transparent;
-    backdrop-filter: blur(20px);
-    justify-content: center;
-    align-items: center;
-    width: 450px;
-    height: 400px;
-    flex-direction: column;
-    padding: 70px;
-    padding-bottom: 90px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
-    row-gap: 8px;
-    border-radius: 50px;
-  }
 
-  .input {
+body {
-    width: 300px;
+  background-color: dimgrey;
-    height: 30px;
+  display: flex;
-    background-color: transparent;
+  margin-top: 25px;
-    color: rgb(255, 255, 255, 0.8);
+  align-items: center;
-    box-shadow: 2px 2px 3px rgb(0, 0, 0, 0.5);
+  justify-content: center;
-    border: none;
+  background-image: url("bg.jpg");
-    border-top: rgba(255, 255, 255, 0.2) 2px solid;
+  background-size: 200% auto;
-    border-left: rgb(255, 255, 255, 0.2) 2px solid;
+  background-position: center;
-    border-radius: 10px;
+  background-repeat: no-repeat;
-    padding-left: 5px;
+}
-  }
-  
-  .idiv p {
-    color: white;
-    font-family: 'Pixelify Sans', cursive;
-    margin-left: 5px;
-  }
-  
-  #username::placeholder {
-    color: rgb(255, 255, 255, 0.5);
-    padding-left: 5px;
-  }
-  
-  #password::placeholder {
-    color: rgb(255, 255, 255, 0.5);
-    padding-left: 5px;
-  }
 
-  .idiv {
+.wrapper {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  width: 90vw;
-    row-gap: 10px;
+  height: 90vh;
-    justify-content: center;
+  align-items: center;
-    padding: 7px;
+  justify-content: center;
-  }
+}
-  
+
-  .idiv p{
+
-    padding: none;
+.container {
-    margin: none;
+  display: flex;
-    display: absolute;
+  background-color: transparent;
-    translate: 0px 12px;
+  backdrop-filter: blur(20px);
-  }
+  justify-content: center;
-  
+  align-items: center;
-  #loginb {
+  width: 450px;
-    background-color: transparent;
+  height: 400px;
-    color: rgb(255, 255, 255, 0.8);
+  flex-direction: column;
-    padding: 7px;
+  padding: 70px;
-    margin-top: 20px;
+  padding-bottom: 90px;
-    margin-bottom: 20px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
-    width: 150px;
+  row-gap: 8px;
-    box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5);
+  border-radius: 50px;
-    translate: 0px -5px;
+}
-    font-family: 'Pixelify Sans', cursive;
+
-    font-size: 20px;
+#register {
-    border-radius: 10px;
+  display: block;
-  }
+  text-align: center;
-  
+  font-family: 'Pixelify Sans', cursive;
-  #loginb:active {
+  font-size: 50px;
-    background-color: rgb(155, 155, 155, 0.3);
+  text-shadow: 2px 2px 5px rgb(0, 0, 0);
-  }
+  color: white;
+  translate: 0px 10px;
+}
+
+.input {
+  width: 300px;
+  height: 30px;
+  background-color: transparent;
+  color: rgb(255, 255, 255, 0.8);
+  box-shadow: 2px 2px 3px rgb(0, 0, 0, 0.5);
+  border: none;
+  border-top: rgba(255, 255, 255, 0.2) 2px solid;
+  border-left: rgb(255, 255, 255, 0.2) 2px solid;
+  border-radius: 10px;
+  padding-left: 5px;
+}
+
+.idiv p {
+  color: white;
+  font-family: 'Pixelify Sans', cursive;
+  margin-left: 5px;
+}
+
+#username::placeholder {
+  color: rgb(255, 255, 255, 0.5);
+  padding-left: 5px;
+}
+
+#password::placeholder {
+  color: rgb(255, 255, 255, 0.5);
+  padding-left: 5px;
+}
+
+#conpassword::placeholder {
+  color: rgb(255, 255, 255, 0.5);
+  padding-left: 5px;
+}
+
+.idiv input {
+  translate: 0px -20px;
+}
+
+.idiv {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  justify-content: center;
+  padding: 7px;
+}
+
+.idiv p{
+  padding: none;
+  margin: none;
+  display: absolute;
+  translate: 0px 12px;
+}
+
+#loginb {
+  background-color: transparent;
+  color: rgb(255, 255, 255, 0.8);
+  padding: 7px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 150px;
+  box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5);
+  translate: 0px -5px;
+  font-family: 'Pixelify Sans', cursive;
+  font-size: 20px;
+  border-radius: 10px;
+}
+
+#loginb:active {
+  background-color: rgb(155, 155, 155, 0.3);
+}
+
+.help {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+
+.help div{
+  display: flex;
+  width: 50%;
+  justify-content: center;
+}
+
+.error label {
+  position: absolute;
+  display: block;
+  justify-content: center;
+  translate: -50% 3px;
+  color: rgba(184, 156, 255, 0.9);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  font-style: bold;
+  font-weight: bold;
+}
+
+a {
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.5);
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  font-size: 12px;
+}
+
+a:active {
+  color: rgb(196, 196, 196, 10);
+}
+
+footer{
+  position: fixed;
+  bottom: 0px;
+  background-color: rgb(12, 12, 12);
+  height: 50px;
+  width: 100vw;
+}
+
+footer p{
+  color: white;
+  text-align: center;
+}
+
+#returnb {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  width: 35px;
+  height: 35px;
+  border-radius: 15px;
+  font-family: 'Pixelify Sans', cursive;
+  color: white;
+  background-color: transparent;
+  background-image: url('download.svg');
+  background-size: cover;
+
+  box-shadow: rgb(0, 0, 0) 0px 0px 10px;
+}

frontend/register.html

@@ -4,22 +4,28 @@
 <head>
   <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="register.css"/>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500&display=swap" rel="stylesheet">
   <title>Register</title>
 <body>
   <div class="wrapper">
        <div class="container">
 
+            <button onclick="location.href = 'index.html'" id="returnb"></button>
+
             <div>
-                <p id="login">Register</p>
+                <p id="register">Register</p>
             </div>
 
             <div class="idiv">
                 <input class="input" id="username" type="text" placeholder="Username">
                 <input class="input" id="password" type="password" placeholder="Pasword">
+                <input class="input" id="conpassword" type="password" placeholder="Confirm Pasword">
             </div>
 
             <div class="buttons">
-                <button id="loginb">Login</button>
+                <button id="loginb">Sign Up</button>
             </div>
 
         </div>