rss-unlimited/app/feed.vue

<script>
const api = require('./api')
export default {
  props: {
    id: String
  },
  data() {
    return {
      confirming: false,
      loaded: false,
      error: null,
      justConfirmed: false,
      model: {
        url: null,
        name: null,
        confirmKey: null,
        confirmed: false
      }
    }
  },
  async beforeMount() {
    try {
      this.model = await api.get(`feeds/${this.$route.params.id}`)
      this.loaded = true
    } catch (err) {
      this.error = err
    }
  },
  methods: {
    async confirm() {
      try {
        this.confirming = true
        const result = await api.get(`feeds/${this.$route.params.id}/confirm`)
        if (result.error) this.confirmError = result.error
        else if (result.success) {
          this.model.confirmed = true
          this.justConfirmed = true
        }
      } catch (err) {
        this.error = error
      } finally {
        this.confirming = false
      }
    }
  }
}
</script>
<template>
  <div>
    <v-alert :value="true" v-if="error" type="error" dismissible>{{error}}</v-alert>
    <div v-if="loaded">
      <h1>{{model.title || 'RSS Feed'}}</h1>
      <v-text-field v-model="model.url" label="URL to rss feed" />
      <v-card v-if="!model.confirmed">
        <v-card-title primary-title>
          <h2>Confirm feed ownership</h2>
        </v-card-title>
        <v-card-text>
          <p>
            Before we start archiving and serving your RSS feed, we need to verify it is yours.
            Please temporarily copy this text anywhere in your RSS feed, and click "Confirm". Once we have verified the
            RSS feed is yours, you can remove the text.
          </p>
          <p class="confirm-key">{{model.confirmKey}}</p>
        </v-card-text>
        <v-card-actions>
          <v-btn color="success" :disabled="confirming" @click="confirm">
            Confirm
          </v-btn>
        </v-card-actions>
      </v-card>
      <v-alert v-model="justConfirmed" type="success" dismissible>
        We have verified this is your feed. You may now remove the text.
      </v-alert>
    </div>
  </div>
</template>
<style scoped>
.confirm-key {
  user-select: all;
  font-family: monospace;
  font-size: 14pt;
  text-align: center;
}
</style>