Initial commit

resources/js/pages/auth/verification/resend.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="row">
+    <div class="col-lg-8 m-auto px-4">
+      <h1 class="my-6">
+        {{ $t('verify_email') }}
+      </h1>
+      <form @submit.prevent="send" @keydown="form.onKeydown($event)">
+        <alert-success :form="form" :message="status" />
+
+        <!-- Email -->
+        <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+
+        <!-- Submit Button -->
+        <div class="form-group row">
+          <div class="col-md-9 ml-md-auto">
+            <v-button :loading="form.busy">
+              {{ $t('send_verification_link') }}
+            </v-button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+
+export default {
+  middleware: 'guest',
+
+  metaInfo () {
+    return { title: this.$t('verify_email') }
+  },
+
+  data: () => ({
+    status: '',
+    form: new Form({
+      email: ''
+    })
+  }),
+
+  created () {
+    if (this.$route.query.email) {
+      this.form.email = this.$route.query.email
+    }
+  },
+
+  methods: {
+    async send () {
+      const { data } = await this.form.post('/api/email/resend')
+
+      this.status = data.status
+
+      this.form.reset()
+    }
+  }
+}
+</script>

resources/js/pages/auth/verification/verify.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="row">
+    <div class="col-lg-8 m-auto  px-4">
+      <h1 class="my-6">
+        {{ $t('verify_email') }}
+      </h1>
+      <template v-if="success">
+        <div class="alert alert-success" role="alert">
+          {{ success }}
+        </div>
+
+        <router-link :to="{ name: 'login' }" class="btn btn-primary">
+          {{ $t('login') }}
+        </router-link>
+      </template>
+      <template v-else>
+        <div class="alert alert-danger" role="alert">
+          {{ error || $t('failed_to_verify_email') }}
+        </div>
+
+        <router-link :to="{ name: 'verification.resend' }" class="small float-right">
+          {{ $t('resend_verification_link') }}
+        </router-link>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
+
+export default {
+  async beforeRouteEnter (to, from, next) {
+    try {
+      const { data } = await axios.post(`/api/email/verify/${to.params.id}?${qs(to.query)}`)
+
+      next(vm => {
+        vm.success = data.status
+      })
+    } catch (e) {
+      next(vm => {
+        vm.error = e.response.data.status
+      })
+    }
+  },
+
+  middleware: 'guest',
+
+  metaInfo () {
+    return { title: this.$t('verify_email') }
+  },
+
+  data: () => ({
+    error: '',
+    success: ''
+  })
+}
+</script>