FInished password reset (hopefully)

src/components/screens/Login.vue

@@ -12,10 +12,13 @@
           <img src="/assets/ui-elements/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" alt="UI box inner" />
 
           <!-- Login Form -->
-          <LoginForm v-if="currentForm === 'login'" @openResetPasswordModal="() => isPasswordResetFormShown = true" @switchToRegister="currentForm = 'register'" />
+          <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => isPasswordResetFormShown = true" @switchToRegister="currentForm = 'register'" />
 
           <!-- Register Form -->
-          <RegisterForm v-if="currentForm === 'register'" @switchToLogin="currentForm = 'login'" />
+          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+
+          <!-- New Password Form -->
+          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
         </div>
       </div>
     </div>
@@ -26,11 +29,13 @@
 import { onMounted, ref } from 'vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import LoginForm from '@/components/screens/partials/login/LoginForm.vue'
-import RegisterForm from '@/components/screens/partials/login/RegisterForm.vue'
+import LoginForm from '@/components/screens/partials/LoginForm.vue'
+import RegisterForm from '@/components/screens/partials/RegisterForm.vue'
+import NewPasswordForm from '@/components/screens/partials/NewPasswordForm.vue'
 import ResetPassword from '@/components/utilities/ResetPassword.vue'
 
 const isPasswordResetFormShown = ref(false)
+const doesUrlHaveToken = window.location.hash.includes('#')
 
 const gameStore = useGameStore()
 const currentForm = ref('login')

src/components/screens/partials/login/NewPasswordForm.vue

@@ -2,15 +2,11 @@
   <form @submit.prevent="newPasswordFunc" class="relative px-6 py-11">
     <div class="flex flex-col gap-5 p-2 mb-8 relative">
       <div class="w-full grid gap-3 relative">
-        <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
-        <input class="input-field xs:min-w-[350px] min-w-64" id="email-register" v-model="email" type="email" name="email" placeholder="Email" required />
-        <div class="relative">
-          <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
-          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
-        </div>
+        <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
+        <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
         <span v-if="newPasswordError" class="text-red-200 text-xs absolute top-full mt-1">{{ newPasswordError }}</span>
       </div>
-      <button class="btn-cyan xs:w-full" type="submit">Register now</button>
+      <button class="btn-cyan xs:w-full" type="submit">Change password</button>
 
       <!-- Divider shape -->
       <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
@@ -20,7 +16,7 @@
       </div>
     </div>
     <div class="pt-8">
-      <p class="m-0 text-center"><button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToLogin')">Back to login</button></p>
+      <p class="m-0 text-center"><button class="text-cyan-300 text-base p-0" @click.prevent="cancelNewPassword">Back to login</button></p>
     </div>
   </form>
 </template>
@@ -34,9 +30,7 @@ import { useCookies } from '@vueuse/integrations/useCookies'
 const emit = defineEmits(['switchToLogin'])
 
 const gameStore = useGameStore()
-const username = ref('')
 const password = ref('')
-const email = ref('')
 const newPasswordError = ref('')
 const showPassword = ref(false)
 
@@ -56,12 +50,19 @@ async function newPasswordFunc() {
     return
   }
 
-  // send new password event to server
-  const response = await newPassword(token, password.value)
+  const urlToken = window.location.hash.split('#')[1]
+
+  // send new password event to server along with the token
+  const response = await newPassword(urlToken, password.value)
 
   if (response.success === undefined) {
     newPasswordError.value = response.error
     return
   }
+  window.location.href = '/'
+}
+
+function cancelNewPassword() {
+  window.location.href = '/'
 }
 </script>

src/components/utilities/ResetPassword.vue

@@ -49,5 +49,7 @@ async function resetPasswordFunc() {
     resetPasswordError.value = response.error
     return
   }
+
+  emit('close')
 }
 </script>

src/services/authentication.ts

@@ -39,3 +39,15 @@ export async function resetPassword(email: string) {
     return { error: error.response.data.message }
   }
 }
+
+export async function newPassword(urlToken: string, password: string) {
+  try {
+    const response = await axios.post(`${config.server_endpoint}/new-password`, { urlToken, password })
+    return { success: true, token: response.data.token }
+  } catch (error: any) {
+    if (typeof error.response.data === 'undefined') {
+      return { error: 'Could not connect to server' }
+    }
+    return { error: error.response.data.message }
+  }
+}