update java/python logins for uniformity

nighthawkcoders · Mar 5, 2024 · 1926a94 · 1926a94
1 parent c25a6f5
commit 1926a94
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 28 deletions.
diff --git a/_posts/2024-01-08-python-jwt-database.md b/_posts/2024-01-08-python-jwt-database.md
@@ -3,10 +3,10 @@ layout: base
 title: Python JWT Login 
 hide: true
 description: This fetches a Python RESTful API Get method to return a table 
-permalink: /data/database
+permalink: /python/database
 ---
 
-## SQL Database Fetch
+## SQL Database Fetch (Python)
 
 <!-- HTML table layout for page.  The table is filled by JavaScript below. 
 -->

diff --git a/_posts/2024-01-08-python-jwt-login.md b/_posts/2024-01-08-python-jwt-login.md
@@ -4,13 +4,17 @@ layout: base
 description: A login screen that interacts with Python and obtains a JWT  
 type: ccc
 courses: { csp: {week: 18 }}
+permalink: /python/login
 ---
 
+## Login Page (Python)
+
 <!-- 
 A simple HTML login form with a Login action when the button is pressed.  
 
 The form triggers the login_user function defined in the JavaScript below when the Login button is pressed.
 -->
+<!-- Login Form -->
 <form action="javascript:login_user()">
     <p><label>
         User ID:
@@ -23,54 +27,71 @@ The form triggers the login_user function defined in the JavaScript below when t
     <p>
         <button>Login</button>
     </p>
+    <p id="error-message" style="color: red;"></p>
 </form>
 
-<!-- 
-Below JavaScript code is designed to handle user authentication in a web application. It's written to work with a backend server that uses JWT (JSON Web Tokens) for authentication.
 
-The script defines a function when the page loads. This function is triggered when the Login button in the HTML form above is pressed. 
+<!-- 
+This script is designed to handle user authentication. On successful authentication, it redirects to a page that requires a JWT (JSON Web Tokens) for authentication.
  -->
-<script type="module">
-    // uri variable and options object are obtained from config.js
-    import { uri, options } from '{{site.baseurl}}/assets/js/api/config.js';
+<script>
+    // URI identifies the resource
+    let URI = '';
+    if (location.hostname === "localhost") {  // location.hostname is built-in JavaScript property
+        URI = "http://localhost:8086";
+    } else if (location.hostname === "127.0.0.1") {
+            URI = "http://127.0.0.1:8086";
+    } else {
+            URI = "https://flask2.nighthawkcodingsociety.com";
+    }
+    // URL identifies the web address login
+    const URL = URI + '/api/users/authenticate';
+    // The redirect constant identifies the web page to open on login success
+    const redirect_prefix = "{{ site.baseurl }}"; // Use a Liquid tag to get the baseurl
+    const redirect = redirect_prefix + '/python/database'; 
 
-    function login_user(){
-        // Set Authenticate endpoint
-        const url = uri + '/api/users/authenticate';
 
-        // Set the body of the request to include login data from the DOM
+    function login_user(){
+        // Set body to include login data
         const body = {
             uid: document.getElementById("uid").value,
             password: document.getElementById("password").value,
         };
 
-        // Change options according to Authentication requirements
-        const authOptions = {
-            ...options, // This will copy all properties from options
-            method: 'POST', // Override the method property
-            cache: 'no-cache', // Set the cache property
-            body: JSON.stringify(body)
+        // Set Headers to support cross-origin
+        const options = {
+            method: 'POST',
+            mode: 'cors', // no-cors, *cors, same-origin
+            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+            credentials: 'include', // include, *same-origin, omit
+            body: JSON.stringify(body),
+            headers: {
+                "content-type": "application/json",
+            },
         };
 
+        document.getElementById("error-message").textContent = "";
+
         // Fetch JWT
-        fetch(url, authOptions)
+        fetch(URL, options)
         .then(response => {
-            // handle error response from Web API
+            // trap error response from Web API
             if (!response.ok) {
                 const errorMsg = 'Login error: ' + response.status;
                 console.log(errorMsg);
+                document.getElementById("error-message").textContent = errorMsg;
                 return;
             }
             // Success!!!
-            // Redirect to the database page
-            window.location.href = "{{site.baseurl}}/data/database";
+            // Redirect to Database location
+            window.location.href = redirect;
         })
-        // catch fetch errors (ie ACCESS to server blocked)
-        .catch(err => {
-            console.error(err);
+        .catch(error => {
+            // Handle network errors
+            console.log('Possible CORS or service down error: ' + error);
+            document.getElementById("error-message").textContent = 'Possible CORS or service down error: ' + error;
         });
     }
 
-    // Attach login_user to the window object, allowing access to form action
-    window.login_user = login_user;
+
 </script>
diff --git a/_posts/2024-03-04-java-jwt-database.md b/_posts/2024-03-04-java-jwt-database.md
@@ -5,7 +5,7 @@ description: This fetches a Java RESTful API Get method to return a table
 permalink: /java/database
 ---
 
-## SQL Database
+## SQL Database Fetch (Java)
 <!-- HTML table fragment for page -->
 <table>
   <thead>

diff --git a/_posts/2024-03-04-java-jwt-login.md b/_posts/2024-03-04-java-jwt-login.md
@@ -5,6 +5,8 @@ description: A login screen that interacts with Java and obtains a JWT
 permalink: /java/login
 ---
 
+## Login Page (Java)
+
 <!-- Login Form -->
 <form action="javascript:login_user()">
     <p><label>