Move ChangePassword view into MyAccount view

packages/lesspass-pure/src/router.js

@@ -4,7 +4,6 @@ import VueRouter from "vue-router";
 import Login from "./views/Login.vue";
 import Register from "./views/Register.vue";
 import MyAccount from "./views/MyAccount.vue";
-import PasswordChange from "./views/PasswordChange.vue";
 import PasswordGenerator from "./views/PasswordGenerator.vue";
 import PasswordReset from "./views/PasswordReset.vue";
 import PasswordResetConfirm from "./views/PasswordResetConfirm.vue";
@@ -20,7 +19,6 @@ const routes = [
   { path: "/myaccount", name: "myaccount", component: MyAccount },
   { path: "/settings", name: "settings", component: SettingsPage },
   { path: "/passwords/", name: "passwords", component: Passwords },
-  { path: "/password/change", name: "changePassword", component: PasswordChange },
   { path: "/password/reset", name: "passwordReset", component: PasswordReset },
   {
     path: "/password/reset/confirm/:uid/:token",

packages/lesspass-pure/src/views/MyAccount.vue

@@ -1,20 +1,116 @@
 <template>
   <div>
-    <!-- Password Reset Form Here -->
-    <button class="btn btn-primary btn-block" type="button" v-on:click="logout">
+    <legend>{{ $t("Change password form") }}</legend>
+    <form v-on:submit.prevent="changePassword">
+      <div class="form-group row">
+        <div class="col-12">
+          <div class="inner-addon left-addon">
+            <i class="fa fa-user"></i>
+            <input
+              id="email"
+              class="form-control"
+              name="email"
+              type="email"
+              placeholder="Email"
+              v-model="email"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-12">
+          <master-password
+            v-model="current_password"
+            v-bind:label="$t('Current Master Password')"
+            v-bind:email="email"
+            v-bind:showEncryptButton="true"
+            v-bind:EncryptButtonText="$t('Encrypt my master password')"
+          ></master-password>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-12">
+          <master-password
+            v-model="new_password"
+            v-bind:label="$t('New Master Password')"
+            v-bind:email="email"
+            v-bind:showEncryptButton="true"
+            v-bind:EncryptButtonText="$t('Encrypt my master password')"
+          ></master-password>
+        </div>
+      </div>
+      <div class="form-group row">
+        <div class="col-12">
+          <button id="loginButton" class="btn btn-primary btn-block">
+            {{ $t("Change my password") }}
+          </button>
+        </div>
+      </div>
+    </form>
+    <hr />
+    <button class="btn btn-success btn-block" type="button" v-on:click="logout">
       {{ $t("Sign out") }}
     </button>
   </div>
 </template>
 <script type="text/ecmascript-6">
+import User from "../api/user";
 import message from "../services/message";
+import MasterPassword from "../components/MasterPassword.vue";
+import { mapState } from "vuex";
 
 export default {
+  components: {
+    MasterPassword
+  },
+  data() {
+    return {
+      email: "",
+      new_password: "",
+      current_password: ""
+    };
+  },
   methods: {
-     logout() {
-        this.$store.dispatch('logout');
-        this.$router.push({name: 'home'}).catch(() => {});
+    logout() {
+      this.$store.dispatch("logout");
+      this.$router.push({ name: "home" }).catch(() => {});
+    },
+    changePassword() {
+      if (!this.current_password) {
+        message.error(this.$t("PasswordRequired", "A password is required"));
+        return;
       }
+      if (!this.new_password) {
+        message.error(this.$t("PasswordRequired", "A password is required"));
+        return;
+      }
+      User.changePassword({
+        current_password: this.current_password,
+        new_password: this.new_password
+      })
+        .then(() => {
+          message.success(
+            this.$t(
+              "ChangePasswordSuccessful",
+              "Your password was changed successfully."
+            )
+          );
+          User.login({ email: this.email, password: this.new_password })
+            .then(response => {
+              this.$store.dispatch("login", response.data);
+              this.$router.push({ name: "home" });
+            })
+            .catch(err => message.displayGenericError());
+        })
+        .catch(err => {
+          message.error(
+            this.$t(
+              "ChangePasswordError",
+              "We cannot change your password with the information provided."
+            )
+          );
+        });
+    }
   }
 };
 </script>

packages/lesspass-pure/src/views/PasswordChange.vue

@@ -1,99 +0,0 @@
-<template>
-  <form v-on:submit.prevent="changePassword">
-    <div class="form-group row">
-      <div class="col-12">
-        <div class="inner-addon left-addon">
-          <i class="fa fa-user"></i>
-          <input
-            id="email"
-            class="form-control"
-            name="email"
-            type="email"
-            placeholder="Email"
-            v-model="email"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="form-group row">
-      <div class="col-12">
-        <master-password
-          v-model="current_password"
-          v-bind:label="$t('Current Master Password')"
-          v-bind:email="email"
-          v-bind:showEncryptButton="true"
-          v-bind:EncryptButtonText="$t('Encrypt my master password')"
-        ></master-password>
-      </div>
-    </div>
-    <div class="form-group row">
-      <div class="col-12">
-        <master-password
-          v-model="new_password"
-          v-bind:label="$t('New Master Password')"
-          v-bind:email="email"
-          v-bind:showEncryptButton="true"
-          v-bind:EncryptButtonText="$t('Encrypt my master password')"
-        ></master-password>
-      </div>
-    </div>
-    <div class="form-group row">
-      <div class="col-12">
-        <button id="loginButton" class="btn btn-primary">
-          {{ $t("Change my password") }}
-        </button>
-      </div>
-    </div>
-  </form>
-</template>
-<script type="text/ecmascript-6">
-import User from '../api/user';
-import message from '../services/message';
-import MasterPassword from '../components/MasterPassword.vue';
-import { mapState } from "vuex";
-
-export default {
-  components: {
-    MasterPassword
-  },
-  data() {
-    return {
-      email: '',
-      new_password: '',
-      current_password: ''
-    };
-  },
-  methods: {
-    changePassword(){
-      if (!this.current_password ) {
-        message.error(this.$t('PasswordRequired', 'A password is required'));
-        return;
-      }
-      if (!this.new_password ) {
-        message.error(this.$t('PasswordRequired', 'A password is required'));
-        return;
-      }
-      User
-        .changePassword(
-          {
-            current_password: this.current_password,
-            new_password: this.new_password
-          }
-        )
-        .then(() => {
-          message.success(this.$t('ChangePasswordSuccessful', 'Your password was changed successfully.'));
-          User
-            .login({ email: this.email, password: this.new_password })
-            .then(response => {
-              this.$store.dispatch("login", response.data);
-              this.$router.push({ name: "home" });
-            })
-            .catch(err => message.displayGenericError());
-        })
-        .catch(err => {
-          message.displayGenericError();
-        });
-    }
-  }
-}
-</script>

packages/lesspass-pure/src/views/PasswordGenerator.vue

@@ -104,16 +104,6 @@ div.awesomplete > ul {
         </span>
       </div>
     </div>
-    <div class="form-group mb-0" v-if="isAuthenticated">
-      <button
-        id="login__forgot-password-btn"
-        type="button"
-        class="btn btn-link btn-sm p-0"
-        v-on:click="$router.push({ name: 'changePassword' })"
-      >
-        <small>{{ $t("Change your password", "Change your password") }}</small>
-      </button>
-    </div>
   </form>
 </template>
 <script type="text/ecmascript-6">
@@ -138,7 +128,7 @@ export default {
   },
   computed: {
     ...mapState(["password", "passwords"]),
-    ...mapGetters(["passwordURL", "isAuthenticated"]),
+    ...mapGetters(["passwordURL"]),
   },
   beforeMount() {
     this.$store.dispatch("getPasswords").then(() => {