<template lang="pug">
  modal(:show='show', @close='close')
    .modal-header
      h3(v-if="id > 0") Edit Client
      h3(v-else) New Client
    .modal-body.aligned-form
      .alert.alert-danger(v-if='error') {{ error }}
      .form-group
        label(for="title") Title
        input.form-control(type="text" id="title" name="title" v-model="title")
      .form-group
        label(for="description") Description
        input.form-control(type="text" id="description" name="description" v-model="description")
      .form-group
        label(for="url") URL
        input.form-control(type="text" id="url" name="url" v-model="url")
      .form-group
        label(for="scope") Scope
        input.form-control(type="text" id="scope" name="scope" v-model="scope")
      .form-group
        label(for="redirect_url") Redirect
        input.form-control(type="text" id="redirect_url" name="redirect_url" v-model="redirect_url")
      .form-check
        input.form-check-input(type="checkbox" id="verified" name="verified" v-model="verified")
        label.form-check-label(for="verified") Verified
    .modal-footer.text-right
      button.btn.btn-primary(@click='submit') Done
      button.btn.btn-danger(@click='newSecret' v-if="id > 0") New Secret
      button.btn.btn-secondary(@click='close') Cancel
</template>

<script type="text/javascript">
  import Modal from './Modal.vue'
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content

  export default {
    props: ['show', 'id'],
    data: function () {
      return {
        error: '',
        title: '',
        description: '',
        scope: '',
        url: '',
        redirect_url: '',
        verified: false
      }
    },
    components: {
      Modal
    },
    methods: {
      close: function () {
        this.$emit('close')
        this.error = ''
        this.title = ''
        this.description = ''
        this.scope = ''
        this.url = ''
        this.redirect_url = ''
        this.verified = false
      },
      submit: function () {
        let uri = this.id === -1 ? 'new' : 'update'

        this.$http.post('/admin/api/client/' + uri, {
          id: this.id,
          title: this.title,
          description: this.description,
          scope: this.scope,
          url: this.url,
          redirect_url: this.redirect_url,
          verified: this.verified,
          csrf: csrfToken
        }).then(data => {
          this.close()
          this.$root.$emit('reload_clients')
        }).catch(err => {
          console.error(err)
          if (err.body && err.body.error) this.error = err.body.error
        })
      },
      newSecret: function () {
        this.$http.post('/admin/api/client/new_secret', {
          id: this.id,
          csrf: csrfToken
        }).then(data => {
          alert('New secret generated.')
          this.$root.$emit('reload_clients')
        }).catch(err => {
          this.error = 'Failed to generate new secret.'
        })
      }
    },
    watch: {
      id: function () {
        if (this.id <= 0) return

        this.$http.get('/admin/api/client/' + this.id).then(data => {
          let dr = data.body

          this.title = dr.title
          this.description = dr.description
          this.scope = dr.scope
          this.url = dr.url
          this.redirect_url = dr.redirect_url
          this.verified = dr.verified
        }).catch(err => {
          alert('Failed to fetch client data')
          this.close()
        })
      }
    }
  }
</script>
