Finish Frontend

-Added Register Logic
-Added Change Password Logic

This is the Alpha Version of the PasswordManager, there shouldn't
be any bugs as far as I know. Report any that are found..Plz Don't
Good Night!

devfolder/app.js

@@ -1,37 +0,0 @@
-const express = require('express');
-const bodyParser = require('body-parser');
-const jwt = require('jsonwebtoken'); // Import the jsonwebtoken library
-
-const app = express();
-const PORT = 5000;
-const cors = require('cors');
-
-const corsOptions = {
-    origin: 'http://127.0.0.1:5500', // Replace with your frontend's origin
-    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
-    credentials: true,
-    optionsSuccessStatus: 204,
-  };
-  
-app.use(cors(corsOptions));
-
-app.use(bodyParser.json());
-
-const secretKey = 'your-secret-key'; 
-
-app.post('/api/auth', (req, res) => {
-    const { user_name, password } = req.body;
-    // Check the username and password (for demonstration purposes, accept any non-empty values)
-    if (user_name==="Yash" && password==="123") {
-        // Authentication successful, create a JWT token
-        const token = jwt.sign({ user_name }, secretKey, { expiresIn: '1h' }); // Token expires in 1 hour
-        res.json({ token });
-    } else {
-        // Authentication failed
-        res.status(401).json({ error: 'Invalid username or password' });
-    }
-});
-
-app.listen(PORT, () => {
-    console.log(`Server is running on port ${PORT}`);
-});

frontend/html/dashboard.html

@@ -143,22 +143,19 @@
             </div>
         </div>
 
-        <div class="confirmdivparent">
-            <div class="confirmdiv">
-                <img src="../assets/tick.svg">
-            </div>
-        </div>
-
         <div class="popupdivparent">
             <div class="popupdiv">
                 <div>
                     <button onclick="closePopup()" id="closepopup"></button>
                 </div>
-                <div class="popupdivchild">
+                <div class="popupdivchild"></div>
-
-                </div>
             </div>
+        </div>
 
+        <div class="confirmdivparent">
+            <div class="confirmdiv">
+                <img src="../assets/tick.svg">
+            </div>
         </div>
 
     </div>

frontend/html/index.html

@@ -24,9 +24,6 @@
             </div>
 
             <div class="help">
-                <div>
-                    <a href="" id="forgot_password">Forgot Password</a>
-                </div>
                 <div>
                     <a href="register.html" id="register">Register</a>
                 </div>

frontend/html/register.html

@@ -24,8 +24,12 @@
                 <input class="input" id="conpassword" type="password" placeholder="Confirm Pasword">
             </div>
 
+            <div class="error">
+              <label id="errlabel"></label>
+            </div>
+
             <div class="buttons">
-                <button id="loginb">Sign Up</button>
+                <button id="loginb" onclick="validateRegister()">Sign Up</button>
             </div>
 
         </div>

frontend/scripts/dashboard.js

@@ -144,6 +144,8 @@ addentry.addEventListener('click', function() {
     entrywindow.style.display = "flex";
     const otherbutton = document.getElementById('submitdatabtn')
     const editbutton = document.getElementById('submiteditdatabtn')
+    const binbutton = document.getElementById('deletedata')
+    binbutton.style.display = "none"
     otherbutton.style.display = "block";
     editbutton.style.display = "none";
     const inputbox = document.getElementById("sitenamefield")
@@ -297,7 +299,7 @@ function showEditPage(field) {
     const binbutton = document.getElementById('deletedata')
     otherbutton.style.display = "none";
     editbutton.style.display = "block";
-    binbutton.style.display = "block"
+    binbutton.style.display = "block";
     const inputbox = document.getElementById("sitenamefield")
     const urlfield = document.getElementById("urlfield")
     inputbox.value = ''
@@ -405,13 +407,15 @@ async function deleteEntry() {
         });
         if(response.ok){
             console.log(`Deleted ${localStorage.getItem("editVal")}`)
-            entrywindow.style.display = "none"
             localStorage.removeItem("editVal")
             getData()
+            confirmation()
+            await delay(1000)
             const infobox = document.querySelector('.infobox')
             const infopanel = document.querySelector('.infopanel')
             const popupdivparent = document.querySelector('.popupdivparent')
             const popupdiv = document.querySelector('.popupdivchild')
+            entrywindow.style.display = "none"
             infobox.style.display = 'flex'
             infopanel.style.display = 'none'
             popupdivparent.style.display = "none"
@@ -563,6 +567,7 @@ async function editDataHandler(editdata) {
         confirmation()
         setTimeout(() => {
             entrywindow.style.display = "none"
+            binbutton.style.display = "none"
             localStorage.removeItem("editVal")
         }, 1000);
         const backbtn = document.getElementById('backbtn')

frontend/scripts/index.js

@@ -45,7 +45,7 @@ localStorage.setItem("username", _username);
 formData = new FormData();
 formData.append('user_name', _username);
 formData.append('password', _password);
-console.log(formData)
+// console.log(formData)
 
     try {
         const response = await fetch('/login', {
@@ -108,20 +108,6 @@ window.onload = async function() {
 };
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 // function handleAuthRes(data) {
 //     if(data.token){
 //         localStorage.setItem('token', data.token);

frontend/scripts/register.js

@@ -0,0 +1,78 @@
+
+const errlabel = document.getElementById('errlabel')
+
+function validateRegister() {
+    const username = document.getElementById('username').value
+    const password = document.getElementById('password').value
+    const confirmpassword = document.getElementById('conpassword').value
+    
+    if(username== "" || password=="" || confirmpassword==""){
+        errlabel.textContent = "Can't Leave Blank!"
+        setTimeout(() => {
+        errlabel.textContent = ""
+        }, 3000);
+    }
+    else if(password != confirmpassword){
+        errlabel.textContent = "Password Must Match!"
+        setTimeout(() => {
+        errlabel.textContent = ""
+        }, 3000);
+    }
+    else if(password == confirmpassword && username!=''){
+        createUser(username,password)
+    }
+}
+
+async function createUser(username,password) {
+    formData = new FormData()
+    formData.append("user_name",username)
+    formData.append("password", password)
+
+    try {
+        const response = await fetch('/add_user', {
+            method: "POST",
+            body: formData
+        });
+        if(response.ok) {
+           console.log("User Created!")
+           Login(username,password)
+        } else if(!response.ok) {
+            const errorMessage = await response.text();
+            errlabel.textContentL = errorMessage;
+                setTimeout(()=> {
+                    errorlabel.textContent = "";
+                },3000)
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        console.error('Error:', error.message);
+    }
+}
+
+async function Login(username,password){
+    formData = new FormData();
+    formData.append('user_name', username);
+    formData.append('password', password);
+
+    try {
+        const response = await fetch('/login', {
+            method: "post",
+            body: formData
+        });
+        
+        if(response.ok) {
+            localStorage.setItem("username", username);
+            window.location.href = "../html/dashboard.html";
+        } else if(!response.ok) {
+            const errorMessage = await response.text();
+            document.getElementById("errlabel").innerHTML = errorMessage;
+                setTimeout(()=> {
+                    document.getElementById("errlabel").innerHTML = "";
+                },3000)
+            throw new Error(errorMessage);
+        }
+
+    } catch (error) {
+        console.error('Error:', error.message);
+    }
+}

frontend/styles/dashboard.css

@@ -855,6 +855,17 @@ footer p{
   font-weight: bold;
   text-align: center;
   display: block;
+  color: white;
+}
+
+.c1f:hover {
+  transform: scale(1.05);
+  background-color: rgb(255, 255, 255, 0.8);
+}
+
+.c1f:hover label{
+  transform: scale(1.05);
+  color: rgb(0, 0, 0);
 }
 
 .c1f {
@@ -864,10 +875,11 @@ footer p{
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  background-color: rgb(255, 255, 255, 0.7);
+  background-color: rgb(255, 255, 255, 0.5);
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 0 10px;
+  transition: transform 0.3s ease;
 }
 
 .c1l {

frontend/styles/index.css

@@ -114,15 +114,15 @@ body {
 .help {
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-
 }
 
 .help div{
   display: flex;
   width: 50%;
   justify-content: center;
+  align-items: center;
 }
 
 .error label {

frontend/styles/register.css

@@ -32,11 +32,13 @@ body {
   width: 450px;
   height: 400px;
   flex-direction: column;
-  padding: 70px;
+  padding: 20px;
+  padding-top: 70px;
   padding-bottom: 90px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
   row-gap: 8px;
   border-radius: 50px;
+  flex-direction: column;
 }
 
 #register {
@@ -60,6 +62,7 @@ body {
   border-left: rgb(255, 255, 255, 0.2) 2px solid;
   border-radius: 10px;
   padding-left: 5px;
+  flex-shrink: 0;
 }
 
 .idiv p {
@@ -92,7 +95,10 @@ body {
   flex-direction: column;
   row-gap: 10px;
   justify-content: center;
+  align-items: center;
   padding: 7px;
+  width: 90%;
+  height: 40%;
 }
 
 .idiv p{
@@ -128,23 +134,32 @@ body {
 
 }
 
-
 .help div{
   display: flex;
   width: 50%;
   justify-content: center;
 }
 
+.error {
+  position: relative;
+  height: 20px;
+  width: 90%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .error label {
   position: absolute;
-  display: block;
+  display: inline-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;
+  text-align: center;
+  padding: 5px;
 }
 
 a {
@@ -184,6 +199,5 @@ footer p{
   background-color: transparent;
   background-image: url('../assets/download.svg');
   background-size: cover;
-
   box-shadow: rgb(0, 0, 0) 0px 0px 10px;
 }