All components now use typescript

js/src/components/Account/Identities.vue

@@ -1,11 +1,11 @@
 <template>
   <v-layout row>
-  <v-flex xs12 sm6 offset-sm3>
-    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
-    <v-card v-if="!loading">
-      <v-toolbar dark color="primary">
-        <v-toolbar-title>Identities</v-toolbar-title>
-      </v-toolbar>
+    <v-flex xs12 sm6 offset-sm3>
+      <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+      <v-card v-if="!loading">
+        <v-toolbar dark color="primary">
+          <v-toolbar-title>Identities</v-toolbar-title>
+        </v-toolbar>
         <v-card-text>
           <v-list two-line>
             <v-list-tile
@@ -31,22 +31,22 @@
           <v-divider v-if="showForm"></v-divider>
           <v-form v-if="showForm">
             <v-text-field
-                label="Username"
-                required
-                type="text"
-                v-model="newActor.preferred_username"
-                :rules="[rules.required]"
-                :error="this.state.username.status"
-                :error-messages="this.state.username.msg"
-                :suffix="this.host()"
-                hint="You will be able to create more identities once registered"
-                persistent-hint
+              label="Username"
+              required
+              type="text"
+              v-model="newActor.preferred_username"
+              :rules="[rules.required]"
+              :error="this.state.username.status"
+              :error-messages="this.state.username.msg"
+              :suffix="this.host()"
+              hint="You will be able to create more identities once registered"
+              persistent-hint
             >
             </v-text-field>
             <v-textarea
-                name="input-7-1"
-                label="Profile description"
-                hint="Will be displayed publicly on your profile"
+              name="input-7-1"
+              label="Profile description"
+              hint="Will be displayed publicly on your profile"
             ></v-textarea>
           </v-form>
           <v-btn
@@ -57,73 +57,77 @@
             right
             fab
             @click="toggleForm()"
-            >
+          >
             <v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
           </v-btn>
         </v-card-text>
-    </v-card>
-  </v-flex>
+      </v-card>
+    </v-flex>
   </v-layout>
 </template>
 
-<script>
-export default {
-  name: 'Identities',
-  data() {
-    return {
-      actors: [],
-      newActor: {
-        preferred_username: '',
-        summary: '',
-      },
-      loading: true,
-      showForm: false,
-      rules: {
-        required: value => !!value || 'Required.',
-      },
-      state: {
-        username: {
-          status: false,
-          msg: [],
-        },
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class Identities extends Vue {
+    actors = [];
+    newActor = {
+      preferred_username: '',
+      summary: '',
+    };
+    loading = true;
+    showForm = false;
+    rules = {
+      required: value => !!value || 'Required.',
+    };
+    state = {
+      username: {
+        status: false,
+        msg: [],
       },
     };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
+
+    created() {
+      this.fetchData();
+    }
+
     fetchData() {
-      eventFetch('/user', this.$store)
-        .then(response => response.json())
-        .then((response) => {
-          this.actors = response.data.actors;
-          this.loading = false;
-        });
-    },
+      // Implements eventFetch
+      // eventFetch('/user', this.$store)
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.actors = response.data.actors;
+      //     this.loading = false;
+      //   });
+    }
+
     sendData() {
       this.loading = true;
       this.showForm = false;
-      eventFetch('/actors', this.$store, {
-        method: 'POST',
-        body: JSON.stringify({ actor: this.newActor }),
-      })
-        .then(response => response.json())
-        .then((response) => {
-          this.actors.push(response.data);
-          this.loading = false;
-        });
-    },
+
+      // Implements eventFetch
+      // eventFetch('/actors', this.$store, {
+      //   method: 'POST',
+      //   body: JSON.stringify({ actor: this.newActor }),
+      // })
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.actors.push(response.data);
+      //     this.loading = false;
+      //   });
+    }
+
     toggleForm() {
       if (this.showForm === true) {
         this.sendData();
       } else {
         this.showForm = true;
       }
-    },
+    }
+
     host() {
       return `@${window.location.host}`;
-    },
-  },
-};
+    }
+  }
 </script>