Show dynamic login URL

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">
    
    <form style="padding: 2rem; max-width: 440px;" @submit.prevent="showURL()">
        <div class="field">
          <label
            for="email"
            class="label">Access your login URL</label>

            <b-input
                id="email"
                v-model="email"
                placeholder="Email">
          </b-input>
        </div>
        <button type="submit" class="button is-fullwidth is-primary">
          Next
        </button>
    </form>

</div>

JavaScript

const example = {
    data() {
        return {
            email: '',
        }
    },
    computed: {
        encodedUrl() {
            return 'https://url.com/email=' + encodeURIComponent(this.email)
        }
    },
    methods: {
    	showURL () {
      	this.$buefy.dialog.alert({
          title: 'Redirecting to your login page',
          message: `Copy this URL for next time: ${this.encodedUrl}`,
          confirmText: 'Continue'
        })
			}
    }
}

const app = new Vue(example)
app.$mount('#app')