From c03a80c66dfeffb2bb42562041156acbc1131bf7 Mon Sep 17 00:00:00 2001 From: Modo Date: Sun, 15 Oct 2023 21:14:26 +0530 Subject: [PATCH] Add all other pages --- frontend/dashboard.css | 47 ++++++++++++++ frontend/dashboard.html | 20 ++++++ frontend/dashboard.js | 0 frontend/{style.css => index.css} | 0 frontend/index.html | 6 +- frontend/index.js | 39 +++++++++--- frontend/register.css | 102 ++++++++++++++++++++++++++++++ frontend/register.html | 31 +++++++++ frontend/register.js | 0 9 files changed, 233 insertions(+), 12 deletions(-) create mode 100644 frontend/dashboard.css create mode 100644 frontend/dashboard.html create mode 100644 frontend/dashboard.js rename frontend/{style.css => index.css} (100%) create mode 100644 frontend/register.css create mode 100644 frontend/register.html create mode 100644 frontend/register.js diff --git a/frontend/dashboard.css b/frontend/dashboard.css new file mode 100644 index 0000000..44ef651 --- /dev/null +++ b/frontend/dashboard.css @@ -0,0 +1,47 @@ +* { + box-sizing: border-box; + margin: none; + } + +body { + background-color: rgb(255, 255, 255); + 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: rgb(255, 255, 255,0.2); + backdrop-filter: blur(15px); + border-radius: 30px; + width: 90vw; + height: 80vh; + box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); +} + +footer{ + position: fixed; + bottom: 0px; + background-color: rgb(12, 12, 12); + height: 50px; + width: 100vw; +} + +footer p{ + color: white; + text-align: center; +} \ No newline at end of file diff --git a/frontend/dashboard.html b/frontend/dashboard.html new file mode 100644 index 0000000..a740708 --- /dev/null +++ b/frontend/dashboard.html @@ -0,0 +1,20 @@ + + + + + + DashBoard + + + +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/frontend/dashboard.js b/frontend/dashboard.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/style.css b/frontend/index.css similarity index 100% rename from frontend/style.css rename to frontend/index.css diff --git a/frontend/index.html b/frontend/index.html index 5cfac0b..56a20ff 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - + Login @@ -24,10 +24,10 @@
- Forgot Password + Forgot Password
- Register + Register
diff --git a/frontend/index.js b/frontend/index.js index a716481..2adb4e5 100644 --- a/frontend/index.js +++ b/frontend/index.js @@ -5,14 +5,12 @@ loginb.addEventListener("click", validateLogin); function validateName() { var name = document.getElementById("username").value; if(name=='' || name==null){ - // console.log("falsevn"); document.getElementById("errlabel").innerHTML = "Enter Username!"; setTimeout(()=> { document.getElementById("errlabel").innerHTML = ""; },3000) return false; } else { - // console.log("truevn"); return true; } } @@ -20,14 +18,12 @@ var name = document.getElementById("username").value; function validatePass() { var pass = document.getElementById("password").value; if(pass=='' || pass==null){ - // console.log("falsevp"); document.getElementById("errlabel").innerHTML = "Enter Password!"; setTimeout(()=> { document.getElementById("errlabel").innerHTML = ""; },3000) return false; } else { - // console.log("truevp"); return true; } } @@ -51,14 +47,14 @@ console.log(formData) try { const response = await fetch('/login', { method: "post", - /*headers: { + /* headers: { 'Content-Type': 'application/json' }*/ body: formData }); if(response.ok) { - //next page + window.location.href = "dashboard.html"; } else if(!response.ok) { if (response.status === 403) { const error = new Error('Access denied: You do not have permission to access this resource.'); @@ -66,17 +62,18 @@ console.log(formData) setTimeout(()=> { document.getElementById("errlabel").innerHTML = ""; },3000) + console.log(response) throw error; } } //error - /*const errorData = await response.json(); + 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(); // const token = data.token; @@ -91,9 +88,33 @@ console.log(formData) console.log("Failed Server") } } - + } +const register = document.getElementById("register"); + +register.addEventListener("click", function(event) { + event.preventDefault(); + window.location.href = "register.html"; +}); + + + + + + + + + + + + + + + + + + // function handleAuthRes(data) { // if(data.token){ // localStorage.setItem('token', data.token); diff --git a/frontend/register.css b/frontend/register.css new file mode 100644 index 0000000..ac1abf2 --- /dev/null +++ b/frontend/register.css @@ -0,0 +1,102 @@ +* { + 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 { + 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; + } + + .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); + } \ No newline at end of file diff --git a/frontend/register.html b/frontend/register.html new file mode 100644 index 0000000..94b19d8 --- /dev/null +++ b/frontend/register.html @@ -0,0 +1,31 @@ + + + + + + + Register + +
+
+ +
+

Register

+
+ +
+ + +
+ +
+ +
+ +
+
+ + + + + diff --git a/frontend/register.js b/frontend/register.js new file mode 100644 index 0000000..e69de29