User settings form

Closes #1417 (closed)

src/components/Auth/Profile/Auth.vue

+<template>
+  <div class="field">
+    <label class="label">API token</label>
+    <div class="control">
+      <button
+        v-if="!showToken"
+        type="button"
+        class="button"
+        v-on:click="showToken = true"
+      >
+        Show
+      </button>
+      <div
+        v-else
+        class="is-clickable"
+        v-on:click="copyToken"
+      >
+        <div class="input">
+          {{ displayedToken }}
+          <i class="icon-clipboard"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="field">
+    <label class="label">Update your password</label>
+    <div class="control">
+      <div class="input"></div>
+    </div>
+  </div>
+
+  <form v-on:submit.prevent="submit">
+    <div class="field">
+      <p class="control">
+        <button
+          type="submit"
+          class="button is-primary is-pulled-right"
+          :class="{ 'is-loading': loading }"
+          :title="displayName ? 'Update personal information' : ''"
+          tabindex="4"
+        >
+          Edit
+        </button>
+      </p>
+    </div>
+  </form>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapState as mapVuexState } from 'vuex'
+import { mapActions } from 'pinia'
+import { useNotificationStore } from '@/stores'
+import { truncateMixin } from '@/mixins'
+import { User } from '@/types/user'
+
+export default defineComponent({
+  mixins: [
+    truncateMixin
+  ],
+  data: () => ({
+    displayName: '',
+    errors: [],
+    showToken: false,
+    displayedToken: '',
+    loading: false
+  }),
+  computed: {
+    ...mapVuexState('auth', ['user'])
+  },
+  methods: {
+    ...mapActions(useNotificationStore, ['notify']),
+    submit () {
+      // TODO this.update
+    },
+    async copyToken () {
+      if (!this.user) return
+      this.displayedToken = this.user.auth_token
+      try {
+        await navigator.clipboard.writeText(this.user.auth_token)
+        this.notify({ type: 'success', text: 'API token copied to clipboard' })
+      } catch (err) {
+        this.notify({ type: 'error', text: 'Failed to copy API token' })
+      }
+    }
+  },
+  watch: {
+    user: {
+      handler (newValue: User) {
+        if (!newValue) return
+        this.displayedToken = this.truncateId(newValue.auth_token)
+      },
+      immediate: true
+    }
+  }
+})
+</script>