Transformed Login Content to use Vue

views/default/login.html

 {{include 'include/popup.html'}}
 {{include 'include/header_default.html'}}
 
-<form id="form_login">
-    <input type="text" id="room_code" placeholder="{{=T('Enter Room Code')}}" maxlength="4"><br><br>
-    <input type="text" id="user_name" placeholder="{{=T('Enter your Name')}}" maxlength="15"><br><br>
+<form id="form_login" @submit.prevent="submitLogin">
+    <input type="text" id="room_code" placeholder="{{=T('Enter Room Code')}}" maxlength="4" v-model="room_code"><br><br>
+    <input type="text" id="user_name" placeholder="{{=T('Enter your Name')}}" maxlength="15" v-model="user_name"><br><br>
     <input type="submit" value="{{=T('Play')}}">
 </form>
 
-<script type="text/javascript">
-    $("#form_login").on("submit", function(){
+<script>
+    var app = new Vue({
+  el: "#form_login",
+  data: {
+    room_code: "",
+    user_name: "",
+  },
+  methods: {
+    //Bei Klick auf den Submit Button (oder Enter) wird diese Methode ausgeführt.
+    submitLogin() {
+      //Entfernt die Anzeige der bisherigen Fehler
+      set_error();
+      //Die eingegebenen Daten werden in ein Object gepackt, um sie zu versenden
+      var payload = { room_code: this.room_code, user_name: this.user_name };
+      //Es wird eine JSON Anfrage mit den Login Daten gesendet.
+      //Falls die Anfrage erfolgreich war, wird der neue Content geladen, sonst eine Fehlermeldung angezeigt.
+      AJAX_JSON("{{=URL('player', 'create')}}", payload, function (
+        _code,
+        _data
+      ) {
+        switch (_code) {
+          case 200:
+            content_reload();
+            break;
+          case 404:
+            set_error("{{=T('Room not found or full')}}.");
+            break;
+          case 409:
+            set_error("{{=T('Please choose a different name')}}.");
+            break;
+          case 422:
+            set_error("{{=T('Please provide valid values')}}.");
+            break;
+          case 500:
+            set_error("500 - Internal Server Error");
+            break;
+          default:
+            set_error("{{=T('Error')}} " + _code);
+        }
+      });
 
-        set_error();
-
-        var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
-        AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){
-
-            switch(_code){
-                case 200:
-                    content_reload();
-                    break;
-                case 404:
-                    set_error("{{=T('Room not found or full')}}.");
-                    break;
-                case 409:
-                    set_error("{{=T('Please choose a different name')}}.");
-                    break;
-                case 422:
-                    set_error("{{=T('Please provide valid values')}}.");
-                    break;
-                case 500:
-                    set_error("500 - Internal Server Error");
-                    break;
-                default:
-                    set_error("{{=T('Error')}} "+_code);
-            }
-
-        });
-
-        return false;
-    });
+      return false;
+    },
+  },
+});
 </script>