From 198dd6e4ad2f92acd77668016bc689ec8f5b46cd Mon Sep 17 00:00:00 2001
From: Shyim <shyim@posteo.de>
Date: Thu, 26 Apr 2018 17:09:05 +0200
Subject: [PATCH] Use vue shorthand for events, bind save on form instead
 button

---
 .../components/Dashboard/Layout/TopNavbar.vue |  2 +-
 .../ReCast/Endpoints/EditEndpoint.vue         | 51 ++++++++++---------
 public/theme/src/components/ReCast/Login.vue  | 32 +++++++-----
 .../components/ReCast/Streams/EditStream.vue  | 19 ++++---
 .../src/components/ReCast/Streams/List.vue    |  9 +---
 5 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/public/theme/src/components/Dashboard/Layout/TopNavbar.vue b/public/theme/src/components/Dashboard/Layout/TopNavbar.vue
index dcd180c..b9f9774 100644
--- a/public/theme/src/components/Dashboard/Layout/TopNavbar.vue
+++ b/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>
diff --git a/public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue b/public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue
index 6a95fdc..2a68396 100644
--- a/public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue
+++ b/public/theme/src/components/ReCast/Endpoints/EditEndpoint.vue
@@ -7,35 +7,37 @@
                     <h4 v-if="$route.params.id != 'add'">Edit "{{ endpoint.name }}"</h4>
 
                     <card>
-                        <fg-input label="Name" v-model="endpoint.name"></fg-input>
+                        <form @submit="save">
+                            <fg-input label="Name" v-model="endpoint.name"></fg-input>
 
-                        <div class="form-group">
-                            <p-checkbox v-model="endpoint.active">Active</p-checkbox>
-                        </div>
+                            <div class="form-group">
+                                <p-checkbox v-model="endpoint.active">Active</p-checkbox>
+                            </div>
 
-                        <div class="form-group">
-                            <label class="control-label">
-                                Type
-                            </label>
-                            <select class="form-control" v-model="endpoint.type">
-                                <option v-for="name in serviceNames" :value="name">{{name}}</option>
-                            </select>
-                        </div>
+                            <div class="form-group">
+                                <label class="control-label">
+                                    Type
+                                </label>
+                                <select class="form-control" v-model="endpoint.type">
+                                    <option v-for="name in serviceNames" :value="name">{{name}}</option>
+                                </select>
+                            </div>
 
-                        <div class="form-group" v-if="serverData.length">
-                            <label class="control-label">
-                                Server
-                            </label>
-                            <select class="form-control" v-model="endpoint.server">
-                                <option v-for="server in serverData" :value="server.value">{{server.name}}</option>
-                            </select>
-                        </div>
+                            <div class="form-group" v-if="serverData.length">
+                                <label class="control-label">
+                                    Server
+                                </label>
+                                <select class="form-control" v-model="endpoint.server">
+                                    <option v-for="server in serverData" :value="server.value">{{server.name}}</option>
+                                </select>
+                            </div>
 
-                        <fg-input label="Server" v-model="endpoint.server" v-if="!serverData.length"></fg-input>
+                            <fg-input label="Server" v-model="endpoint.server" v-if="!serverData.length"></fg-input>
 
-                        <fg-input label="Stream-Key" v-model="endpoint.streamKey"></fg-input>
+                            <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 => {
diff --git a/public/theme/src/components/ReCast/Login.vue b/public/theme/src/components/ReCast/Login.vue
index d9d34c2..df09bca 100644
--- a/public/theme/src/components/ReCast/Login.vue
+++ b/public/theme/src/components/ReCast/Login.vue
@@ -6,22 +6,25 @@
 
             <div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
 
-            <fg-input type="text"
-                      label="Username"
-                      placeholder="Username"
-                      v-model="login._username">
-            </fg-input>
 
-            <div class="form-group">
-                <label class="control-label">Password</label>
-                <input type="password" class="form-control" placeholder="Password" v-model="login._password">
-            </div>
+            <form @submit="onLogin">
+                <fg-input type="text"
+                          label="Username"
+                          placeholder="Username"
+                          v-model="login._username">
+                </fg-input>
 
-            <div class="form-group">
-                <p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
-            </div>
+                <div class="form-group">
+                    <label class="control-label">Password</label>
+                    <input type="password" class="form-control" placeholder="Password" v-model="login._password">
+                </div>
 
-            <button class="btn btn-primary" v-on:click="onLogin">Login</button>
+                <div class="form-group">
+                    <p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
+                </div>
+
+                <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);
diff --git a/public/theme/src/components/ReCast/Streams/EditStream.vue b/public/theme/src/components/ReCast/Streams/EditStream.vue
index 0d7c43c..036b9b9 100644
--- a/public/theme/src/components/ReCast/Streams/EditStream.vue
+++ b/public/theme/src/components/ReCast/Streams/EditStream.vue
@@ -7,12 +7,14 @@
                     <h4 v-if="$route.params.id != 'add'">Edit "{{ stream.name }}"</h4>
 
                     <card>
-                        <fg-input label="Name" v-model="stream.name"></fg-input>
-                        <div class="form-group">
-                            <p-checkbox v-model="stream.active">Active</p-checkbox>
-                        </div>
+                        <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 => {
diff --git a/public/theme/src/components/ReCast/Streams/List.vue b/public/theme/src/components/ReCast/Streams/List.vue
index 2824b78..fa8a8c4 100644
--- a/public/theme/src/components/ReCast/Streams/List.vue
+++ b/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>