changed page titles

updated certain authentication logic
added enter keydown handler to complete certain fields

src/auth.js

@@ -16,7 +16,6 @@ fetch(`${import.meta.env.VITE_BACKEND_URL}/ping`, options)
     // if auth ok, set isAuthenticated to true
     if (res.ok) {
       isAuthenticated.value = true;
-      console.log(isAuthenticated);
       return res.json();
     }
   })

src/main.js

@@ -10,4 +10,8 @@ const router = VueRouter.createRouter({
   routes,
 });
 
-Vue.createApp(App).use(router).mount("#app");
+router.beforeEach((to, from, next) => {
+  document.title = to.meta.title;
+  next();
+}),
+  Vue.createApp(App).use(router).mount("#app");

src/router/index.js

@@ -3,11 +3,26 @@ import Post from "../views/Post.vue";
 import Login from "../views/Login.vue";
 import Signup from "../views/Signup.vue";
 import User from "../views/User.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 export const routes = [
-  { path: "/", component: Home },
-  { path: "/post/:postID", component: Post },
-  { path: "/login", component: Login },
-  { path: "/user/new_user", component: Signup },
-  { path: "/user/:userID", component: User },
+  { path: "/", component: Home, meta: { title: "myPlace()" } },
+  {
+    path: "/post/:postID",
+    component: Post,
+    meta: { title: "myPlace() - Post" },
+  },
+  { path: "/login", component: Login, meta: { title: "myPlace() - Login" } },
+  {
+    path: "/user/new_user",
+    component: Signup,
+    meta: { title: "myPlace() - Join" },
+  },
+  {
+    path: "/user/:userID",
+    component: User,
+    meta: { title: "myPlace() - User" },
+  },
 ];

src/views/Login.vue

@@ -47,9 +47,11 @@ const attemptLogin = (username, password) => {
         id="username"
         class="bg-zinc-900 border p-5"
         v-model="password"
+        @keydown.enter="attemptLogin(username, password)"
       />
     </div>
     <button
+      @keydown.enter="attemptLogin(username, password)"
       @click="attemptLogin(username, password)"
       class="mt-2 hover:bg-emerald-700 py-5 w-[8rem] flex justify-center border"
     >

src/views/Post.vue

@@ -51,6 +51,7 @@ getPost();
 
 // submit comment
 const submitComment = async (text, name) => {
+  console.log(name);
   // create JSON object and proper headers
   const options = {
     method: "POST",
@@ -219,17 +220,28 @@ const deletePost = async () => {
             >
               <label for="comment_author">Your name:&nbsp</label>
               <input
+                @keydown.enter="submitComment(commentText, commentAuthor)"
                 id="comment_author"
                 class="bg-zinc-900 border p-5"
                 v-model="commentAuthor"
               />
             </div>
             <button
+              v-if="!isAuthenticated"
+              @keydown.enter="submitComment(commentText, commentAuthor)"
               @click="submitComment(commentText, commentAuthor)"
               class="hover:bg-emerald-700 py-5 w-[8rem] flex justify-center border"
             >
               &#9989; Submit
             </button>
+            <button
+              v-else
+              @keydown.enter="submitComment(commentText, currentUser)"
+              @click="submitComment(commentText, currentUser)"
+              class="hover:bg-emerald-700 py-5 w-[8rem] flex justify-center border"
+            >
+              &#9989; Submit
+            </button>
           </div>
         </div>
       </div>

src/views/Signup.vue

@@ -52,9 +52,11 @@ const createUser = (username, password) => {
         id="username"
         class="bg-zinc-900 border p-5"
         v-model="password"
+        @keydown.enter="createUser(username, password)"
       />
     </div>
     <button
+      @keydown.enter="createUser(username, password)"
       @click="createUser(username, password)"
       class="mt-2 hover:bg-emerald-700 py-5 w-[8rem] flex border justify-center"
     >

src/views/User.vue

@@ -139,9 +139,11 @@ const logout = () => {
           id="username"
           class="bg-zinc-900 border p-5"
           v-model="password"
+          @keydown.enter="editUser(username, password)"
         />
       </div>
       <button
+        @keydown.enter="editUser(username, password)"
         @click="editUser(username, password)"
         class="mt-2 hover:bg-emerald-700 py-5 w-[8rem] flex border justify-center"
       >