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

@@ -19,6 +19,14 @@ def handle_first_launched():
     if not path.exists(folder_path):
         mkdir(folder_path)
              
+<<<<<<< HEAD
+=======
+
+@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')  
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
 
 @app.get("/")
 @app.get("/<path:url_path>")

frontend/dashboard.html

@@ -12,11 +12,15 @@
 
         </div>
     </div>
+<<<<<<< HEAD
 <<<<<<< HEAD
     <script src=""></script>
 =======
     <script src="index.js"></script>
 >>>>>>> 22cbef5 (Add all other pages)
+=======
+    <script src=""></script>
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
 </body>
 
 <footer><p>© 2023 Password Manager</p></footer>

frontend/index.js

@@ -52,6 +52,7 @@ console.log(formData)
 =======
         const response = await fetch('/login', {
             method: "post",
+<<<<<<< HEAD
 <<<<<<< HEAD
             /*headers: {
 >>>>>>> b1b896f (Add api request changes)
@@ -60,29 +61,20 @@ console.log(formData)
 >>>>>>> 22cbef5 (Add all other pages)
                 'Content-Type': 'application/json'
             }*/
+=======
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
             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();
@@ -98,11 +90,15 @@ console.log(formData)
         console.error('Error:', error.message);
 =======
     } catch (error) {
+<<<<<<< HEAD
         console.log(error);
         if(error instanceof TypeError && error.message === 'Failed to fetch'){
             console.log("Failed Server")
         }
 >>>>>>> b1b896f (Add api request changes)
+=======
+        console.error('Error:', error.message);
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
     }
 
 }

frontend/register.css

@@ -1,4 +1,5 @@
 * {
+<<<<<<< HEAD
 <<<<<<< HEAD
   box-sizing: border-box;
 }
@@ -228,36 +229,24 @@ footer p{
     row-gap: 8px;
     border-radius: 50px;
   }
+=======
+  box-sizing: border-box;
+}
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
 
-  .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;
-  }
 
+<<<<<<< HEAD
   .idiv {
     display: flex;
     flex-direction: column;
@@ -291,3 +280,178 @@ footer p{
     background-color: rgb(155, 155, 155, 0.3);
   }
 >>>>>>> 22cbef5 (Add all other pages)
+=======
+.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;
+}
+
+#register {
+  display: block;
+  text-align: center;
+  font-family: 'Pixelify Sans', cursive;
+  font-size: 50px;
+  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;
+}
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)

frontend/register.html

@@ -4,17 +4,24 @@
 <head>
   <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="register.css"/>
+<<<<<<< HEAD
 <<<<<<< HEAD
   <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">
 =======
 >>>>>>> 22cbef5 (Add all other pages)
+=======
+  <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">
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
   <title>Register</title>
 <body>
   <div class="wrapper">
        <div class="container">
 
+<<<<<<< HEAD
 <<<<<<< HEAD
             <button onclick="location.href = 'index.html'" id="returnb"></button>
 
@@ -24,11 +31,18 @@
             <div>
                 <p id="login">Register</p>
 >>>>>>> 22cbef5 (Add all other pages)
+=======
+            <button onclick="location.href = 'index.html'" id="returnb"></button>
+
+            <div>
+                <p id="register">Register</p>
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
             </div>
 
             <div class="idiv">
                 <input class="input" id="username" type="text" placeholder="Username">
                 <input class="input" id="password" type="password" placeholder="Pasword">
+<<<<<<< HEAD
 <<<<<<< HEAD
                 <input class="input" id="conpassword" type="password" placeholder="Confirm Pasword">
             </div>
@@ -41,6 +55,13 @@
             <div class="buttons">
                 <button id="loginb">Login</button>
 >>>>>>> 22cbef5 (Add all other pages)
+=======
+                <input class="input" id="conpassword" type="password" placeholder="Confirm Pasword">
+            </div>
+
+            <div class="buttons">
+                <button id="loginb">Sign Up</button>
+>>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500)
             </div>
 
         </div>