Recv/public/src/route/admin/UserDetail.vue

<template>
  <div id="user">
    <div v-if="user !== null">
      <form class="pure-form pure-form-aligned">
        <fieldset>
          <div class="pure-control-group">
            <label for="username">{{ $t('admin.users.detail.username') }}</label>
            <input id="username" type="text" v-model="user.username" class="pure-input-2-3">
          </div>

          <div class="pure-control-group">
            <label for="name">{{ $t('admin.users.detail.name') }}</label>
            <input id="name" type="text" v-model="user.name" class="pure-input-2-3">
          </div>

          <div class="pure-control-group">
            <label for="email">{{ $t('admin.users.detail.email') }}</label>
            <input id="email" type="text" v-model="user.email" class="pure-input-2-3">
          </div>

          <div class="pure-control-group">
            <label for="password">{{ $t('admin.users.detail.password') }}</label>
            <input id="password" type="text" v-model="user.password" class="pure-input-2-3">
          </div>
          <div class="pure-form-description">
            {{ $t('admin.users.detail.passwordHint') }}
          </div>

          <div class="pure-controls">
            <span class="title">{{ $t('admin.users.detail.auth.title') }}</span>
            <label for="authviewAllCodes" class="pure-checkbox">
              <input id="authviewAllCodes" type="checkbox" v-model="user.auth.viewAllCodes">
              {{ $t('admin.users.detail.auth.viewAllCodes' )}}
            </label>
            <label for="authviewAllUploads" class="pure-checkbox">
              <input id="authviewAllUploads" type="checkbox" v-model="user.auth.viewAllUploads">
              {{ $t('admin.users.detail.auth.viewAllUploads' )}}
            </label>
            <label for="authmanageUsers" class="pure-checkbox">
              <input id="authmanageUsers" type="checkbox" v-model="user.auth.manageUsers">
              {{ $t('admin.users.detail.auth.manageUsers' )}}
            </label>
          </div>

          <div class="pure-controls">
            <label for="active" class="pure-checkbox">
              <input id="active" type="checkbox" v-model="user.active"> {{ $t('admin.users.detail.active' )}}
            </label>
          </div>

          <div class="pure-controls">
            <button class="pure-button pure-button-primary" @click="save" :disabled="saving">{{ $t('admin.save') }} <fa icon="spinner" pulse v-if="saving"></fa></button>
            <router-link to="/admin/users" class="pure-button">{{ $t('admin.cancel') }}</router-link>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import shared from '../../shared';

export default {
  data()
  {
    return {
      user: null,
      saving: false
    };
  },

  props: ['idParam'],


  watch: {
    '$route' (to, from)
    {
      var self = this;
      self.checkId();
    }
  },


  created()
  {
    var self = this;
    self.checkId();
  },

  methods: {
    checkId()
    {
      var self = this;

      if (self.idParam)
      {
        axios.get('/admin/users/' + encodeURIComponent(self.idParam), {
          headers: {
            Authorization: 'Bearer ' + shared.adminToken
          }
        })
        .then((response) =>
        {
          var user = response.data;
          var auth = user.auth;

          user.auth = {
            viewAllCodes: auth.indexOf('viewAllCodes') > -1,
            viewAllUploads: auth.indexOf('viewAllUploads') > -1,
            manageUsers: auth.indexOf('manageUsers') > -1
          }

          self.user = user;
        })
        .catch((error) => { shared.$emit('apiError', error, this.$router) });
      }
      else
      {
        self.user = {
          username: null,
          name: null,
          password: null,
          email: null,
          auth: {
            viewAllCodes: false,
            viewAllUploads: false,
            manageUsers: false
          },
          active: true
        };
      }
    },

    getCodeUrl(user)
    {
      var port = ':' + window.location.port;

      if ((window.location.protocol == 'http:' && window.location.port == 80) ||
          (window.location.protocol == 'https:' && window.location.port == 443))
        port = '';

      return window.location.protocol + '//' +
             window.location.hostname + port + '/c/' +
             encodeURIComponent(user);
    },

    save()
    {
      var self = this;

      self.saving = true;

      var auth = [];
      if (self.user.auth.viewAllCodes) auth.push('viewAllCodes');
      if (self.user.auth.viewAllUploads) auth.push('viewAllUploads');
      if (self.user.auth.manageUsers) auth.push('manageUsers');

      axios.post('/admin/users', {
        id: self.user.id,
        username: self.user.username,
        name: self.user.name,
        password: self.user.password,
        email: self.user.email,
        auth: auth,
        active: self.user.active
      }, {
        headers: {
          Authorization: 'Bearer ' + shared.adminToken
        }
      })
      .then((response) =>
      {
        this.$router.push('/admin/users');
      })
      .catch((error) => { shared.$emit('apiError', error, this.$router) })
      .then(() =>
      {
        self.saving = false;
      });
    }
  }
}
</script>

<style lang="scss">
.title
{
  display: block;
  margin-bottom: .5rem;
  color: #808080;
}
</style>