From da28f1f364f96eb4140c3877293799330734ba73 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 16 Jun 2021 13:40:27 +0200
Subject: [PATCH] setuo password component

---
 .../src/components/Inputs/InputPassword.vue   | 63 +++++++++++++++++++
 frontend/src/locales/de.json                  |  3 +-
 frontend/src/locales/en.json                  |  3 +-
 frontend/src/views/Pages/Login.vue            | 52 ++++-----------
 4 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/Inputs/InputPassword.vue

diff --git a/frontend/src/components/Inputs/InputPassword.vue b/frontend/src/components/Inputs/InputPassword.vue
new file mode 100644
index 000000000..638eb6eb3
--- /dev/null
+++ b/frontend/src/components/Inputs/InputPassword.vue
@@ -0,0 +1,63 @@
+<template>
+  <validation-provider tag="div" :rules="rules" :name="name" v-slot="{ errors, valid, validated }">
+    <b-form-group :label="label" :label-for="labelFor">
+      <b-input-group>
+        <b-form-input
+          v-model="currentValue"
+          :id="labelFor"
+          :name="name"
+          :placeholder="placeholder"
+          :type="showPassword ? 'text' : 'password'"
+          :state="validated ? valid : false"
+        ></b-form-input>
+        <b-input-group-append>
+          <b-button variant="outline-primary" @click="toggleShowPassword">
+            <b-icon :icon="showPassword ? 'eye' : 'eye-slash'" />
+          </b-button>
+        </b-input-group-append>
+        <b-form-invalid-feedback>
+          {{ errors[0] }}
+        </b-form-invalid-feedback>
+      </b-input-group>
+    </b-form-group>
+  </validation-provider>
+</template>
+<script>
+export default {
+  name: 'InputPassword',
+  props: {
+    rules: {
+      default: () => {
+        required: true
+      },
+    },
+    name: { default: '' },
+    label: { default: 'Password' },
+    placeholder: { default: 'Password' },
+    model: { required: true, type: String },
+  },
+  data() {
+    return {
+      currentValue: '',
+      showPassword: false,
+    }
+  },
+  computed: {
+    labelFor() {
+      return this.name + '-input-field'
+    },
+  },
+  methods: {
+    toggleShowPassword() {
+      console.log('toggleShowPassword', this.placeholder)
+      this.showPassword = !this.showPassword
+    },
+  },
+  watch: {
+    currentValue(val) {
+      console.log('currentValue', val)
+      this.$emit('input', val)
+    },
+  },
+}
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 8554996bb..a1cdf985b 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -64,7 +64,8 @@
     "change_username_info": "Einmal gespeichert, kann der Username ncht mehr geändert werden!"
   },
   "error": {
-    "error":"Fehler"
+    "error":"Fehler",
+    "no-account": "Leider konnten wir keinen Account finden mit diesen Daten!"
   },
   "transaction":{
     "show_all":"Alle <strong>{count}</strong> Transaktionen ansehen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 7b97c2240..6e39a04b7 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -64,7 +64,8 @@
     "change_username_info": "Once saved, the username cannot be changed again!"
   },
   "error": {
-    "error":"Error"
+    "error":"Error",
+    "no-account": "Unfortunately we could not find an account to the given data!"
   },
   "transaction":{
     "show_all":"View all <strong>{count}</strong> transactions.",
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 4619dddf2..d08171c1f 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -46,52 +46,25 @@
                     </b-form-group>
                   </validation-provider>
 
-                  <validation-provider
-                    :name="$t('form.password')"
-                    :rules="{ required: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-5"
-                      id="example-input-group-1"
-                      :label="$t('form.password')"
-                      label-for="example-input-1"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="input-pwd"
-                          name="input-pwd"
-                          v-model="form.password"
-                          :placeholder="$t('form.password')"
-                          :type="passwordVisible ? 'text' : 'password'"
-                          :state="getValidationState(validationContext)"
-                          aria-describedby="input-2-live-feedback"
-                        ></b-form-input>
-
-                        <b-input-group-append>
-                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                          </b-button>
-                        </b-input-group-append>
-                      </b-input-group>
-                      <b-form-invalid-feedback id="input-2-live-feedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
+                  <input-password
+                    name="password"
+                    :label="$t('form.password')"
+                    :placeholder="$t('form.password')"
+                    model="form.password"
+                  ></input-password>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
                     <span class="alert-text bv-example-row">
                       <b-row>
                         <b-col class="col-9 text-left text-dark">
                           <strong>
-                            Leider konnten wir keinen Account finden mit diesen Daten!
+                            {{ $t('error.no-account') }}
                           </strong>
                         </b-col>
                       </b-row>
                     </span>
                   </b-alert>
-                  <div class="text-center">
+                  <div class="text-center mt-4">
                     <b-button type="submit" variant="primary">{{ $t('login') }}</b-button>
                   </div>
                 </b-form>
@@ -118,9 +91,13 @@
 <script>
 import loginAPI from '../../apis/loginAPI'
 import CONFIG from '../../config'
+import InputPassword from '../../components/Inputs/InputPassword'
 
 export default {
   name: 'login',
+  components: {
+    InputPassword,
+  },
   data() {
     return {
       form: {
@@ -137,12 +114,9 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
     async onSubmit() {
       // error info  ausschalten
+      console.log('submit', this.form.password)
       this.loginfail = false
       const loader = this.$loading.show({
         container: this.$refs.submitButton,