Initial commit

resources/js/pages/auth/login.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="flex mt-6 mb-10">
+      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
+        <h1 class="my-6">
+          {{ $t('login') }}
+        </h1>
+        <form @submit.prevent="login" @keydown="form.onKeydown($event)">
+          <!-- Email -->
+          <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+
+          <!-- Password -->
+          <text-input class="mt-8" native-type="password"
+                      name="password" :form="form" :label="$t('password')" :required="true"
+          />
+
+          <!-- Remember Me -->
+          <div class="relative flex items-center mt-8 mb-6">
+            <v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember">
+              {{ $t('remember_me') }}
+            </v-checkbox>
+
+            <div class="w-full md:w-1/2 text-right">
+              <router-link :to="{ name: 'password.request' }"
+                          class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
+              >
+                {{ $t('forgot_password') }}
+              </router-link>
+            </div>
+          </div>
+
+          <!-- Submit Button -->
+          <v-button class="w-full" dusk="btn_login" :loading="form.busy">
+            {{ $t('login') }}
+          </v-button>
+
+          <p class="text-center text-gray-500 mt-4">
+            No Account? <router-link :to="{name:'register'}">
+              Register
+            </router-link>
+          </p>
+        </form>
+      </div>
+    </div>
+    <open-form-footer />
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+import Cookies from 'js-cookie'
+import OpenFormFooter from '../../components/pages/OpenFormFooter'
+
+export default {
+  components: {
+    OpenFormFooter
+  },
+
+  middleware: 'guest',
+
+  metaInfo () {
+    return { title: this.$t('login') }
+  },
+
+  data: () => ({
+    form: new Form({
+      email: '',
+      password: ''
+    }),
+    remember: false
+  }),
+
+  methods: {
+    async login () {
+      // Submit the form.
+      const { data } = await this.form.post('/api/login')
+
+      // Save the token.
+      this.$store.dispatch('auth/saveToken', {
+        token: data.token,
+        remember: this.remember
+      })
+
+      // Fetch the user.
+      await this.$store.dispatch('auth/fetchUser')
+
+      // Redirect home.
+      this.redirect()
+    },
+
+    redirect () {
+      const intendedUrl = Cookies.get('intended_url')
+
+      if (intendedUrl) {
+        Cookies.remove('intended_url')
+        this.$router.push({ path: intendedUrl })
+      } else {
+        this.$router.push({ name: 'home' })
+      }
+    }
+  }
+}
+</script>

resources/js/pages/auth/password/email.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div class="flex mt-6 mb-10">
+      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
+        <h1 class="my-6">
+          {{ $t('reset_password') }}
+        </h1>
+        <form @submit.prevent="send" @keydown="form.onKeydown($event)">
+          <alert-success :form="form" :message="status" class="mb-4" />
+
+          <!-- Email -->
+          <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+
+          <!-- Submit Button -->
+          <v-button class="w-full" :loading="form.busy">
+            {{ $t('send_password_reset_link') }}
+          </v-button>
+        </form>
+      </div>
+    </div>
+    <open-form-footer />
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+
+export default {
+  middleware: 'guest',
+  components: {
+    OpenFormFooter
+  },
+  metaInfo () {
+    return { title: this.$t('reset_password') }
+  },
+
+  data: () => ({
+    status: '',
+    form: new Form({
+      email: ''
+    })
+  }),
+
+  methods: {
+    async send () {
+      const { data } = await this.form.post('/api/password/email')
+
+      this.status = data.status
+
+      this.form.reset()
+    }
+  }
+}
+</script>

resources/js/pages/auth/password/reset.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="flex mt-6 mb-10">
+      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
+        <h1 class="my-6">
+          {{ $t('reset_password') }}
+        </h1>
+        <form @submit.prevent="reset" @keydown="form.onKeydown($event)">
+          <alert-success class="mb-4" :form="form" :message="status" />
+
+          <!-- Email -->
+          <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+
+          <!-- Password -->
+          <text-input class="mt-8" native-type="password"
+                      name="password" :form="form" :label="$t('password')" :required="true"
+          />
+
+          <!-- Password Confirmation-->
+          <text-input class="mt-8" native-type="password"
+                      name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
+          />
+
+          <!-- Submit Button -->
+          <v-button class="w-full" :loading="form.busy">
+            {{ $t('reset_password') }}
+          </v-button>
+        </form>
+      </div>
+    </div>
+    <open-form-footer />
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+
+export default {
+  middleware: 'guest',
+  components: {
+    OpenFormFooter
+  },
+  metaInfo () {
+    return { title: this.$t('reset_password') }
+  },
+
+  data: () => ({
+    status: '',
+    form: new Form({
+      token: '',
+      email: '',
+      password: '',
+      password_confirmation: ''
+    })
+  }),
+
+  created () {
+    this.form.email = this.$route.query.email
+    this.form.token = this.$route.params.token
+  },
+
+  methods: {
+    async reset () {
+      const { data } = await this.form.post('/api/password/reset')
+
+      this.status = data.status
+
+      this.form.reset()
+    }
+  }
+}
+</script>

resources/js/pages/auth/register.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="flex mt-6 mb-10">
+      <div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
+        <template v-if="mustVerifyEmail">
+          <h1 class="my-6">
+            {{ $t('register') }}
+          </h1>
+          <div class="text-green-500">
+            {{ $t('verify_email_address') }}
+          </div>
+        </template>
+        <template v-else>
+          <h1 class="my-6">
+            {{ $t('register') }}
+          </h1>
+          <form @submit.prevent="register" @keydown="form.onKeydown($event)">
+            <!-- Name -->
+            <text-input name="name" :form="form" :label="$t('name')" :required="true" />
+
+            <!-- Email -->
+            <text-input name="email" :form="form" :label="$t('email')" :required="true" />
+
+            <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" label="How did you hear about us?" :required="true" />
+
+            <!-- Password -->
+            <text-input native-type="password"
+                        name="password" :form="form" :label="$t('password')" :required="true"
+            />
+
+            <!-- Password Confirmation-->
+            <text-input class="mb-4" native-type="password"
+                        name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
+            />
+
+            <!-- Submit Button -->
+            <v-button class="w-full" :loading="form.busy">
+              {{ $t('register') }}
+            </v-button>
+
+            <!-- GitHub Register Button -->
+            <login-with-github />
+          </form>
+        </template>
+      </div>
+    </div>
+    <open-form-footer />
+  </div>
+</template>
+
+<script>
+import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
+import SelectInput from '../../components/forms/SelectInput'
+import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import { initCrisp } from '../../middleware/check-auth'
+
+export default {
+  components: {
+    SelectInput,
+    LoginWithGithub,
+    OpenFormFooter
+  },
+
+  middleware: 'guest',
+
+  metaInfo () {
+    return { title: this.$t('register') }
+  },
+
+  data: () => ({
+    form: new Form({
+      name: '',
+      email: '',
+      password: '',
+      password_confirmation: ''
+    }),
+    mustVerifyEmail: false
+  }),
+
+  computed: {
+    hearAboutUsOptions () {
+      const options = [
+        { name: 'Facebook', value: 'facebook' },
+        { name: 'Twitter', value: 'twitter' },
+        { name: 'Reddit', value: 'reddit' },
+        { name: 'Github', value: 'github' },
+        { name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine' },
+        { name: 'Friend or Colleague', value: 'friend_colleague' },
+        { name: 'Blog/Article', value: 'blog_article' }
+      ].map((value) => ({ value, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ value }) => value)
+      options.push({ name: 'Other', value: 'other' })
+      return options
+    }
+  },
+
+  methods: {
+    async register () {
+      // Register the user.
+      const { data } = await this.form.post('/api/register')
+
+      // Must verify email fist.
+      if (data.status) {
+        this.mustVerifyEmail = true
+      } else {
+        // Log in the user.
+        const { data: { token } } = await this.form.post('/api/login')
+
+        // Save the token.
+        this.$store.dispatch('auth/saveToken', { token })
+
+        // Update the user.
+        await this.$store.dispatch('auth/updateUser', { user: data })
+
+        // Track event
+        this.$logEvent('register', { source: this.form.hear_about_us })
+        initCrisp(data).then(() => {
+          this.$getCrisp().push(['set', 'session:event', [[['register', {}, 'blue']]]])
+        })
+
+        // Redirect home.
+        this.$router.push({ name: 'forms.create' })
+      }
+    }
+  }
+}
+</script>

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>