added info-modal + updated error handling

src/components/Nav.vue

@@ -40,9 +40,6 @@
           >
             Search!
           </button>
-          <div v-if="data.error" class="alert alert-warning" role="alert">
-            {{ data.error }}
-          </div>
         </form>
       </div>
 
@@ -54,6 +51,7 @@
 import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {closeNav, GetUser, GoToPlayer} from '@/utils'
+import {StatusCodes as STATUS} from "http-status-codes";
 
 export default {
   name: 'Nav',
@@ -61,7 +59,6 @@ export default {
     const store = useStore()
     const data = reactive({
       searchInput: '',
-      error: ''
     })
 
     const parseSearch = async () => {
@@ -70,7 +67,6 @@ export default {
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
       const id64Pattern = /^\d{17}$/
       const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
-      // const shareCodePattern = /.*CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}.*/
 
       store.commit({
         type: 'changeVanityUrl',
@@ -108,15 +104,23 @@ export default {
         }
 
         if (store.state.vanityUrl && !vanityPattern.test(store.state.vanityUrl)) {
-          data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_ACCEPTABLE,
+              message: 'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
+              type: 'warning'
+            }
+          })
           store.commit({
             type: 'changeVanityUrl',
             id: ''
           })
+          data.searchInput = ''
         }
 
         if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-          const resData = await GetUser(store.state.vanityUrl || store.state.id64)
+          const resData = await GetUser(store, store.state.vanityUrl || store.state.id64)
 
           if (resData) {
             data.searchInput = ''
@@ -136,10 +140,6 @@ export default {
             }
           }
         }
-
-        setTimeout(() => {
-          data.error = ''
-        }, 5000)
       }
     }