From e3c3efddf204d3d256585ec064aaba236cf2ae67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 28 Jun 2020 12:33:05 +0200
Subject: [PATCH] =?UTF-8?q?add=20ResetPassword.vue=20zum=20resetten=20der?=
 =?UTF-8?q?=20Passw=C3=B6rter.=20au=C3=9Ferdem=20wurde=20der=20link=20im?=
 =?UTF-8?q?=20Copyright=20=C3=BCberarbeitet.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      |  16 +++-
 src/components/ResetPassword.vue | 146 +++++++++++++++++++++++++++++++
 src/components/TitleBar.vue      |  11 ++-
 src/plugins/routes.js            |   1 +
 src/router/index.js              |   6 ++
 src/views/Login.vue              |   1 +
 6 files changed, 174 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ResetPassword.vue

diff --git a/src/App.vue b/src/App.vue
index 523ad2d..167b0b3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,12 @@
     <TitleBar />
     <router-view />
     <v-footer app>
-      <a href="http://wu5.de"><span class="px-4 d-none d-sm-flex"
-        >&copy; {{ new Date().getFullYear() }} Studentenclub Wu5 e.V.
-      </span></a>
+      <span class="px-4 d-none d-sm-flex"
+        >&copy; {{ new Date().getFullYear() }}
+        <v-btn x-small text class="text-none subtitle-1" href="http://wu5.de">
+          Studentenclub Wu5 e.V.
+        </v-btn>
+      </span>
       <span>
         <v-btn text x-small href="https://141.30.30.142/wu5/impressum">
           Impressum
@@ -13,7 +16,12 @@
         <v-btn text x-small href="https://141.30.30.142/wu5/datenschutz">
           Datenschutzerklärung
         </v-btn>
-        <v-btn text x-small v-if="isLoggedIn" href="https://groeger-clan.duckdns.org/redmine/projects/geruecht/issues/new">
+        <v-btn
+          text
+          x-small
+          v-if="isLoggedIn"
+          href="https://groeger-clan.duckdns.org/redmine/projects/geruecht/issues/new"
+        >
           Bugs?
         </v-btn>
       </span>
diff --git a/src/components/ResetPassword.vue b/src/components/ResetPassword.vue
new file mode 100644
index 0000000..2eb7cc1
--- /dev/null
+++ b/src/components/ResetPassword.vue
@@ -0,0 +1,146 @@
+<template>
+  <v-content>
+    <v-container class="fill-height" fluid>
+      <v-row align="center" justify="center">
+        <v-col cols="12" sm="8" md="4">
+          <v-card class="elevation-12">
+            <v-toolbar color="blue accent-4" dark flat dense>
+              <v-toolbar-title>Password vergessen</v-toolbar-title>
+              <v-spacer />
+            </v-toolbar>
+            <v-card-text>
+              <v-form lazy-validation ref="reset">
+                <v-text-field
+                  label="E-Mail oder Nutzername"
+                  v-model="input"
+                  hint="Hier bitte deinen Nutzernamen oder deine E-Mail angeben. Sollte eins der beiden Daten gefunden werden, wird an deine hinterlegte E-Mail ein Password zum Zurücksetzen gesendet."
+                  persistent-hint
+                  :prepend-icon="prependIcon"
+                  required
+                  :rules="[notEmpty, isMail ? email : true]"
+                  @keyup.enter="resetPassword()"
+                >
+                </v-text-field>
+              </v-form>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="primary"
+                @click="resetPassword()"
+                @submit.prevent="resetPassword()"
+              >
+                Zurücksetzen
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-snackbar bottom :timeout="0" :value="response.value" :color="response.error? 'error' : 'success'">
+      {{ response.message }}
+      <v-btn icon @click="response.value = false">
+        <v-icon color="white">
+          mdi-close
+        </v-icon>
+      </v-btn>
+    </v-snackbar>
+  </v-content>
+</template>
+
+<script>
+import axios from 'axios'
+import url from '@/plugins/routes'
+export default {
+  name: 'ResetPassword',
+  data() {
+    return {
+      input: '',
+      response: {
+        error: false,
+        value: false,
+        message: null
+      },
+      defaultResponse: {
+        error: false,
+        value: false,
+        message: null
+      },
+      notEmpty: data => {
+        return data ? true : 'Darf nicht leer sein.'
+      },
+      email: value => {
+        if (value.length > 0) {
+          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+          return pattern.test(value) || 'keine gültige E-Mail'
+        }
+        return true
+      }
+    }
+  },
+  methods: {
+    resetPassword() {
+      if (this.$refs.reset.validate()) {
+        console.log(this.input, this.isMail)
+        if (this.isMail) {
+          axios
+            .post(url.resetPassword, { mail: this.input })
+            .then(data => {
+              console.log(data)
+              this.setMessage(data.data.mail, false)
+            })
+            .catch(error => {
+              console.log(error)
+              this.setMessage(error, true)
+            })
+            .finally(() => {
+              this.$refs.reset.reset()
+            })
+        } else {
+          axios
+            .post(url.resetPassword, { username: this.input })
+            .then(data => {
+              console.log(data)
+              this.setMessage(data.data.mail, false)
+            })
+            .catch(error => {
+              console.log(error)
+              this.setMessage(error, true)
+            })
+            .finally(() => {
+              this.$refs.reset.reset()
+            })
+        }
+      }
+    },
+    setMessage(mail, error) {
+      if (error) {
+        this.response.error = true
+        this.response.value = true
+        this.response.message =
+          'Es ist ein Fehler aufgetreten. Wende dich an einen Administrator oder probiere es erneut.'
+      } else {
+        this.response.error = false
+        this.response.value = true
+        this.response.message = `Es wurde ein neues Password an ${mail} versendet`
+      }
+    }
+  },
+  computed: {
+    prependIcon() {
+      if (this.input) {
+        return this.input.includes('@') ? 'mdi-email' : 'mdi-account'
+      }
+      return 'mdi-account'
+    },
+    isMail() {
+      if (this.input) {
+        return this.input.includes('@')
+      }
+      return false
+    }
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
index 89f3e54..2acecd9 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/TitleBar.vue
@@ -14,7 +14,12 @@
       </v-btn>
       <v-toolbar-title>Flaschengeist</v-toolbar-title>
       <v-spacer/>
-      <v-btn icon v-if="getRouteName == 'priceListNoLogin'" @click="goHome()">
+      <v-btn icon v-if="getRouteName == 'resetPassword'" @click="goTo('login')">
+        <v-icon>
+          mdi-home
+        </v-icon>
+      </v-btn>
+      <v-btn icon v-if="getRouteName == 'priceListNoLogin'" @click="goBack()">
         <v-icon>
           {{ back }}
         </v-icon>
@@ -79,9 +84,9 @@ export default {
     goTo(name) {
       this.$router.push({name: name})
     },
-    goHome() {
+    goBack() {
       window.history.length > 1 ? this.$router.go(-1) : this.$router.push({name: 'main'})
-    }
+    },
   }
 }
 </script>
diff --git a/src/plugins/routes.js b/src/plugins/routes.js
index f36b032..0128670 100644
--- a/src/plugins/routes.js
+++ b/src/plugins/routes.js
@@ -27,6 +27,7 @@ const url = {
   userAddAmount: main + 'user/addAmount',
   saveLifeTime: main + 'saveLifeTime',
   getLifeTime: main + 'getLifeTime',
+  resetPassword: main + 'passwordReset',
   vorstand: {
     sm: {
       addUser: main + 'sm/addUser',
diff --git a/src/router/index.js b/src/router/index.js
index 678891c..108690d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,12 +25,18 @@ import UserManager from '@/components/vorstand/UserManager'
 import WorkgroupManagement from '@/components/vorstand/WorkgroupManagement'
 import JobKindManager from '@/components/vorstand/JobKindManager'
 import JobsRequest from '@/components/user/JobsRequest'
+import ResetPassword from "@/components/ResetPassword";
 
 Vue.use(VueRouter)
 
 const rootPath = ''
 
 const routes = [
+  {
+    path: rootPath + '/resetPassword',
+    name: 'resetPassword',
+    component: ResetPassword
+  },
   {
     path: rootPath + '/cookies',
     name: 'cookies'
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 5909592..f391be5 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -51,6 +51,7 @@
                 loginError
               }}</v-alert>
               <v-card-actions>
+                <v-btn x-small text class="text-capitalize caption" :to="{name: 'resetPassword'}">Password vergessen?</v-btn>
                 <v-spacer />
                 <v-btn
                   @click="doLogin({ username: username, password: password })"