added profile stuffi

src/api/index.ts

@@ -61,3 +61,5 @@ export function fetchProfile(jwt: any) {
     Vue.$log.debug('JWT: ' + jwt);
     return axios.get(`${API_URL}/v1/user/profile`, { headers: { Authorization: `Bearer ${jwt}` } });
 }
+
+

src/api/userRepository.ts

@@ -2,6 +2,9 @@
 
 // @ts-ignore
 import Repository from './Repository';
+import Vue from 'vue/types/vue';
+import axios from 'axios';
+import {dictEmptyValToNull} from '@/utils';
 
 const resource = '/user';
 
@@ -17,4 +20,8 @@ export default {
     createUser(userData: any) {
         return Repository.post(`${resource}`, userData);
     },
+
+    updateProfile(userData: any) {
+        return Repository.put(`${resource}/profile`, dictEmptyValToNull(userData));
+    },
 };

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>

src/main.ts

@@ -29,6 +29,9 @@ import {
     faTrash,
     faPencilAlt,
     faCogs,
+    faAt,
+    faUser,
+    faEnvelope,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -41,7 +44,8 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs);
+library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
+    faUser, faEnvelope);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 

src/plugins/i18n.ts

@@ -13,7 +13,7 @@ const messages = {
         links: 'Essential Links',
         ecosystem: 'Ecosystem',
         building_number: 'Building #',
-        building_name: 'Building'
+        building_name: 'Building',
     },
     es: {
         welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',