wiki/client/js/components/modal-create-user.vue

<template lang="pug">
  transition(:duration="400")
    .modal(v-show='isShown', v-cloak)
      transition(name='modal-background')
        .modal-background(v-show='isShown')
      .modal-container
        transition(name='modal-content')
          .modal-content(v-show='isShown')
            header.is-blue
              span {{ $t('modal.createusertitle') }}
              p.modal-notify(v-bind:class='{ "is-active": isLoading }'): i
            section
              label.label {{ $t('modal.createuseremail') }}
              p.control.is-fullwidth
                input.input(type='text', v-bind:placeholder='$t("modal.createuseremailplaceholder")', v-model='email', ref='createUserEmailInput')
            section
              label.label {{ $t('modal.createuserprovider') }}
              p.control.is-fullwidth
                select(v-model='provider')
                  option(value='local') Local Database
                  option(value='windowslive') Microsoft Account
                  option(value='google') Google ID
                  option(value='facebook') Facebook
                  option(value='github') GitHub
                  option(value='slack') Slack
            section(v-if='provider=="local"')
              label.label {{ $t('modal.createuserpassword') }}
              p.control.is-fullwidth
                input.input(type='password', placeholder='', v-model='password')
            section(v-if='provider=="local"')
              label.label {{ $t('modal.createuserfullname') }}
              p.control.is-fullwidth
                input.input(type='text', v-bind:placeholder='$t("modal.createusernameplaceholder")', v-model='name')
            footer
              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
              a.button(v-on:click='create', v-if='provider=="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuser') }}
              a.button(v-on:click='create', v-if='provider!="local"', v-bind:disabled='isLoading', v-bind:class='{ "is-disabled": isLoading, "is-blue": !loading }') {{ $t('modal.createuserauthorize') }}
</template>

<script>
  export default {
    name: 'modal-create-user',
    data () {
      return {
        email: '',
        provider: 'local',
        password: '',
        name: '',
        isLoading: false
      }
    },
    computed: {
      isShown () {
        return this.$store.state.modalCreateUser.shown
      }
    },
    methods: {
      init () {
        let self = this
        self._.delay(() => {
          self.$refs.createUserEmailInput.focus()
        }, 100)
      },
      cancel () {
        this.$store.dispatch('modalCreateUser/close')
        this.email = ''
        this.provider = 'local'
      },
      create () {
        let self = this
        this.isLoading = true
        this.$http.post('/admin/users/create', {
          email: this.email,
          provider: this.provider,
          password: this.password,
          name: this.name
        }).then(resp => {
          return resp.json()
        }).then(resp => {
          this.isLoading = false
          if (resp.ok) {
            this.cancel()
            window.location.reload(true)
          } else {
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'square-cross',
              msg: resp.msg
            })
          }
        }).catch(err => {
          this.isLoading = false
          self.$store.dispatch('alert', {
            style: 'red',
            icon: 'square-cross',
            msg: 'Error: ' + err.body.msg
          })
        })
      },
      mounted () {
        this.$root.$on('modalCreateUser/init', this.init)
      }
    }
  }
</script>