continue working on login

client/header_bottom.html

@@ -11,8 +11,8 @@
             </ul>
         </nav>
 
-        <div class="postbox">
-            <form action="/make_post" method="post">
+        <div class="postbox" id="postbox">
+            <form id="postbox-form" action="/make_post" method="post">
                 <div>
                     <label for="username">Username:</label>
                     <input name="username" id="username" />

client/script.js

@@ -64,3 +64,44 @@ async function login() {
 
     window.location.href = "/";
 }
+
+async function checkLoginStatus() {
+    const result = await fetch('/me');
+
+    if (result.headers.get('X-Logged-In') !== 'true') {
+        return "";
+    }
+
+    const username = result.headers.get('X-Username');
+    return username;
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+
+    if (window.location.pathname == "/" && window.fetch) {
+        // We know the fetch API exists, so hide the stuff that doesn't rely on it 
+
+        const form = document.getElementById("postbox-form");
+        form.style.display = 'none';
+
+        const postbox = document.getElementById("postbox");
+
+        const userStatus = await checkLoginStatus();
+
+        // if we're logged in, show the post box,
+        // otherwise show a welcome message, encouraging users to sign up/log in
+        if (userStatus === "") {
+            const newElement = document.createElement("p");
+            newElement.textContent = "Welcome to Chookchat!\nTo get posting, click 'login' to log in or create an account.\nEnjoy your stay!";
+            postbox.appendChild(newElement);
+        } else {
+            const helperText = document.createElement("p");
+            helperText.textContent = "You're posting as " + userStatus;
+            postbox.appendChild(helperText);
+            const textArea = document.createElement("textarea");
+            postbox.appendChild(textArea);
+        }
+        
+    }
+
+});