password reset, translation german english

frontend/src/locales/de.json

@@ -7,7 +7,7 @@
   "imprint":"Impressum",
   "privacy_policy":"Datenschutzerklärung",
   "license":"Lizenz",
-  "back":"back",
+  "back":"zurück",
   "form": {
     "firstname":"Vorname",
     "lastname":"Nachname",
@@ -38,6 +38,15 @@
       "strength":"Passwortsicherheit:",
       "strong":"stark",
       "agree":"habe ich gelesen und verstanden und stimme diesen zu."
+    },
+    "password": {
+      "title": "Passwort zurücksetzen",
+      "subtitle": "Wenn sie das Passwort vergessen haben oder ändern möchten.",
+      "reset_now": "jetzt zurücksetzen"
+    },
+    "thx": {
+      "title": "Danke!",
+      "subtitle": "Wir haben dir eine eMail gesendet."
     },
       "overview":{
         "account_overview":"Kontoübersicht",

frontend/src/locales/en.json

@@ -39,6 +39,15 @@
       "strong":"strong",
       "agree":"I have read and understood and agree to them the"
     },
+    "password": {
+      "title": "reset password",
+      "subtitle": "If you have forgotten the password or want to change it.",
+      "reset_now": "reset now"
+    },
+    "thx": {
+      "title": "Thank you",
+      "subtitle": "We have sent you an eMail."
+    },
     "overview":{
       "account_overview":"Account overview",
       "current_balance":"Current account balance",

frontend/src/routes/routes.js

@@ -25,7 +25,12 @@ const routes = [
         path: '/register',
         name: 'register',
         component: () => import('../views/Pages/Register.vue')
-      },
+      },      
+      {
+        path: '/password',
+        name: 'password',
+        component: () => import('../views/Pages/Password.vue')
+      }
     ]
   },
   {

frontend/src/store/store.js

@@ -72,6 +72,9 @@ export const store = new Vuex.Store({
         dispatch('logout')
       } 
     },
+    passwordReset: async (data) => {
+      console.log("<<<<<<<<<<< PASSWORT RESET TODO >>>>>>>>>>>", data.email)
+    },
     createUser: async ({ commit, dispatch }, data) => {
       console.log('action: createUser')
       const result = await loginAPI.create(data.email,data.first_name,data.last_name,data.password)

frontend/src/views/Pages/Login.vue

@@ -61,7 +61,7 @@
           </b-card>
           <b-row class="mt-3">
             <b-col cols="6">
-              <router-link to="/dashboard" class="text-light"><small>{{ $t('site.login.forgot_pwd')}}</small></router-link>
+              <router-link to="/password" class="text-light"><small>{{ $t('site.login.forgot_pwd')}}</small></router-link>
             </b-col>
             <b-col cols="6" class="text-right">
               <router-link to="/register" class="text-light"><small>{{ $t('site.login.new_wallet')}}</small></router-link>

frontend/src/views/Pages/Password.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="header bg-gradient-success py-7 py-lg-5 pt-lg-1">
+      <b-container class="container">
+        <div class="header-body text-center mb-7">
+          <b-row class="justify-content-center">
+            <b-col xl="5" lg="6" md="8" class="px-5">
+              <h1 class="text-white">{{ $t('site.password.title')}}</h1>
+              <p class="text-lead text-white">{{ $t('site.password.subtitle')}}</p>
+            </b-col>
+          </b-row>
+        </div>
+      </b-container>
+      <div class="separator separator-bottom separator-skew zindex-100">
+        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1"
+             xmlns="http://www.w3.org/2000/svg">
+          <polygon class="fill-default" points="2560 0 2560 100 0 100"></polygon>
+        </svg>
+      </div>
+    </div>
+    <b-container class="mt--8 pb-5">
+      <b-row class="justify-content-center">
+        <b-col lg="6" md="8" >
+          <b-card no-body class="bg-secondary border-0">             
+            <b-card-body class="px-lg-5 py-lg-5">              
+              <validation-observer v-slot="{handleSubmit}" ref="formValidator">
+                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+                  <base-input alternative
+                    class="mb-3"
+                    prepend-icon="ni ni-email-83"
+                    :placeholder="$t('form.email')"
+                    name="Email"
+                    :rules="{required: true, email: true}"
+                    v-model="model.email">
+                  </base-input>                  
+                  <div class="text-center">
+                    <b-button type="submit" variant="primary" class="mt-4">{{ $t('site.password.reset_now')}}</b-button>
+                  </div>
+                </b-form>
+              </validation-observer>
+            </b-card-body>
+          </b-card>
+        </b-col>
+      </b-row>
+      <div class="text-center py-lg-4" >
+        <b-button type="button" variant="success" class="mt-3" to="/Login">{{ $t('back')}}</b-button>
+      </div>           
+    </b-container>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'password',
+    data() {
+      return {
+        model: {
+          email: ''        
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        this.$store.dispatch('passwordReset', {"email":this.model.email}) 
+        this.model.email = ""
+        this.$router.push('/thx')          
+     }
+    }
+  };
+</script>
+<style></style>

frontend/src/views/Pages/Register.vue

@@ -88,7 +88,7 @@
         </b-col>
       </b-row>
       <div class="text-center py-lg-4" >
-        <b-button type="button" variant="success" class="mt-3" to="/Login">zurück</b-button>
+        <b-button type="button" variant="success" class="mt-3" to="/Login">{{ $t('back')}}</b-button>
       </div>           
     </b-container>
   </div>

frontend/src/views/Pages/thx.vue

@@ -4,11 +4,11 @@
     <div class="header bg-gradient-info py-7 py-lg-8 pt-lg-9">
       <b-container>
         <div class="header-body text-center mb-7"> 
-          <p class="h1">Danke für die Anmeldung</p>
+          <p class="h1">{{$t('site.thx.title')}}</p>
-          <p class="h4">Bitte prüfe deine Mail und bestäige diese Anmeldung letztmalig. Dann kannst du dich in deiner Gradido Wallet einloggen. </p>
+          <p class="h4">{{$t('site.thx.subtitle')}}</p>
-          
+         <hr>
-          <b-button to="/login"> zum Login</b-button>
+          <b-button to="/login">{{$t('login')}}</b-button>
-
+             
         </div>
       </b-container>
       <div class="separator separator-bottom separator-skew zindex-100">