fix profil page bugs

This commit is contained in:
ogerly 2021-06-10 15:53:27 +02:00
parent 7ea10b0c5d
commit a21e88ac94
4 changed files with 202 additions and 115 deletions

View File

@ -2,24 +2,25 @@
<div>
<side-bar @logout="logout" :balance="balance" :pending="pending">
<template slot="links">
<sidebar-item
:link="{
name: $t('send'),
path: '/overview',
}"
></sidebar-item>
<sidebar-item
:link="{
name: $t('transactions'),
path: '/transactions',
}"
></sidebar-item>
<sidebar-item
:link="{
name: $t('site.navbar.my-profil'),
path: '/profile',
}"
></sidebar-item>
<p></p>
<sidebar-item
:link="{
name: $t('send'),
path: '/overview',
}"
></sidebar-item>
<sidebar-item
:link="{
name: $t('transactions'),
path: '/transactions',
}"
></sidebar-item>
<sidebar-item
:link="{
name: $t('site.navbar.my-profil'),
path: '/profile',
}"
></sidebar-item>
</template>
</side-bar>
<div class="main-content">

View File

@ -12,7 +12,7 @@
v-if="editUserdata"
@click="editUserdata = !editUserdata"
class="pointer"
icon="gear-fill"
icon="pencil"
>
{{ $t('form.change') }}
</b-icon>
@ -29,49 +29,57 @@
</b-container>
<b-container>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
<small>{{ $t('form.firstname') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-md-9 col-sm-10">
{{ form.firstName }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="form.firstName"></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
<small>{{ $t('form.lastname') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-md-9 col-sm-10">
{{ form.lastName }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="form.lastName"></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.description') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-md-9 col-sm-10">
{{ form.description }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
</b-col>
</b-row>
<b-form @keyup.prevent="loadSubmitButton">
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
<small>{{ $t('form.firstname') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-sm-10 col-md-9">
{{ form.firstName }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="form.firstName"></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-12 col-sm-12 text-md-left text-lg-right">
<small>{{ $t('form.lastname') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-sm-10 col-md-9">
{{ form.lastName }}
</b-col>
<b-col v-else class="col-md-9 col-sm-10">
<b-input type="text" v-model="form.lastName"></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.description') }}</small>
</b-col>
<b-col v-if="editUserdata" class="col-sm-10 col-md-9">
{{ form.description }}
</b-col>
<b-col v-else class="col-sm-10 col-md-9">
<b-textarea rows="3" max-rows="6" v-model="form.description"></b-textarea>
</b-col>
</b-row>
<b-row class="text-right" v-if="!editUserdata">
<b-col>
<div class="text-right" ref="submitButton">
<b-button variant="info" @click="onSubmit" class="mt-4">
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
<b-row class="text-right" v-if="!editUserdata">
<b-col>
<div class="text-right" ref="submitButton">
<b-button
variant="info"
@click="onSubmit"
type="submit"
class="mt-4"
:disabled="loading"
>
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</b-form>
</b-container>
</b-card>
</div>
@ -93,9 +101,21 @@ export default {
lastName: this.$store.state.lastName,
description: this.$store.state.description,
},
loading: true,
}
},
methods: {
loadSubmitButton() {
if (
this.form.firstName !== this.$store.state.firstName ||
this.form.lastName !== this.$store.state.lastName ||
this.form.description !== this.$store.state.description
) {
this.loading = false
} else {
this.loading = true
}
},
async onSubmit() {
const result = await loginAPI.updateUserInfos(
this.$store.state.sessionId,

View File

@ -1,62 +1,105 @@
<template>
<b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
<b-container>
<b-row class="mb-4 text-right">
<b-col class="text-right">
<a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
<span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
</a>
<div v-else>
<a href="#change_pwd" @click="onSubmit">
<span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
<b-form @keyup.prevent="loadSubmitButton">
<b-row class="mb-4 text-right">
<b-col class="text-right">
<a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
<span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
<b-icon class="pointer ml-3" icon="pencil" />
</a>
<a href="#change_pwd" @click="edit_pwd = !edit_pwd">
<span>
<b>{{ $t('form.cancel') }}</b>
</span>
</a>
</div>
</b-col>
</b-row>
<div v-if="!edit_pwd">
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_old') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input
type="text"
:placeholder="$t('form.password_old')"
v-model="password"
></b-input>
<b-icon
v-else
@click="edit_pwd = !edit_pwd"
class="pointer"
icon="x-circle"
variant="danger"
></b-icon>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_new') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input
type="text"
:placeholder="$t('form.password_new')"
v-model="passwordNew"
></b-input>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_new_repeat') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input
type="text"
:placeholder="$t('form.password_new_repeat')"
v-model="passwordNew2"
></b-input>
</b-col>
</b-row>
</div>
<div v-if="!edit_pwd">
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_old') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input-group>
<b-form-input
class="mb-0"
v-model="password"
name="Password"
:type="passwordVisibleOldPwd ? 'text' : 'password'"
prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password_old')"
></b-form-input>
<b-input-group-append>
<b-button variant="outline-primary" @click="togglePasswordVisibilityOldPwd">
<b-icon :icon="passwordVisibleOldPwd ? 'eye' : 'eye-slash'" />
</b-button>
</b-input-group-append>
</b-input-group>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_new') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input-group>
<b-form-input
class="mb-0"
v-model="passwordNew"
name="Password"
:type="passwordVisibleNewPwd ? 'text' : 'password'"
prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password_new')"
></b-form-input>
<b-input-group-append>
<b-button variant="outline-primary" @click="togglePasswordVisibilityNewPwd">
<b-icon :icon="passwordVisibleNewPwd ? 'eye' : 'eye-slash'" />
</b-button>
</b-input-group-append>
</b-input-group>
</b-col>
</b-row>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.password_new_repeat') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<b-input-group>
<b-form-input
class="mb-0"
v-model="passwordNewRepeat"
name="Password"
:type="passwordVisibleNewPwdRepeat ? 'text' : 'password'"
prepend-icon="ni ni-lock-circle-open"
:placeholder="$t('form.password_new_repeat')"
></b-form-input>
<b-input-group-append>
<b-button variant="outline-primary" @click="togglePasswordVisibilityNewPwdRepeat">
<b-icon :icon="passwordVisibleNewPwdRepeat ? 'eye' : 'eye-slash'" />
</b-button>
</b-input-group-append>
</b-input-group>
</b-col>
</b-row>
<b-row class="text-right" v-if="!edit_pwd">
<b-col>
<div class="text-right" ref="submitButton">
<b-button variant="info" @click="onSubmit" class="mt-4">
{{ $t('form.save') }}
</b-button>
</div>
</b-col>
</b-row>
</div>
</b-form>
</b-container>
</b-card>
</template>
@ -71,10 +114,30 @@ export default {
email: null,
password: '',
passwordNew: '',
passwordNew2: '',
passwordNewRepeat: '',
passwordVisibleOldPwd: false,
passwordVisibleNewPwd: false,
passwordVisibleNewPwdRepeat: false,
loading: true,
}
},
methods: {
togglePasswordVisibilityNewPwd() {
this.passwordVisibleNewPwd = !this.passwordVisibleNewPwd
},
togglePasswordVisibilityNewPwdRepeat() {
this.passwordVisibleNewPwdRepeat = !this.passwordVisibleNewPwdRepeat
},
togglePasswordVisibilityOldPwd() {
this.passwordVisibleOldPwd = !this.passwordVisibleOldPwd
},
loadSubmitButton() {
if (this.passwordVisibleNewPwd === this.passwordVisibleNewPwdRepeat) {
this.loading = false
} else {
this.loading = true
}
},
async onSubmit() {
// console.log(this.data)
const result = await loginAPI.changePasswordProfile(

View File

@ -7,7 +7,7 @@
v-if="editUsername"
@click="editUsername = !editUsername"
class="pointer"
icon="gear-fill"
icon="pencil"
>
{{ $t('form.change') }}
</b-icon>
@ -32,6 +32,9 @@
</b-container>
<b-container v-else>
<b-row class="mb-3">
<b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
<small>{{ $t('form.username') }}</small>
</b-col>
<b-col class="col-md-9 col-sm-10">
<validation-observer ref="formValidator">
<b-form role="form">