feat: add vue-toastification for alerting

app/package.json

@@ -16,14 +16,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@linux-odyssey/constants": "*",
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/utils": "*",
-    "@linux-odyssey/constants": "*",
     "axios": "^1.6.0",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
+    "vue-toastification": "^2.0.0-rc.5",
     "xterm": "^5.2.1",
     "xterm-addon-attach": "^0.8.0",
     "xterm-addon-fit": "^0.7.0"

app/src/components/AuthForm.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
 import api from '../utils/api'
 
 const emit = defineEmits(['onSubmit', 'onChange'])
@@ -24,6 +25,7 @@ const username = ref('')
 const email = ref('')
 const password = ref('')
 const errorMessage = ref('')
+const toast = useToast()
 
 const availableMethods = ref({})
 onMounted(async () => {
@@ -39,11 +41,10 @@ const hasSocialLogins = computed(() => {
 })
 
 const success = () => {
-  router.push({ name: 'game' })
+  router.push({ name: 'game', params: { questId: 'helloworld' } })
 }
 
 const error = (err) => {
-  console.error(err)
   errorMessage.value = err
 }
 
@@ -62,8 +63,8 @@ const handleSubmit = () => {
       error,
     })
   } catch (err) {
+    toast.error('Something went wrong.')
     console.error(err)
-    errorMessage.value = 'Something went wrong'
   }
 }
 

app/src/components/GameHeaderPart.vue

@@ -1,17 +1,21 @@
 <script setup>
 import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
 import { logout } from '../utils/auth'
 import { bugReportUrl } from '../config'
 import sessionStore, { reset } from '../store/session'
 
 const router = useRouter()
 
+const toast = useToast()
+
 const handleLogout = async () => {
   try {
     await logout()
     reset()
     router.push({ name: 'login' })
   } catch (err) {
+    toast.error('Failed to logout')
     console.error(err)
   }
 }
@@ -33,14 +37,12 @@ const handleLogout = async () => {
             class="text-text-tertiary h-full w-full"
           />
         </button> -->
-        <button>
-          <p
-            class="text-text-primary inline-block font-bold whitespace-nowrap"
-            v-if="sessionStore.quest"
-          >
-            {{ sessionStore.quest.title }}
-          </p>
-        </button>
+        <p
+          class="text-text-primary inline-block font-bold whitespace-nowrap"
+          v-if="sessionStore.quest"
+        >
+          {{ sessionStore.quest.title }}
+        </p>
       </div>
       <div class="h-full w-full flex gap-3 items-center justify-end">
         <!-- <button id="warning" class="flex items-center h-5 w-5">

app/src/main.js

@@ -3,6 +3,9 @@ import './style.css'
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import './library'
+/* import Vue Toastification */
+import Toast, { POSITION } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 
 import App from './App.vue'
 import router from './router'
@@ -13,4 +16,10 @@ app.component('font-awesome-icon', FontAwesomeIcon)
 
 app.use(router)
 
+const options = {
+  position: POSITION.TOP_RIGHT,
+}
+
+app.use(Toast, options)
+
 app.mount('#app')

app/src/router.js

@@ -8,7 +8,12 @@ import { isLoggedIn } from './utils/auth'
 const routes = [
   {
     path: '/',
-    redirect: '/game',
+    redirect: {
+      name: 'game',
+      params: {
+        questId: 'helloworld',
+      },
+    },
   },
   {
     path: '/login',
@@ -55,6 +60,9 @@ router.beforeEach(async (to, from, next) => {
   } else if (to.meta.requiresGuest && loggedIn) {
     next({
       name: 'game', // Or any default authenticated user route
+      params: {
+        questId: 'helloworld',
+      },
     })
   } else {
     next() // Always call next() at the end

app/src/store/session.js

@@ -1,9 +1,12 @@
 import { reactive } from 'vue'
+import { useToast } from 'vue-toastification'
 import { FileGraph } from '@linux-odyssey/file-graph'
 import api from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
 
+const toast = useToast()
+
 function newSession() {
   const graph = new FileGraph({
     path: '/',
@@ -50,15 +53,22 @@ export async function createSession() {
   await setSession(data)
 }
 
-async function getActiveSession(questId) {
-  const res = await api.post('/sessions/active', { questId })
-  const session = res.data
-  try {
-    await setSession(session)
-  } catch (err) {
-    console.log(err)
-    await createSession().catch(console.error)
-  }
+function getActiveSession(questId) {
+  return api
+    .post('/sessions/active', { questId })
+    .then((res) => {
+      const session = res.data
+      return setSession(session)
+    })
+    .catch((err) => {
+      console.log(err)
+      toast.warning('Failed to connect previous session. Creating a new one...')
+      return createSession()
+    })
+    .catch((err) => {
+      console.log(err)
+      toast.error('Failed to create a new session. Please try again later.')
+    })
 }
 
 function updateGraph(event) {

yarn.lock

@@ -6184,6 +6184,11 @@ vue-router@^4.2.4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-toastification@^2.0.0-rc.5:
+  version "2.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz#92798604d806ae473cfb76ed776fae294280f8f8"
+  integrity sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==
+
 vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"