From d019e370e28b4d355c7270c1cde7c80b34dfa3df Mon Sep 17 00:00:00 2001
From: Arushi Pandey <75818107+Arushi-maker@users.noreply.github.com>
Date: Tue, 6 Feb 2024 14:07:42 -0800
Subject: [PATCH] more index and login changes

---
 _layouts/login.html   | 120 ++++++++++++++++++------------------
 _layouts/loginog.html | 137 ++++++++++++++++++++++++++++++++++++++++++
 index.md              | 125 +++++++++++++++++++++++---------------
 3 files changed, 272 insertions(+), 110 deletions(-)
 create mode 100644 _layouts/loginog.html
diff --git a/_layouts/login.html b/_layouts/login.html
index 29f9ec7..6f3a05e 100644
--- a/_layouts/login.html
+++ b/_layouts/login.html
@@ -1,72 +1,68 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: " en" }}">
- 
-<html lang="en">
+
 <head>
   <style>
     form {
-      background-color: #d3709b;
+      background-color: #ffffff;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      border-radius: 8px;
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+      margin-top: 20px;
     }
-    </style>
-</head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" href="your_stylesheet.css">
-  <title>Login Page</title>
-</head>
-<body>
-  <div class="container" style="text-align: center;">
-    <h1>Nice to see you on Arushi's Blog!</h1>
-    <input id="usernameInput" type="text" class="input-text" placeholder="Username">
-    <input id="passwordInput" type="password" class="input-text" placeholder="Password">
-    <button id="loginButton" class="button" onclick="loginUser()">Login</button>
-    <button id="registerButton" class="button register-button" onclick="showRegistrationForm()">Register New User</button>
-
-   
-    <div id="registrationForm" style="display: none;">
-      <h2>Register New User</h2>
-      <input id="newUsernameInput" type="text" class="input-text" placeholder="New Username">
-      <input id="newPasswordInput" type="password" class="input-text" placeholder="New Password">
-      <button id="registerNewUserButton" class="button" onclick="registerUser()">Register</button>
-    </div>
-  </div>
-</head>
-<body>
-      <script>
-        function showRegistrationForm() {
-      document.getElementById("registrationForm").style.display = "block";
+    label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    input {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 15px;
+      box-sizing: border-box;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
     }
 
-    function registerUser() {
-      const newUsername = document.getElementById("newUsernameInput").value;
-      const newPassword = document.getElementById("newPasswordInput").value;
-
-      // Make a POST request to register a new user
-      fetch('http://127.0.0.1:5000/users', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          username: newUsername,
-          password: newPassword,
-        }),
-      })
-      .then(response => response.json())
-      .then(data => {
-        console.log('User registration successful:', data);
-        alert('Registration successful!');
-        // Optionally, you can show a success message or redirect the user
-      })
-      .catch(error => {
-        console.error('Error registering user:', error);
-        alert('Registration failed. Please try again.');
-        // Handle error, show error message, etc.
-      });
+    input[type="submit"] {
+      background-color: #4caf50;
+      color: #fff;
+      cursor: pointer;
     }
-        const apiUrl = "http://127.0.0.1:8086/api/users/authenticate";
+
+    input[type="submit"]:hover {
+      background-color: #45a049;
+    }
+
+    .error-message {
+      color: #ff0000;
+      margin-top: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  {%- include header.html -%}
+
+  <main class="page-content" aria-label="Content">
+    <div class="wrapper">
+
+      <form id="authenticate">
+        <label for="uid">UUID</label>
+        <input type="text" id="uid" name="uid"><br><br>
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password"><br><br>
+        <input type="submit" value="Submit">
+      </form>
+      <script>
+        const apiUrl = "http://172.19.155.56:8086/api/users/authenticate";
 
         document.getElementById("authenticate").onsubmit = async function (e) {
           e.preventDefault();
@@ -85,7 +81,7 @@ <h2>Register New User</h2>
             });
 
             if (!response.ok) {
-              throw new Error('Authentication was not successful');
+              throw new Error('Authentication request was not successful');
             }
 
             const token = await response.text();
@@ -114,4 +110,4 @@ <h2>Register New User</h2>
   </main>
 </body>
 
-</html> 
+</html>
\ No newline at end of file
diff --git a/_layouts/loginog.html b/_layouts/loginog.html
new file mode 100644
index 0000000..bdabf69
--- /dev/null
+++ b/_layouts/loginog.html
@@ -0,0 +1,137 @@
+ <!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en" }}">
+ 
+<html lang="en">
+<head>
+  <style>
+    form {
+      background-color: #d3709b;
+    }
+    </style>
+</head>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="your_stylesheet.css">
+  <title>Login Page</title>
+</head>
+<body>
+  <div class="container" style="text-align: center;">
+    <h1>Nice to see you on Arushi's Blog!</h1>
+    <input id="usernameInput" type="text" class="input-text" placeholder="Username">
+    <input id="passwordInput" type="password" class="input-text" placeholder="Password">
+    <button id="loginButton" class="button" onclick="loginUser()">Login</button>
+    <button id="registerButton" class="button register-button" onclick="showRegistrationForm()">Register New User</button>
+
+   
+    <div id="registrationForm" style="display: none;">
+      <h2>Register New User</h2>
+      <input id="newUsernameInput" type="text" class="input-text" placeholder="New Username">
+      <input id="newPasswordInput" type="password" class="input-text" placeholder="New Password">
+      <button id="registerNewUserButton" class="button" onclick="registerUser()">Register</button>
+    </div>
+  </div>
+</head>
+<body>
+      <script>
+        function showRegistrationForm() {
+      document.getElementById("registrationForm").style.display = "block";
+    }
+
+    function registerUser() {
+      const newUsername = document.getElementById("newUsernameInput").value;
+      const newPassword = document.getElementById("newPasswordInput").value;
+
+      // Make a POST request to register a new user
+      fetch('http://127.0.0.1:8086/api/users/authenticate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          username: newUsername,
+          password: newPassword,
+        }),
+      })
+      .then(response => response.json())
+      .then(data => {
+        console.log('User registration successful:', data);
+        alert('Registration successful!');
+        // Optionally, you can show a success message or redirect the user
+      })
+      .catch(error => {
+        console.error('Error registering user:', error);
+        alert('Registration failed. Please try again.');
+        // Handle error, show error message, etc.
+      });
+    }
+        const apiUrl = "http://127.0.0.1:8086/api/users/authenticate";
+
+        document.getElementById("authenticate").onsubmit = async function (e) {
+          e.preventDefault();
+          const uid = document.getElementById("uid").value;
+          const password = document.getElementById("password").value;
+
+          const obj = { uid: uid, password: password };
+
+          try {
+            const response = await fetch(apiUrl, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              body: JSON.stringify(obj)
+            });
+            var myHeaders = new Headers();
+          
+            myHeaders.append("Content-Type", "application/json");
+
+              var raw = JSON.stringify({
+                "uid": "toby",
+                "password": "123toby"
+              });
+
+              var requestOptions = {
+                method: 'POST',
+                headers: myHeaders,
+                body: raw,
+                redirect: 'follow'
+              };
+
+              fetch("http://127.0.0.1:8086/api/users/authenticate", requestOptions)
+                .then(response => response.text())
+                .then(result => console.log(result))
+                .catch(error => console.log('error', error));
+
+            if (!response.ok) {
+              throw new Error('Authentication was not successful');
+            }
+
+            const token = await response.text();
+
+            if (token) {
+              // Authentication was successful, you can handle the token as needed
+              console.log('Authentication successful');
+              document.cookie = `token=${token}; path=/`;
+
+              localStorage.setItem("token", token);
+              localStorage.setItem("flagData", 1);
+
+              window.location.href = "./";
+              window.location.replace("./");
+
+            } else {
+              // Authentication failed, show an error message or take appropriate action
+              console.error('Authentication failed');
+            }
+          } catch (error) {
+            console.error('Error:', error);
+          }
+        }
+      </script>
+    </div>
+  </main>
+</body>
+
+</html> 
diff --git a/index.md b/index.md
index 5fb4b0d..abe80b1 100644
--- a/index.md
+++ b/index.md
@@ -1,10 +1,20 @@
 ---
-layout: login
+layout: default
 search_exclude: true
 ---
 
-
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en" }}">
+ 
 <html lang="en">
+<head>
+  <style>
+    form {
+      background-color:aqua ;
+    }
+    </style>
+</head>
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,32 +23,31 @@ search_exclude: true
 </head>
 <body>
   <div class="container" style="text-align: center;">
-    <h1>Arushi's Blog</h1>
+    <h1>Nice to see you on Arushi's Blog!</h1>
     <input id="usernameInput" type="text" class="input-text" placeholder="Username">
     <input id="passwordInput" type="password" class="input-text" placeholder="Password">
     <button id="loginButton" class="button" onclick="loginUser()">Login</button>
     <button id="registerButton" class="button register-button" onclick="showRegistrationForm()">Register New User</button>
 
-    <!-- Registration Form (Hidden by default) -->
-    <div id="registrationForm" style="display: none;">
+   
+  <div id="registrationForm" style="display: none;">
       <h2>Register New User</h2>
       <input id="newUsernameInput" type="text" class="input-text" placeholder="New Username">
       <input id="newPasswordInput" type="password" class="input-text" placeholder="New Password">
       <button id="registerNewUserButton" class="button" onclick="registerUser()">Register</button>
     </div>
   </div>
-
-  <script>
-    function showRegistrationForm() {
+</head>
+<body>
+      <script>
+        function showRegistrationForm() {
       document.getElementById("registrationForm").style.display = "block";
     }
-
-    function registerUser() {
+      function registerUser() {
       const newUsername = document.getElementById("newUsernameInput").value;
       const newPassword = document.getElementById("newPasswordInput").value;
-
-      // Make a POST request to register a new user
-      fetch('http://127.0.0.1:5000/users/login.py', {
+    // Make a POST request to register a new user
+      fetch('http://127.0.0.1:8086/api/users/authenticate', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -56,45 +65,65 @@ search_exclude: true
       })
       .catch(error => {
         console.error('Error registering user:', error);
-        alert('Registration failed. HAHAHAHA try again.');
+        alert('Registration failed. Please try again.');
         // Handle error, show error message, etc.
       });
     }
-
-    function loginUser() {
-      const username = document.getElementById("usernameInput").value;
-      const password = document.getElementById("passwordInput").value;
-
-      // Make a POST request to check login credentials
-      fetch('http://127.0.0.1:5000/login.py', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          username: username,
-          password: password,
-        }),
-      })
-      .then(response => {
-        if (response.ok) {
-          console.log('Login successful');
-          alert('Login succesful, redirecting you to the main page');
-          // Optionally, you can redirect the user to another link
-          window.location.href = 'https://arushi-maker.github.io/notebooks/newhomepage.md';
-        } else {
-          console.log('Login failed');
-          alert('Login failed, please check you credentials');
-          // Optionally, you can show an error message
+        const apiUrl = "http://127.0.0.1:8086/api/users/authenticate";
+          document.getElementById("authenticate").onsubmit = async function (e) {
+          e.preventDefault();
+          const uid = document.getElementById("uid").value;
+          const password = document.getElementById("password").value;
+          const obj = { uid: uid, password: password };
+          try {
+            const response = await fetch(apiUrl, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              body: JSON.stringify(obj)
+            });
+            var myHeaders = new Headers();
+            myHeaders.append("Content-Type", "application/json");
+              var raw = JSON.stringify({
+                "uid": "toby",
+                "password": "123toby"
+              });
+              var requestOptions = {
+                method: 'POST',
+                headers: myHeaders,
+                body: raw,
+                redirect: 'follow'
+              };
+              fetch("http://127.0.0.1:8086/api/users/authenticate", requestOptions)
+                .then(response => response.text())
+                .then(result => console.log(result))
+                .catch(error => console.log('error', error));
+            if (!response.ok) {
+              throw new Error('Authentication was not successful');
+            }
+            const token = await response.text();
+            if (token) {
+              // Authentication was successful, you can handle the token as needed
+              console.log('Authentication successful');
+              document.cookie = `token=${token}; path=/`;
+              localStorage.setItem("token", token);
+              localStorage.setItem("flagData", 1);
+              window.location.href = "./";
+              window.location.replace("./");
+            } else {
+              // Authentication failed, show an error message or take appropriate action
+              console.error('Authentication failed');
+            }
+          } catch (error) {
+            console.error('Error:', error);
+          }
         }
-      })
-      .catch(error => {
-        console.error('Error:', error);
-        // Handle error, show error message, etc.
-      });
-    }
-  </script>
+      </script>
+    </div>
+  </main>
 </body>
-</html>
+
+</html> 
 
 
