Initial commit

pages/auth/newpassword.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <video-background
+      src="/video/bg-video.mp4"
+      poster="/images/poster.png"
+      style="height: 100vh;"
+    >
+      <div class="container-fluid">
+        <div class="row ">
+          <div class="col-12 col-lg-4 bg-img d-none d-lg-block" style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;" />
+          <div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5">
+            <div class="row">
+              <div class="col-12 py-3 text-center">
+                <img src="/images/logo.svg" height="35" class="img " alt="Mindboost Logo">
+              </div>
+            </div>
+            <div class="row mt-lg-0 mt-4" style="height: 90%">
+              <div class="col-12 my-auto">
+                <div class="text-center pt-4 pt-md-2 col-12 col-md-8 col-xl-8 mx-auto">
+                  <h1 class="fw-bolder h3" style="color: #585C5E;">
+                    {{ t('New Password') }}
+                  </h1>
+                </div>
+                <div class="row pt-2">
+                  <div class="col-12 col-md-8 col-xl-8 mx-auto">
+                    <form method="POST" @submit.prevent="validateAndReset">
+                      <div class="row pt-4">
+                        <div class="col-12">
+                          <label for="password" class="text-muted ">{{ t("Password") }} </label>
+                          <input id="password" v-model="form.password" type="password" class="form-control" placeholder="***">
+                          <div v-if="errors.password" class="invalid-feedback d-block">
+                            {{ t(errors.password[0]) }}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row pt-3">
+                        <div class="col-12">
+                          <label for="confirm-password" class="text-muted ">{{ t("Confirm Password") }} </label>
+                          <input id="confirm-password" v-model="form.password_confirmation" type="password" class="form-control" placeholder="***">
+                          <div v-if="errors.password_confirmation" class="invalid-feedback d-block">
+                            {{ t(errors.password_confirmation[0]) }}
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row pt-4">
+                        <div class="col">
+                          <button type="submit" class="login-btn col-4" style="min-width:fit-content">
+                            {{ t("Reset Password") }} <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
+                              <span class="sr-only">{{ t("Loading...") }}</span>
+                            </div>
+                          </button>
+                        </div>
+                      </div>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </video-background>
+  </div>
+</template>
+<script>
+export default {
+  setup () {
+    const { t } = useI18n()
+    const localePath = useLocalePath()
+    const router = useRouter()
+
+    return {
+      t,
+      localePath,
+      router
+    }
+  },
+  data () {
+    return {
+      form: {
+        email: '', // wird aus URL-Param geholt
+        token: '', // wird aus URL-Param geholt
+        password: '',
+        password_confirmation: ''
+      },
+      errors: [],
+      loading: false
+    }
+  },
+  mounted () {
+    this.form.token = this.$route.query.token || ''
+    this.form.email = this.$route.query.email || ''
+  },
+  methods: {
+    validateAndReset () {
+      this.errors = []
+
+      if (this.form.password.length < 6) {
+        this.errors.password = ['The password must be at least 6 characters.']
+        return
+      }
+
+      if (this.form.password !== this.form.password_confirmation) {
+        this.errors.password_confirmation = ['The passwords do not match.']
+        return
+      }
+
+      this.resetPassword()
+    },
+
+    resetPassword () {
+      this.loading = true
+      this.errors = []
+      this.$axios.post('/api/password/reset', this.form).then(({ data }) => {
+        this.loading = false
+        if (data.success) {
+          this.$toast.success('Password successfully reset!')
+          this.$router.push(this.localePath('/auth/login'))
+        }
+      }).catch((error) => {
+        this.loading = false
+        this.$toast.error('Fehler beim Zurücksetzen des Passworts.')
+        if (error.response && error.response.status === 422) {
+          this.errors = error.response.data.errors
+        }
+      })
+    }
+  }
+
+}
+</script>