#238: Remove hash from URL with JS instead of full redirect

src/components/login/NewPasswordForm.vue

@@ -60,18 +60,17 @@ async function newPasswordFunc() {
     return
   }
 
-  /**
-   * @TODO: #238, this wont work if we redirect to the login page
-   * Find a way to just "close" this screen instead of redirecting
-   */
   gameStore.addNotification({
     title: 'Success',
     message: 'Password changed successfully'
   })
-  window.location.href = '/'
+
+  window.history.replaceState(null, '', window.location.pathname)
+  emit('switchToLogin')
 }
 
 function cancelNewPassword() {
-  window.location.href = '/'
+  window.history.replaceState(null, '', windowlocation.pathname)
+  emit('switchToLogin')
 }
 </script>

src/components/screens/Login.vue

@@ -15,10 +15,10 @@
           <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
 
           <!-- Register Form -->
-          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="switchToLogin" />
 
           <!-- New Password Form -->
-          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="currentForm = 'login'" />
+          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="switchToLogin" />
         </div>
       </div>
     </div>
@@ -35,11 +35,16 @@ import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
 import ResetPassword from '@/components/login/ResetPasswordModal.vue'
 
 const isPasswordResetFormShown = ref(false)
-const doesUrlHaveToken = window.location.hash.includes('#')
+const doesUrlHaveToken = ref(window.location.hash !== '')
 
 const gameStore = useGameStore()
 const currentForm = ref('login')
 
+function switchToLogin() {
+  currentForm.value = 'login'
+  doesUrlHaveToken.value = false
+}
+
 // automatic login because of development
 onMounted(async () => {
   const token = useCookies().get('token')