added profile stuffi

src/components/Profile.vue

@@ -4,22 +4,62 @@
         <section class="hero is-primary">
             <div class="hero-body">
                 <div class="container has-text-centered">
-                    <h2 class="title">Profile</h2>
-                    <h3 class="title">Token validity ({{tokenValidity}})</h3>
-                    <h3 class="title">Refresh token validity ({{refreshTokenValidity}})</h3>
-                    <h3 class="title">access_token ({{access_token}})</h3>
+                    <div class="clearfix">
+                        <b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
+                               alt="Left image"></b-img>
+                        <h2 class="title" v-if="profile.nickname">{{profile.nickname}}</h2>
+                        <h2 class="title" v-else-if="profile.first_name">
+                            {{profile.first_name}}&nbsp;{{profile.last_name}}</h2>
+                        <h2 class="title" v-else>{{profile.email}}</h2>
+
+                        <p>
+                            <font-awesome-icon icon="envelope"/>&nbsp;{{profile.email}}
+                            <a class="badge badge-pill badge-info">
+                            <font-awesome-icon icon="pencil-alt"/></a>
+                        </p>
+
+                        <p v-if="profile.nickname"><strong>{{$t('nickname')}}:&nbsp</strong>{{profile.nickname}}</p>
+                        <b-input-group style="max-width: 50%;" v-else size="sm">
+                            <b-form-input name="nickname"
+                                          v-model="form.nickname"
+                                          class="form-control" type="text"
+                                          :placeholder="$t('nickname') + '('+profile.nickname +')'"></b-form-input>
+                            <b-input-group-append>
+                                <b-button :disabled="errors.has('nickname')"
+                                          @click="updateProfile('nickname')"
+                                          variant="outline-success">
+                                    <font-awesome-icon icon="check"></font-awesome-icon>
+                                </b-button>
+                            </b-input-group-append>
+                        </b-input-group>
+
+                    </div>
+
+
+                    <hr/>
+
+                    <p><strong>{{$t('first_name')}}:&nbsp</strong>{{profile.first_name}}</p>
+                    <p><strong>{{$t('last_name')}}:&nbsp</strong>{{profile.last_name}}</p>
+
+
+                    <hr/>
+                    <p class="title">Token validity ({{tokenValidity}})</p>
+                    <p class="title">Refresh token validity ({{refreshTokenValidity}})</p>
+                    <p class="title">access_token ({{access_token}})</p>
                     <p>{{profile.id}}</p>
                     <p class="subtitle error-msg">{{ errorMsg }}</p>
                 </div>
             </div>
         </section>
-
     </div>
 </template>
 
 <script>
     import {EventBus} from '@/utils';
     import {getRemainingJwtValiditySeconds} from '../utils';
+    import getRepository from '@/api/RepositoryFactory';
+
+    const userRepository = getRepository('user');
 
     export default {
         data() {
@@ -28,6 +68,12 @@
                 errorMsg: '',
                 tokenValidity: -1,
                 refreshTokenValidity: -1,
+                form: {
+                    first_name: '',
+                    last_name: '',
+                    nickname: '',
+                    email: '',
+                },
             };
         },
         methods: {
@@ -35,6 +81,19 @@
                 this.$store.dispatch('login', {email: this.email, password: this.password})
                     .then(() => this.$router.push('/'));
             },
+            updateProfile(fieldName) {
+                this.$parent.$data.isLoading = true;
+                const data = {};
+                data[fieldName]= this.form[fieldName];
+                this.$log.debug(this.form);
+                userRepository.updateProfile(data)
+                    .then(() => {
+                        this.$store.dispatch('loadRecorders')
+                            .then(() => {
+                                this.$parent.$data.isLoading = false;
+                            });
+                    });
+            },
         },
         mounted() {
             this.$log.debug('Profile: mounting...');
@@ -43,7 +102,7 @@
             });
             this.$store.dispatch('loadProfile');
 
-            this.$nextTick( () => {
+            this.$nextTick(() => {
                 window.setInterval(() => {
                     this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
                     this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
@@ -62,7 +121,7 @@
             },
             access_token() {
                 return this.$store.state.access_token;
-            }
+            },
         },
     };
 </script>