Initial commit

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>