Save username upon change

src/api.ts

@@ -52,6 +52,28 @@ class Model {
       throw new APIError(response.statusText, dataOrErrors);
     }
   }
+
+  protected async put(endpoint: string, token: string, data: any) {
+    const init = {
+      headers: new Headers(),
+      method: "PATCH",
+      body: JSON.stringify(data),
+    };
+    const csrfToken = Cookies.get("csrftoken");
+    if (csrfToken != undefined) {
+      init.headers.set("X-CSRFToken", csrfToken);
+    }
+    init.headers.set("Authorization", `Token ${token}`);
+    init.headers.set("Accept", "application/json");
+    init.headers.set("Content-Type", "application/json");
+    const response = await fetch(`/api/${endpoint}/`, init);
+    const dataOrErrors = await response.json();
+    if (response.status === 200) {
+      return dataOrErrors;
+    } else {
+      throw new APIError(response.statusText, dataOrErrors);
+    }
+  }
 }
 
 interface UserData {
@@ -87,6 +109,12 @@ export class User extends Model implements UserData {
     this.isAuthenticated = true;
   }
 
+  async save(): Promise<void> {
+    await super.put("users/me", this.token, {
+      username: this.username,
+    });
+  }
+
   async signup(): Promise<void> {
     await Model.create("users", { email: this.email, password: this.password });
   }

src/components/UserTable.vue

@@ -24,7 +24,7 @@
         </tr>
         <tr>
           <td>Benutzername</td>
-          <td><InlineEditor v-model="user.username" /></td>
+          <td><InlineEditor v-model="user.username" @input="user.save()" /></td>
         </tr>
         <tr>
           <td>Vertrauensperson</td>

userausfall/rest_api/serializers.py

@@ -1,3 +1,4 @@
+from djoser.serializers import UserSerializer as BaseUserSerializer
 from rest_framework import serializers
 
 from userausfall.models import AccountRequest
@@ -7,3 +8,8 @@ class AccountRequestSerializer(serializers.HyperlinkedModelSerializer):
     class Meta:
         model = AccountRequest
         fields = ('url', 'email', 'confidant_email', 'username', 'is_verified', 'is_trustable')
+
+
+class UserSerializer(BaseUserSerializer):
+    class Meta(BaseUserSerializer.Meta):
+        fields = ('email', 'username')

userausfall/settings.py

@@ -143,6 +143,9 @@ MEDIA_URL = '/media/'
 DJOSER = {
     "ACTIVATION_URL": "confirm/{uid}/{token}",
     "SEND_ACTIVATION_EMAIL": True,
+    "SERIALIZERS": {
+        "current_user": "userausfall.rest_api.serializers.UserSerializer",
+    }
 }