diff --git a/frontend/package.json b/frontend/package.json index 68b4a5807..34ce37b76 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -64,6 +64,7 @@ "vue-clickaway": "^2.2.2", "vue-clipboard2": "^0.3.0", "vue-flatpickr-component": "^8.1.2", + "vue-focus": "^2.1.0", "vue-good-table": "^2.21.3", "vue-i18n": "^8.22.4", "vue-jest": "^3.0.7", diff --git a/frontend/src/apis/loginAPI.js b/frontend/src/apis/loginAPI.js index 91e92a2cc..2eeec754e 100644 --- a/frontend/src/apis/loginAPI.js +++ b/frontend/src/apis/loginAPI.js @@ -120,12 +120,12 @@ const loginAPI = { } return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload) }, - changeUsernameProfile: async (sessionId, email, usernameNew) => { + changeUsernameProfile: async (sessionId, email, username) => { const payload = { session_id: sessionId, email, update: { - 'User.usernameNew': usernameNew, + 'User.username': username, }, } return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 5a499b7f4..f47493aea 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -56,8 +56,8 @@ "send_transaction_success":"Deine Transaktion wurde erfolgreich ausgeführt", "send_transaction_error":"Leider konnte die Transaktion nicht ausgeführt werden!", "validation": { - "double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein", - "is-not": "Du kannst Dir selbst keine Gradidos überweisen" + "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein", + "is-not": "Du kannst dir selbst keine Gradidos überweisen" }, "change_username_info": "Das ändern des Usernamens bedarf mehrerer Schritte." }, diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index aa42d966e..dbb9b445c 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -56,7 +56,7 @@ "send_transaction_success":"Your transaction was successfully completed", "send_transaction_error":"Unfortunately, the transaction could not be executed!", "validation": { - "double": "The {field} field must be a decimal with two digits", + "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits", "is-not": "You cannot send Gradidos to yourself" }, "change_username_info": "Changing the username requires several steps." diff --git a/frontend/src/main.js b/frontend/src/main.js index 5584ae508..20c8ffcb8 100755 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -4,7 +4,7 @@ import App from './App.vue' import i18n from './i18n.js' import { configure, extend } from 'vee-validate' // eslint-disable-next-line camelcase -import { required, email, min, between, double, is_not } from 'vee-validate/dist/rules' +import { required, email, min, max, is_not } from 'vee-validate/dist/rules' // store import { store } from './store/store' @@ -46,14 +46,18 @@ extend('min', { message: (_, values) => i18n.t('validations.messages.min', values), }) -extend('double', { - ...double, - message: (_, values) => i18n.t('form.validation.double', values), +extend('max', { + ...max, + message: (_, values) => i18n.t('validations.messages.max', values), }) -extend('between', { - ...between, - message: (_, values) => i18n.t('validations.messages.between', values), +extend('gddSendAmount', { + validate(value, { min, max }) { + value = value.replace(',', '.') + return value.match(/^[0-9]+(\.[0-9]{1,2})?$/) && Number(value) >= min && Number(value) <= max + }, + params: ['min', 'max'], + message: (_, values) => i18n.t('form.validation.gddSendAmount', values), }) // eslint-disable-next-line camelcase diff --git a/frontend/src/plugins/globalDirectives.js b/frontend/src/plugins/globalDirectives.js index 47be32e27..56d8c9e13 100755 --- a/frontend/src/plugins/globalDirectives.js +++ b/frontend/src/plugins/globalDirectives.js @@ -1,4 +1,5 @@ import clickOutside from '@/directives/click-ouside.js' +import { focus } from 'vue-focus' /** * You can register global directives here and use them as a plugin in your main Vue instance @@ -7,6 +8,7 @@ import clickOutside from '@/directives/click-ouside.js' const GlobalDirectives = { install(Vue) { Vue.directive('click-outside', clickOutside) + Vue.directive('focus', focus) }, } diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue index 70a35a40a..564b4e430 100755 --- a/frontend/src/views/Layout/DashboardLayout_gdd.vue +++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue @@ -2,6 +2,7 @@
diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue index a1f6a5919..e07313c96 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue @@ -6,31 +6,36 @@ style="background-color: #ebebeba3 !important" > - - - - {{ $t('form.edit') }} - - + + + + {{ $t('form.change') }} + + + + -
+ + {{ $t('form.firstname') }} - - {{ form.firstName }} + + {{ $store.state.firstName }} @@ -40,8 +45,8 @@ {{ $t('form.lastname') }} - - {{ form.lastName }} + + {{ $store.state.lastName }} @@ -51,14 +56,30 @@ {{ $t('form.description') }} - - {{ form.description }} + + {{ $store.state.description }} - + -
+ + + +
+ + {{ $t('form.save') }} + +
+ + +
@@ -80,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, @@ -98,6 +131,7 @@ export default { this.$store.commit('lastName', this.form.lastName) this.$store.commit('description', this.form.description) this.editUserdata = true + alert('Deine Daten wurden gespeichert und sind geändert.') } else { alert(result.result.message) } diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue index e1ade4ae0..6bc1d8942 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue @@ -1,62 +1,105 @@ @@ -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( diff --git a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue index b195f6ef6..38738e54a 100644 --- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue +++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue @@ -1,42 +1,61 @@ @@ -47,16 +66,27 @@ export default { name: 'FormUsername', data() { return { - edit_username: true, - username: '', + editUsername: true, + username: this.$store.state.username, + form: { + username: this.$store.state.username, + }, } }, + props: { + UserProfileTestData: { type: Object }, + }, methods: { async onSubmit() { - // console.log(this.data) - const result = await loginAPI.changeUsernameProfile(this.username) + const result = await loginAPI.changeUsernameProfile( + this.$store.state.sessionId, + this.$store.state.email, + this.form.username, + ) if (result.success) { - alert('changeUsername success') + this.$store.commit('username', this.form.username) + this.editUserdata = this.editUsername = !this.editUsername + alert('Dein Username wurde geändert.') } else { alert(result.result.message) } diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js index f9c49880e..7af8631ea 100644 --- a/frontend/test/testSetup.js +++ b/frontend/test/testSetup.js @@ -19,6 +19,7 @@ import StatsCard from '@/components/Cards/StatsCard.vue' import VueMoment from 'vue-moment' import clickOutside from '@/directives/click-ouside.js' +import { focus } from 'vue-focus' global.localVue = createLocalVue() @@ -47,3 +48,4 @@ global.localVue.component(BaseHeader.name, BaseHeader) global.localVue.component(StatsCard.name, StatsCard) global.localVue.directive('click-outside', clickOutside) +global.localVue.directive('focus', focus) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 333df7d04..a3a835813 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -13342,6 +13342,13 @@ vue-flatpickr-component@^8.1.2: dependencies: flatpickr "^4.6.6" +vue-focus@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/vue-focus/-/vue-focus-2.1.0.tgz#7a0337ce9074d5ef03d15a4b5b862cf45e5e04e3" + integrity sha1-egM3zpB01e8D0VpLW4Ys9F5eBOM= + dependencies: + loose-envify "^1.2.0" + vue-functional-data-merge@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"