Implement password change in basic user settings

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Account/MyAccount.vue

@@ -1,5 +1,10 @@
 <template>
   <section class="container">
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li class="is-active"><router-link :to="{ name: MyAccountRouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link></li>
+      </ul>
+    </nav>
     <div v-if="currentActor">
       <div class="header">
         <figure v-if="currentActor.banner" class="image is-3by1">
@@ -10,6 +15,9 @@
       <div class="columns">
         <div class="identities column is-4">
           <identities v-bind:currentIdentityName="currentIdentityName"></identities>
+          <div class="buttons">
+            <b-button tag="router-link" type="is-secondary" :to="{ name: UserRouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button>
+          </div>
         </div>
         <div class="column is-8">
           <router-view></router-view>
@@ -27,6 +35,10 @@
   .identities {
     padding-right: 45px;
     margin-right: 45px;
+
+    .buttons {
+      margin-top: 1.2rem;
+    }
   }
 </style>
 
@@ -36,6 +48,8 @@ import { Component, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { IPerson } from '@/types/actor';
 import Identities from '@/components/Account/Identities.vue';
+import { UserRouteName } from '@/router/user';
+import { MyAccountRouteName } from '@/router/actor';
 
 @Component({
   components: {
@@ -52,6 +66,9 @@ export default class MyAccount extends Vue {
   currentActor!: IPerson;
   currentIdentityName: string | null = null;
 
+  UserRouteName = UserRouteName;
+  MyAccountRouteName = MyAccountRouteName;
+
   @Watch('$route.params.identityName', { immediate: true })
   async onIdentityParamChanged (val: string) {
     await this.redirectIfNoIdentitySelected(val);