Route to 404 view when 2FAccount is missing

app/Http/Controllers/TwoFAccountController.php

@@ -63,9 +63,14 @@ class TwoFAccountController extends Controller
      * @param  \App\TwoFAccount  $twofaccount
      * @return \Illuminate\Http\Response
      */
-    public function show(TwoFAccount $twofaccount)
+    public function show($id)
     {
-        return response()->json($twofaccount, 200);
+        try {
+            $twofaccount = TwoFAccount::FindOrFail($id);
+            return response()->json($twofaccount, 200);
+        } catch (\Exception $e) {
+            return response()->json(['error'=>'not found'], 404);
+        }
     }
 
 

resources/js/app.js

@@ -9,6 +9,7 @@ import Register     from './views/Register'
 import Accounts     from './views/Accounts'
 import Create       from './views/Create'
 import Edit         from './views/Edit'
+import NotFound     from './views/NotFound'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
@@ -47,6 +48,11 @@ const router = new VueRouter({
             name: 'edit',
             component: Edit,
         },
+        {
+            path: '/404',
+            name: '404',
+            component: NotFound,
+        },
     ],
 });
 

resources/js/views/Accounts.vue

@@ -35,11 +35,6 @@
                 <one-time-password ref="OneTimePassword"></one-time-password>
             </twofaccount-show>
         </modal>
-        <modal v-model="ShowNoTwofaccountInModal">
-            <div>
-                resource not found, please <a @click="()=>{this.$router.go()}" class="is-text has-text-white">refresh</a>
-            </div>
-        </modal>
         <footer class="has-background-black-ter">
             <div class="columns is-gapless" v-if="this.accounts.length > 0">
                 <div class="column has-text-centered">
@@ -92,7 +87,6 @@
             return {
                 accounts : [],
                 ShowTwofaccountInModal : false,
-                ShowNoTwofaccountInModal : false,
                 twofaccount: {},
                 token : null,
                 username : null,
@@ -163,7 +157,9 @@
 
                 })
                 .catch(error => {
-                    this.ShowNoTwofaccountInModal = true;
+                    if (error.response.status === 404) {
+                        this.$router.push({name: '404' });
+                    }
                 });  
             },
 

resources/js/views/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="section">
+    <div class="section" v-if="twofaccountExists">
         <div class="columns is-mobile is-centered">
             <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
                 <h1 class="title">Edit account</h1>
@@ -61,12 +61,13 @@
                     'uri' : '',
                     'icon' : ''
                 },
+                twofaccountExists: false,
                 tempIcon: '',
                 errors: {}
             }
         },
 
-        created: function(){
+        created: function() {
             this.getAccount();
         },
 
@@ -79,10 +80,16 @@
 
                 axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId).then(response => {
                     this.twofaccount = response.data
+                    this.twofaccountExists = true
 
                     // set account icon as temp icon
                     this.tempIcon = this.twofaccount.icon
                 })
+                .catch(error => {
+                    if (error.response.status === 404) {
+                        this.$router.push({name: '404' });
+                    }
+                });
             },
 
             updateAccount: function() {

resources/js/views/NotFound.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <modal v-model="ShowModal">
+            <div>
+                Resource not found, please <router-link :to="{ name: 'accounts' }" class="is-text has-text-white">refresh</router-link>
+            </div>
+        </modal>
+    </div>
+</template>
+
+
+<script>
+    import Modal from '../components/Modal'
+
+    export default {
+        data(){
+            return {
+                ShowModal : true
+            }
+        },
+
+        components: {
+            Modal
+        },
+
+        mounted(){
+            // stop OTP generation on modal close
+            this.$on('modalClose', function() {
+                this.$router.push({name: 'accounts' });
+            });
+
+        },
+        
+        beforeRouteEnter (to, from, next) {
+            if ( ! localStorage.getItem('jwt')) {
+                return next('login')
+            }
+
+            next()
+        }
+    }
+
+</script>
+