Added user.put.ts for changing username, nearly identical to user.pos…

…t.ts except with update() instead of create(). Changing username is functional.
UTDallasEPICS · Oct 17, 2024 · 5359f38 · 5359f38
1 parent e49ec13
commit 5359f38
Show file tree

Hide file tree

Showing 9 changed files with 253 additions and 172 deletions.
diff --git a/cert-dev.pem b/cert-dev.pem
@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDHTCCAgWgAwIBAgIJMSxRVGwPXrarMA0GCSqGSIb3DQEBCwUAMCwxKjAoBgNV
+BAMTIWRldi11NGptbThnaTYxeXJ6eXJrLnVzLmF1dGgwLmNvbTAeFw0yNDA0MTYx
+NjQ0MDBaFw0zNzEyMjQxNjQ0MDBaMCwxKjAoBgNVBAMTIWRldi11NGptbThnaTYx
+eXJ6eXJrLnVzLmF1dGgwLmNvbTCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAM9Jg2WQCaB1da7jd6h2HhSB1Ujz7pP//0bnzzvXRJe2jXC0K78WWZMx56Je
+mDbt02e9jr/AYP/IdPZ6alxQhzRu3LQSe+CKmrNyKQ3qVsHO0LpfpT62F28iyR1+
+9StOv5p6du80WLRuOLOLf52bnfvOZtKiGMkSmQIFks7rlf6+5kttIvC+rC7EEzjX
+c8HaHO/hhVQzYbZDXFpee6brMscoqwOGfRB1jfYrn6Qnwn7CTiS4IgNiZwsMfvbu
+K7DBpNTipMOPYMK3kQ3J9tQaLBu2qtdVq8y8+2mZn2anOr+9Ge9eLCR367vZVP9M
+HniCfKD+MJrEK/4u8P9Bj+90PHMCAwEAAaNCMEAwDwYDVR0TAQH/BAUwAwEB/zAd
+BgNVHQ4EFgQUcppxfd/gtygwJpRxZCq8uD7R0UcwDgYDVR0PAQH/BAQDAgKEMA0G
+CSqGSIb3DQEBCwUAA4IBAQBJrHzC8FXvJKJ/zweygVQdFsVds68ysclP2jDf2Dcr
+wIDomsj0EsaFBoY60xxsf8Te3AU9wgt+1CLARhm34ilSnCmsXNYphcosm6vlMZd/
+WHmU2Zm3tNO3l/soq0VAPaZrYij3JmQe1ag8Ei4RCoQuL2/5CeBZrmOMrmlyMaSZ
+rFW0ZGXBMNtwyyHYsKA+ygXj6Sh86TQSnjTzBxopTSp5gO+onddP7GHtB9Pf9mpg
+LplnjMsshkxPYzW0Ki3nfNPPJrlNDDBbEgJKlHklItZcUmZvyVics2jVA7s769nM
+QTDcmkX2s8+k7aSH033twUJKpzFLCIam0eK689JyVKFC
+-----END CERTIFICATE-----
diff --git a/components/BottomNavBar.vue b/components/BottomNavBar.vue
@@ -9,23 +9,35 @@
         <div>
             <p class="cursor-pointer hover:text-gray-300 transition font-semibold duration-300 text-white text-xl" @click="openHelp"> Help </p>
         </div>
+        <div>
+            <p class="cursor-pointer hover:text-gray-300 transition font-semibold duration-300 text-white text-xl" v-if="isLoggedIn" @click="openChangeUsername"> Change Username </p>
+        </div>
     </div>
 
     <AboutUsOverlay v-if="showAboutUs" @closeAboutUsOverlay="closeAboutUs"></AboutUsOverlay>
     <HowToPlayOverlay v-if="showHowToPlay" @closeHowToPlayOverlay="closeHowToPlay"></HowToPlayOverlay>
     <HelpOverlay v-if="showHelp" @closeHelpOverlay="closeHelp"></HelpOverlay>
+    <LogInOverlay :isChangingUsername="isChangingUsername" v-if="showChangeUsername" @closeLogIn="closeChangeUsername"></LogInOverlay>
   </template>
 
   <script setup lang="ts">
+
+  const sruser = useCookie('sruser');
+  const isLoggedIn = computed(() => sruser.value)
+  const isChangingUsername = computed(() => true)
   const showAboutUs = ref(false);
   const showHowToPlay = ref(false);
   const showHelp = ref(false);
+  const showChangeUsername = ref(false)
   const openAboutUs = () => { showAboutUs.value = true; };
   const closeAboutUs = () => { showAboutUs.value = false; };
   const openHowToPlay = () => { showHowToPlay.value = true; };
   const closeHowToPlay = () => { showHowToPlay.value = false; };
   const openHelp = () => { showHelp.value = true; };
   const closeHelp = () => { showHelp.value = false; };
+  const openChangeUsername = () => { showChangeUsername.value = true; };
+  const closeChangeUsername = () => { showChangeUsername.value = false; };
+
   </script>
 
 <style></style>
diff --git a/components/LogInOverlay.vue b/components/LogInOverlay.vue
@@ -1,42 +1,46 @@
 <template>
-<div class="fixed w-full h-full inset-0 backdrop-blur bg-black bg-opacity-25 flex" style="z-index: 2;">
-    <div class="rounded-lg p-2 bg-white border-black border-2" style="margin: auto; width: 35%; height: 75%;"> 
-        <p class="text-black font-black text-lg text-center" style="font-family: Inter; color: #154734; margin-top: 10%; margin-bottom: 3%;">Set Username</p>
-        <form @submit.prevent="handleSubmit">
-            <label class="font-semibold text-lg block" style="font-family: Inter; color: #777070;margin-left:14.5%; letter-spacing: 1.5px;">USERNAME</label>
-            <p class="text-red-600">{{ mssg }}</p>
-            <input class="text-black border-2 border-black p-5 block font-semibold text-sm" placeholder="Enter username here" style="border-radius: 20px; border-color: #B6B6B6; width: 80%; margin-left: 10.5%; letter-spacing: 1.5px; font-family: Inter;;" type="text" v-model="username" required>  
-            <button class="text-white border p-4 font-semibold text-lg tracking-widest" style="background-color: #E87500; border-radius: 20px; width: 65%; margin-left: 17%; margin-top: 5%; font-family: Inter;">Set Username</button> 
-        </form>
+  <div class="fixed w-full h-full inset-0 backdrop-blur bg-black bg-opacity-25 flex" style="z-index: 2;">
+    <div class="rounded-lg p-2 bg-white border-black border-2" style="margin: auto; width: 35%; height: 75%;">
+      <p class="text-black font-black text-lg text-center" style="font-family: Inter; color: #154734; margin-top: 10%; margin-bottom: 3%;">Set Username</p>
+      <form @submit.prevent="handleSubmit">
+        <label class="font-semibold text-lg block" style="font-family: Inter; color: #777070;margin-left:14.5%; letter-spacing: 1.5px;">USERNAME</label>
+        <p class="text-red-600 ml-16 mt-2">{{ mssg }}</p>
+        <input class="text-black border-2 border-black p-5 block font-semibold text-sm mt-5" placeholder="Enter username here" style="border-radius: 20px; border-color: #B6B6B6; width: 80%; margin-left: 10.5%; letter-spacing: 1.5px; font-family: Inter;;" type="text" v-model="username" required>
+        <button class="text-white border p-4 font-semibold text-lg tracking-widest" style="background-color: #E87500; border-radius: 20px; width: 65%; margin-left: 17%; margin-top: 5%; font-family: Inter;">Set Username</button>
+      </form>
     </div>
-</div>
+  </div>
 
 </template>
 
 <script setup lang="ts">
+const props = defineProps({
+  isChangingUsername: {type: Boolean}
+})
 const username = ref("")
 const mssg = ref("")
 const handleSubmit = async () => {
-    if(username.value.length >= 3 && username.value.length <= 15){
-        const req:string = await $fetch('api/user', {
-            method: 'post',
-            body: {
-                username: username.value
-            }
-        })
-        if(parseInt(req) == 200){
-            emitClose()
-            reloadNuxtApp()
-        } else{
-            mssg.value = "Username already exists"
-        }
-    } else {
-        mssg.value = "Usernae has to be between 3 and 15 characters"
+  console.log(props.isChangingUsername)
+  if(username.value.length >= 3 && username.value.length <= 15){
+    const req:string = await $fetch('api/user', {
+      method: props.isChangingUsername ? 'put' : 'post',
+      body: {
+        username: username.value
+      }
+    })
+    if(parseInt(req) == 200){
+      emitClose()
+      reloadNuxtApp()
+    } else{
+      mssg.value = "Username already exists"
     }
+  } else {
+    mssg.value = "Username has to be between 3 and 15 characters"
+  }
 }
 const emit = defineEmits(['closeLogIn'])
 const emitClose = () => {
-    emit('closeLogIn')
+  emit('closeLogIn')
 }
 
 </script>

diff --git a/components/LogInSignUp.vue b/components/LogInSignUp.vue
@@ -1,11 +1,13 @@
+
+
 <template>
-    <div class="flex md:flex md:flex-grow flex-row-reverse space-x-3 mt-5 mr-4 mb-2">
-        <div class="">
-            <button
-                class="hover:text-gray-300 transition font-semibold duration-400 text-white font-bold py-2 px-5 rounded-lg"
-                style="background-color:#154734" @click="login">Log In</button>
-        </div>
+  <div class="flex md:flex md:flex-grow flex-row-reverse space-x-3 mt-5 mr-4 mb-2">
+    <div class="">
+      <button
+          class="hover:text-gray-300 transition font-semibold duration-400 text-white font-bold py-2 px-5 rounded-lg"
+          style="background-color:#154734" @click="login">Log In</button>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/components/TopNavBar.vue b/components/TopNavBar.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="flex flex-nowrap md:flex-grow shrink-0 space-x-3">
-        <div class="utdLogo justify-start" style="width:450px">
-            <img src="../public/UTDLogo.svg">
-        </div>
-        <div class="flex md:flex md:flex-grow flex-row-reverse space-x-3">
-            <TopRightNavbar></TopRightNavbar>
-        </div>
+  <div class="flex flex-nowrap md:flex-grow shrink-0 space-x-3">
+    <div class="utdLogo justify-start" style="width:450px">
+      <img src="../public/UTDLogo.svg">
     </div>
+    <div class="flex md:flex md:flex-grow flex-row-reverse space-x-3">
+      <TopRightNavbar></TopRightNavbar>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/components/TopRightNavbar.vue b/components/TopRightNavbar.vue
@@ -1,28 +1,28 @@
 <template>
-    <div class="">
-        <Profile v-if="userTrue"></Profile>
-        <LogInSignUp v-else></LogInSignUp>
-    </div>
-    <LogInOverlay v-if="showLogIn" @closeLogIn="closing"></LogInOverlay>
+  <div class="">
+    <Profile v-if="userTrue"></Profile>
+    <LogInSignUp v-else></LogInSignUp>
+  </div>
+  <LogInOverlay v-if="showLogIn" @closeLogIn="closing"></LogInOverlay>
 </template>
 
 <script setup lang="ts">
-    const userTrue = ref(false)
-    const srtoken = useCookie('srtoken')
-    if(srtoken.value){
-        userTrue.value = true
-    }
-    const showLogIn = ref(false)
-    const sruser = useCookie('sruser')
+const userTrue = ref(false)
+const srtoken = useCookie('srtoken')
+if(srtoken.value){
+  userTrue.value = true
+}
+const showLogIn = ref(false)
+const sruser = useCookie('sruser')
 
-    if(srtoken.value != '' && sruser.value == ''){
-        showLogIn.value = true
-    }
+if(srtoken.value != '' && sruser.value == ''){
+  showLogIn.value = true
+}
 
-    const closing = () => {
-        showLogIn.value = false
-        userTrue.value = true
-    }
+const closing = () => {
+  showLogIn.value = false
+  userTrue.value = true
+}
 
 </script>