Use vue shorthand for events, bind save on form instead button

public/theme/src/components/Dashboard/Layout/TopNavbar.vue

@@ -19,7 +19,7 @@
                         <a href="#/ucp/settings" class="nav-link">
                             Account Settings
                         </a>
-                        <a href="#" v-on:click="logout" class="nav-link">
+                        <a href="#" @click="logout" class="nav-link">
                             Log out
                         </a>
                     </li>

public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue

@@ -7,6 +7,7 @@
                     <h4 v-if="$route.params.id != 'add'">Edit "{{ endpoint.name }}"</h4>
 
                     <card>
+                        <form @submit="save">
                             <fg-input label="Name" v-model="endpoint.name"></fg-input>
 
                             <div class="form-group">
@@ -35,7 +36,8 @@
 
                             <fg-input label="Stream-Key" v-model="endpoint.streamKey"></fg-input>
 
-                        <button class="btn btn-primary" v-on:click="save">Save</button>
+                            <button class="btn btn-primary">Save</button>
+                        </form>
                     </card>
                 </div>
             </div>
@@ -77,7 +79,8 @@
             }
         },
         methods: {
-            save: function () {
+            save: function (e) {
+                e.preventDefault();
                 this.axios.post('/streams/' + this.$route.params.streamId + '/endpoints/update', this.endpoint).then(() => {
                     this.$router.push('/ucp/streams/' + this.$route.params.streamId + '/');
                 }).catch(error => {

public/theme/src/components/ReCast/Login.vue

@@ -6,6 +6,8 @@
 
             <div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
 
+
+            <form @submit="onLogin">
                 <fg-input type="text"
                           label="Username"
                           placeholder="Username"
@@ -21,7 +23,8 @@
                     <p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
                 </div>
 
-            <button class="btn btn-primary" v-on:click="onLogin">Login</button>
+                <button class="btn btn-primary">Login</button>
+            </form>
         </div>
     </div>
 </template>
@@ -45,7 +48,8 @@
             }
         },
         methods: {
-            onLogin: function () {
+            onLogin: function (e) {
+                e.preventDefault();
                 let bodyFormData = new FormData();
                 bodyFormData.set('_username', this.login._username);
                 bodyFormData.set('_password', this.login._password);

public/theme/src/components/ReCast/Streams/EditStream.vue

@@ -7,12 +7,14 @@
                     <h4 v-if="$route.params.id != 'add'">Edit "{{ stream.name }}"</h4>
 
                     <card>
+                        <form @submit="save">
                             <fg-input label="Name" v-model="stream.name"></fg-input>
                             <div class="form-group">
                                 <p-checkbox v-model="stream.active">Active</p-checkbox>
                             </div>
 
-                        <button class="btn btn-primary" v-on:click="save">Save</button>
+                            <button class="btn btn-primary">Save</button>
+                        </form>
                     </card>
 
                     <div v-if="this.$route.params.id !== 'add'">
@@ -39,8 +41,8 @@
                                     <td>{{ endpoint.server }}</td>
                                     <td>
                                         <a :href="'#/ucp/streams/' + $route.params.id + '/endpoints/' + endpoint.id" class="btn btn-secondary">Edit</a>
-                                        <a v-on:click="toggleEndpoint(endpoint)" class="btn btn-info">{{ endpoint.active ? 'Disable' : 'Enable' }}</a>
-                                        <a v-on:click="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
+                                        <a @click="toggleEndpoint(endpoint)" class="btn btn-info">{{ endpoint.active ? 'Disable' : 'Enable' }}</a>
+                                        <a @click="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
                                     </td>
                                 </tr>
                                 </tbody>
@@ -81,7 +83,8 @@
             }
         },
         methods: {
-            save: function () {
+            save: function (e) {
+                e.preventDefault();
                 this.axios.post('/streams/update', this.stream).then(() => {
                     this.$router.push('/ucp/streams/');
                 }).catch(error => {

public/theme/src/components/ReCast/Streams/List.vue

@@ -25,8 +25,8 @@
                                     <td>
                                         <a :href="'#/ucp/streams/' + stream.id + '/setup'" class="btn btn-info">Setup</a>
                                         <a :href="'#/ucp/streams/' + stream.id + '/'" class="btn btn-secondary">Edit</a>
-                                        <a v-on:click="regenerateKey(stream)" class="btn btn-danger">Regenerate Stream Key</a>
-                                        <a v-on:click="deleteStream(stream)" class="btn btn-danger">Delete</a>
+                                        <a @click="regenerateKey(stream)" class="btn btn-danger">Regenerate Stream Key</a>
+                                        <a @click="deleteStream(stream)" class="btn btn-danger">Delete</a>
                                     </td>
                                 </tr>
                             </tbody>
@@ -38,7 +38,6 @@
     </div>
 </template>
 <script>
-
     export default {
         data() {
             return {
@@ -75,10 +74,6 @@
             }
         },
     }
-
 </script>
 <style>
-    .text-right {
-        text-align: right;
-    }
 </style>