From ae3bdb09eb75b3152882a8d6066da517942eeda0 Mon Sep 17 00:00:00 2001
From: Mitchell van Buuren <mitchellvb@uprate.co.za>
Date: Mon, 27 Sep 2021 14:16:43 +0200
Subject: [PATCH] added base password reset pages

---
 package-lock.json                     |  13 +++
 package.json                          |   2 +
 src/main.js                           |   4 +-
 src/pages/password-reset-complete.vue | 133 ++++++++++++++++++++++++++
 src/pages/password-reset-request.vue  |  96 +++++++++++++++++++
 5 files changed, 246 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/password-reset-complete.vue
 create mode 100644 src/pages/password-reset-request.vue

diff --git a/package-lock.json b/package-lock.json
index 93c8947..123a80a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7418,6 +7418,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11168,6 +11173,14 @@
         }
       }
     },
+    "vue-cookieconsent-component": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-cookieconsent-component/-/vue-cookieconsent-component-1.2.0.tgz",
+      "integrity": "sha512-9vbbLSIIuLjtFuhJ2QJaY0Jt3xTmotWXsz5/rQyICK9kFgpcDd9dnDwwy753tMSoSLG0+gWKDugaHGuHMdUs2Q==",
+      "requires": {
+        "vue": "^2.5.2"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
diff --git a/package.json b/package.json
index 6c9276b..60a39b5 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   "dependencies": {
     "browser-detect": "^0.2.28",
     "core-js": "^3.6.5",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
+    "vue-cookieconsent-component": "^1.2.0",
     "vuetify": "^2.4.0"
   },
   "devDependencies": {
diff --git a/src/main.js b/src/main.js
index ad6e404..e6d9c46 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import vuetify from './plugins/vuetify';
 import App from './app';
-import router from './routes.js'
+import router from '../routes'
 import './registerServiceWorker'
 import {Api} from './services/client';
 import moment from 'moment';
@@ -9,7 +9,7 @@ import Alert from './components/alert';
 import EmptyLayout from './layouts/empty';
 import CookieConsent from 'vue-cookieconsent-component';
 
-Vue.config.productionTip = false
+export const bus = new Vue();
 
 Vue.prototype.$alert = {
   showNotice: false,
diff --git a/src/pages/password-reset-complete.vue b/src/pages/password-reset-complete.vue
new file mode 100644
index 0000000..2de5468
--- /dev/null
+++ b/src/pages/password-reset-complete.vue
@@ -0,0 +1,133 @@
+<template>
+  <empty-layout>
+
+    <v-row align="center" justify="center">
+      <v-col class="text-center">
+        <div class="d-flex justify-center align-center white--text">
+          <v-form class="ma-auto" v-model="isValid">
+            <p>
+              <span class="display-1 font-weight-bold">Change Password</span>
+              <br>
+              <span class="title">Enter your new password.</span>
+            </p>
+            <br>
+            <div>
+              <v-text-field
+                  rounded
+                  background-color="white"
+                  filled
+                  :disabled="loading"
+                  v-model="password"
+                  label="Password"
+                  :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+                  :type="show ? 'text' : 'password'"
+                  :rules="passwordRules"
+                  :error-messages="errors['password']"
+                  @click:append="show = !show"
+              ></v-text-field>
+            </div>
+            <div>
+              <v-text-field
+                  rounded
+                  background-color="white"
+                  filled
+                  :disabled="loading"
+                  v-model="confirm"
+                  label="Confirmation"
+                  :append-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
+                  :type="showConfirm ? 'text' : 'password'"
+                  :rules="[ matchPassword ]"
+                  :error-messages="errors['confirm']"
+                  @click:append="showConfirm = !showConfirm"
+              ></v-text-field>
+            </div>
+            <div class="text-center">
+              <v-btn
+                  block
+                  rounded
+                  x-large
+                  :loading="loading"
+                  :disabled="loading"
+                  color="primary"
+                  @click="update()"
+              >Update
+              </v-btn>
+            </div>
+            <br>
+            <br>
+            <div>
+              <router-link to="/login" class="white--text">Back To Login Page</router-link>
+            </div>
+          </v-form>
+        </div>
+      </v-col>
+    </v-row>
+  </empty-layout>
+</template>
+
+<script>
+import {Api} from "../services/client";
+import {bus} from '../main';
+
+export default {
+  data: () => ({
+    show: false,
+    showConfirm: false,
+    password: null,
+    confirm: null,
+    loading: false,
+    alert: false,
+    isValid: true,
+    error: null,
+    errors: {},
+    passwordRules: [
+      v => !!v || 'Field is required',
+    ],
+  }),
+  methods: {
+    matchPassword(value) {
+      if (value !== this.password) {
+        return 'Confirmation must match password.';
+      } else {
+        return true;
+      }
+    },
+    update() {
+      this.loading = true;
+
+      let token = this.$route.query.token;
+      if (token === undefined || token === null || token.length <= 0) {
+        this.alert = true;
+        this.error = "Invalid reset request, please try again later";
+        return;
+      }
+
+      Api.auth
+          .resetComplete("administrator", token, this.password)
+          .then(res => {
+            if (res.status === 401) {
+              this.$router.push("/login");
+              return;
+            } else if (res.status === 400) {
+                res.json().then(async (body) => {
+                    console.log(body);
+                    this.errors = body;
+                });
+                bus.$emit('alert.error', res.headers.get("Message"));
+                return;
+            } else if (res.status !== 200) {
+              bus.$emit('alert.error', res.headers.get("Message"));
+              return;
+            }
+            this.$router.push("/login");
+          })
+          .catch(() => {
+            bus.$emit('alert.error', "Server unreachable");
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+    }
+  }
+};
+</script>
diff --git a/src/pages/password-reset-request.vue b/src/pages/password-reset-request.vue
new file mode 100644
index 0000000..ae2dfe9
--- /dev/null
+++ b/src/pages/password-reset-request.vue
@@ -0,0 +1,96 @@
+<template>
+  <empty-layout>
+
+    <v-row align="center" justify="center">
+      <v-col class="text-center">
+        <div class="d-flex justify-center align-center white--text">
+          <v-form class="ma-auto" v-model="isValid">
+            <p>
+              <span class="display-1 font-weight-bold">Reset Password</span>
+              <br>
+              <span class="title">Enter your e-mail address.</span>
+            </p>
+            <br>
+            <div>
+              <v-text-field
+                  rounded
+                  background-color="white"
+                  filled
+                  :disabled="loading"
+                  v-model="email"
+                  label="Email"
+                  type="email"
+                  :rules="[v => !!v || 'Email is required']"
+              ></v-text-field>
+            </div>
+            <div class="text-center">
+              <v-btn
+                  block
+                  rounded
+                  x-large
+                  :loading="loading"
+                  :disabled="loading"
+                  color="primary"
+                  @click="reset()"
+              >Reset
+              </v-btn>
+            </div>
+            <br>
+            <br>
+            <div>
+              <router-link to="/login" class="white--text">Back To Login Page</router-link>
+            </div>
+          </v-form>
+        </div>
+      </v-col>
+    </v-row>
+  </empty-layout>
+</template>
+
+<script>
+import {Api} from "../services/client";
+import {bus} from "../main";
+import EmptyLayout from "../layouts/empty"
+
+export default {
+  components: {
+    EmptyLayout,
+  },
+  data: () => ({
+    isValid: true,
+    show: false,
+    email: null,
+    password: null,
+    loading: false,
+  }),
+  methods: {
+    reset() {
+      if (this.email == null) {
+        bus.$emit('alert.error', "Field may not be empty");
+        return
+      }
+      this.loading = true;
+
+      Api.auth
+          .reset("administrator", this.email, "token", "email")
+          .then(res => {
+            if (res.status === 401) {
+              this.$router.push("/login");
+              return;
+            } else if (res.status !== 200) {
+              bus.$emit('alert.error', res.headers.get("Message"));
+              return;
+            }
+            bus.$emit('alert.success', 'If your account exists we have sent a reset link to your email');
+            this.$router.push("/login");
+          })
+          .catch(() => {
+            bus.$emit('alert.error', "Server unreachable");
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+    }
+  }
+};
+</script>