Only show New Sticker button if it's my profile.

Send login form user name to login API.

server.js

@@ -3,11 +3,18 @@ import http from "http";
 const host = '127.0.0.1';
 const port = 8000;
 
-const user = JSON.stringify({
+const users = {
+  "joe": {
     name: "Joe User",
     stickers: [],
     username: "joe",
-});
+  },
+  "jen": {
+    name: "Jen User",
+    stickers: [],
+    username: "joe",
+  }
+};
 
 const stickers = {
   "88ae126f-b19a-4287-abe0-a8f5ac763cb7": {
@@ -33,7 +40,7 @@ const requestListener = function (req, res) {
   switch (urlParts[1]) {
     case "login":
       res.writeHead(200);
-      res.end(user);
+      res.end(JSON.stringify(users[urlParts[2]]));
       break;
     case "sticker":
       if (!(urlParts[2] in stickers)) {
@@ -46,6 +53,10 @@ const requestListener = function (req, res) {
       const response = JSON.stringify(sticker);
       res.end(response);
       break;
+    case "user":
+      res.writeHead(200);
+      res.end(JSON.stringify(users[urlParts[2]]));
+      break;
     default:
       res.writeHead(200);
       res.end(JSON.stringify({nothing: 'here'}));

src/stores/userStore.ts

@@ -13,7 +13,7 @@ export const useUserStore = defineStore('user', {
     },
     async login(username: string, password: string) {
       const response = await fetch(
-        "/api/login",
+        `/api/login/${username}`,  // TODO: Should not be in path.
         {
           method: 'POST',
         },

src/views/LoginView.vue

@@ -36,9 +36,11 @@ const resolver = ({ values }) => {
   if (!values.username) {
     errors.username = [{message: 'Username is required.'}];
   }
+  username.value = values.username;
   if (!values.password) {
     errors.password = [{message: 'Password is required.'}];
   }
+  password.value = values.password;
   return { errors }
 };
 

src/views/ProfileView.vue

@@ -1,17 +1,33 @@
 <script setup lang="ts">
-import {computed, ref} from 'vue';
+import {computed, onMounted, ref} from 'vue';
+import {useRoute} from 'vue-router';
+
 import Avatar from 'primevue/avatar';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Chip from 'primevue/chip';
 import MeterGroup from 'primevue/metergroup';
 import Panel from 'primevue/panel';
-import Sticker from "@/components/Sticker.vue";
 import Timeline from 'primevue/timeline';
-import {useRoute} from 'vue-router';
+
+import Sticker from "@/components/Sticker.vue";
 import { useUserStore } from "@/stores/userStore";
 
+
 const userStore = useUserStore();
+const route = useRoute();
+const username = ref<string>(route.params.username as string);
+const user = ref([]);
+
+onMounted(async () => {
+  const response = await fetch(`/api/user/${username.value}`);
+  const json = await response.json();
+  user.value = json;
+});
+
+const myPage = computed(() => {
+  return !userStore.isAnonymous && userStore.user.username == user.value.username;
+});
 
 const meterValue = ref([
   { label: 'Apps', color: '#34d399', value: 20 },
@@ -47,18 +63,23 @@ const events = [{
       <div class="flex flex-row content-end">
         <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
         <div>
-          {{ userStore.user.name }}
+          {{ user.name }}
         </div>
       </div>
     </Panel>
     <Panel header="My Stickers">
       <div class="stickers">
-        <div class="stickerWrapper" v-for="sticker in userStore.user.stickers">
+        <div class="stickerWrapper" v-for="sticker in user.stickers">
           <RouterLink :to="{ name: 'sticker', params: { uuid: sticker.uuid }}">
             <Sticker v-bind="sticker" />
           </RouterLink>
         </div>
-        <Button as="router-link" to="/sticker" v-if="!userStore.isAnonymous">New sticker</Button>
+        <Button
+            as="router-link"
+            to="/sticker"
+            v-if="myPage">
+          New sticker
+        </Button>
       </div>
     </Panel>
     <Panel header="Metrics">